aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--test/integration/lib/send-new-ui.js20
-rw-r--r--ui/app/css/itcss/components/send.scss1
-rw-r--r--ui/app/css/itcss/generic/index.scss114
-rw-r--r--ui/app/send-v2.js66
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(),