diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index d96e95845..d1987390d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -16,6 +16,8 @@ .send-screen-card { display: flex; flex-direction: column; + align-items: center; + justify-content: flex-start; margin-left: 3.5%; margin-right: 3.5%; background: $white; @@ -32,3 +34,11 @@ width: 100%; font-size: 12px; } + +.send-eth-icon { + border-radius: 25px; + width: 45px; + height: 45px; + border: 1px solid $alto; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08); +} \ No newline at end of file diff --git a/ui/app/send.js b/ui/app/send.js index 01f3d543a..3b52c9500 100644 --- a/ui/app/send.js +++ b/ui/app/send.js @@ -67,75 +67,39 @@ SendTransactionScreen.prototype.render = function () { h('div.send-screen-card', { style: {} }, [ - h('section.flex-center.flex-row', { - style: { - zIndex: 15, // $token-icon-z-index - marginTop: '-35px', - } - }, [ - h(Identicon, { - address: ARAGON, - diameter: 76, - }), - ]), - h('h3.flex-center', { - style: { - marginTop: '-18px', - fontSize: '16px', - }, - }, [ - 'Send Tokens', - ]), + h('img.send-eth-icon', { + src: '../images/eth_logo.svg', + style: {}, + }), - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '12px', - }, - }, [ - 'Send Tokens to anyone with an Ethereum account', - ]), + h('div', {}, [ + 'Send' + ]) - h('h3.flex-center', { - style: { - textAlign: 'center', - marginTop: '2px', - fontSize: '12px', - }, - }, [ - 'Your Aragon Token Balance is:', - ]), + h('div', {}, [ + 'Send Ethereum to anyone with an Ethereum account' + ]) - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '36px', - marginTop: '8px', - }, - }, [ - '2.34', - ]), + h('div', {}, [ - h('h3.flex-center', { - style: { - textAlign: 'center', - fontSize: '12px', - marginTop: '4px', - }, - }, [ - 'ANT', - ]), + h('div', {}, [ + 'From:' + ]), - // error message - props.error && h('span.error.flex-center', props.error), + h('input', { + placeholder: '(Placeholder) - My Account 1 - 5924 - Available ETH 2.0'. + }, [ + ]) + + ]) + + h('div', {}, [ + + h('div', {}, [ + 'To:' + ]), - // 'to' field - h('section.flex-row.flex-center', { - style: { - fontSize: '12px', - }, - }, [ h(EnsInput, { name: 'address', placeholder: 'Recipient Address', @@ -144,87 +108,11 @@ SendTransactionScreen.prototype.render = function () { identities, addressBook, }), - ]), - // 'amount' and send button - h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'space-between', - } - },[ - h('span', { style: {} }, ['Amount']), - h('span', { style: {} }, ['Token <> USD']), - ]), - - h('input.large-input', { - name: 'amount', - placeholder: '0', - type: 'number', - style: { - marginRight: '6px', - fontSize: '12px', - }, - dataset: { - persistentFormId: 'tx-amount', - }, - }), - - ]), - - h('section.flex-column.flex-center', [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'space-between', - } - },[ - h('span', { style: {} }, ['Gas Fee:']), - h('span', { style: { fontSize: '8px' } }, ['What\'s this?']), - ]), - - h('input.large-input', { - name: 'Gas Fee', - placeholder: '0', - type: 'number', - style: { - fontSize: '12px', - marginRight: '6px', - }, - // dataset: { - // persistentFormId: 'tx-amount', - // }, - }), + ]) - ]), - - h('section.flex-column.flex-center', { - style: { - marginBottom: '10px', - }, - }, [ - h('div.flex-row.flex-center', { - style: { - fontSize: '12px', - width: '100%', - justifyContent: 'flex-start', - } - },[ - h('span', { style: {} }, ['Transaction Memo (optional)']), - ]), + // [WIP] - Styling Send Screen - Need to bring in data contract for signTx - h('input.large-input', { - name: 'memo', - placeholder: '', - type: 'string', - style: { - marginRight: '6px', - }, - }), - ]), ]), // Buttons underneath card @@ -254,7 +142,7 @@ SendTransactionScreen.prototype.render = function () { ) } -// WIP - hyperscript for renderSendToken - hook up later +// WIP - hyperscript for renderSendToken - hook up later - can take pieces to re-implement SendTransactionScreen.prototype.renderSendToken = function () { this.persistentFormParentId = 'send-tx-form'