From 99898ac77594d8fe6d4d2aa5bc3e3ba6492f4a10 Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Tue, 23 Jan 2018 22:14:47 -1000
Subject: better organization of locale file; i18n in more view files

---
 ui/app/components/modals/account-details-modal.js  |  4 +--
 .../components/modals/account-modal-container.js   |  2 +-
 ui/app/components/modals/buy-options-modal.js      | 14 +++++------
 ui/app/components/modals/deposit-ether-modal.js    | 29 ++++++++++------------
 .../components/modals/edit-account-name-modal.js   |  4 +--
 .../components/modals/export-private-key-modal.js  | 15 +++++------
 .../modals/hide-token-confirmation-modal.js        |  8 +++---
 ui/app/components/modals/modal.js                  | 10 +++-----
 ui/app/components/modals/new-account-modal.js      | 12 ++++-----
 9 files changed, 45 insertions(+), 53 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index c1f7a3236..746c6de4c 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -64,12 +64,12 @@ AccountDetailsModal.prototype.render = function () {
 
       h('button.btn-clear.account-modal__button', {
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
-      }, 'View account on Etherscan'),
+      }, t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, 'Export private key'),
+      }, t('exportPrivateKeyLower')),
 
   ])
 }
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index c548fb7b3..538edcf13 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -59,7 +59,7 @@ AccountModalContainer.prototype.render = function () {
 
         h('i.fa.fa-angle-left.fa-lg'),
 
-        h('span.account-modal-back__text', ' Back'),
+        h('span.account-modal-back__text', ' ' + t('back')),
 
       ]),
 
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 74a7a847e..60fef7db4 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -56,15 +56,15 @@ BuyOptions.prototype.render = function () {
       }, [
         h('div.buy-modal-content-title', {
           style: {},
-        }, 'Transfers'),
-        h('div', {}, 'How would you like to deposit Ether?'),
+        }, t('transfers')),
+        h('div', {}, t('howToDeposit')),
       ]),
 
       h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
         isTestNetwork
-          ? this.renderModalContentOption(networkName, 'Test Faucet', () => toFaucet(network))
-          : this.renderModalContentOption('Coinbase', 'Deposit with Fiat', () => toCoinbase(address)),
+          ? this.renderModalContentOption(networkName, t('testFaucet'), () => toFaucet(network))
+          : this.renderModalContentOption('Coinbase', t('depositFiat'), () => toCoinbase(address)),
 
         // h('div.buy-modal-content-option', {}, [
         //   h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
@@ -72,8 +72,8 @@ BuyOptions.prototype.render = function () {
         // ]),,
 
         this.renderModalContentOption(
-          'Direct Deposit',
-          'Deposit from another account',
+          t('directDeposit'),
+          t('depositFromAccount'),
           () => this.goToAccountDetailsModal()
         ),
 
@@ -84,7 +84,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text', {}, t('cancel'))),
     ]),
   ])
 }
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..85f640a68 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -6,16 +6,13 @@ const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
 
-const DIRECT_DEPOSIT_ROW_TITLE = 'Directly Deposit Ether'
-const DIRECT_DEPOSIT_ROW_TEXT = `If you already have some Ether, the quickest way to get Ether in
-your new wallet by direct deposit.`
-const COINBASE_ROW_TITLE = 'Buy on Coinbase'
-const COINBASE_ROW_TEXT = `Coinbase is the world’s most popular way to buy and sell bitcoin,
-ethereum, and litecoin.`
-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 DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
+const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
+const COINBASE_ROW_TITLE = t('buyCoinbase')
+const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
+const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
+const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
+const FAUCET_ROW_TITLE = t('testFaucet')
 const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
 
 function mapStateToProps (state) {
@@ -110,10 +107,10 @@ DepositEtherModal.prototype.render = function () {
 
     h('div.deposit-ether-modal__header', [
 
-      h('div.deposit-ether-modal__header__title', ['Deposit Ether']),
+      h('div.deposit-ether-modal__header__title', [t('depositEther')]),
 
       h('div.deposit-ether-modal__header__description', [
-        'To interact with decentralized applications using MetaMask, you’ll need Ether in your wallet.',
+        t('needEtherInWallet'),
       ]),
 
       h('div.deposit-ether-modal__header__close', {
@@ -131,7 +128,7 @@ DepositEtherModal.prototype.render = function () {
         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',
+        buttonLabel: t('viewAccount'),
         onButtonClick: () => this.goToAccountDetailsModal(),
         hide: buyingWithShapeshift,
       }),
@@ -140,7 +137,7 @@ DepositEtherModal.prototype.render = function () {
         logo: h('i.fa.fa-tint.fa-2x'),
         title: FAUCET_ROW_TITLE,
         text: facuetRowText(networkName),
-        buttonLabel: 'Get Ether',
+        buttonLabel: t('getEther'),
         onButtonClick: () => toFaucet(network),
         hide: !isTestNetwork || buyingWithShapeshift,
       }),
@@ -151,7 +148,7 @@ DepositEtherModal.prototype.render = function () {
         }),
         title: COINBASE_ROW_TITLE,
         text: COINBASE_ROW_TEXT,
-        buttonLabel: 'Continue to Coinbase',
+        buttonLabel: t('continueToCoinbase'),
         onButtonClick: () => toCoinbase(address),
         hide: isTestNetwork || buyingWithShapeshift,
       }),
@@ -162,7 +159,7 @@ DepositEtherModal.prototype.render = function () {
         }),
         title: SHAPESHIFT_ROW_TITLE,
         text: SHAPESHIFT_ROW_TEXT,
-        buttonLabel: 'Buy with Shapeshift',
+        buttonLabel: t('shapeshiftBuy'),
         onButtonClick: () => this.setState({ buyingWithShapeshift: true }),
         hide: isTestNetwork,
         hideButton: buyingWithShapeshift,
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index e2361140d..410fac7ba 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -50,7 +50,7 @@ EditAccountNameModal.prototype.render = function () {
       ]),
 
       h('div.edit-account-name-modal-title', {
-      }, ['Edit Account Name']),
+      }, [t('editAccountName')]),
 
       h('input.edit-account-name-modal-input', {
         placeholder: identity.name,
@@ -69,7 +69,7 @@ EditAccountNameModal.prototype.render = function () {
         },
         disabled: this.state.inputText.length === 0,
       }, [
-        'SAVE',
+        t('saveCaps'),
       ]),
 
     ]),
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 422f23f44..0745827cb 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -48,8 +48,8 @@ ExportPrivateKeyModal.prototype.exportAccountAndGetPrivateKey = function (passwo
 
 ExportPrivateKeyModal.prototype.renderPasswordLabel = function (privateKey) {
   return h('span.private-key-password-label', privateKey
-    ? 'This is your private key (click to copy)'
-    : 'Type Your Password'
+    ? t('copyPrivateKey')
+    : t('typePassword')
   )
 }
 
@@ -86,8 +86,8 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
     ),
 
     (privateKey
-      ? this.renderButton('btn-clear export-private-key__button', () => hideModal(), 'Done')
-      : this.renderButton('btn-clear export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), 'Confirm')
+      ? 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'))
     ),
 
   ])
@@ -120,7 +120,7 @@ ExportPrivateKeyModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('span.modal-body-title', 'Show Private Keys'),
+      h('span.modal-body-title', t('showPrivateKeys')),
 
       h('div.private-key-password', {}, [
         this.renderPasswordLabel(privateKey),
@@ -130,10 +130,7 @@ ExportPrivateKeyModal.prototype.render = function () {
         !warning ? null : h('span.private-key-password-error', warning),
       ]),
 
-      h('div.private-key-password-warning', `Warning: Never disclose this key.
-        Anyone with your private keys can take steal any assets held in your
-        account.`
-      ),
+      h('div.private-key-password-warning', t('privateKeyWarning')),
 
       this.renderButtons(privateKey, this.state.password, address, hideModal),
 
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 56c7ba299..55f1695af 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -41,7 +41,7 @@ HideTokenConfirmationModal.prototype.render = function () {
     h('div.hide-token-confirmation__container', {
     }, [
       h('div.hide-token-confirmation__title', {}, [
-        'Hide Token?',
+        t('hideTokenPrompt'),
       ]),
 
       h(Identicon, {
@@ -54,19 +54,19 @@ HideTokenConfirmationModal.prototype.render = function () {
       h('div.hide-token-confirmation__symbol', {}, symbol),
 
       h('div.hide-token-confirmation__copy', {}, [
-        'You can add this token back in the future by going go to “Add token” in your accounts options menu.',
+        t('readdToken'),
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
         h('button.btn-cancel.hide-token-confirmation__button', {
           onClick: () => hideModal(),
         }, [
-          'CANCEL',
+          t('cancelCaps'),
         ]),
         h('button.btn-clear.hide-token-confirmation__button', {
           onClick: () => hideToken(address),
         }, [
-          'HIDE',
+          t('hideCaps'),
         ]),
       ]),
     ]),
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index afb2a2175..e4e644d40 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -169,9 +169,8 @@ const MODALS = {
   BETA_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: 'Welcome to the New UI (Beta)',
-        message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens,
-        and let us know if you have any issues.`,
+        header: t('uiWelcome'),
+        message: t('uiWelcomeMessage'),
       }),
     ],
     mobileModalStyle: {
@@ -187,9 +186,8 @@ const MODALS = {
   OLD_UI_NOTIFICATION_MODAL: {
     contents: [
       h(NotifcationModal, {
-        header: 'Old UI',
-        message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
-        right dropdown menu.`,
+        header: t('oldUI'),
+        message: t('oldUIMessage'),
       }),
     ],
     mobileModalStyle: {
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index fc1fd413d..4fdfbd745 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -22,7 +22,7 @@ class NewAccountModal extends Component {
       h('div.new-account-modal-wrapper', {
       }, [
         h('div.new-account-modal-header', {}, [
-          'New Account',
+          t('newAccount'),
         ]),
 
         h('div.modal-close-x', {
@@ -30,19 +30,19 @@ class NewAccountModal extends Component {
         }),
 
         h('div.new-account-modal-content', {}, [
-          'Account Name',
+          t('accountName'),
         ]),
 
         h('div.new-account-input-wrapper', {}, [
           h('input.new-account-input', {
             value: this.state.newAccountName,
-            placeholder: 'E.g. My new account',
+            placeholder: t('sampleAccountName'),
             onChange: event => this.setState({ newAccountName: event.target.value }),
           }, []),
         ]),
 
         h('div.new-account-modal-content.after-input', {}, [
-          'or',
+          t('or'),
         ]),
 
         h('div.new-account-modal-content.after-input.pointer', {
@@ -50,13 +50,13 @@ class NewAccountModal extends Component {
             this.props.hideModal()
             this.props.showImportPage()
           },
-        }, 'Import an account'),
+        }, t('importAnAccount')),
 
         h('div.new-account-modal-content.button', {}, [
           h('button.btn-clear', {
             onClick: () => this.props.createAccount(newAccountName),
           }, [
-            'SAVE',
+            t('saveCaps'),
           ]),
         ]),
       ]),
-- 
cgit v1.2.3


From 7da52c599784130a5f7b6737f5b017bd3a95c1ed Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Wed, 24 Jan 2018 10:10:28 -1000
Subject: separate out cross-browser i18n for extensions

---
 ui/app/components/modals/account-details-modal.js         | 1 +
 ui/app/components/modals/account-modal-container.js       | 1 +
 ui/app/components/modals/buy-options-modal.js             | 1 +
 ui/app/components/modals/deposit-ether-modal.js           | 1 +
 ui/app/components/modals/edit-account-name-modal.js       | 1 +
 ui/app/components/modals/export-private-key-modal.js      | 1 +
 ui/app/components/modals/hide-token-confirmation-modal.js | 1 +
 ui/app/components/modals/modal.js                         | 1 +
 ui/app/components/modals/new-account-modal.js             | 1 +
 9 files changed, 9 insertions(+)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 746c6de4c..17760dc1a 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -8,6 +8,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js
index 538edcf13..08540aa76 100644
--- a/ui/app/components/modals/account-modal-container.js
+++ b/ui/app/components/modals/account-modal-container.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedIdentity } = require('../../selectors')
 const Identicon = require('../identicon')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 60fef7db4..7eb73c3a6 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 85f640a68..e91b43841 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -5,6 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../actions')
 const networkNames = require('../../../../app/scripts/config.js').networkNames
 const ShapeshiftForm = require('../shapeshift-form')
+const t = require('../../../i18n')
 
 const DIRECT_DEPOSIT_ROW_TITLE = t('directDepositEther')
 const DIRECT_DEPOSIT_ROW_TEXT = t('directDepositEtherExplainer')
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 410fac7ba..611def005 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const { getSelectedAccount } = require('../../selectors')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index 0745827cb..017177cfd 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -7,6 +7,7 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
+const t = require('../../../i18n')
 const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 55f1695af..98b1e2d03 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -4,6 +4,7 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
 const Identicon = require('../identicon')
+const t = require('../../../i18n')
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index e4e644d40..ea6ac5135 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -6,6 +6,7 @@ const FadeModal = require('boron').FadeModal
 const actions = require('../../actions')
 const isMobileView = require('../../../lib/is-mobile-view')
 const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification')
+const t = require('../../../i18n')
 
 // Modal Components
 const BuyOptions = require('./buy-options-modal')
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 4fdfbd745..35f4764a6 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
 const actions = require('../../actions')
+const t = require('../../../i18n')
 
 class NewAccountModal extends Component {
   constructor (props) {
-- 
cgit v1.2.3


From abfa74f09a0119345165a32090d88a1d95df6c80 Mon Sep 17 00:00:00 2001
From: Nick Doiron <ndoiron@mapmeld.com>
Date: Mon, 29 Jan 2018 15:29:01 -0500
Subject: complete i18n across new UI

---
 ui/app/components/modals/account-details-modal.js         | 2 +-
 ui/app/components/modals/deposit-ether-modal.js           | 4 +++-
 ui/app/components/modals/edit-account-name-modal.js       | 4 ++--
 ui/app/components/modals/hide-token-confirmation-modal.js | 8 ++++----
 ui/app/components/modals/new-account-modal.js             | 6 +++---
 5 files changed, 13 insertions(+), 11 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 17760dc1a..75f989e86 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -70,7 +70,7 @@ AccountDetailsModal.prototype.render = function () {
       // Holding on redesign for Export Private Key functionality
       h('button.btn-clear.account-modal__button', {
         onClick: () => showExportPrivateKeyModal(),
-      }, t('exportPrivateKeyLower')),
+      }, t('exportPrivateKey')),
 
   ])
 }
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index e91b43841..7172d05a5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -14,7 +14,9 @@ const COINBASE_ROW_TEXT = t('buyCoinbaseExplainer')
 const SHAPESHIFT_ROW_TITLE = t('depositShapeShift')
 const SHAPESHIFT_ROW_TEXT = t('depositShapeShiftExplainer')
 const FAUCET_ROW_TITLE = t('testFaucet')
-const facuetRowText = networkName => `Get Ether from a faucet for the ${networkName}`
+const facuetRowText = (networkName) => {
+  return t('getEtherFromFaucet', [networkName])
+}
 
 function mapStateToProps (state) {
   return {
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 611def005..6efa8d476 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -61,7 +61,7 @@ EditAccountNameModal.prototype.render = function () {
         value: this.state.inputText,
       }, []),
 
-      h('button.btn-clear.edit-account-name-modal-save-button', {
+      h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
         onClick: () => {
           if (this.state.inputText.length !== 0) {
             saveAccountLabel(identity.address, this.state.inputText)
@@ -70,7 +70,7 @@ EditAccountNameModal.prototype.render = function () {
         },
         disabled: this.state.inputText.length === 0,
       }, [
-        t('saveCaps'),
+        t('save'),
       ]),
 
     ]),
diff --git a/ui/app/components/modals/hide-token-confirmation-modal.js b/ui/app/components/modals/hide-token-confirmation-modal.js
index 98b1e2d03..33d8062c6 100644
--- a/ui/app/components/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/modals/hide-token-confirmation-modal.js
@@ -59,15 +59,15 @@ HideTokenConfirmationModal.prototype.render = function () {
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
-        h('button.btn-cancel.hide-token-confirmation__button', {
+        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
           onClick: () => hideModal(),
         }, [
-          t('cancelCaps'),
+          t('cancel'),
         ]),
-        h('button.btn-clear.hide-token-confirmation__button', {
+        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
           onClick: () => hideToken(address),
         }, [
-          t('hideCaps'),
+          t('hide'),
         ]),
       ]),
     ]),
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index 35f4764a6..298b76af4 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -12,7 +12,7 @@ class NewAccountModal extends Component {
     const newAccountNumber = numberOfExistingAccounts + 1
 
     this.state = {
-      newAccountName: `Account ${newAccountNumber}`,
+      newAccountName: `${t('account')} ${newAccountNumber}`,
     }
   }
 
@@ -53,11 +53,11 @@ class NewAccountModal extends Component {
           },
         }, t('importAnAccount')),
 
-        h('div.new-account-modal-content.button', {}, [
+        h('div.new-account-modal-content.button.allcaps', {}, [
           h('button.btn-clear', {
             onClick: () => this.props.createAccount(newAccountName),
           }, [
-            t('saveCaps'),
+            t('save'),
           ]),
         ]),
       ]),
-- 
cgit v1.2.3


From cd976a2765b9e442642faec8a985c049f8cb393b Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Thu, 8 Feb 2018 13:48:25 -0330
Subject: Add reset account button to new UI.

---
 ui/app/components/modals/modal.js                  | 13 ++++++
 ui/app/components/modals/notification-modal.js     | 36 ++++++++++++++---
 .../notification-modals/confirm-reset-account.js   | 46 ++++++++++++++++++++++
 3 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 ui/app/components/modals/notification-modals/confirm-reset-account.js

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index afb2a2175..97fe38292 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -18,6 +18,7 @@ const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
 const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
 const CustomizeGasModal = require('../customize-gas-modal')
 const NotifcationModal = require('./notification-modal')
+const ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
 
 const accountModalStyle = {
   mobileModalStyle: {
@@ -202,6 +203,18 @@ const MODALS = {
     },
   },
 
+  CONFIRM_RESET_ACCOUNT: {
+    contents: h(ConfirmResetAccount),
+    mobileModalStyle: {
+      width: '95%',
+      top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+    },
+    laptopModalStyle: {
+      width: '473px',
+      top: 'calc(33% + 45px)',
+    },
+  },
+
   NEW_ACCOUNT: {
     contents: [
       h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
index 239144b0c..621a974d0 100644
--- a/ui/app/components/modals/notification-modal.js
+++ b/ui/app/components/modals/notification-modal.js
@@ -9,26 +9,47 @@ class NotificationModal extends Component {
     const {
       header,
       message,
+      showCancelButton = false,
+      showConfirmButton = false,
+      hideModal,
+      onConfirm,
     } = this.props
 
+    const showButtons = showCancelButton || showConfirmButton
+
     return h('div', [
-      h('div.notification-modal-wrapper', {
+      h('div.notification-modal__wrapper', {
       }, [
 
-        h('div.notification-modal-header', {}, [
+        h('div.notification-modal__header', {}, [
           header,
         ]),
 
-        h('div.notification-modal-message-wrapper', {}, [
-          h('div.notification-modal-message', {}, [
+        h('div.notification-modal__message-wrapper', {}, [
+          h('div.notification-modal__message', {}, [
             message,
           ]),
         ]),
 
         h('div.modal-close-x', {
-          onClick: this.props.hideModal,
+          onClick: hideModal,
         }),
 
+        showButtons && h('div.notification-modal__buttons', [
+
+          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+            onClick: hideModal,
+          }, 'Cancel'),
+
+          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+            onClick: () => {
+              onConfirm()
+              hideModal()
+            },
+          }, 'Confirm'),
+
+        ]),
+
       ]),
     ])
   }
@@ -37,7 +58,10 @@ class NotificationModal extends Component {
 NotificationModal.propTypes = {
   hideModal: PropTypes.func,
   header: PropTypes.string,
-  message: PropTypes.string,
+  message: PropTypes.node,
+  showCancelButton: PropTypes.bool,
+  showConfirmButton: PropTypes.bool,
+  onConfirm: PropTypes.func,
 }
 
 const mapDispatchToProps = dispatch => {
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
new file mode 100644
index 000000000..e1bc91b24
--- /dev/null
+++ b/ui/app/components/modals/notification-modals/confirm-reset-account.js
@@ -0,0 +1,46 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../../actions')
+const NotifcationModal = require('../notification-modal')
+
+class ConfirmResetAccount extends Component {
+  render () {
+    const { resetAccount } = this.props
+
+    return h(NotifcationModal, {
+      header: 'Are you sure you want to reset account?',
+      message: h('div', [
+
+        h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
+          which is used to calculate the current account nonce. `),
+
+        h('a.notification-modal__link', {
+          href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
+          target: '_blank',
+          onClick (event) { global.platform.openWindow({ url: event.target.href }) },
+        }, 'Read more.'),
+
+      ]),
+      showCancelButton: true,
+      showConfirmButton: true,
+      onConfirm: resetAccount,
+      
+    })
+  }
+}
+
+ConfirmResetAccount.propTypes = {
+  resetAccount: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    resetAccount: () => {
+      dispatch(actions.resetAccount())
+    },
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)
-- 
cgit v1.2.3


From 376ffb758fa6b6ea1fcfde1f2addf1c5a6070339 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 5 Mar 2018 14:23:00 -0330
Subject: Shapeshift form handles market info unavailable errors.

---
 ui/app/components/modals/deposit-ether-modal.js |  5 +++++
 ui/app/components/modals/modal.js               | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 532d66653..7547dbcf5 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -33,6 +33,9 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
     showAccountDetailModal: () => {
       dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
     },
@@ -119,6 +122,7 @@ DepositEtherModal.prototype.render = function () {
       h('div.deposit-ether-modal__header__close', {
         onClick: () => {
           this.setState({ buyingWithShapeshift: false })
+          this.props.hideWarning()
           this.props.hideModal()
         },
       }),
@@ -179,6 +183,7 @@ DepositEtherModal.prototype.render = function () {
 }
 
 DepositEtherModal.prototype.goToAccountDetailsModal = function () {
+  this.props.hideWarning()
   this.props.hideModal()
   this.props.showAccountDetailModal()
 }
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 97fe38292..8e9e58985 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -79,6 +79,7 @@ const MODALS = {
     contents: [
       h(DepositEtherModal, {}, []),
     ],
+    onHide: (props) => props.hideWarning(),
     mobileModalStyle: {
       width: '100%',
       height: '100%',
@@ -286,6 +287,10 @@ function mapDispatchToProps (dispatch) {
     hideModal: () => {
       dispatch(actions.hideModal())
     },
+    hideWarning: () => {
+      dispatch(actions.hideWarning())
+    },
+
   }
 }
 
@@ -308,7 +313,12 @@ Modal.prototype.render = function () {
     {
       className: 'modal',
       keyboard: false,
-      onHide: () => { this.onHide() },
+      onHide: () => {
+        if (modal.onHide) {
+          modal.onHide(this.props)
+        }
+        this.onHide()
+      },
       ref: (ref) => {
         this.modalRef = ref
       },
-- 
cgit v1.2.3


From 08542c18e10c61b9e5862e95e7a5a18d479f2dc1 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Mon, 12 Mar 2018 19:25:12 +0100
Subject: Update deposit ether styling (#3510)

---
 ui/app/components/modals/deposit-ether-modal.js | 111 +++++++++++++-----------
 ui/app/components/modals/modal.js               |  10 ++-
 2 files changed, 68 insertions(+), 53 deletions(-)

(limited to 'ui/app/components/modals')

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%',
     },
   },
 
-- 
cgit v1.2.3


From b45ea44aa5eb35c5092d78bc888e884af70db7cb Mon Sep 17 00:00:00 2001
From: Thomas <tmashuang@gmail.com>
Date: Tue, 13 Mar 2018 10:28:33 -0700
Subject: Add missing opening parens to pag-container__subtitle

---
 ui/app/components/modals/deposit-ether-modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 1aa0e9247..26ff3ea03 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -115,7 +115,7 @@ DepositEtherModal.prototype.render = function () {
 
       h('div.page-container__title', [t('depositEther')]),
 
-      h'div.page-container__subtitle', [
+      h('div.page-container__subtitle', [
         t('needEtherInWallet'),
       ]),
 
-- 
cgit v1.2.3


From 66193c823cdbb9474cbc3ed9e1c4ab7a28b9b230 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Thu, 15 Mar 2018 09:20:22 -0700
Subject: Update Deposit Eth icon (#3569)

---
 ui/app/components/modals/deposit-ether-modal.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 26ff3ea03..23e8666af 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -128,13 +128,15 @@ DepositEtherModal.prototype.render = function () {
       }),
 
     ]),
-    
+
     h('.page-container__content', {}, [
-    
+
       h('div.deposit-ether-modal__buy-rows', [
 
         this.renderRow({
-          logo: h('img.deposit-ether-modal__buy-row__eth-logo', { src: '../../../images/eth_logo.svg' }),
+          logo: h('img.deposit-ether-modal__logo', {
+            src: '../../../images/deposit-eth.svg',
+          }),
           title: DIRECT_DEPOSIT_ROW_TITLE,
           text: DIRECT_DEPOSIT_ROW_TEXT,
           buttonLabel: t('viewAccount'),
@@ -164,7 +166,7 @@ DepositEtherModal.prototype.render = function () {
           onButtonClick: () => toCoinbase(address),
           hide: isTestNetwork || buyingWithShapeshift,
         }),
-        
+
         this.renderRow({
           logo: h('div.deposit-ether-modal__logo', {
             style: {
-- 
cgit v1.2.3


From 6f749e5576cb981a469d0cf969b15901bcc05cfa Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 16 Mar 2018 13:09:49 -0700
Subject: Update Confirm Contract screen (#3597)

---
 ui/app/components/modals/deposit-ether-modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 23e8666af..b642513d7 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -109,7 +109,7 @@ DepositEtherModal.prototype.render = function () {
   const isTestNetwork = ['3', '4', '42'].find(n => n === network)
   const networkName = networkNames[network]
 
-  return h('div.page-container.page-container--full-width', {}, [
+  return h('div.page-container.page-container--full-width.page-container--full-height', {}, [
 
     h('div.page-container__header', [
 
-- 
cgit v1.2.3


From cfa2592d78b31ea3c5d056bf1344cfd5d5353f16 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Sun, 25 Mar 2018 22:19:42 -0700
Subject: Update button styles

---
 ui/app/components/modals/account-details-modal.js    | 4 ++--
 ui/app/components/modals/deposit-ether-modal.js      | 2 +-
 ui/app/components/modals/export-private-key-modal.js | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/modals')

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'))
     ),
 
   ])
-- 
cgit v1.2.3