diff options
| -rw-r--r-- | ui/app/components/pending-tx.js | 192 | ||||
| -rw-r--r-- | ui/app/css/colors.css | 3 | ||||
| -rw-r--r-- | ui/app/css/index.css | 10 | ||||
| -rw-r--r-- | ui/app/send.js | 4 |
4 files changed, 180 insertions, 29 deletions
diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index f77374ef8..4b06f71b0 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -25,17 +25,6 @@ const MIN_GAS_LIMIT_BN = new BN(21000) const Identicon = require('./identicon') const ARAGON = '960b236A07cf122663c4303350609A66A7B288C0' -module.exports = PendingTx -inherits(PendingTx, Component) -function PendingTx () { - Component.call(this) - this.state = { - valid: true, - txData: null, - submitting: false, - } -} - // Next: create separate react components // roughly 5 components: // heroIcon @@ -48,7 +37,7 @@ const sectionDivider = h('div', { height:'1px', background:'#E7E7E7', }, -}), +}) const contentDivider = h('div', { style: { @@ -59,6 +48,16 @@ const contentDivider = h('div', { }, }) +module.exports = PendingTx +inherits(PendingTx, Component) +function PendingTx () { + Component.call(this) + this.state = { + valid: true, + txData: null, + submitting: false, + } +} PendingTx.prototype.render = function () { const props = this.props @@ -175,7 +174,6 @@ PendingTx.prototype.render = function () { sectionDivider, h('section.flex-row.flex-center', { - }, [ h('div', { style: { @@ -216,27 +214,179 @@ PendingTx.prototype.render = function () { contentDivider, + h('section.flex-row.flex-center', { + }, [ + h('div', { + style: { + width: '50%', + } + }, [ + h('span', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'To' + ]) + ]), + + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, 'Ethereum Address'), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, '...5924') + ]) + ]), + + contentDivider, + + h('section.flex-row.flex-center', { + }, [ + h('div', { + style: { + width: '50%', + } + }, [ + h('span', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'Gas Fee' + ]) + ]), + + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, '$0.04 USD'), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, '0.001575 ETH') + ]) + ]), + + contentDivider, + + h('section.flex-row.flex-center', { + style: { + backgroundColor: '#F6F6F6', // $wild-sand + borderRadius: '8px', + marginLeft: '10px', + marginRight: '10px', + paddingLeft: '6px', + paddingRight: '6px', + } + }, [ + h('div', { + style: { + width: '50%', + } + }, [ + h('div', { + style: { + textAlign: 'left', + fontSize: '12px', + } + }, [ + 'Total Tokens' + ]), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + } + }, [ + 'Total Gas' + ]) + + ]), + + h('div', { + style: { + width: '50%', + } + },[ + h('div', { + style: { + textAlign: 'left', + fontSize: '10px', + marginBottom: '-10px', + }, + }, '0.24 ANT (127.00 USD)'), + + h('div', { + style: { + textAlign: 'left', + fontSize: '8px', + }, + }, '0.249 ETH') + ]) + ]), + + sectionDivider, + h('form#pending-tx-form', { onSubmit: this.onSubmit.bind(this), }, [ // Reset Button - h('button', { - onClick: (event) => { - this.resetGasFields() - event.preventDefault() - }, - }, 'Reset'), + // h('button', { + // onClick: (event) => { + // this.resetGasFields() + // event.preventDefault() + // }, + // }, 'Reset'), // Accept Button h('input.confirm.btn-green', { type: 'submit', value: 'SUBMIT', - style: { marginLeft: '10px' }, + style: { + color: '#FFFFFF', + fontSize: '12px', + lineHeight: '20px', + textAlign: 'center', + }, disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting, }), // Cancel Button - h('button.cancel.btn-red', { + h('button.cancel.btn-light', { + style: { + background: '#F7F7F7', // $alabaster + border: 'none', + opacity: 1, + width: '8em', + }, onClick: props.cancelTransaction, }, 'Reject'), ]), diff --git a/ui/app/css/colors.css b/ui/app/css/colors.css index 7ac93595f..650c81120 100644 --- a/ui/app/css/colors.css +++ b/ui/app/css/colors.css @@ -1,3 +1,4 @@ $gallery: #EFEFEF; $alabaster: #F7F7F7; -$shark: #22232C;
\ No newline at end of file +$shark: #22232C; +$wild-sand: #F6F6F6;
\ No newline at end of file diff --git a/ui/app/css/index.css b/ui/app/css/index.css index f4783a446..dc8cea695 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -85,10 +85,10 @@ input:focus, textarea:focus { // box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); // } -// .btn-green, input[type="submit"].btn-green { -// background: rgba(106, 195, 96, 1); -// box-shadow: 0px 3px 6px rgba(106, 195, 96, 0.36); -// } +.btn-green, input[type="submit"].btn-green { + border-radius: 2px; + background-color: #02C9B1; +} // .btn-red { // background: rgba(254, 35, 17, 1); @@ -139,7 +139,7 @@ button.primary { text-transform: uppercase; } -button.light { +.btn-light { padding: 8px 12px; // background: #FFFFFF; // $bg-white box-shadow: 0px 3px 6px rgba(247, 134, 28, 0.36); diff --git a/ui/app/send.js b/ui/app/send.js index 873db8473..de9e64ad1 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -272,7 +272,7 @@ SendTransactionScreen.prototype.render = function () { // Buttons underneath card h('section.flex-column.flex-center', [ - h('button.light', { + h('button.btn-light', { onClick: this.onSubmit.bind(this), style: { marginTop: '8px', @@ -281,7 +281,7 @@ SendTransactionScreen.prototype.render = function () { }, }, 'Next'), - h('button.light', { + h('button.btn-light', { onClick: this.back.bind(this), style: { background: '#F7F7F7', // $alabaster |