Fix merge conflicts from uat-next

16 files changed, 214 insertions, 153 deletions

diff --git a/ui/app/actions.js b/ui/app/actions.js
index da69b8195..e5b35daaa 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -55,6 +55,7 @@ var actions = {
   SET_NEW_ACCOUNT_FORM: 'SET_NEW_ACCOUNT_FORM',
   unlockMetamask: unlockMetamask,
   unlockFailed: unlockFailed,
+  unlockSucceeded,
   showCreateVault: showCreateVault,
   showRestoreVault: showRestoreVault,
   showInitializeMenu: showInitializeMenu,
@@ -78,6 +79,7 @@ var actions = {
   // unlock screen
   UNLOCK_IN_PROGRESS: 'UNLOCK_IN_PROGRESS',
   UNLOCK_FAILED: 'UNLOCK_FAILED',
+  UNLOCK_SUCCEEDED: 'UNLOCK_SUCCEEDED',
   UNLOCK_METAMASK: 'UNLOCK_METAMASK',
   LOCK_METAMASK: 'LOCK_METAMASK',
   tryUnlockMetamask: tryUnlockMetamask,
@@ -281,12 +283,14 @@ function tryUnlockMetamask (password) {
     log.debug(`background.submitPassword`)
 
     return new Promise((resolve, reject) => {
-      background.submitPassword(password, err => {
+      background.submitPassword(password, (err) => {
         dispatch(actions.hideLoadingIndication())
 
         if (err) {
+          dispatch(actions.unlockFailed(err.message))
           reject(err)
         } else {
+          dispatch(actions.unlockSucceeded())
           dispatch(actions.transitionForward())
           return forceUpdateMetamaskState(dispatch).then(resolve)
         }
@@ -967,6 +971,13 @@ function unlockFailed (message) {
   }
 }
 
+function unlockSucceeded (message) {
+  return {
+    type: actions.UNLOCK_SUCCEEDED,
+    value: message,
+  }
+}
+
 function unlockMetamask (account) {
   return {
     type: actions.UNLOCK_METAMASK,
diff --git a/ui/app/components/network.js b/ui/app/components/network.js
index 3f147159b..3e91fa807 100644
--- a/ui/app/components/network.js
+++ b/ui/app/components/network.js
@@ -24,7 +24,7 @@ Network.prototype.render = function () {
   let iconName, hoverText
 
   if (networkNumber === 'loading') {
-    return h('span.pointer', {
+    return h('span.pointer.network-indicator', {
       style: {
         display: 'flex',
         alignItems: 'center',
diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js
index 080f3eca5..40cfedafd 100644
--- a/ui/app/components/pages/add-token.js
+++ b/ui/app/components/pages/add-token.js
@@ -43,7 +43,6 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    goHome: () => dispatch(actions.goHome()),
     addTokens: tokens => dispatch(actions.addTokens(tokens)),
   }
 }
diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js
index 0c901c09b..71eb9ae23 100644
--- a/ui/app/components/pages/create-account/import-account/index.js
+++ b/ui/app/components/pages/create-account/import-account/index.js
@@ -37,7 +37,7 @@ AccountImportSubview.prototype.render = function () {
 
       h('div.new-account-import-form__select-section', [
 
-        h('div.new-account-import-form__select-label', 'SELECT TYPE'),
+        h('div.new-account-import-form__select-label', 'Select Type'),
 
         h(Select, {
           className: 'new-account-import-form__select',
diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js
index 785bf2cb6..fb10bdb48 100644
--- a/ui/app/components/pages/create-account/import-account/private-key.js
+++ b/ui/app/components/pages/create-account/import-account/private-key.js
@@ -37,15 +37,20 @@ PrivateKeyImportView.prototype.render = function () {
 
   return (
     h('div.new-account-import-form__private-key', [
-      h('span.new-account-create-form__instruction', 'Paste your private key string here:'),
 
-      h('input.new-account-import-form__input-password', {
-        type: 'password',
-        id: 'private-key-box',
-        onKeyPress: () => this.createKeyringOnEnter(),
-      }),
+      h('div.new-account-import-form__private-key-password-container', [
 
-      h('div.new-account-create-form__buttons', {}, [
+        h('span.new-account-import-form__instruction', 'Paste your private key string here:'),
+
+        h('input.new-account-import-form__input-password', {
+          type: 'password',
+          id: 'private-key-box',
+          onKeyPress: () => this.createKeyringOnEnter(),
+        }),
+
+      ]),
+
+      h('div.new-account-import-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index a3bfefc84..fbd456a75 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -8,16 +8,18 @@ const { DEFAULT_ROUTE } = require('../../../routes')
 class NewAccountCreateForm extends Component {
   constructor (props) {
     super(props)
+
     const { numberOfExistingAccounts = 0 } = props
     const newAccountNumber = numberOfExistingAccounts + 1
 
     this.state = {
-      newAccountName: `Account ${newAccountNumber}`,
+      newAccountName: '',
+      defaultAccountName: `Account ${newAccountNumber}`,
     }
   }
 
   render () {
-    const { newAccountName } = this.state
+    const { newAccountName, defaultAccountName } = this.state
     const { history, createAccount } = this.props
 
     return h('div.new-account-create-form', [
@@ -28,8 +30,8 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__input-wrapper', {}, [
         h('input.new-account-create-form__input', {
-          value: this.state.newAccountName,
-          placeholder: 'E.g. My new account',
+          value: newAccountName,
+          placeholder: defaultAccountName,
           onChange: event => this.setState({ newAccountName: event.target.value }),
         }, []),
       ]),
@@ -44,7 +46,7 @@ class NewAccountCreateForm extends Component {
 
         h('button.new-account-create-form__button-create', {
           onClick: () => {
-            createAccount(newAccountName)
+            createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))
           },
         }, [
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 1ebbe597c..b3c73f9b6 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -83,7 +83,6 @@ function mapDispatchToProps (dispatch) {
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
-    goHome: () => dispatch(actions.goHome()),
     clearSend: () => dispatch(actions.clearSend()),
     setMaxModeTo: bool => dispatch(actions.setMaxModeTo(bool)),
   }
diff --git a/ui/app/components/tooltip-v2.js b/ui/app/components/tooltip-v2.js
new file mode 100644
index 000000000..133a0f16a
--- /dev/null
+++ b/ui/app/components/tooltip-v2.js
@@ -0,0 +1,31 @@
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const inherits = require('util').inherits
+const ReactTippy = require('react-tippy').Tooltip
+
+module.exports = Tooltip
+
+inherits(Tooltip, Component)
+function Tooltip () {
+  Component.call(this)
+}
+
+Tooltip.prototype.render = function () {
+  const props = this.props
+  const { position, title, children, wrapperClassName } = props
+
+  return h('div', {
+      className: wrapperClassName,
+    }, [
+
+    h(ReactTippy, {
+      title,
+      position: position || 'left',
+      trigger: 'mouseenter',
+      hideOnClick: false,
+      size: 'small',
+      arrow: true,
+    }, children),
+
+  ])
+}
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index c7f81a305..ce0902a91 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -4,8 +4,10 @@ const h = require('react-hyperscript')
 const { withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const inherits = require('util').inherits
+const classnames = require('classnames')
 const Identicon = require('./identicon')
 // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns
+const Tooltip = require('./tooltip-v2.js')
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const BalanceComponent = require('./balance-component')
@@ -51,6 +53,7 @@ function WalletView () {
   Component.call(this)
   this.state = {
     hasCopied: false,
+    copyToClipboardPressed: false,
   }
 }
 
@@ -140,17 +143,30 @@ WalletView.prototype.render = function () {
       ]),
     ]),
 
-
-    h('div.wallet-view__address', {
-      onClick: () => {
-        copyToClipboard(selectedAddress)
-        this.setState({ hasCopied: true })
-        setTimeout(() => this.setState({ hasCopied: false }), 3000)
-      },
+    h(Tooltip, {
+      position: 'bottom',
+      title: this.state.hasCopied ? 'Copied!' : 'Copy to clipboard',
+      wrapperClassName: 'wallet-view__tooltip',
     }, [
-      this.state.hasCopied && 'Copied to Clipboard',
-      !this.state.hasCopied && `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
-      h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      h('button.wallet-view__address', {
+        className: classnames({
+          'wallet-view__address__pressed': this.state.copyToClipboardPressed,
+        }),
+        onClick: () => {
+          copyToClipboard(selectedAddress)
+          this.setState({ hasCopied: true })
+          setTimeout(() => this.setState({ hasCopied: false }), 3000)
+        },
+        onMouseDown: () => {
+          this.setState({ copyToClipboardPressed: true })
+        },
+        onMouseUp: () => {
+          this.setState({ copyToClipboardPressed: false })
+        },
+      }, [
+        `${selectedAddress.slice(0, 4)}...${selectedAddress.slice(-4)}`,
+        h('i.fa.fa-clipboard', { style: { marginLeft: '8px' } }),
+      ]),
     ]),
 
     this.renderWalletBalance(),
diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js
index 05bbd2696..913563d12 100644
--- a/ui/app/conf-tx.js
+++ b/ui/app/conf-tx.js
@@ -126,7 +126,6 @@ ConfirmTxScreen.prototype.render = function () {
     cancelPersonalMessage: this.cancelPersonalMessage.bind(this, txData),
     cancelTypedMessage: this.cancelTypedMessage.bind(this, txData),
   })
-
 }
 
 function currentTxView (opts) {
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 97f7ab785..a1a716b9a 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -55,3 +55,5 @@
 @import './pages/index.scss';
 
 @import './new-account.scss';
+
+@import './tooltip.scss';
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index 5837a80bb..119d5c479 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -56,11 +56,17 @@
 }
 
 .new-account-import-form {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 0 30px;
+
   &__select-section {
     display: flex;
-    justify-content: space-evenly;
+    justify-content: space-between;
     align-items: center;
     margin-top: 29px;
+    width: 100%;
   }
 
   &__select-label {
@@ -92,19 +98,25 @@
     }
   }
 
+  &__private-key-password-container {
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    width: 100%;
+  }
+
   &__instruction {
     color: $scorpion;
     font-family: Roboto;
     font-size: 16px;
     line-height: 21px;
     align-self: flex-start;
-    margin-left: 30px;
   }
 
   &__private-key {
     display: flex;
     flex-flow: column;
-    align-items: center;
+    align-items: flex-start;
     margin-top: 34px;
   }
 
@@ -127,6 +139,13 @@
     align-items: center;
     margin-top: 29px;
   }
+
+  &__buttons {
+    margin-top: 39px;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 .new-account-create-form {
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 1c26882b5..37fabf254 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -89,6 +89,12 @@ $wallet-view-bg: $alabaster;
     flex: 0 0 auto;
   }
 
+  &__tooltip {
+    display: flex;
+    justify-content: center;
+    padding: 24px;
+  }
+
   &__address {
     border-radius: 3px;
     background-color: $alto;
@@ -96,10 +102,13 @@ $wallet-view-bg: $alabaster;
     font-size: 14px;
     line-height: 12px;
     padding: 4px 12px;
-    margin: 24px auto;
     font-weight: 300;
     cursor: pointer;
     flex: 0 0 auto;
+
+    &__pressed {
+      background-color: $manatee,
+    }
   }
 
   &__sidebar-close {
diff --git a/ui/app/css/itcss/components/tooltip.scss b/ui/app/css/itcss/components/tooltip.scss
new file mode 100644
index 000000000..78325865e
--- /dev/null
+++ b/ui/app/css/itcss/components/tooltip.scss
@@ -0,0 +1,7 @@
+.metamask-tooltip {
+	padding: 5px !important;
+}
+
+// needed for react-tippy
+// copied from node_modules/react-tippy/dist/tippy.css
+.tippy-touch{cursor:pointer!important}.tippy-notransition{transition:none!important}.tippy-popper{max-width:400px;-webkit-perspective:800px;perspective:800px;z-index:9999;outline:0;transition-timing-function:cubic-bezier(.165,.84,.44,1);pointer-events:none}.tippy-popper.html-template{max-width:96%;max-width:calc(100% - 20px)}.tippy-popper[x-placement^=top] [x-arrow]{border-top:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;bottom:-7px;margin:0 9px}.tippy-popper[x-placement^=top] [x-arrow].arrow-small{border-top:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;bottom:-5px}.tippy-popper[x-placement^=top] [x-arrow].arrow-big{border-top:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.tippy-popper[x-placement^=top] [x-circle]{-webkit-transform-origin:0 33%;transform-origin:0 33%}.tippy-popper[x-placement^=top] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-55%);transform:scale(1) translate(-50%,-55%);opacity:1}.tippy-popper[x-placement^=top] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow]{border-top:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow]{border-top:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-top:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=top] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-top:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=top] [data-animation=perspective]{-webkit-transform-origin:bottom;transform-origin:bottom}.tippy-popper[x-placement^=top] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(-10px) rotateX(0);transform:translateY(-10px) rotateX(0)}.tippy-popper[x-placement^=top] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(90deg);transform:translateY(0) rotateX(90deg)}.tippy-popper[x-placement^=top] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(-10px);transform:translateY(-10px)}.tippy-popper[x-placement^=top] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=top] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(-10px) scale(1);transform:translateY(-10px) scale(1)}.tippy-popper[x-placement^=top] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=bottom] [x-arrow]{border-bottom:7px solid #333;border-right:7px solid transparent;border-left:7px solid transparent;top:-7px;margin:0 9px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-small{border-bottom:5px solid #333;border-right:5px solid transparent;border-left:5px solid transparent;top:-5px}.tippy-popper[x-placement^=bottom] [x-arrow].arrow-big{border-bottom:10px solid #333;border-right:10px solid transparent;border-left:10px solid transparent;top:-10px}.tippy-popper[x-placement^=bottom] [x-circle]{-webkit-transform-origin:0 -50%;transform-origin:0 -50%}.tippy-popper[x-placement^=bottom] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-45%);transform:scale(1) translate(-50%,-45%);opacity:1}.tippy-popper[x-placement^=bottom] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-5%);transform:scale(.15) translate(-50%,-5%);opacity:0}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow]{border-bottom:7px solid #fff;border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-bottom:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-bottom:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow]{border-bottom:7px solid rgba(0,0,0,.7);border-right:7px solid transparent;border-left:7px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-bottom:5px solid rgba(0,0,0,.7);border-right:5px solid transparent;border-left:5px solid transparent}.tippy-popper[x-placement^=bottom] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-bottom:10px solid rgba(0,0,0,.7);border-right:10px solid transparent;border-left:10px solid transparent}.tippy-popper[x-placement^=bottom] [data-animation=perspective]{-webkit-transform-origin:top;transform-origin:top}.tippy-popper[x-placement^=bottom] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateY(10px) rotateX(0);transform:translateY(10px) rotateX(0)}.tippy-popper[x-placement^=bottom] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateY(0) rotateX(-90deg);transform:translateY(0) rotateX(-90deg)}.tippy-popper[x-placement^=bottom] [data-animation=fade].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=fade].leave{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].enter{opacity:1;-webkit-transform:translateY(10px);transform:translateY(10px)}.tippy-popper[x-placement^=bottom] [data-animation=shift].leave{opacity:0;-webkit-transform:translateY(0);transform:translateY(0)}.tippy-popper[x-placement^=bottom] [data-animation=scale].enter{opacity:1;-webkit-transform:translateY(10px) scale(1);transform:translateY(10px) scale(1)}.tippy-popper[x-placement^=bottom] [data-animation=scale].leave{opacity:0;-webkit-transform:translateY(0) scale(0);transform:translateY(0) scale(0)}.tippy-popper[x-placement^=left] [x-arrow]{border-left:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;right:-7px;margin:6px 0}.tippy-popper[x-placement^=left] [x-arrow].arrow-small{border-left:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;right:-5px}.tippy-popper[x-placement^=left] [x-arrow].arrow-big{border-left:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;right:-10px}.tippy-popper[x-placement^=left] [x-circle]{-webkit-transform-origin:50% 0;transform-origin:50% 0}.tippy-popper[x-placement^=left] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=left] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow]{border-left:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-left:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-left:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow]{border-left:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-left:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=left] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-left:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=left] [data-animation=perspective]{-webkit-transform-origin:right;transform-origin:right}.tippy-popper[x-placement^=left] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(-10px) rotateY(0);transform:translateX(-10px) rotateY(0)}.tippy-popper[x-placement^=left] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(-90deg);transform:translateX(0) rotateY(-90deg)}.tippy-popper[x-placement^=left] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(-10px);transform:translateX(-10px)}.tippy-popper[x-placement^=left] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=left] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(-10px) scale(1);transform:translateX(-10px) scale(1)}.tippy-popper[x-placement^=left] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper[x-placement^=right] [x-arrow]{border-right:7px solid #333;border-top:7px solid transparent;border-bottom:7px solid transparent;left:-7px;margin:6px 0}.tippy-popper[x-placement^=right] [x-arrow].arrow-small{border-right:5px solid #333;border-top:5px solid transparent;border-bottom:5px solid transparent;left:-5px}.tippy-popper[x-placement^=right] [x-arrow].arrow-big{border-right:10px solid #333;border-top:10px solid transparent;border-bottom:10px solid transparent;left:-10px}.tippy-popper[x-placement^=right] [x-circle]{-webkit-transform-origin:-50% 0;transform-origin:-50% 0}.tippy-popper[x-placement^=right] [x-circle].enter{-webkit-transform:scale(1) translate(-50%,-50%);transform:scale(1) translate(-50%,-50%);opacity:1}.tippy-popper[x-placement^=right] [x-circle].leave{-webkit-transform:scale(.15) translate(-50%,-50%);transform:scale(.15) translate(-50%,-50%);opacity:0}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-circle]{background-color:#fff}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow]{border-right:7px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-small{border-right:5px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme [x-arrow].arrow-big{border-right:10px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-circle]{background-color:rgba(0,0,0,.7)}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow]{border-right:7px solid rgba(0,0,0,.7);border-top:7px solid transparent;border-bottom:7px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-small{border-right:5px solid rgba(0,0,0,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}.tippy-popper[x-placement^=right] .tippy-tooltip.transparent-theme [x-arrow].arrow-big{border-right:10px solid rgba(0,0,0,.7);border-top:10px solid transparent;border-bottom:10px solid transparent}.tippy-popper[x-placement^=right] [data-animation=perspective]{-webkit-transform-origin:left;transform-origin:left}.tippy-popper[x-placement^=right] [data-animation=perspective].enter{opacity:1;-webkit-transform:translateX(10px) rotateY(0);transform:translateX(10px) rotateY(0)}.tippy-popper[x-placement^=right] [data-animation=perspective].leave{opacity:0;-webkit-transform:translateX(0) rotateY(90deg);transform:translateX(0) rotateY(90deg)}.tippy-popper[x-placement^=right] [data-animation=fade].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=fade].leave{opacity:0;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].enter{opacity:1;-webkit-transform:translateX(10px);transform:translateX(10px)}.tippy-popper[x-placement^=right] [data-animation=shift].leave{opacity:0;-webkit-transform:translateX(0);transform:translateX(0)}.tippy-popper[x-placement^=right] [data-animation=scale].enter{opacity:1;-webkit-transform:translateX(10px) scale(1);transform:translateX(10px) scale(1)}.tippy-popper[x-placement^=right] [data-animation=scale].leave{opacity:0;-webkit-transform:translateX(0) scale(0);transform:translateX(0) scale(0)}.tippy-popper .tippy-tooltip.transparent-theme{background-color:rgba(0,0,0,.7)}.tippy-popper .tippy-tooltip.transparent-theme[data-animatefill]{background-color:transparent}.tippy-popper .tippy-tooltip.light-theme{color:#26323d;box-shadow:0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);background-color:#fff}.tippy-popper .tippy-tooltip.light-theme[data-animatefill]{background-color:transparent}.tippy-tooltip{position:relative;color:#fff;border-radius:4px;font-size:.95rem;padding:.4rem .8rem;text-align:center;will-change:transform;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#333}.tippy-tooltip--small{padding:.25rem .5rem;font-size:.8rem}.tippy-tooltip--big{padding:.6rem 1.2rem;font-size:1.2rem}.tippy-tooltip[data-animatefill]{overflow:hidden;background-color:transparent}.tippy-tooltip[data-interactive]{pointer-events:auto}.tippy-tooltip[data-inertia]{transition-timing-function:cubic-bezier(.53,2,.36,.85)}.tippy-tooltip [x-arrow]{position:absolute;width:0;height:0}.tippy-tooltip [x-circle]{position:absolute;will-change:transform;background-color:#333;border-radius:50%;width:130%;width:calc(110% + 2rem);left:50%;top:50%;z-index:-1;overflow:hidden;transition:all ease}.tippy-tooltip [x-circle]:before{content:"";padding-top:90%;float:left}@media (max-width:450px){.tippy-popper{max-width:96%;max-width:calc(100% - 20px)}}
diff --git a/ui/app/info.js b/ui/app/info.js
index 49ff9f24a..92cc80c20 100644
--- a/ui/app/info.js
+++ b/ui/app/info.js
@@ -15,134 +15,91 @@ function InfoScreen () {
   Component.call(this)
 }
 
-InfoScreen.prototype.render = function () {
-  const state = this.props
-  const version = global.platform.getVersion()
-
+InfoScreen.prototype.renderLogo = function () {
   return (
-    h('.flex-column.flex-grow', {
-      style: {
-        maxWidth: '400px',
-      },
-    }, [
+    h('div.settings__info-logo-wrapper', [
+      h('img.settings__info-logo', { src: 'images/info-logo.png' }),
+    ])
+  )
+}
 
-      // subtitle and nav
-      h('.section-title.flex-row.flex-center', [
-        h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-          onClick: (event) => {
-            state.dispatch(actions.goHome())
-          },
-        }),
-        h('h2.page-subtitle', 'Info'),
+InfoScreen.prototype.renderInfoLinks = function () {
+  return (
+    h('div.settings__content-item.settings__content-item--without-height', [
+      h('div.settings__info-link-header', 'Links'),
+      h('div.settings__info-link-item', [
+        h('a', {
+          href: 'https://metamask.io/privacy.html',
+          target: '_blank',
+        }, [
+          h('span.settings__info-link', 'Privacy Policy'),
+        ]),
       ]),
-
-      // main view
-      h('.flex-column.flex-justify-center.flex-grow.select-none', [
-        h('.flex-space-around', {
-          style: {
-            padding: '20px',
-          },
+      h('div.settings__info-link-item', [
+        h('a', {
+          href: 'https://metamask.io/terms.html',
+          target: '_blank',
         }, [
-          // current version number
-
-          h('.info.info-gray', [
-            h('div', 'Metamask'),
-            h('div', {
-              style: {
-                marginBottom: '10px',
-              },
-            }, `Version: ${version}`),
-          ]),
-
-          h('div', {
-            style: {
-              marginBottom: '5px',
-            }},
-            [
-              h('div', [
-                h('a', {
-                  href: 'https://metamask.io/privacy.html',
-                  target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
-                }, [
-                  h('div.info', 'Privacy Policy'),
-                ]),
-              ]),
-              h('div', [
-                h('a', {
-                  href: 'https://metamask.io/terms.html',
-                  target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
-                }, [
-                  h('div.info', 'Terms of Use'),
-                ]),
-              ]),
-              h('div', [
-                h('a', {
-                  href: 'https://metamask.io/attributions.html',
-                  target: '_blank',
-                  onClick (event) { this.navigateTo(event.target.href) },
-                }, [
-                  h('div.info', 'Attributions'),
-                ]),
-              ]),
-            ]
-          ),
-
-          h('hr', {
-            style: {
-              margin: '10px 0 ',
-              width: '7em',
-            },
-          }),
-
-          h('div', {
-            style: {
-              paddingLeft: '30px',
-            }},
-            [
-              h('div.fa.fa-support', [
-                h('a.info', {
-                  href: 'https://metamask.helpscoutdocs.com/',
-                  target: '_blank',
-                }, 'Visit our Knowledge Base'),
-              ]),
-
-              h('div', [
-                h('a', {
-                  href: 'https://metamask.io/',
-                  target: '_blank',
-                }, [
-                  h('img.icon-size', {
-                    src: 'images/icon-128.png',
-                    style: {
-                      // IE6-9
-                      filter: 'grayscale(100%)',
-                      // Microsoft Edge and Firefox 35+
-                      WebkitFilter: 'grayscale(100%)',
-                    },
-                  }),
-                  h('div.info', 'Visit our web site'),
-                ]),
-              ]),
+          h('span.settings__info-link', 'Terms of Use'),
+        ]),
+      ]),
+      h('div.settings__info-link-item', [
+        h('a', {
+          href: 'https://metamask.io/attributions.html',
+          target: '_blank',
+        }, [
+          h('span.settings__info-link', 'Attributions'),
+        ]),
+      ]),
+      h('hr.settings__info-separator'),
+      h('div.settings__info-link-item', [
+        h('a', {
+          href: 'https://support.metamask.io',
+          target: '_blank',
+        }, [
+          h('span.settings__info-link', 'Visit our Support Center'),
+        ]),
+      ]),
+      h('div.settings__info-link-item', [
+        h('a', {
+          href: 'https://metamask.io/',
+          target: '_blank',
+        }, [
+          h('span.settings__info-link', 'Visit our web site'),
+        ]),
+      ]),
+      h('div.settings__info-link-item', [
+        h('a', {
+          target: '_blank',
+          href: 'mailto:help@metamask.io?subject=Feedback',
+        }, [
+          h('span.settings__info-link', 'Email us!'),
+        ]),
+      ]),
+    ])
+  )
+}
 
-              h('div', [
-                h('.fa.fa-twitter', [
-                  h('a.info', {
-                    href: 'https://twitter.com/metamask_io',
-                    target: '_blank',
-                  }, 'Follow us on Twitter'),
-                ]),
-              ]),
+InfoScreen.prototype.render = function () {
+  const version = global.platform.getVersion()
 
-              h('div.fa.fa-envelope', [
-                h('a.info', {
-                  target: '_blank',
-                  href: 'mailto:support@metamask.io?subject=MetaMask Support',
-                }, 'Email us!'),
-              ]),
-            ]),
+  return (
+    h('div.settings__content', [
+      h('div.settings__content-row', [
+        h('div.settings__content-item.settings__content-item--without-height', [
+          this.renderLogo(),
+          h('div.settings__info-item', [
+            h('div.settings__info-version-header', 'MetaMask Version'),
+            h('div.settings__info-version-number', `${version}`),
+          ]),
+          h('div.settings__info-item', [
+            h(
+              'div.settings__info-about',
+              'MetaMask is designed and built in California.'
+            ),
+          ]),
         ]),
+        this.renderInfoLinks(),
       ]),
     ])
   )
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index c3ade5cdc..6885d029a 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -484,6 +484,11 @@ function reduceApp (state, action) {
         warning: action.value || 'Incorrect password. Try again.',
       })
 
+    case actions.UNLOCK_SUCCEEDED:
+      return extend(appState, {
+        warning: '',
+      })
+
     case actions.SHOW_LOADING:
       return extend(appState, {
         isLoading: true,