Merge branch 'master' into i3326-addtokenscreendesignupdate

28 files changed, 182 insertions, 189 deletions

diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index fa25168f1..eeba73e77 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -50,13 +50,13 @@ class JsonImportSubview extends Component {
 
         h('div.new-account-create-form__buttons', {}, [
 
-          h('button.new-account-create-form__button-cancel', {
+          h('button.btn-secondary.new-account-create-form__button', {
             onClick: () => this.props.goHome(),
           }, [
             t('cancel'),
           ]),
 
-          h('button.new-account-create-form__button-create', {
+          h('button.btn-primary.new-account-create-form__button', {
             onClick: () => this.createNewKeychain(),
           }, [
             t('import'),
diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js
index bc9e9384e..13c8da722 100644
--- a/ui/app/accounts/import/private-key.js
+++ b/ui/app/accounts/import/private-key.js
@@ -48,13 +48,13 @@ PrivateKeyImportView.prototype.render = function () {
 
       h('div.new-account-import-form__buttons', {}, [
 
-        h('button.new-account-create-form__button-cancel.allcaps', {
+        h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => goHome(),
         }, [
           t('cancel'),
         ]),
 
-        h('button.new-account-create-form__button-create.allcaps', {
+        h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => this.createNewKeychain(),
         }, [
           t('import'),
diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js
index 8ef842a2a..c820cdf6d 100644
--- a/ui/app/accounts/new-account/create-form.js
+++ b/ui/app/accounts/new-account/create-form.js
@@ -20,7 +20,7 @@ class NewAccountCreateForm extends Component {
 
   render () {
     const { newAccountName, defaultAccountName } = this.state
-    
+
 
     return h('div.new-account-create-form', [
 
@@ -38,13 +38,13 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__buttons', {}, [
 
-        h('button.new-account-create-form__button-cancel.allcaps', {
+        h('button.btn-secondary--lg.new-account-create-form__button', {
           onClick: () => this.props.goHome(),
         }, [
           t('cancel'),
         ]),
 
-        h('button.new-account-create-form__button-create.allcaps', {
+        h('button.btn-primary--lg.new-account-create-form__button', {
           onClick: () => this.props.createAccount(newAccountName || defaultAccountName),
         }, [
           t('create'),
diff --git a/ui/app/actions.js b/ui/app/actions.js
index bc7ee3d07..4a5962610 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -694,10 +694,10 @@ function updateSendFrom (from) {
   }
 }
 
-function updateSendTo (to) {
+function updateSendTo (to, nickname = '') {
   return {
     type: actions.UPDATE_SEND_TO,
-    value: to,
+    value: { to, nickname },
   }
 }
 
diff --git a/ui/app/add-token.js b/ui/app/add-token.js
index 7e22c0c9e..b4ea4a532 100644
--- a/ui/app/add-token.js
+++ b/ui/app/add-token.js
@@ -323,10 +323,10 @@ AddTokenScreen.prototype.renderConfirmation = function () {
         ]),
       ]),
       h('div.add-token__buttons', [
-        h('button.btn-cancel.add-token__button', {
+        h('button.btn-secondary--lg.add-token__cancel-button', {
           onClick: () => this.setState({ isShowingConfirmation: false }),
         }, t('back')),
-        h('button.btn-clear.add-token__button', {
+        h('button.btn-primary--lg', {
           onClick: () => addTokens(tokens).then(goHome),
         }, t('addTokens')),
       ]),
@@ -402,16 +402,16 @@ AddTokenScreen.prototype.render = function () {
 
       ]),
     ]),
-
+//
     isShowingConfirmation
       ? this.renderConfirmation()
       : this.renderTabs(),
 
     !isShowingConfirmation && h('div.add-token__buttons', [
-      h('button.btn-cancel.add-token__button--cancel', {
+      h('button.btn-secondary--lg.add-token__cancel-button', {
         onClick: goHome,
       }, t('cancel')),
-      h('button.btn-clear.add-token__button', {
+      h('button.btn-primary--lg.add-token__confirm-button', {
         onClick: this.onNext,
       }, t('next')),
     ]),
diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index d8384c19d..22ad98ce4 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -302,12 +302,16 @@ CustomizeGasModal.prototype.render = function () {
         }, [t('revert')]),
 
         h('div.send-v2__customize-gas__buttons', [
-          h('div.send-v2__customize-gas__cancel.allcaps', {
+          h('button.btn-secondary.send-v2__customize-gas__cancel', {
             onClick: this.props.hideModal,
+            style: {
+              marginRight: '10px',
+            },
           }, [t('cancel')]),
 
-          h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, {
+          h('button.btn-primary.send-v2__customize-gas__save', {
             onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
+            className: error && 'btn-primary--disabled',
           }, [t('save')]),
         ]),
 
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index add67ea35..1b2d4009d 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -9,6 +9,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const t = require('../../i18n')
+const ToAutoComplete = require('./send/to-autocomplete')
 
 
 module.exports = EnsInput
@@ -22,12 +23,14 @@ EnsInput.prototype.render = function () {
   const props = this.props
   const opts = extend(props, {
     list: 'addresses',
-    onChange: () => {
+    onChange: (recipient) => {
       const network = this.props.network
       const networkHasEnsSupport = getNetworkEnsSupport(network)
+
       if (!networkHasEnsSupport) return
 
-      const recipient = document.querySelector('input[name="address"]').value
+      props.onChange(recipient)
+
       if (recipient.match(ensRE) === null) {
         return this.setState({
           loadingEns: false,
@@ -39,34 +42,13 @@ EnsInput.prototype.render = function () {
       this.setState({
         loadingEns: true,
       })
-      this.checkName()
+      this.checkName(recipient)
     },
   })
   return h('div', {
-    style: { width: '100%' },
+    style: { width: '100%', position: 'relative' },
   }, [
-    h('input.large-input.send-screen-input', opts),
-    // The address book functionality.
-    h('datalist#addresses',
-      [
-        // Corresponds to the addresses owned.
-        Object.keys(props.identities).map((key) => {
-          const identity = props.identities[key]
-          return h('option', {
-            value: identity.address,
-            label: identity.name,
-            key: identity.address,
-          })
-        }),
-        // Corresponds to previously sent-to addresses.
-        props.addressBook.map((identity) => {
-          return h('option', {
-            value: identity.address,
-            label: identity.name,
-            key: identity.address,
-          })
-        }),
-      ]),
+    h(ToAutoComplete, { ...opts }),
     this.ensIcon(),
   ])
 }
@@ -83,8 +65,7 @@ EnsInput.prototype.componentDidMount = function () {
   }
 }
 
-EnsInput.prototype.lookupEnsName = function () {
-  const recipient = document.querySelector('input[name="address"]').value
+EnsInput.prototype.lookupEnsName = function (recipient) {
   const { ensResolution } = this.state
 
   log.info(`ENS attempting to resolve name: ${recipient}`)
@@ -130,8 +111,8 @@ EnsInput.prototype.ensIcon = function (recipient) {
     title: hoverText,
     style: {
       position: 'absolute',
-      padding: '9px',
-      transform: 'translatex(-40px)',
+      top: '16px',
+      left: '-25px',
     },
   }, this.ensIconContents(recipient))
 }
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 75f989e86..927d73482 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -63,12 +63,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-clear.account-modal__button', {
+      h('button.btn-primary.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
-      h('button.btn-clear.account-modal__button', {
+      h('button.btn-primary.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
       }, t('exportPrivateKey')),
 
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index b642513d7..2de1240fc 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -94,7 +94,7 @@ DepositEtherModal.prototype.renderRow = function ({
       ]),
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h('button.deposit-ether-modal__deposit-button', {
+        h('button.btn-primary--lg.deposit-ether-modal__deposit-button', {
           onClick: onButtonClick,
         }, [buttonLabel]),
       ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 017177cfd..cf42e4fa2 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -81,14 +81,14 @@ ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, lab
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
     !privateKey && this.renderButton(
-      'btn-cancel export-private-key__button export-private-key__button--cancel',
+      'btn-secondary--lg export-private-key__button export-private-key__button--cancel',
       () => hideModal(),
       'Cancel'
     ),
 
     (privateKey
-      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), t('done'))
-      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
+      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), t('done'))
+      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), t('confirm'))
     ),
 
   ])
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index d1319b6dc..08c26a91f 100644
--- a/ui/app/components/send/send-v2-container.js
+++ b/ui/app/components/send/send-v2-container.js
@@ -69,13 +69,13 @@ function mapDispatchToProps (dispatch) {
     updateAndApproveTx: txParams => dispatch(actions.updateAndApproveTx(txParams)),
     updateTx: txData => dispatch(actions.updateTransaction(txData)),
     setSelectedAddress: address => dispatch(actions.setSelectedAddress(address)),
-    addToAddressBook: address => dispatch(actions.addToAddressBook(address)),
+    addToAddressBook: (address, nickname) => dispatch(actions.addToAddressBook(address, nickname)),
     updateGasTotal: newTotal => dispatch(actions.updateGasTotal(newTotal)),
     updateGasPrice: newGasPrice => dispatch(actions.updateGasPrice(newGasPrice)),
     updateGasLimit: newGasLimit => dispatch(actions.updateGasLimit(newGasLimit)),
     updateSendTokenBalance: tokenBalance => dispatch(actions.updateSendTokenBalance(tokenBalance)),
     updateSendFrom: newFrom => dispatch(actions.updateSendFrom(newFrom)),
-    updateSendTo: newTo => dispatch(actions.updateSendTo(newTo)),
+    updateSendTo: (newTo, nickname) => dispatch(actions.updateSendTo(newTo, nickname)),
     updateSendAmount: newAmount => dispatch(actions.updateSendAmount(newAmount)),
     updateSendMemo: newMemo => dispatch(actions.updateSendMemo(newMemo)),
     updateSendErrors: newError => dispatch(actions.updateSendErrors(newError)),
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 3f8c17932..5729f893c 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -236,7 +236,7 @@ ShapeshiftForm.prototype.render = function () {
 
       ]),
 
-      !depositAddress && h('button.shapeshift-form__shapeshift-buy-btn', {
+      !depositAddress && h('button.btn-primary--lg.shapeshift-form__shapeshift-buy-btn', {
         className: btnClass,
         disabled: !token,
         onClick: () => this.onBuyWithShapeShift(),
diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js
index 7bf34e7b6..810a52e55 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -223,10 +223,10 @@ SignatureRequest.prototype.renderFooter = function () {
   }
 
   return h('div.request-signature__footer', [
-    h('button.request-signature__footer__cancel-button', {
+    h('button.btn-secondary--lg.request-signature__footer__cancel-button', {
       onClick: cancel,
     }, t('cancel')),
-    h('button.request-signature__footer__sign-button', {
+    h('button.btn-primary--lg', {
       onClick: sign,
     }, t('sign')),
   ])
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 96d776270..bf2065106 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -69,13 +69,13 @@ TxView.prototype.renderButtons = function () {
   return !selectedToken
     ? (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear.hero-balance-button.allcaps', {
+        h('button.btn-primary.hero-balance-button', {
           onClick: () => showModal({
             name: 'DEPOSIT_ETHER',
           }),
         }, t('deposit')),
 
-        h('button.btn-clear.hero-balance-button.allcaps', {
+        h('button.btn-primary.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
@@ -85,7 +85,7 @@ TxView.prototype.renderButtons = function () {
     )
     : (
       h('div.flex-row.flex-center.hero-balance-buttons', [
-        h('button.btn-clear.hero-balance-button', {
+        h('button.btn-primary.hero-balance-button', {
           onClick: showSendTokenPage,
         }, t('send')),
       ])
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 18452205c..2c6d7f784 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -168,7 +168,7 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h('button.btn-clear.wallet-view__add-token-button', {
+    h('button.btn-primary.wallet-view__add-token-button', {
       onClick: () => {
         showAddTokenPage()
         hideSidebar()
diff --git a/ui/app/css/itcss/components/add-token.scss b/ui/app/css/itcss/components/add-token.scss
index f72396735..f5c1de67c 100644
--- a/ui/app/css/itcss/components/add-token.scss
+++ b/ui/app/css/itcss/components/add-token.scss
@@ -261,20 +261,13 @@
     padding-top: 20px;
   }
 
-  &__button,
-  &__button--cancel {
+  &__confirm-button,
+  &__cancel-button {
     margin: 0 12px;
     padding: 10px 13px;
-    height: 44px;
+    height: 54px;
     width: 133px;
-    border: 1px solid $curious-blue;
-    border-radius: 2px;
-    font-color: $curious-blue;
-  }
-
-  &__button--cancel {
-    border-color: $dusty-gray;
-    font-color: $dusty-gray;
+    margin-right: 1.2rem;
   }
 
   &__token-icons-title {
@@ -442,7 +435,7 @@
     }
 
     &__buttons {
-      padding: 12px 0;
+      padding: 1rem;
       margin: 0;
       border-top: 1px solid $gallery;
       width: 100%;
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 8df8829f2..04e1ed96e 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -2,6 +2,76 @@
   Buttons
  */
 
+.btn-primary,
+.btn-primary--lg,
+.btn-secondary,
+.btn-secondary--lg {
+  background: $white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: border-color .3s ease;
+  padding: 0 20px;
+  min-width: 140px;
+  text-transform: uppercase;
+}
+
+.btn-primary,
+.btn-primary--lg {
+  color: $curious-blue;
+  border: 2px solid $spindle;
+
+  &:active {
+    background: $zumthor;
+    border-color: $curious-blue;
+  }
+
+  &:hover {
+    border-color: $curious-blue;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-secondary,
+.btn-secondary--lg {
+  color: $scorpion;
+  border: 2px solid $dusty-gray;
+
+  &:active {
+    background: $gallery;
+    border-color: $dusty-gray;
+  }
+
+  &:hover {
+    border-color: $scorpion;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+.btn-primary, .btn-secondary {
+  height: 44px;
+}
+
+.btn-primary--lg, .btn-secondary--lg {
+  height: 54px;
+}
+
 .btn-green {
   background-color: #02c9b1; // TODO: reusable color in colors.css
 }
@@ -130,20 +200,6 @@ button.btn-thin {
   font-size: 13px;
 }
 
-.btn-secondary {
-  border: 1px solid #979797;
-  border-radius: 2px;
-  background-color: $white;
-  font-size: 16px;
-  line-height: 24px;
-  padding: 16px 42px;
-
-  &[disabled] {
-    background-color: $white !important;
-    opacity: .5;
-  }
-}
-
 .btn-tertiary {
   border: 1px solid transparent;
   border-radius: 2px;
diff --git a/ui/app/css/itcss/components/hero-balance.scss b/ui/app/css/itcss/components/hero-balance.scss
index a3f051361..69cde8a0f 100644
--- a/ui/app/css/itcss/components/hero-balance.scss
+++ b/ui/app/css/itcss/components/hero-balance.scss
@@ -103,10 +103,11 @@
 }
 
 .hero-balance-button {
+  min-width: initial;
   width: 6rem;
 
   @media #{$sub-mid-size-breakpoint-range} {
-    padding: 0.4rem;
+    padding: .4rem;
     width: 4rem;
     display: flex;
     flex: 1;
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index a8d5e8dc2..9ae3ea7fa 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -261,7 +261,7 @@
   .account-modal__button {
     margin-top: 17px;
     padding: 10px 22px;
-    width: 235px;
+    width: 286px;
   }
 }
 
@@ -341,9 +341,8 @@
 
 .export-private-key__button {
   margin-top: 17px;
-  padding: 10px 22px;
   width: 141px;
-  height: 54px;
+  min-width: initial;
 }
 
 .export-private-key__button--cancel {
@@ -765,15 +764,7 @@
   }
 
   &__deposit-button, .shapeshift-form__shapeshift-buy-btn {
-    height: 54px;
     width: 257px;
-    border: 1px solid $curious-blue;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    font-size: 16px;
-    color: $curious-blue;
-    background-color: $white;
   }
 
   .shapeshift-form-wrapper {
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index c2cefe4ad..aa7fed956 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -192,29 +192,8 @@
     justify-content: space-between;
   }
 
-  &__button-cancel,
-  &__button-create {
-    height: 55px;
+  &__button {
     width: 150px;
-    border-radius: 2px;
-    background-color: #FFFFFF;
-  }
-
-  &__button-cancel {
-    border: 1px solid $dusty-gray;
-    color: $dusty-gray;
-    font-family: Roboto;
-    font-size: 16px;
-    line-height: 21px;
-    text-align: center;
+    min-width: initial;
   }
-
-  &__button-create {
-    border: 1px solid $curious-blue;
-    color: $curious-blue;
-    font-family: Roboto;
-    font-size: 16px;
-    line-height: 21px;
-    text-align: center;
-  }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/request-signature.scss b/ui/app/css/itcss/components/request-signature.scss
index d81099bfa..a4728afef 100644
--- a/ui/app/css/itcss/components/request-signature.scss
+++ b/ui/app/css/itcss/components/request-signature.scss
@@ -190,41 +190,19 @@
     width: 100%;
     display: flex;
     align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
     font-size: 22px;
     position: relative;
     flex: 0 0 auto;
     border-top: 1px solid $geyser;
+    padding: 1.6rem;
 
-    &__cancel-button,
-    &__sign-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex: 1 0 auto;
-      font-family: Roboto;
-      font-size: 16px;
-      font-weight: 300;
-      height: 55px;
-      line-height: 32px;
-      cursor: pointer;
-      border-radius: 2px;
-      box-shadow: none;
-      max-width: 162px;
-      margin: 12px;
+    button {
+      width: 165px;
     }
 
     &__cancel-button {
-      background: none;
-      border: 1px solid $dusty-gray;
-      margin-right: 6px;
-    }
-
-    &__sign-button {
-      background-color: $caribbean-green;
-      border-width: 0;
-      color: $white;
-      margin-left: 6px;
+      margin-right: 1.2rem;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 263b362ca..89d2be891 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -782,7 +782,6 @@
     &__buttons {
       display: flex;
       justify-content: space-between;
-      width: 181.75px;
       margin-right: 21.25px;
     }
 
@@ -800,13 +799,8 @@
     }
 
     &__cancel, &__save, &__save__error {
-      height: 34.64px;
       width: 85.74px;
-      border: 1px solid $dusty-gray;
-      border-radius: 2px;
-      font-family: 'DIN OT';
-      font-size: 12px;
-      color: $dusty-gray;
+      min-width: initial;
     }
 
     &__save__error {
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index d60ebd934..dcc9b98d5 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -130,24 +130,32 @@
   cursor: pointer;
 }
 
-.settings__clear-button {
-  font-size: 16px;
-  border: 1px solid $curious-blue;
-  color: $curious-blue;
-  border-radius: 2px;
-  padding: 18px;
-  background-color: $white;
-  text-transform: uppercase;
-}
-
-.settings__clear-button--red {
-  border: 1px solid $monzo;
+.settings__button--red {
+  border-color: lighten($monzo, 10%);
   color: $monzo;
+
+  &:active {
+    background: lighten($monzo, 55%);
+    border-color: $monzo;
+  }
+
+  &:hover {
+    border-color: $monzo;
+  }
 }
 
-.settings__clear-button--orange {
-  border: 1px solid rgba(247, 134, 28, 1);
-  color: rgba(247, 134, 28, 1);
+.settings__button--orange {
+  border-color: lighten($ecstasy, 20%);
+  color: $ecstasy;
+
+  &:active {
+    background: lighten($ecstasy, 40%);
+    border-color: $ecstasy;
+  }
+
+  &:hover {
+    border-color: $ecstasy;
+  }
 }
 
 .settings__info-logo-wrapper {
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index 08e639d74..92321394b 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -132,7 +132,7 @@ input.large-input {
     height: 55px;
     font-size: 1rem;
     text-transform: uppercase;
-    margin-right: 1rem;
+    margin-right: 1.2rem;
     border-radius: 2px;
 
     &:last-of-type {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index f29d99872..51548306f 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -52,6 +52,8 @@ $wild-strawberry: #ff4a8d;
 $cornflower-blue: #7057ff;
 $saffron: #f6c343;
 $dodger-blue: #3099f2;
+$zumthor: #edf7ff;
+$ecstasy: #f7861c;
 
 /*
   Z-Indicies
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index e6e02d057..9cba5e83b 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -39,6 +39,7 @@ function reduceMetamask (state, action) {
       maxModeOn: false,
       editingTransactionId: null,
       forceGasMin: null,
+      toNickname: '',
     },
     coinOptions: {},
     useBlockie: false,
@@ -238,7 +239,8 @@ function reduceMetamask (state, action) {
       return extend(metamaskState, {
         send: {
           ...metamaskState.send,
-          to: action.value,
+          to: action.value.to,
+          toNickname: action.value.nickname,
         },
       })
 
diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js
index de71ce94c..620da73f8 100644
--- a/ui/app/send-v2.js
+++ b/ui/app/send-v2.js
@@ -7,7 +7,7 @@ const ethAbi = require('ethereumjs-abi')
 const ethUtil = require('ethereumjs-util')
 
 const FromDropdown = require('./components/send/from-dropdown')
-const ToAutoComplete = require('./components/send/to-autocomplete')
+const EnsInput = require('./components/ens-input')
 const CurrencyDisplay = require('./components/send/currency-display')
 const MemoTextArea = require('./components/send/memo-textarea')
 const GasFeeDisplay = require('./components/send/gas-fee-display-v2')
@@ -253,7 +253,7 @@ SendTransactionScreen.prototype.renderFromRow = function () {
   ])
 }
 
-SendTransactionScreen.prototype.handleToChange = function (to) {
+SendTransactionScreen.prototype.handleToChange = function (to, nickname = '') {
   const {
     updateSendTo,
     updateSendErrors,
@@ -269,12 +269,12 @@ SendTransactionScreen.prototype.handleToChange = function (to) {
     toError = t('fromToSame')
   }
 
-  updateSendTo(to)
+  updateSendTo(to, nickname)
   updateSendErrors({ to: toError })
 }
 
 SendTransactionScreen.prototype.renderToRow = function () {
-  const { toAccounts, errors, to } = this.props
+  const { toAccounts, errors, to, network } = this.props
 
   const { toDropdownOpen } = this.state
 
@@ -289,7 +289,10 @@ SendTransactionScreen.prototype.renderToRow = function () {
     ]),
 
     h('div.send-v2__form-field', [
-      h(ToAutoComplete, {
+      h(EnsInput, {
+        name: 'address',
+        placeholder: 'Recipient Address',
+        network,
         to,
         accounts: Object.entries(toAccounts).map(([key, account]) => account),
         dropdownOpen: toDropdownOpen,
@@ -510,13 +513,13 @@ SendTransactionScreen.prototype.renderFooter = function () {
   const noErrors = !amountError && toError === null
 
   return h('div.page-container__footer', [
-    h('button.btn-cancel.page-container__footer-button', {
+    h('button.btn-secondary--lg.page-container__footer-button', {
       onClick: () => {
         clearSend()
         goHome()
       },
     }, t('cancel')),
-    h('button.btn-clear.page-container__footer-button', {
+    h('button.btn-primary--lg.page-container__footer-button', {
       disabled: !noErrors || !gasTotal || missingTokenBalance,
       onClick: event => this.onSubmit(event),
     }, t('next')),
@@ -538,11 +541,11 @@ SendTransactionScreen.prototype.render = function () {
   )
 }
 
-SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) {
+SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress, nickname = '') {
   const { toAccounts, addToAddressBook } = this.props
   if (!toAccounts.find(({ address }) => newAddress === address)) {
     // TODO: nickname, i.e. addToAddressBook(recipient, nickname)
-    addToAddressBook(newAddress)
+    addToAddressBook(newAddress, nickname)
   }
 }
 
@@ -603,6 +606,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     updateTx,
     selectedToken,
     editingTransactionId,
+    toNickname,
     errors: { amount: amountError, to: toError },
   } = this.props
 
@@ -612,7 +616,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) {
     return
   }
 
-  this.addToAddressBookIfNew(to)
+  this.addToAddressBookIfNew(to, toNickname)
 
   if (editingTransactionId) {
     const editedTx = this.getEditedTx()
diff --git a/ui/app/settings.js b/ui/app/settings.js
index 105cbb40b..78ca6c94b 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -200,7 +200,7 @@ class Settings extends Component {
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.settings__clear-button', {
+            h('button.btn-primary--lg.settings__button', {
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
@@ -225,7 +225,7 @@ class Settings extends Component {
         h('div.settings__content-item', t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.settings__clear-button.settings__clear-button--red', {
+            h('button.btn-primary--lg.settings__button--red', {
               onClick (event) {
                 event.preventDefault()
                 revealSeedConfirmation()
@@ -245,7 +245,7 @@ class Settings extends Component {
         h('div.settings__content-item', t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.settings__clear-button.settings__clear-button--orange', {
+            h('button.btn-primary--lg.settings__button--orange', {
               onClick (event) {
                 event.preventDefault()
                 setFeatureFlagToBeta()
@@ -264,7 +264,7 @@ class Settings extends Component {
       h('div.settings__content-item', t('resetAccount')),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
-          h('button.settings__clear-button.settings__clear-button--orange', {
+          h('button.btn-primary--lg.settings__button--orange', {
             onClick (event) {
               event.preventDefault()
               showResetAccountConfirmationModal()