diff options
| -rw-r--r-- | test/integration/lib/send-new-ui.js | 20 | ||||
| -rw-r--r-- | ui/app/css/itcss/components/send.scss | 1 | ||||
| -rw-r--r-- | ui/app/css/itcss/generic/index.scss | 114 | ||||
| -rw-r--r-- | ui/app/send-v2.js | 66 |
4 files changed, 134 insertions, 67 deletions
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js index 99571d0e8..3456f2367 100644 --- a/test/integration/lib/send-new-ui.js +++ b/test/integration/lib/send-new-ui.js @@ -30,16 +30,10 @@ async function runSendFlowTest(assert, done) { await timeout(1000) - const sendContainer = $('.send-v2__container') - assert.ok(sendContainer[0], 'send container renders') + const sendTitle = $('.page-container__title') + assert.equal(sendTitle[0].textContent, 'Send ETH', 'Send screen title is correct') - const sendHeader = $('.send-v2__send-header-icon') - assert.ok(sendHeader[0], 'send screen has a header icon') - - const sendTitle = $('.send-v2__title') - assert.equal(sendTitle[0].textContent, 'Send Funds', 'Send screen title is correct') - - const sendCopy = $('.send-v2__copy') + const sendCopy = $('.page-container__subtitle') assert.equal(sendCopy[0].textContent, 'Only send ETH to an Ethereum address.', 'Send screen has copy') const sendFromField = $('.send-v2__form-field') @@ -120,7 +114,7 @@ async function runSendFlowTest(assert, done) { const customizeGasModal = $('.send-v2__customize-gas') assert.ok(customizeGasModal[0], 'should render the customize gas modal') - + const customizeGasPriceInput = $('.send-v2__gas-modal-card').first().find('input') customizeGasPriceInput.val(50) reactTriggerChange(customizeGasPriceInput[0]) @@ -146,7 +140,8 @@ async function runSendFlowTest(assert, done) { 'send gas field should show customized gas total converted to USD' ) - const sendButton = $('.send-v2__next-btn') + const sendButton = $('button.btn-clear.page-container__footer-button') + assert.equal(sendButton[0].textContent, 'Next', 'next button rendered') sendButton[0].click() await timeout(2000) @@ -200,7 +195,8 @@ async function runSendFlowTest(assert, done) { await timeout() - const sendButtonInEdit = $('.send-v2__next-btn') + const sendButtonInEdit = $('.btn-clear.page-container__footer-button') + assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered') sendButtonInEdit[0].click() await timeout() diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index 7a6e2823b..fd73275e0 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -533,7 +533,6 @@ @media screen and (max-width: $break-small) { padding: 13px 0; margin: 0; - height: 0; overflow-y: auto; flex: 1 1 auto; } diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 9d55324e3..75f823320 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -69,3 +69,117 @@ textarea.large-input { input.large-input { height: 36px; } + +.page-container { + width: 400px; + background-color: $white; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08); + z-index: 25; + display: flex; + flex-flow: column; + + &__header { + display: flex; + flex-flow: column; + border-bottom: 1px solid $geyser; + padding: 1.6rem 1rem; + flex: 0 0 auto; + } + + &__footer { + display: flex; + flex-flow: row; + justify-content: center; + border-top: 1px solid $geyser; + padding: 1.6rem; + flex: 0 0 auto; + } + + &__footer-button { + width: 165px; + height: 60px; + font-size: 1rem; + text-transform: uppercase; + margin-right: 1rem; + + &:last-of-type { + margin-right: 0; + } + } + + &__title { + color: $tundora; + font-family: Roboto; + font-size: 2rem; + font-weight: 500; + line-height: initial; + } + + &__subtitle { + padding-top: .5rem; + line-height: initial; + font-size: .9rem; + } + + &__tabs { + padding: 0 1.3rem; + display: flex; + } + + &__tab { + min-width: 5rem; + padding: .2rem .8rem .9rem; + color: $dusty-gray; + font-family: Roboto; + font-size: 1.1rem; + line-height: initial; + text-align: center; + cursor: pointer; + border-bottom: none; + margin-right: 1rem; + + &:hover { + color: $black; + } + + &:last-of-type { + margin-right: 0; + } + + &--selected { + color: $curious-blue; + border-bottom: 3px solid $curious-blue; + + &:hover { + color: $curious-blue; + } + } + } +} + +@media screen and (max-width: 250px) { + .page-container { + &__footer { + flex-flow: column-reverse; + } + + &__footer-button { + width: 100%; + margin-bottom: 1rem; + margin-right: 0; + + &:first-of-type { + margin-bottom: 0; + } + } + } +} + +@media screen and (max-width: 575px) { + .page-container { + height: 100%; + width: 100%; + overflow-y: auto; + background-color: $white; + } +} diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 897caf16e..d4e15dfa8 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -5,7 +5,6 @@ const h = require('react-hyperscript') const ethAbi = require('ethereumjs-abi') const ethUtil = require('ethereumjs-util') -const Identicon = require('./components/identicon') const FromDropdown = require('./components/send/from-dropdown') const ToAutoComplete = require('./components/send/to-autocomplete') const CurrencyDisplay = require('./components/send/currency-display') @@ -179,53 +178,20 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { } } -SendTransactionScreen.prototype.renderHeaderIcon = function () { - const { selectedToken } = this.props - - return h('div.send-v2__send-header-icon-container', [ - selectedToken - ? h(Identicon, { - diameter: 40, - address: selectedToken.address, - }) - : h('img.send-v2__send-header-icon', { src: '../images/eth_logo.svg' }), - ]) -} - -SendTransactionScreen.prototype.renderTitle = function () { - const { selectedToken } = this.props - - return h('div.send-v2__title', [selectedToken ? 'Send Tokens' : 'Send Funds']) -} - -SendTransactionScreen.prototype.renderCopy = function () { +SendTransactionScreen.prototype.renderHeader = function () { const { selectedToken } = this.props - const tokenText = selectedToken ? 'tokens' : 'ETH' - return h('div.send-v2__form-header-copy', [ - - h('div.send-v2__copy', `Only send ${tokenText} to an Ethereum address.`), + return h('div.page-container__header', [ - h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'), + h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'), - ]) -} - -SendTransactionScreen.prototype.renderHeader = function () { - return h('div', [ - h('div.send-v2__header', {}, [ - - this.renderHeaderIcon(), - - h('div.send-v2__arrow-background', [ - h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'), - ]), - - h('div.send-v2__header-tip'), - - ]), + h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`), + h( + 'div.page-container__subtitle', + 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.' + ), ]) } @@ -504,14 +470,6 @@ SendTransactionScreen.prototype.renderMemoRow = function () { SendTransactionScreen.prototype.renderForm = function () { return h('div.send-v2__form', {}, [ - h('div.sendV2__form-header', [ - - this.renderTitle(), - - this.renderCopy(), - - ]), - this.renderFromRow(), this.renderToRow(), @@ -535,14 +493,14 @@ SendTransactionScreen.prototype.renderFooter = function () { const noErrors = !amountError && toError === null - return h('div.send-v2__footer', [ - h('button.btn-cancel.send-v2__cancel-btn', { + return h('div.page-container__footer', [ + h('button.btn-cancel.page-container__footer-button', { onClick: () => { clearSend() goHome() }, }, 'Cancel'), - h('button.btn-clear.send-v2__next-btn', { + h('button.btn-clear.page-container__footer-button', { disabled: !noErrors || !gasTotal, onClick: event => this.onSubmit(event), }, 'Next'), @@ -552,7 +510,7 @@ SendTransactionScreen.prototype.renderFooter = function () { SendTransactionScreen.prototype.render = function () { return ( - h('div.send-v2__container', [ + h('div.page-container', [ this.renderHeader(), |