diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/app/components/buy-button-subview.js | 2 | ||||
| -rw-r--r-- | ui/app/components/shapeshift-form.js | 148 | ||||
| -rw-r--r-- | ui/app/components/transaction-list-item.js | 15 |
3 files changed, 92 insertions, 73 deletions
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js index 87084f92d..759eb15bd 100644 --- a/ui/app/components/buy-button-subview.js +++ b/ui/app/components/buy-button-subview.js @@ -143,7 +143,7 @@ BuyButtonSubview.prototype.formVersionSubview = function () { return h('div.flex-column', { style: { alignItems: 'center', - margin: '50px', + margin: '20px 50px', }, }, [ h('h3.text-transform-uppercase', { diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js index 76a265d63..901a4a956 100644 --- a/ui/app/components/shapeshift-form.js +++ b/ui/app/components/shapeshift-form.js @@ -33,10 +33,10 @@ ShapeshiftForm.prototype.renderMain = function () { return h('.flex-column', { style: { - // marginTop: '10px', + position: 'relative', padding: '25px', paddingTop: '5px', - width: '100%', + width: '90%', minHeight: '215px', alignItems: 'center', overflowY: 'auto', @@ -58,7 +58,9 @@ ShapeshiftForm.prototype.renderMain = function () { }, }), - h('.input-container', [ + h('.input-container', { + position: 'relative', + }, [ h('input#fromCoin.buy-inputs.ex-coins', { type: 'text', list: 'coinList', @@ -79,27 +81,31 @@ ShapeshiftForm.prototype.renderMain = function () { style: { fontSize: '12px', color: '#F7861C', - position: 'relative', - bottom: '48px', - left: '106px', + position: 'absolute', }, }), ]), - h('.icon-control', [ - h('i.fa.fa-refresh.fa-4.orange', { - style: { - bottom: '5px', - left: '5px', - color: '#F7861C', - }, - onClick: this.updateCoin.bind(this), - }), + h('.icon-control', { + style: { + position: 'relative', + }, + }, [ + // Not visible on the screen, can't see it on master. + + // h('i.fa.fa-refresh.fa-4.orange', { + // style: { + // bottom: '5px', + // left: '5px', + // color: '#F7861C', + // }, + // onClick: this.updateCoin.bind(this), + // }), h('i.fa.fa-chevron-right.fa-4.orange', { style: { - position: 'relative', - bottom: '26px', - left: '10px', + position: 'absolute', + bottom: '35%', + left: '0%', color: '#F7861C', }, onClick: this.updateCoin.bind(this), @@ -117,69 +123,73 @@ ShapeshiftForm.prototype.renderMain = function () { }, }), ]), + h('.flex-column', { style: { + marginTop: '1%', alignItems: 'flex-start', }, }, [ - this.props.warning ? this.props.warning && h('span.error.flex-center', { - style: { - textAlign: 'center', - width: '229px', - height: '82px', - }, - }, - this.props.warning) : this.renderInfo(), + this.props.warning + ? this.props.warning + && h('span.error.flex-center', { + style: { + textAlign: 'center', + width: '229px', + height: '82px', + }, + }, this.props.warning) + : this.renderInfo(), + + this.renderRefundAddressForCoin(coin), ]), - h(this.activeToggle('.input-container'), { - style: { - padding: '10px', - paddingTop: '0px', - width: '100%', - }, - }, [ + ]) +} + +ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) { + return h(this.activeToggle('.input-container'), { + style: { + marginTop: '1%', + }, + }, [ - h('div', `${coin} Address:`), + h('div', `${coin} Address:`), - h('input#fromCoinAddress.buy-inputs', { - type: 'text', - placeholder: `Your ${coin} Refund Address`, - dataset: { - persistentFormId: 'refund-address', - }, - style: { - boxSizing: 'border-box', - width: '227px', - height: '30px', - padding: ' 5px ', - }, - }), + h('input#fromCoinAddress.buy-inputs', { + type: 'text', + placeholder: `Your ${coin} Refund Address`, + dataset: { + persistentFormId: 'refund-address', - h('i.fa.fa-pencil-square-o.edit-text', { - style: { - fontSize: '12px', - color: '#F7861C', - position: 'relative', - bottom: '10px', - right: '11px', - }, - }), - h('.flex-row', { + }, + style: { + boxSizing: 'border-box', + width: '227px', + height: '30px', + padding: ' 5px ', + }, + }), + + h('i.fa.fa-pencil-square-o.edit-text', { + style: { + fontSize: '12px', + color: '#F7861C', + position: 'absolute', + }, + }), + h('div.flex-row', { + style: { + justifyContent: 'flex-start', + }, + }, [ + h('button', { + onClick: this.shift.bind(this), style: { - justifyContent: 'flex-end', + marginTop: '1%', }, - }, [ - h('button', { - onClick: this.shift.bind(this), - style: { - marginTop: '10px', - position: 'relative', - bottom: '40px', - }, - }, - 'Submit'), - ]), + }, + 'Submit'), ]), ]) } diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js index b94c24494..9018bab06 100644 --- a/ui/app/components/transaction-list-item.js +++ b/ui/app/components/transaction-list-item.js @@ -154,12 +154,21 @@ function failIfFailed (transaction) { if (transaction.status === 'rejected') { return h('span.error', ' (Rejected)') } - if (transaction.err) { + if (transaction.err || transaction.warning) { + const { err, warning = {} } = transaction + const errFirst = !!(( err && warning ) || err) + const message = errFirst ? err.message : warning.message + + errFirst ? err.message : warning.message + + return h(Tooltip, { - title: transaction.err.message, + title: message, position: 'bottom', }, [ - h('span.error', ' (Failed)'), + h(`span.${errFirst ? 'error' : 'warning'}`, + ` (${errFirst ? 'Failed' : 'Warning'})` + ), ]) } } |