1 files changed, 25 insertions, 59 deletions

diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index 897caf16e..fc1df1f51 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,52 +178,22 @@ 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 () {
-  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.`),
-
-    h('div.send-v2__copy', 'Sending to a different crytpocurrency that is not Ethereum may result in permanent loss.'),
-
-  ])
-}
-
 SendTransactionScreen.prototype.renderHeader = function () {
-  return h('div', [
-    h('div.send-v2__header', {}, [
+  const { selectedToken, clearSend, goHome } = this.props
+  const tokenText = selectedToken ? 'tokens' : 'ETH'
 
-      this.renderHeaderIcon(),
+  return h('div.page-container__header', [
 
-      h('div.send-v2__arrow-background', [
-        h('i.fa.fa-lg.fa-arrow-circle-right.send-v2__send-arrow-icon'),
-      ]),
+    h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'),
 
-      h('div.send-v2__header-tip'),
+    h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`),
 
-    ]),
+    h('div.page-container__header-close', {
+      onClick: () => {
+        clearSend()
+        goHome()
+      },
+    }),
 
   ])
 }
@@ -392,8 +361,9 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
     })
   }
 
+  const verifyTokenBalance = selectedToken && tokenBalance !== null
   let sufficientTokens
-  if (selectedToken) {
+  if (verifyTokenBalance) {
     sufficientTokens = isTokenBalanceSufficient({
       tokenBalance,
       amount,
@@ -408,7 +378,7 @@ SendTransactionScreen.prototype.validateAmount = function (value) {
 
   if (conversionRate && !sufficientBalance) {
     amountError = 'Insufficient funds.'
-  } else if (selectedToken && !sufficientTokens) {
+  } else if (verifyTokenBalance && !sufficientTokens) {
     amountError = 'Insufficient tokens.'
   } else if (amountLessThanZero) {
     amountError = 'Can not send negative amounts of ETH.'
@@ -427,14 +397,15 @@ SendTransactionScreen.prototype.renderAmountRow = function () {
     amount,
     setMaxModeTo,
     maxModeOn,
+    gasTotal,
   } = this.props
 
   return h('div.send-v2__form-row', [
 
-     h('div.send-v2__form-label', [
+    h('div.send-v2__form-label', [
       'Amount:',
       this.renderErrorMessage('amount'),
-      !errors.amount && h('div.send-v2__amount-max', {
+      !errors.amount && gasTotal && h('div.send-v2__amount-max', {
         onClick: (event) => {
           event.preventDefault()
           setMaxModeTo(true)
@@ -504,14 +475,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(),
@@ -530,20 +493,23 @@ SendTransactionScreen.prototype.renderFooter = function () {
     goHome,
     clearSend,
     gasTotal,
+    tokenBalance,
+    selectedToken,
     errors: { amount: amountError, to: toError },
   } = this.props
 
+  const missingTokenBalance = selectedToken && !tokenBalance
   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', {
-      disabled: !noErrors || !gasTotal,
+    h('button.btn-clear.page-container__footer-button', {
+      disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
     }, 'Next'),
   ])
@@ -552,7 +518,7 @@ SendTransactionScreen.prototype.renderFooter = function () {
 SendTransactionScreen.prototype.render = function () {
   return (
 
-    h('div.send-v2__container', [
+    h('div.page-container', [
 
       this.renderHeader(),