Add raised type buttons to Button component. Refactor all buttons within app to Button components

7 files changed, 88 insertions, 54 deletions

diff --git a/ui/app/components/pages/create-account/connect-hardware/account-list.js b/ui/app/components/pages/create-account/connect-hardware/account-list.js
index 488a189ea..2767b2e1f 100644
--- a/ui/app/components/pages/create-account/connect-hardware/account-list.js
+++ b/ui/app/components/pages/create-account/connect-hardware/account-list.js
@@ -3,6 +3,7 @@ const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const genAccountLink = require('../../../../../lib/account-link.js')
 const Select = require('react-select').default
+import Button from '../../../button'
 
 class AccountList extends Component {
     constructor (props, context) {
@@ -143,22 +144,20 @@ class AccountList extends Component {
     }
 
     return h('div.new-account-connect-form__buttons', {}, [
-      h(
-        'button.btn-default.btn--large.new-account-connect-form__button',
-        {
-          onClick: this.props.onCancel.bind(this),
-        },
-        [this.context.t('cancel')]
-      ),
-
-      h(
-        `button.btn-primary.btn--large.new-account-connect-form__button.unlock ${disabled ? '.btn-primary--disabled' : ''}`,
-        {
-          onClick: this.props.onUnlockAccount.bind(this, this.props.device),
-          ...buttonProps,
-        },
-        [this.context.t('unlock')]
-      ),
+      h(Button, {
+        type: 'default',
+        large: true,
+        className: 'new-account-connect-form__button',
+        onClick: this.props.onCancel.bind(this),
+      }, [this.context.t('cancel')]),
+
+      h(Button, {
+        type: 'primary',
+        large: true,
+        className: 'new-account-connect-form__button unlock',
+        disabled,
+        onClick: this.props.onUnlockAccount.bind(this, this.props.device),
+      }, [this.context.t('unlock')]),
     ])
   }
 
diff --git a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
index b3dfa4ee2..d3abf3119 100644
--- a/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
+++ b/ui/app/components/pages/create-account/connect-hardware/connect-screen.js
@@ -1,6 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
+import Button from '../../../button'
 
 class ConnectScreen extends Component {
     constructor (props, context) {
@@ -60,13 +61,13 @@ class ConnectScreen extends Component {
                     h('h3.hw-connect__title', {}, this.context.t('browserNotSupported')),
                     h('p.hw-connect__msg', {}, this.context.t('chromeRequiredForHardwareWallets')),
                 ]),
-                h(
-                    'button.btn-primary.btn--large',
-                    {
-                      onClick: () => global.platform.openWindow({
-                        url: 'https://google.com/chrome',
-                      }),
-                    },
+                h(Button, {
+                  type: 'primary',
+                  large: true,
+                  onClick: () => global.platform.openWindow({
+                    url: 'https://google.com/chrome',
+                  }),
+                },
                     this.context.t('downloadGoogleChrome')
                 ),
             ])
diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js
index dd57256a3..32b1065aa 100644
--- a/ui/app/components/pages/create-account/import-account/json.js
+++ b/ui/app/components/pages/create-account/import-account/json.js
@@ -8,6 +8,7 @@ const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
 const { DEFAULT_ROUTE } = require('../../../../routes')
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
+import Button from '../../../button'
 
 class JsonImportSubview extends Component {
   constructor (props) {
@@ -51,17 +52,19 @@ class JsonImportSubview extends Component {
 
         h('div.new-account-create-form__buttons', {}, [
 
-          h('button.btn-default.new-account-create-form__button', {
+          h(Button, {
+            type: 'default',
+            large: true,
+            className: 'new-account-create-form__button',
             onClick: () => this.props.history.push(DEFAULT_ROUTE),
-          }, [
-            this.context.t('cancel'),
-          ]),
+          }, [this.context.t('cancel')]),
 
-          h('button.btn-primary.new-account-create-form__button', {
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'new-account-create-form__button',
             onClick: () => this.createNewKeychain(),
-          }, [
-            this.context.t('import'),
-          ]),
+          }, [this.context.t('import')]),
 
         ]),
 
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 1db999f2f..8db1bfbdd 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
@@ -7,6 +7,7 @@ const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
 const actions = require('../../../../actions')
 const { DEFAULT_ROUTE } = require('../../../../routes')
+import Button from '../../../button'
 
 PrivateKeyImportView.contextTypes = {
   t: PropTypes.func,
@@ -61,20 +62,22 @@ PrivateKeyImportView.prototype.render = function () {
 
       h('div.new-account-import-form__buttons', {}, [
 
-        h('button.btn-default.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => {
             displayWarning(null)
             this.props.history.push(DEFAULT_ROUTE)
           },
-        }, [
-          this.context.t('cancel'),
-        ]),
+        }, [this.context.t('cancel')]),
 
-        h('button.btn-primary.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => this.createNewKeychain(),
-        }, [
-          this.context.t('import'),
-        ]),
+        }, [this.context.t('import')]),
 
       ]),
 
diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js
index 402b8f03b..c9e4b113c 100644
--- a/ui/app/components/pages/create-account/new-account.js
+++ b/ui/app/components/pages/create-account/new-account.js
@@ -4,6 +4,7 @@ const h = require('react-hyperscript')
 const connect = require('react-redux').connect
 const actions = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
+import Button from '../../button'
 
 class NewAccountCreateForm extends Component {
   constructor (props, context) {
@@ -38,20 +39,22 @@ class NewAccountCreateForm extends Component {
 
       h('div.new-account-create-form__buttons', {}, [
 
-        h('button.btn-default.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'new-account-create-form__button',
           onClick: () => history.push(DEFAULT_ROUTE),
-        }, [
-          this.context.t('cancel'),
-        ]),
+        }, [this.context.t('cancel')]),
 
-        h('button.btn-primary.btn--large.new-account-create-form__button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className:'new-account-create-form__button',
           onClick: () => {
             createAccount(newAccountName || defaultAccountName)
               .then(() => history.push(DEFAULT_ROUTE))
           },
-        }, [
-          this.context.t('create'),
-        ]),
+        }, [this.context.t('create')]),
 
       ]),
 
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
index 7d7d3f462..7782b541c 100644
--- a/ui/app/components/pages/keychains/reveal-seed.js
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -8,6 +8,8 @@ const { requestRevealSeedWords } = require('../../../actions')
 const { DEFAULT_ROUTE } = require('../../../routes')
 const ExportTextContainer = require('../../export-text-container')
 
+import Button from '../../button'
+
 const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
 const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
 
@@ -106,10 +108,16 @@ class RevealSeedPage extends Component {
   renderPasswordPromptFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-default.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('cancel')),
-        h('button.btn-primary.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: event => this.handleSubmit(event),
           disabled: this.state.password === '',
         }, this.context.t('next')),
@@ -120,7 +128,10 @@ class RevealSeedPage extends Component {
   renderRevealSeedFooter () {
     return (
       h('.page-container__footer', [
-        h('button.btn-default.btn--large.page-container__footer-button', {
+        h(Button, {
+          type: 'default',
+          large: true,
+          className: 'page-container__footer-button',
           onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, this.context.t('close')),
       ])
diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js
index a5ea1b89c..423276cf3 100644
--- a/ui/app/components/pages/settings/settings.js
+++ b/ui/app/components/pages/settings/settings.js
@@ -13,6 +13,8 @@ const ToggleButton = require('react-toggle-button')
 const { REVEAL_SEED_ROUTE } = require('../../../routes')
 const locales = require('../../../../../app/_locales/index.json')
 
+import Button from '../../button'
+
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
     return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase())
@@ -241,7 +243,10 @@ class Settings extends Component {
         ]),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button', {
+            h(Button, {
+              type: 'primary',
+              large: true,
+              className: 'settings__button',
               onClick (event) {
                 window.logStateString((err, result) => {
                   if (err) {
@@ -266,7 +271,10 @@ class Settings extends Component {
         h('div.settings__content-item', this.context.t('revealSeedWords')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button--red', {
+            h(Button, {
+              type: 'primary',
+              large: true,
+              className: 'settings__button--red',
               onClick: event => {
                 event.preventDefault()
                 history.push(REVEAL_SEED_ROUTE)
@@ -286,7 +294,10 @@ class Settings extends Component {
         h('div.settings__content-item', this.context.t('useOldUI')),
         h('div.settings__content-item', [
           h('div.settings__content-item-col', [
-            h('button.btn-primary.btn--large.settings__button--orange', {
+            h(Button, {
+              type: 'primary',
+              large: true,
+              className: 'settings__button--orange',
               onClick (event) {
                 event.preventDefault()
                 setFeatureFlagToBeta()
@@ -305,7 +316,10 @@ class Settings extends Component {
       h('div.settings__content-item', this.context.t('resetAccount')),
       h('div.settings__content-item', [
         h('div.settings__content-item-col', [
-          h('button.btn-primary.btn--large.settings__button--orange', {
+          h(Button, {
+            type: 'primary',
+            large: true,
+            className: 'settings__button--orange',
             onClick (event) {
               event.preventDefault()
               showResetAccountConfirmationModal()