Merge branch 'master' into i18n-translator-redux

10 files changed, 32 insertions, 48 deletions

diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js
index 1ea64de27..8234f8d19 100644
--- a/ui/app/components/customize-gas-modal/index.js
+++ b/ui/app/components/customize-gas-modal/index.js
@@ -301,12 +301,16 @@ CustomizeGasModal.prototype.render = function () {
         }, [this.props.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',
+            },
           }, [this.props.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',
           }, [this.props.t('save')]),
         ]),
 
diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js
index e731286bb..922f24d40 100644
--- a/ui/app/components/ens-input.js
+++ b/ui/app/components/ens-input.js
@@ -9,7 +9,7 @@ const networkMap = require('ethjs-ens/lib/network-map.json')
 const ensRE = /.+\..+$/
 const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000'
 const connect = require('../metamask-connect')
-
+const ToAutoComplete = require('./send/to-autocomplete')
 
 module.exports = connect()(EnsInput)
 
@@ -22,12 +22,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 +41,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 +64,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 +110,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 24d856b43..c43e3e3a5 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -62,12 +62,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) }),
       }, this.props.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(),
       }, this.props.t('exportPrivateKey')),
 
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 40f805181..e38899d04 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -103,7 +103,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 b92d250fa..d5a1ba7b8 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -80,14 +80,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(), this.props.t('done'))
-      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.props.t('confirm'))
+      ? this.renderButton('btn-primary--lg export-private-key__button', () => hideModal(), this.props.t('done'))
+      : this.renderButton('btn-primary--lg export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.props.t('confirm'))
     ),
 
   ])
diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js
index 25902cfce..5b903a96e 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 31af74b36..5f58527fe 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -235,7 +235,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 a1ed049f7..b76c1e60f 100644
--- a/ui/app/components/signature-request.js
+++ b/ui/app/components/signature-request.js
@@ -222,10 +222,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,
     }, this.props.t('cancel')),
-    h('button.request-signature__footer__sign-button', {
+    h('button.btn-primary--lg', {
       onClick: sign,
     }, this.props.t('sign')),
   ])
diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js
index 81aee4308..8b0cc890a 100644
--- a/ui/app/components/tx-view.js
+++ b/ui/app/components/tx-view.js
@@ -68,13 +68,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',
           }),
         }, this.props.t('deposit')),
 
-        h('button.btn-clear.hero-balance-button.allcaps', {
+        h('button.btn-primary.hero-balance-button', {
           style: {
             marginLeft: '0.8em',
           },
@@ -84,7 +84,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,
         }, this.props.t('send')),
       ])
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index c42fedf9a..5f1ed7b60 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -167,7 +167,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()