Update modal header design on send screen (#3196)

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()

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;
     }

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;
+  }
+}

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(),