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

4 files changed, 46 insertions, 23 deletions

diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index bc577fda0..248ffe008 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -10,6 +10,8 @@ const genAccountLink = require('../../../lib/account-link.js')
 const QrView = require('../qr-code')
 const EditableLabel = require('../editable-label')
 
+import Button from '../button'
+
 function mapStateToProps (state) {
   return {
     network: state.metamask.network,
@@ -80,12 +82,17 @@ AccountDetailsModal.prototype.render = function () {
 
       h('div.account-modal-divider'),
 
-      h('button.btn-primary.account-modal__button', {
+      h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, this.context.t('etherscanView')),
 
       // Holding on redesign for Export Private Key functionality
-      exportPrivateKeyFeatureEnabled ? h('button.btn-primary.account-modal__button', {
+
+      exportPrivateKeyFeatureEnabled ? h(Button, {
+        type: 'primary',
+        className: 'account-modal__button',
         onClick: () => showExportPrivateKeyModal(),
       }, this.context.t('exportPrivateKey')) : null,
 
diff --git a/ui/app/components/modals/customize-gas/customize-gas.component.js b/ui/app/components/modals/customize-gas/customize-gas.component.js
index 0337c5413..3f526bd43 100644
--- a/ui/app/components/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/modals/customize-gas/customize-gas.component.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import GasModalCard from '../../customize-gas-modal/gas-modal-card'
 import { MIN_GAS_PRICE_GWEI } from '../../send/send.constants'
+import Button from '../../button'
 
 import {
   getDecimalGasLimit,
@@ -116,21 +117,23 @@ export default class CustomizeGas extends Component {
               { t('revert') }
             </div>
             <div className="customize-gas__buttons">
-              <button
-                className="btn-default customize-gas__cancel"
+              <Button
+                type="default"
+                className="customize-gas__cancel"
                 onClick={() => hideModal()}
                 style={{ marginRight: '10px' }}
               >
                 { t('cancel') }
-              </button>
-              <button
-                className="btn-primary customize-gas__save"
+              </Button>
+              <Button
+                type="primary"
+                className="customize-gas__save"
                 onClick={() => this.handleSave()}
                 style={{ marginRight: '10px' }}
                 disabled={!valid}
               >
                 { t('save') }
-              </button>
+              </Button>
             </div>
           </div>
         </div>
diff --git a/ui/app/components/modals/deposit-ether-modal.js b/ui/app/components/modals/deposit-ether-modal.js
index 2daa7fa1d..09137d39a 100644
--- a/ui/app/components/modals/deposit-ether-modal.js
+++ b/ui/app/components/modals/deposit-ether-modal.js
@@ -7,6 +7,8 @@ const actions = require('../../actions')
 const { getNetworkDisplayName } = require('../../../../app/scripts/controllers/network/util')
 const ShapeshiftForm = require('../shapeshift-form')
 
+import Button from '../button'
+
 let DIRECT_DEPOSIT_ROW_TITLE
 let DIRECT_DEPOSIT_ROW_TEXT
 let COINBASE_ROW_TITLE
@@ -109,7 +111,10 @@ DepositEtherModal.prototype.renderRow = function ({
       ]),
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
-        h('button.btn-primary.btn--large.deposit-ether-modal__deposit-button', {
+        h(Button, {
+          type: 'primary',
+          className: 'deposit-ether-modal__deposit-button',
+          large: true,
           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 60a416304..d3e3c9a56 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -11,6 +11,7 @@ const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
 const copyToClipboard = require('copy-to-clipboard')
 const { checksumAddress } = require('../../util')
+import Button from '../button'
 
 function mapStateToPropsFactory () {
   let selectedIdentity = null
@@ -97,24 +98,31 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
     })
 }
 
-ExportPrivateKeyModal.prototype.renderButton = function (className, onClick, label) {
-  return h('button', {
-    className,
-    onClick,
-  }, label)
-}
-
 ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password, address, hideModal) {
   return h('div.export-private-key-buttons', {}, [
-    !privateKey && this.renderButton(
-      'btn-default btn--large export-private-key__button export-private-key__button--cancel',
-      () => hideModal(),
-      'Cancel'
-    ),
+    !privateKey && h(Button, {
+      type: 'default',
+      large: true,
+      className: 'export-private-key__button export-private-key__button--cancel',
+      onClick: () => hideModal(),
+    }, this.context.t('cancel')),
 
     (privateKey
-      ? this.renderButton('btn-primary btn--large export-private-key__button', () => hideModal(), this.context.t('done'))
-      : this.renderButton('btn-primary btn--large export-private-key__button', () => this.exportAccountAndGetPrivateKey(this.state.password, address), this.context.t('confirm'))
+      ? (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => hideModal(),
+        }, this.context.t('done'))
+      ) : (
+          h(Button, {
+          type: 'primary',
+          large: true,
+          className: 'export-private-key__button',
+          onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
+        }, this.context.t('confirm'))
+      )
     ),
 
   ])