Merge branch 'master' into i3033-responsive-newui-onboarding

19 files changed, 469 insertions, 331 deletions

diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index dd5dfad22..c13622166 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -1,5 +1,5 @@
-const inherits = require('util').inherits
 const Component = require('react').Component
+const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../actions')
@@ -7,100 +7,124 @@ const FileInput = require('react-simple-file-input').default
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+class JsonImportSubview extends Component {
+  constructor (props) {
+    super(props)
 
-function mapStateToProps (state) {
-  return {
-    error: state.appState.warning,
+    this.state = {
+      file: null,
+      fileContents: '',
+    }
   }
-}
 
-inherits(JsonImportSubview, Component)
-function JsonImportSubview () {
-  Component.call(this)
-}
+  render () {
+    const { error } = this.props
+
+    return (
+      h('div.new-account-import-form__json', [
+
+        h('p', 'Used by a variety of different clients'),
+        h('a.warning', {
+          href: HELP_LINK,
+          target: '_blank',
+        }, 'File import not working? Click here!'),
+
+        h(FileInput, {
+          readAs: 'text',
+          onLoad: this.onLoad.bind(this),
+          style: {
+            margin: '20px 0px 12px 34%',
+            fontSize: '15px',
+            display: 'flex',
+            justifyContent: 'center',
+          },
+        }),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          placeholder: 'Enter password',
+          id: 'json-password-box',
+          onKeyPress: this.createKeyringOnEnter.bind(this),
+        }),
+
+        h('div.new-account-create-form__buttons', {}, [
+
+          h('button.new-account-create-form__button-cancel', {
+            onClick: () => this.props.goHome(),
+          }, [
+            'CANCEL',
+          ]),
+
+          h('button.new-account-create-form__button-create', {
+            onClick: () => this.createNewKeychain(),
+          }, [
+            'IMPORT',
+          ]),
 
-JsonImportSubview.prototype.render = function () {
-  const { error } = this.props
-
-  return (
-    h('div.new-account-import-form__json', [
-
-      h('p', 'Used by a variety of different clients'),
-      h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
-
-      h(FileInput, {
-        readAs: 'text',
-        onLoad: this.onLoad.bind(this),
-        style: {
-          margin: '20px 0px 12px 34%',
-          fontSize: '15px',
-          display: 'flex',
-          justifyContent: 'center',
-        },
-      }),
-
-      h('input.new-account-import-form__input-password', {
-        type: 'password',
-        placeholder: 'Enter password',
-        id: 'json-password-box',
-        onKeyPress: this.createKeyringOnEnter.bind(this),
-      }),
-
-      h('div.new-account-create-form__buttons', {}, [
-
-        h('button.new-account-create-form__button-cancel', {
-          onClick: () => this.props.goHome(),
-        }, [
-          'CANCEL',
         ]),
 
-        h('button.new-account-create-form__button-create', {
-          onClick: () => this.createNewKeychain.bind(this),
-        }, [
-          'IMPORT',
-        ]),
+        error ? h('span.error', error) : null,
+      ])
+    )
+  }
 
-      ]),
+  onLoad (event, file) {
+    this.setState({file: file, fileContents: event.target.result})
+  }
 
-      error ? h('span.error', error) : null,
-    ])
-  )
-}
+  createKeyringOnEnter (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault()
+      this.createNewKeychain()
+    }
+  }
 
-JsonImportSubview.prototype.onLoad = function (event, file) {
-  this.setState({file: file, fileContents: event.target.result})
-}
+  createNewKeychain () {
+    const state = this.state
 
-JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    this.createNewKeychain()
-  }
-}
+    if (!state) {
+      const message = 'You must select a valid file to import.'
+      return this.props.displayWarning(message)
+    }
 
-JsonImportSubview.prototype.createNewKeychain = function () {
-  const state = this.state
+    const { fileContents } = state
 
-  if (!state) {
-    const message = 'You must select a valid file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
-  }
+    if (!fileContents) {
+      const message = 'You must select a file to import.'
+      return this.props.displayWarning(message)
+    }
+
+    const passwordInput = document.getElementById('json-password-box')
+    const password = passwordInput.value
 
-  const { fileContents } = state
+    if (!password) {
+      const message = 'You must enter a password for the selected file.'
+      return this.props.displayWarning(message)
+    }
 
-  if (!fileContents) {
-    const message = 'You must select a file to import.'
-    return this.props.dispatch(actions.displayWarning(message))
+    this.props.importNewJsonAccount([ fileContents, password ])
   }
+}
 
-  const passwordInput = document.getElementById('json-password-box')
-  const password = passwordInput.value
+JsonImportSubview.propTypes = {
+  error: PropTypes.string,
+  goHome: PropTypes.func,
+  displayWarning: PropTypes.func,
+  importNewJsonAccount: PropTypes.func,
+}
 
-  if (!password) {
-    const message = 'You must enter a password for the selected file.'
-    return this.props.dispatch(actions.displayWarning(message))
+const mapStateToProps = state => {
+  return {
+    error: state.appState.warning,
   }
+}
 
-  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+const mapDispatchToProps = dispatch => {
+  return {
+    goHome: () => dispatch(actions.goHome()),
+    displayWarning: warning => dispatch(actions.displayWarning(warning)),
+    importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+  }
 }
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
diff --git a/ui/app/actions.js b/ui/app/actions.js
index e1d000f72..092af080b 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -286,20 +286,43 @@ function goHome () {
 // async actions
 
 function tryUnlockMetamask (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     dispatch(actions.unlockInProgress())
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, (err) => {
-      dispatch(actions.hideLoadingIndication())
-      if (err) {
-        dispatch(actions.unlockFailed(err.message))
-      } else {
+
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, error => {
+        if (error) {
+          return reject(error)
+        }
+
+        resolve()
+      })
+    })
+      .then(() => {
         dispatch(actions.unlockSucceeded())
+        return forceUpdateMetamaskState(dispatch)
+      })
+      .then(() => {
+        return new Promise((resolve, reject) => {
+          background.verifySeedPhrase(err => {
+            if (err) {
+              dispatch(actions.displayWarning(err.message))
+            }
+
+            resolve()
+          })
+        })
+      })
+      .then(() => {
         dispatch(actions.transitionForward())
-        forceUpdateMetamaskState(dispatch)
-      }
-    })
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.unlockFailed(err.message))
+        dispatch(actions.hideLoadingIndication())
+      })
   }
 }
 
@@ -341,46 +364,53 @@ function createNewVaultAndRestore (password, seed) {
     log.debug(`background.createNewVaultAndRestore`)
 
     return new Promise((resolve, reject) => {
-      background.createNewVaultAndRestore(password, seed, (err) => {
-
-        dispatch(actions.hideLoadingIndication())
-
+      background.createNewVaultAndRestore(password, seed, err => {
         if (err) {
-          dispatch(actions.displayWarning(err.message))
           return reject(err)
         }
 
-        dispatch(actions.showAccountsPage())
         resolve()
       })
     })
+      .then(() => dispatch(actions.unMarkPasswordForgotten()))
+      .then(() => {
+        dispatch(actions.showAccountsPage())
+        dispatch(actions.hideLoadingIndication())
+      })
+      .catch(err => {
+        dispatch(actions.displayWarning(err.message))
+        dispatch(actions.hideLoadingIndication())
+      })
   }
 }
 
 function createNewVaultAndKeychain (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.createNewVaultAndKeychain`)
 
     return new Promise((resolve, reject) => {
-      background.createNewVaultAndKeychain(password, (err) => {
+      background.createNewVaultAndKeychain(password, err => {
         if (err) {
           dispatch(actions.displayWarning(err.message))
           return reject(err)
         }
+
         log.debug(`background.placeSeedWords`)
+
         background.placeSeedWords((err) => {
           if (err) {
             dispatch(actions.displayWarning(err.message))
             return reject(err)
           }
-          dispatch(actions.hideLoadingIndication())
-          forceUpdateMetamaskState(dispatch)
+
           resolve()
         })
       })
     })
-
+      .then(() => forceUpdateMetamaskState(dispatch))
+      .then(() => dispatch(actions.hideLoadingIndication()))
+      .catch(() => dispatch(actions.hideLoadingIndication()))
   }
 }
 
@@ -391,18 +421,27 @@ function revealSeedConfirmation () {
 }
 
 function requestRevealSeed (password) {
-  return (dispatch) => {
+  return dispatch => {
     dispatch(actions.showLoadingIndication())
     log.debug(`background.submitPassword`)
-    background.submitPassword(password, (err) => {
-      if (err) {
-        return dispatch(actions.displayWarning(err.message))
-      }
-      log.debug(`background.placeSeedWords`)
-      background.placeSeedWords((err, result) => {
-        if (err) return dispatch(actions.displayWarning(err.message))
-        dispatch(actions.hideLoadingIndication())
-        dispatch(actions.showNewVaultSeed(result))
+    return new Promise((resolve, reject) => {
+      background.submitPassword(password, err => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+
+        log.debug(`background.placeSeedWords`)
+        background.placeSeedWords((err, result) => {
+          if (err) {
+            dispatch(actions.displayWarning(err.message))
+            return reject(err)
+          }
+
+          dispatch(actions.showNewVaultSeed(result))
+          dispatch(actions.hideLoadingIndication())
+          resolve()
+        })
       })
     })
   }
@@ -751,7 +790,7 @@ function updateTransaction (txData) {
 function updateAndApproveTx (txData) {
   log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData))
   return (dispatch) => {
-    log.debug(`actions calling background.updateAndApproveTx`)
+    log.debug(`actions calling background.updateAndApproveTx.`)
     background.updateAndApproveTransaction(txData, (err) => {
       dispatch(actions.hideLoadingIndication())
       dispatch(actions.updateTransactionParams(txData.id, txData.txParams))
@@ -853,11 +892,14 @@ function markPasswordForgotten () {
 }
 
 function unMarkPasswordForgotten () {
-  return (dispatch) => {
-    return background.unMarkPasswordForgotten(() => {
-      dispatch(actions.forgotPassword(false))
-      forceUpdateMetamaskState(dispatch)
+  return dispatch => {
+    return new Promise(resolve => {
+      background.unMarkPasswordForgotten(() => {
+        dispatch(actions.forgotPassword(false))
+        resolve()
+      })
     })
+      .then(() => forceUpdateMetamaskState(dispatch))
   }
 }
 
@@ -1712,11 +1754,16 @@ function callBackgroundThenUpdate (method, ...args) {
 
 function forceUpdateMetamaskState (dispatch) {
   log.debug(`background.getState`)
-  background.getState((err, newState) => {
-    if (err) {
-      return dispatch(actions.displayWarning(err.message))
-    }
-    dispatch(actions.updateMetamaskState(newState))
+  return new Promise((resolve, reject) => {
+    background.getState((err, newState) => {
+      if (err) {
+        dispatch(actions.displayWarning(err.message))
+        return reject(err)
+      }
+
+      dispatch(actions.updateMetamaskState(newState))
+      resolve()
+    })
   })
 }
 
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index 51c577987..b8878b772 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -71,13 +71,17 @@ AddTokenScreen.prototype.componentWillMount = function () {
 }
 
 AddTokenScreen.prototype.toggleToken = function (address, token) {
-  const { selectedTokens, errors } = this.state
-  const { [address]: selectedToken } = selectedTokens
+  const { selectedTokens = {}, errors } = this.state
+  const selectedTokensCopy = { ...selectedTokens }
+
+  if (address in selectedTokensCopy) {
+    delete selectedTokensCopy[address]
+  } else {
+    selectedTokensCopy[address] = token
+  }
+
   this.setState({
-    selectedTokens: {
-      ...selectedTokens,
-      [address]: selectedToken ? null : token,
-    },
+    selectedTokens: selectedTokensCopy,
     errors: {
       ...errors,
       tokenSelector: null,
diff --git a/ui/app/components/dropdowns/network-dropdown.js b/ui/app/components/dropdowns/network-dropdown.js
index 9be5cc5d1..ff10c0758 100644
--- a/ui/app/components/dropdowns/network-dropdown.js
+++ b/ui/app/components/dropdowns/network-dropdown.js
@@ -114,7 +114,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'mainnet' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#038789', // $blue-lagoon
+          backgroundColor: '#29B6AF', // $java
           isSelected: providerType === 'mainnet',
         }),
         h('span.network-name-item', {
@@ -136,7 +136,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'ropsten' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#e91550', // $crimson
+          backgroundColor: '#ff4a8d', // $wild-strawberry
           isSelected: providerType === 'ropsten',
         }),
         h('span.network-name-item', {
@@ -158,7 +158,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'kovan' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#690496', // $purple
+          backgroundColor: '#7057ff', // $cornflower-blue
           isSelected: providerType === 'kovan',
         }),
         h('span.network-name-item', {
@@ -180,7 +180,7 @@ NetworkDropdown.prototype.render = function () {
       [
         providerType === 'rinkeby' ? h('i.fa.fa-check') : h('.network-check__transparent', '✓'),
         h(NetworkDropdownIcon, {
-          backgroundColor: '#ebb33f', // $tulip-tree
+          backgroundColor: '#f6c343', // $saffron
           isSelected: providerType === 'rinkeby',
         }),
         h('span.network-name-item', {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 7547dbcf5..ed73bc632 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -16,7 +16,7 @@ const SHAPESHIFT_ROW_TITLE = 'Deposit with ShapeShift'
 const SHAPESHIFT_ROW_TEXT = `If you own other cryptocurrencies, you can trade and deposit Ether
 directly into your MetaMask wallet. No Account Needed.`
 const FAUCET_ROW_TITLE = 'Test Faucet'
-const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+const faucetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
 
 function mapStateToProps (state) {
   return {
@@ -83,7 +83,7 @@ DepositEtherModal.prototype.renderRow = function ({
 
     ]),
 
-    h('div.deposit-ether-modal__buy-row__logo', [logo]),
+    h('div.deposit-ether-modal__buy-row__logo-container', [logo]),
 
       h('div.deposit-ether-modal__buy-row__description', [
 
@@ -109,17 +109,17 @@ DepositEtherModal.prototype.render = function () {
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
-  return h('div.deposit-ether-modal', {}, [
+  return h('div.page-container.page-container--full-width', {}, [
 
-    h('div.deposit-ether-modal__header', [
+    h('div.page-container__header', [
 
-      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+      h('div.page-container__title', 'Deposit Ether'),
 
-      h('div.deposit-ether-modal__header__description', [
+      h('div.page-container__subtitle', [
         'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
       ]),
 
-      h('div.deposit-ether-modal__header__close', {
+      h('div.page-container__header-close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
           this.props.hideWarning()
@@ -129,54 +129,67 @@ DepositEtherModal.prototype.render = function () {
 
     ]),
 
-    h('div.deposit-ether-modal__buy-rows', [
-
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
-        title: DIRECT_DEPOSIT_ROW_TITLE,
-        text: DIRECT_DEPOSIT_ROW_TEXT,
-        buttonLabel: 'View Account',
-        onButtonClick: () => this.goToAccountDetailsModal(),
-        hide: buyingWithShapeshift,
-      }),
+    h('.page-container__content', {}, [
+
+      h('div.deposit-ether-modal__buy-rows', [
+
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/eth_logo.svg\')',
+            },
+          }),
+          title: DIRECT_DEPOSIT_ROW_TITLE,
+          text: DIRECT_DEPOSIT_ROW_TEXT,
+          buttonLabel: 'View Account Details',
+          onButtonClick: () => this.goToAccountDetailsModal(),
+          hide: buyingWithShapeshift,
+        }),
 
-      this.renderRow({
-        logo: h('i.fa.fa-tint.fa-2x'),
-        title: FAUCET_ROW_TITLE,
-        text: facuetRowText(networkName),
-        buttonLabel: 'Get Ether',
-        onButtonClick: () => toFaucet(network),
-        hide: !isTestNetwork || buyingWithShapeshift,
-      }),
+        this.renderRow({
+          logo: h('i.fa.fa-tint.fa-3x.deposit-ether-modal__logo'),
+          title: FAUCET_ROW_TITLE,
+          text: faucetRowText(networkName),
+          buttonLabel: 'Continue to Test Faucet',
+          onButtonClick: () => toFaucet(network),
+          hide: !isTestNetwork || buyingWithShapeshift,
+        }),
 
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__coinbase-logo', {
-          src: '../../../images/coinbase logo.png',
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/coinbase logo.png\')',
+              height: '40px',
+            },
+          }),
+          title: COINBASE_ROW_TITLE,
+          text: COINBASE_ROW_TEXT,
+          buttonLabel: 'Continue to Coinbase',
+          onButtonClick: () => toCoinbase(address),
+          hide: isTestNetwork || buyingWithShapeshift,
         }),
-        title: COINBASE_ROW_TITLE,
-        text: COINBASE_ROW_TEXT,
-        buttonLabel: 'Continue to Coinbase',
-        onButtonClick: () => toCoinbase(address),
-        hide: isTestNetwork || buyingWithShapeshift,
-      }),
 
-      this.renderRow({
-        logo: h('img.deposit-ether-modal__buy-row__shapeshift-logo', {
-          src: '../../../images/shapeshift logo.png',
+        this.renderRow({
+          logo: h('div.deposit-ether-modal__logo', {
+            style: {
+              backgroundImage: 'url(\'../../../images/shapeshift logo.png\')',
+            },
+          }),
+          title: SHAPESHIFT_ROW_TITLE,
+          text: SHAPESHIFT_ROW_TEXT,
+          buttonLabel: 'Continue to Shapeshift',
+          onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
+          hide: isTestNetwork,
+          hideButton: buyingWithShapeshift,
+          hideTitle: buyingWithShapeshift,
+          onBackClick: () => this.setState({ buyingWithShapeshift: false }),
+          showBackButton: this.state.buyingWithShapeshift,
+          className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
         }),
-        title: SHAPESHIFT_ROW_TITLE,
-        text: SHAPESHIFT_ROW_TEXT,
-        buttonLabel: 'Buy with Shapeshift',
-        onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
-        hide: isTestNetwork,
-        hideButton: buyingWithShapeshift,
-        hideTitle: buyingWithShapeshift,
-        onBackClick: () => this.setState({ buyingWithShapeshift: false }),
-        showBackButton: this.state.buyingWithShapeshift,
-        className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy',
-      }),
 
-      buyingWithShapeshift && h(ShapeshiftForm),
+        buyingWithShapeshift && h(ShapeshiftForm),
+
+      ]),
 
     ]),
   ])
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 8e9e58985..ffe669610 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -92,18 +92,20 @@ const MODALS = {
       display: 'flex',
     },
     laptopModalStyle: {
-      width: '900px',
-      maxWidth: '900px',
+      width: '850px',
       top: 'calc(10% + 10px)',
       left: '0',
       right: '0',
       margin: '0 auto',
       boxShadow: '0 0 6px 0 rgba(0,0,0,0.3)',
-      borderRadius: '8px',
+      borderRadius: '7px',
       transform: 'none',
+      height: 'calc(80% - 20px)',
+      overflowY: 'hidden',
     },
     contentStyle: {
-      borderRadius: '8px',
+      borderRadius: '7px',
+      height: '100%',
     },
   },
 
diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js
index e4b0c186a..dd2bef3da 100644
--- a/ui/app/components/pending-tx/confirm-send-token.js
+++ b/ui/app/components/pending-tx/confirm-send-token.js
@@ -63,8 +63,8 @@ function mapDispatchToProps (dispatch, ownProps) {
     updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)),
     editTransaction: txMeta => {
       const { token: { address } } = ownProps
-      const { txParams, id } = txMeta
-      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data)
+      const { txParams = {}, id } = txMeta
+      const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) || {}
       const { params = [] } = tokenData
       const { value: to } = params[0] || {}
       const { value: tokenAmountInDec } = params[1] || {}
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index b25d8e0f9..ad9f9c5c0 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -100,9 +100,10 @@ TxView.prototype.render = function () {
 
     h('div.flex-row.phone-visible', {
       style: {
-        margin: '1.5em 1.2em 0',
         justifyContent: 'space-between',
         alignItems: 'center',
+        flex: '0 0 auto',
+        margin: '10px',
       },
     }, [
 
@@ -110,11 +111,10 @@ TxView.prototype.render = function () {
         style: {
           fontSize: '1.3em',
           cursor: 'pointer',
+          padding: '10px',
         },
-        onClick: () => {
-          this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar()
-        },
-      }, []),
+        onClick: () => this.props.sidebarOpen ? this.props.hideSidebar() : this.props.showSidebar(),
+      }),
 
       h('.identicon-wrapper.select-none', {
         style: {
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index 4af0c2c55..a3f051361 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -5,9 +5,6 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    margin: .3em .9em 0;
-    // height: 80vh;
-    // max-height: 225px;
     flex: 0 0 auto;
   }
 
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 53e3bff00..6c4106f8b 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -641,32 +641,40 @@
 
   &__buy-rows {
     width: 100%;
-    padding: 33px;
-    padding-top: 0px;
+    padding: 0 30px;
     display: flex;
     flex-flow: column nowrap;
     flex: 1;
-    overflow-y: auto;
 
     @media screen and (max-width: 575px) {
       height: 0;
     }
   }
 
+  &__logo {
+    height: 60px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   &__buy-row {
     border-bottom: 1px solid $alto;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    flex: 1;
-    padding-bottom: 25px;
-    padding-top: 25px;
+    flex: 1 0 auto;
+    padding: 30px 0 20px;
+    min-height: 170px;
 
     @media screen and (max-width: 575px) {
-      min-height: 360px;
+      min-height: 270px;
       flex-flow: column;
-      justify-content: center;
-      padding-top: 45px;
+      justify-content: flex-start;
     }
 
     &__back {
@@ -692,30 +700,35 @@
       }
     }
 
-    &__logo {
+    &__logo-container {
       display: flex;
       justify-content: center;
-      flex: 0.3 1 auto;
+      flex: 0 0 auto;
+      padding: 0 20px;
 
-      @media screen and (min-width: 575px) {
-        min-width: 215px;
+      @media screen and (min-width: 576px) {
+        width: 12rem;
+      }
+
+      @media screen and (max-width: 575px) {
+        width: 100%;
+        max-height: 6rem;
+        padding-bottom: 20px;
       }
     }
 
     &__coinbase-logo {
       height: 40px;
-      width: 180px;
     }
 
     &__shapeshift-logo {
       height: 60px;
-      width: 174px;
     }
 
     &__eth-logo {
       border-radius: 50%;
-      width: 68px;
       height: 68px;
+      width: 68px;
       border: 3px solid $tundora;
       z-index: 25;
       padding: 4px;
@@ -728,10 +741,11 @@
 
     &__description {
       color: $cape-cod;
-      flex: 0.5 1 auto;
+      padding-bottom: 20px;
+      align-self: flex-start;
 
       @media screen and (min-width: 575px) {
-        min-width: 315px;
+        width: 15rem;
       }
 
       &__title {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index c6c254ede..c2cefe4ad 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -161,15 +161,14 @@
   display: flex;
   flex-flow: column;
   align-items: center;
+  padding: 30px 30px 0;
 
   &__input-label {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 21px;
-    margin-top: 29px;
     align-self: flex-start;
-    margin-left: 30px;
   }
 
   &__input {
@@ -190,7 +189,7 @@
     margin-top: 39px;
     display: flex;
     width: 100%;
-    justify-content: space-evenly;
+    justify-content: space-between;
   }
 
   &__button-cancel,
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 73faebe8b..5cdda5e6c 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -51,6 +51,7 @@ $wallet-view-bg: $alabaster;
   cursor: pointer;
   display: flex;
   justify-content: center;
+  padding: 10px;
 }
 
 // wallet view and sidebar
@@ -290,3 +291,45 @@ $wallet-view-bg: $alabaster;
 .token-balance__amount {
   padding-right: 6px;
 }
+
+// first time
+.first-view-main {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+
+  @media screen and (max-width: 575px) {
+    height: 100%;
+  }
+
+  @media screen and (min-width: 576px) {
+    width: 85vw;
+  }
+
+  @media screen and (min-width: 769px) {
+    width: 80vw;
+  }
+
+  @media screen and (min-width: 1281px) {
+    width: 62vw;
+  }
+}
+
+.unlock-screen-container {
+  z-index: $main-container-z-index;
+  font-family: Roboto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+  background: #f7f7f7;
+  width: 100%;
+}
+
+.unlock-screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+}
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 9b3d7475b..b9b6704de 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -77,25 +77,30 @@ input.large-input {
   z-index: 25;
   display: flex;
   flex-flow: column;
+  border-radius: 7px;
+  height: 100%;
 
   &__header {
     display: flex;
     flex-flow: column;
     border-bottom: 1px solid $geyser;
-    padding: 1.15rem 0.95rem;
+    padding: 20px;
     flex: 0 0 auto;
-    background: $alabaster;
     position: relative;
   }
 
-  &__header-close::after {
-    content: '\00D7';
-    font-size: 40px;
+  &__header-close {
     color: $tundora;
     position: absolute;
-    top: 21.5px;
-    right: 28.5px;
+    top: 20px;
+    right: 20px;
     cursor: pointer;
+    overflow: hidden;
+
+    &::after {
+      content: '\00D7';
+      font-size: 40px;
+    }
   }
 
   &__footer {
@@ -114,7 +119,7 @@ input.large-input {
 
   &__footer-button {
     width: 165px;
-    height: 60px;
+    height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
     margin-right: 1rem;
@@ -130,7 +135,7 @@ input.large-input {
     font-family: Roboto;
     font-size: 2rem;
     font-weight: 500;
-    line-height: initial;
+    line-height: 2rem;
   }
 
   &__subtitle {
@@ -174,6 +179,15 @@ input.large-input {
       }
     }
   }
+
+  &--full-width {
+    width: initial;
+  }
+
+  &__content {
+    height: 100%;
+    overflow-y: auto;
+  }
 }
 
 @media screen and (max-width: 250px) {
@@ -200,5 +214,6 @@ input.large-input {
     width: 100%;
     overflow-y: auto;
     background-color: $white;
+    border-radius: 0;
   }
 }
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index 4c0972527..d96c1ae43 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -46,6 +46,10 @@ $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
+$java: #29b6af;
+$wild-strawberry: #ff4a8d;
+$cornflower-blue: #7057ff;
+$saffron: #f6c343;
 
 /*
   Z-Indicies
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
index a4ed137f9..d1761f17d 100644
--- a/ui/app/keychains/hd/restore-vault.js
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -107,12 +107,15 @@ RestoreVaultScreen.prototype.render = function () {
 }
 
 RestoreVaultScreen.prototype.showInitializeMenu = function () {
-  this.props.dispatch(actions.unMarkPasswordForgotten())
-  if (this.props.forgottenPassword) {
-    this.props.dispatch(actions.backToUnlockView())
-  } else {
-    this.props.dispatch(actions.showInitializeMenu())
-  }
+  const { dispatch, forgottenPassword } = this.props
+  dispatch(actions.unMarkPasswordForgotten())
+    .then(() => {
+      if (forgottenPassword) {
+        dispatch(actions.backToUnlockView())
+      } else {
+        dispatch(actions.showInitializeMenu())
+      }
+    })
 }
 
 RestoreVaultScreen.prototype.createOnEnter = function (event) {
@@ -150,11 +153,5 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () {
   this.warning = null
   this.props.dispatch(actions.displayWarning(this.warning))
   this.props.dispatch(actions.createNewVaultAndRestore(password, seed))
-  .then(() => {
-    this.props.dispatch(actions.unMarkPasswordForgotten())
-  })
-  .catch((err) => {
-    log.error(err.message)
-  })
-
+    .catch(err => log.error(err.message))
 }
diff --git a/ui/app/main-container.js b/ui/app/main-container.js
index 292abcc3d..eed4bd164 100644
--- a/ui/app/main-container.js
+++ b/ui/app/main-container.js
@@ -32,19 +32,7 @@ MainContainer.prototype.render = function () {
         return h(Settings, {key: 'config'})
       default:
         log.debug('rendering locked screen')
-        contents = {
-          component: UnlockScreen,
-          style: {
-            boxShadow: 'none',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            background: '#F7F7F7',
-            // must force 100%, because lock screen is full-width
-            width: '100%',
-          },
-          key: 'locked',
-        }
+        return h('.unlock-screen-container', {}, h(UnlockScreen, { key: 'locked' }))
     }
   }
 
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 4dda839a2..74a0f9299 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -138,14 +138,18 @@ function reduceApp (state, action) {
       })
 
     case actions.FORGOT_PASSWORD:
-      return extend(appState, {
-        currentView: {
-          name: action.value ? 'restoreVault' : 'accountDetail',
-        },
-        transForward: false,
+      const newState = extend(appState, {
         forgottenPassword: action.value,
       })
 
+      if (action.value) {
+        newState.currentView = {
+          name: 'restoreVault',
+        }
+      }
+
+      return newState
+
     case actions.SHOW_INIT_MENU:
       return extend(appState, {
         currentView: defaultView,
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 246d8839b..4ca7d221e 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -131,8 +131,6 @@ function reduceMetamask (state, action) {
 
     case actions.SHOW_NEW_VAULT_SEED:
       return extend(metamaskState, {
-        isUnlocked: true,
-        isInitialized: false,
         isRevealingSeedWords: true,
         seedWords: action.value,
       })
diff --git a/ui/app/unlock.js b/ui/app/unlock.js
index cafe3a859..39da699a6 100644
--- a/ui/app/unlock.js
+++ b/ui/app/unlock.js
@@ -28,83 +28,72 @@ UnlockScreen.prototype.render = function () {
   const state = this.props
   const warning = state.warning
   return (
-    h('.flex-column', {
-      style: {
-        width: 'inherit',
-      },
-    }, [
-      h('.unlock-screen.flex-column.flex-center.flex-grow', [
-
-        h(Mascot, {
-          animationEventEmitter: this.animationEventEmitter,
-        }),
-
-        h('h1', {
-          style: {
-            fontSize: '1.4em',
-            textTransform: 'uppercase',
-            color: '#7F8082',
-          },
-        }, 'MetaMask'),
-
-        h('input.large-input', {
-          type: 'password',
-          id: 'password-box',
-          placeholder: 'enter password',
-          style: {
-            background: 'white',
-          },
-          onKeyPress: this.onKeyPress.bind(this),
-          onInput: this.inputChanged.bind(this),
-        }),
-
-        h('.error', {
-          style: {
-            display: warning ? 'block' : 'none',
-            padding: '0 20px',
-            textAlign: 'center',
-          },
-        }, warning),
-
-        h('button.primary.cursor-pointer', {
-          onClick: this.onSubmit.bind(this),
-          style: {
-            margin: 10,
-          },
-        }, 'Log In'),
-      ]),
-
-      h('.flex-row.flex-center.flex-grow', [
-        h('p.pointer', {
-          onClick: () => {
-            this.props.dispatch(actions.markPasswordForgotten())
-            if (environmentType() === 'popup') {
-              global.platform.openExtensionInBrowser()
-            }
-          },
-          style: {
-            fontSize: '0.8em',
-            color: 'rgb(247, 134, 28)',
-            textDecoration: 'underline',
-          },
-        }, 'Restore from seed phrase'),
-      ]),
-
-      h('.flex-row.flex-center.flex-grow', [
-        h('p.pointer', {
-          onClick: () => {
-            this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
-              .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
-          },
-          style: {
-            fontSize: '0.8em',
-            color: '#aeaeae',
-            textDecoration: 'underline',
-            marginTop: '32px',
-          },
-        }, 'Use classic interface'),
-      ]),
-
+    h('.unlock-screen', [
+
+      h(Mascot, {
+        animationEventEmitter: this.animationEventEmitter,
+      }),
+
+      h('h1', {
+        style: {
+          fontSize: '1.4em',
+          textTransform: 'uppercase',
+          color: '#7F8082',
+        },
+      }, 'MetaMask'),
+
+      h('input.large-input', {
+        type: 'password',
+        id: 'password-box',
+        placeholder: 'enter password',
+        style: {
+          background: 'white',
+        },
+        onKeyPress: this.onKeyPress.bind(this),
+        onInput: this.inputChanged.bind(this),
+      }),
+
+      h('.error', {
+        style: {
+          display: warning ? 'block' : 'none',
+          padding: '0 20px',
+          textAlign: 'center',
+        },
+      }, warning),
+
+      h('button.primary.cursor-pointer', {
+        onClick: this.onSubmit.bind(this),
+        style: {
+          margin: 10,
+        },
+      }, 'Log In'),
+
+      h('p.pointer', {
+        onClick: () => {
+          this.props.dispatch(actions.markPasswordForgotten())
+          if (environmentType() === 'popup') {
+            global.platform.openExtensionInBrowser()
+          }
+        },
+        style: {
+          fontSize: '0.8em',
+          color: 'rgb(247, 134, 28)',
+          textDecoration: 'underline',
+        },
+      }, 'Restore from seed phrase'),
+
+      h('p.pointer', {
+        onClick: () => {
+          this.props.dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
+            .then(() => this.props.dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
+        },
+        style: {
+          fontSize: '0.8em',
+          color: '#aeaeae',
+          textDecoration: 'underline',
+          marginTop: '32px',
+        },
+      }, 'Use classic interface'),
     ])
   )
 }