Update buttons & colors to match design system (#6446)

* Refactoring button styles

* renaming buttons

* Add Link and Button styles

* Update new btn styles and storybook

* Fix tests

* Change font weight; Update storybook

* Fix linter

21 files changed, 300 insertions, 119 deletions

diff --git a/ui/app/components/app/add-token-button/index.scss b/ui/app/components/app/add-token-button/index.scss
index 39f404716..c4350a2d3 100644
--- a/ui/app/components/app/add-token-button/index.scss
+++ b/ui/app/components/app/add-token-button/index.scss
@@ -17,10 +17,7 @@
   }
 
   &__button {
-    font-size: 0.75rem;
+    @extend %small-link;
     margin: 1rem;
-    text-transform: uppercase;
-    color: $curious-blue;
-    cursor: pointer;
   }
 }
diff --git a/ui/app/components/app/coinbase-form.js b/ui/app/components/app/coinbase-form.js
deleted file mode 100644
index 24d287604..000000000
--- a/ui/app/components/app/coinbase-form.js
+++ /dev/null
@@ -1,69 +0,0 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../store/actions')
-
-CoinbaseForm.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect(mapStateToProps)(CoinbaseForm)
-
-
-function mapStateToProps (state) {
-  return {
-    warning: state.appState.warning,
-  }
-}
-
-inherits(CoinbaseForm, Component)
-
-function CoinbaseForm () {
-  Component.call(this)
-}
-
-CoinbaseForm.prototype.render = function () {
-  var props = this.props
-
-  return h('.flex-column', {
-    style: {
-      marginTop: '35px',
-      padding: '25px',
-      width: '100%',
-    },
-  }, [
-    h('.flex-row', {
-      style: {
-        justifyContent: 'space-around',
-        margin: '33px',
-        marginTop: '0px',
-      },
-    }, [
-      h('button.btn-green', {
-        onClick: this.toCoinbase.bind(this),
-      }, this.context.t('continueToCoinbase')),
-
-      h('button.btn-red', {
-        onClick: () => props.dispatch(actions.goHome()),
-      }, this.context.t('cancel')),
-    ]),
-  ])
-}
-
-CoinbaseForm.prototype.toCoinbase = function () {
-  const props = this.props
-  const address = props.buyView.buyAddress
-  props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-}
-
-CoinbaseForm.prototype.renderLoading = function () {
-  return h('img', {
-    style: {
-      width: '27px',
-      marginRight: '-27px',
-    },
-    src: 'images/loading.svg',
-  })
-}
diff --git a/ui/app/components/app/customize-gas-modal/index.js b/ui/app/components/app/customize-gas-modal/index.js
index dca77bb00..4434b8c25 100644
--- a/ui/app/components/app/customize-gas-modal/index.js
+++ b/ui/app/components/app/customize-gas-modal/index.js
@@ -382,7 +382,7 @@ CustomizeGasModal.prototype.render = function () {
             onClick: this.props.hideModal,
           }, [this.context.t('cancel')]),
           h(Button, {
-            type: 'primary',
+            type: 'secondary',
             className: 'send-v2__customize-gas__save',
             onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal),
             disabled: error,
diff --git a/ui/app/components/app/modal/modal.component.js b/ui/app/components/app/modal/modal.component.js
index 49e131b3c..44b180ac8 100644
--- a/ui/app/components/app/modal/modal.component.js
+++ b/ui/app/components/app/modal/modal.component.js
@@ -20,7 +20,7 @@ export default class Modal extends PureComponent {
   }
 
   static defaultProps = {
-    submitType: 'primary',
+    submitType: 'secondary',
     cancelType: 'default',
   }
 
diff --git a/ui/app/components/app/modal/tests/modal.component.test.js b/ui/app/components/app/modal/tests/modal.component.test.js
index a13d7c06a..5922177a6 100644
--- a/ui/app/components/app/modal/tests/modal.component.test.js
+++ b/ui/app/components/app/modal/tests/modal.component.test.js
@@ -12,7 +12,7 @@ describe('Modal Component', () => {
     assert.equal(wrapper.find('.modal-container').length, 1)
     const buttons = wrapper.find(Button)
     assert.equal(buttons.length, 1)
-    assert.equal(buttons.at(0).props().type, 'primary')
+    assert.equal(buttons.at(0).props().type, 'secondary')
   })
 
   it('should render a modal with a cancel and a submit button', () => {
@@ -38,7 +38,7 @@ describe('Modal Component', () => {
     cancelButton.simulate('click')
     assert.equal(handleCancel.callCount, 1)
 
-    assert.equal(submitButton.props().type, 'primary')
+    assert.equal(submitButton.props().type, 'secondary')
     assert.equal(submitButton.props().children, 'Submit')
     assert.equal(handleSubmit.callCount, 0)
     submitButton.simulate('click')
diff --git a/ui/app/components/app/modals/account-details-modal.js b/ui/app/components/app/modals/account-details-modal.js
index 94ed04df9..1b1ca6b8e 100644
--- a/ui/app/components/app/modals/account-details-modal.js
+++ b/ui/app/components/app/modals/account-details-modal.js
@@ -84,7 +84,7 @@ AccountDetailsModal.prototype.render = function () {
       h('div.account-modal-divider'),
 
       h(Button, {
-        type: 'primary',
+        type: 'secondary',
         className: 'account-modal__button',
         onClick: () => global.platform.openWindow({ url: genAccountLink(address, network) }),
       }, this.context.t('etherscanView')),
@@ -92,7 +92,7 @@ AccountDetailsModal.prototype.render = function () {
       // Holding on redesign for Export Private Key functionality
 
       exportPrivateKeyFeatureEnabled ? h(Button, {
-        type: 'primary',
+        type: 'secondary',
         className: 'account-modal__button',
         onClick: () => showExportPrivateKeyModal(),
       }, this.context.t('exportPrivateKey')) : null,
diff --git a/ui/app/components/app/modals/customize-gas/customize-gas.component.js b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
index 5db5c79e7..178f45729 100644
--- a/ui/app/components/app/modals/customize-gas/customize-gas.component.js
+++ b/ui/app/components/app/modals/customize-gas/customize-gas.component.js
@@ -128,7 +128,7 @@ export default class CustomizeGas extends Component {
                 { t('cancel') }
               </Button>
               <Button
-                type="primary"
+                type="secondary"
                 className="customize-gas__save"
                 onClick={() => {
                   metricsEvent({
diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js
index 6f622a17c..e4ab7eba1 100644
--- a/ui/app/components/app/modals/deposit-ether-modal.js
+++ b/ui/app/components/app/modals/deposit-ether-modal.js
@@ -119,7 +119,7 @@ DepositEtherModal.prototype.renderRow = function ({
 
       !hideButton && h('div.deposit-ether-modal__buy-row__button', [
         h(Button, {
-          type: 'primary',
+          type: 'secondary',
           className: 'deposit-ether-modal__deposit-button',
           large: true,
           onClick: onButtonClick,
diff --git a/ui/app/components/app/modals/edit-account-name-modal.js b/ui/app/components/app/modals/edit-account-name-modal.js
index 41a9862e9..aa21765c4 100644
--- a/ui/app/components/app/modals/edit-account-name-modal.js
+++ b/ui/app/components/app/modals/edit-account-name-modal.js
@@ -66,7 +66,7 @@ EditAccountNameModal.prototype.render = function () {
         value: this.state.inputText,
       }, []),
 
-      h('button.btn-clear.edit-account-name-modal-save-button.allcaps', {
+      h('button.button.btn-secondary.edit-account-name-modal-save-button.allcaps', {
         onClick: () => {
           if (this.state.inputText.length !== 0) {
             setAccountLabel(identity.address, this.state.inputText)
diff --git a/ui/app/components/app/modals/export-private-key-modal.js b/ui/app/components/app/modals/export-private-key-modal.js
index 639887d4c..70987330a 100644
--- a/ui/app/components/app/modals/export-private-key-modal.js
+++ b/ui/app/components/app/modals/export-private-key-modal.js
@@ -110,14 +110,14 @@ ExportPrivateKeyModal.prototype.renderButtons = function (privateKey, password,
     (privateKey
       ? (
           h(Button, {
-          type: 'primary',
+          type: 'secondary',
           large: true,
           className: 'export-private-key__button',
           onClick: () => hideModal(),
         }, this.context.t('done'))
       ) : (
           h(Button, {
-          type: 'primary',
+          type: 'secondary',
           large: true,
           className: 'export-private-key__button',
           onClick: () => this.exportAccountAndGetPrivateKey(this.state.password, address),
diff --git a/ui/app/components/app/modals/hide-token-confirmation-modal.js b/ui/app/components/app/modals/hide-token-confirmation-modal.js
index 8a9a48fd2..e2b098923 100644
--- a/ui/app/components/app/modals/hide-token-confirmation-modal.js
+++ b/ui/app/components/app/modals/hide-token-confirmation-modal.js
@@ -67,12 +67,12 @@ HideTokenConfirmationModal.prototype.render = function () {
       ]),
 
       h('div.hide-token-confirmation__buttons', {}, [
-        h('button.btn-cancel.hide-token-confirmation__button.allcaps', {
+        h('button.btn-default.hide-token-confirmation__button.btn--large', {
           onClick: () => hideModal(),
         }, [
           this.context.t('cancel'),
         ]),
-        h('button.btn-clear.hide-token-confirmation__button.allcaps', {
+        h('button.btn-secondary.hide-token-confirmation__button.btn--large', {
           onClick: () => hideToken(address),
         }, [
           this.context.t('hide'),
diff --git a/ui/app/components/app/modals/notification-modal.js b/ui/app/components/app/modals/notification-modal.js
index 2d73b2cfa..b8503ec1a 100644
--- a/ui/app/components/app/modals/notification-modal.js
+++ b/ui/app/components/app/modals/notification-modal.js
@@ -37,11 +37,11 @@ class NotificationModal extends Component {
 
         showButtons && h('div.notification-modal__buttons', [
 
-          showCancelButton && h('div.btn-cancel.notification-modal__buttons__btn', {
+          showCancelButton && h('div.btn-default.notification-modal__buttons__btn', {
             onClick: hideModal,
           }, 'Cancel'),
 
-          showConfirmButton && h('div.btn-clear.notification-modal__buttons__btn', {
+          showConfirmButton && h('div.button.btn-secondary.notification-modal__buttons__btn', {
             onClick: () => {
               onConfirm()
               hideModal()
diff --git a/ui/app/components/app/shapeshift-form.js b/ui/app/components/app/shapeshift-form.js
index 11459fd5e..34a6f3acd 100644
--- a/ui/app/components/app/shapeshift-form.js
+++ b/ui/app/components/app/shapeshift-form.js
@@ -245,7 +245,7 @@ ShapeshiftForm.prototype.render = function () {
       ]),
 
       !depositAddress && h(Button, {
-        type: 'primary',
+        type: 'secondary',
         large: true,
         className: `${btnClass} shapeshift-form__shapeshift-buy-btn`,
         disabled: !token,
diff --git a/ui/app/components/app/signature-request.js b/ui/app/components/app/signature-request.js
index e47791b67..fa237f1d1 100644
--- a/ui/app/components/app/signature-request.js
+++ b/ui/app/components/app/signature-request.js
@@ -311,7 +311,7 @@ SignatureRequest.prototype.renderFooter = function () {
       },
     }, this.context.t('cancel')),
     h(Button, {
-      type: 'primary',
+      type: 'secondary',
       large: true,
       className: 'request-signature__footer__sign-button',
       onClick: event => {
diff --git a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
index fa63b6fd3..3f6abbb00 100644
--- a/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/app/transaction-view-balance/transaction-view-balance.component.js
@@ -87,7 +87,7 @@ export default class TransactionViewBalance extends PureComponent {
         {
           !selectedToken && (
             <Button
-              type="primary"
+              type="secondary"
               className="transaction-view-balance__button"
               onClick={() => {
                 metricsEvent({
@@ -105,7 +105,7 @@ export default class TransactionViewBalance extends PureComponent {
           )
         }
         <Button
-          type="primary"
+          type="secondary"
           className="transaction-view-balance__button"
           onClick={() => {
             metricsEvent({
diff --git a/ui/app/components/app/wallet-view.js b/ui/app/components/app/wallet-view.js
index cec8228b1..b8bae5421 100644
--- a/ui/app/components/app/wallet-view.js
+++ b/ui/app/components/app/wallet-view.js
@@ -190,7 +190,7 @@ WalletView.prototype.render = function () {
           identities[selectedAddress].name,
         ]),
 
-        h('button.btn-clear.wallet-view__details-button.allcaps', this.context.t('details')),
+        h('button.btn-secondary.wallet-view__details-button', this.context.t('details')),
       ]),
     ]),
 
diff --git a/ui/app/components/ui/button/button.component.js b/ui/app/components/ui/button/button.component.js
index 5d19219b4..01d946927 100644
--- a/ui/app/components/ui/button/button.component.js
+++ b/ui/app/components/ui/button/button.component.js
@@ -17,6 +17,10 @@ const typeHash = {
   confirm: CLASSNAME_CONFIRM,
   raised: CLASSNAME_RAISED,
   'first-time': CLASSNAME_FIRST_TIME,
+  warning: 'btn-warning',
+  danger: 'btn-danger',
+  'danger-primary': 'btn-danger-primary',
+  link: 'btn-link',
 }
 
 export default class Button extends Component {
diff --git a/ui/app/components/ui/button/button.stories.js b/ui/app/components/ui/button/button.stories.js
index 667824a47..9df53439d 100644
--- a/ui/app/components/ui/button/button.stories.js
+++ b/ui/app/components/ui/button/button.stories.js
@@ -2,57 +2,70 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import Button from '.'
-import { text } from '@storybook/addon-knobs/react'
+import { text, boolean } from '@storybook/addon-knobs/react'
 
+// ', 'secondary', 'default', 'warning', 'danger', 'danger-primary', 'link'], 'primary')}
 storiesOf('Button', module)
-  .add('primary', () =>
+  .add('Button - Primary', () =>
     <Button
       onClick={action('clicked')}
       type="primary"
+      disabled={boolean('disabled', false)}
     >
       {text('text', 'Click me')}
     </Button>
   )
-  .add('secondary', () =>
+  .add('Button - Secondary', () =>
     <Button
       onClick={action('clicked')}
       type="secondary"
+      disabled={boolean('disabled', false)}
     >
       {text('text', 'Click me')}
     </Button>
   )
-  .add('default', () => (
+  .add('Button - Default', () =>
     <Button
       onClick={action('clicked')}
       type="default"
+      disabled={boolean('disabled', false)}
     >
       {text('text', 'Click me')}
     </Button>
-  ))
-  .add('large primary', () => (
+  )
+  .add('Button - Warning', () =>
     <Button
       onClick={action('clicked')}
-      type="primary"
-      large
+      type="warning"
+      disabled={boolean('disabled', false)}
     >
       {text('text', 'Click me')}
     </Button>
-  ))
-  .add('large secondary', () => (
+  )
+  .add('Button - Danger', () =>
     <Button
       onClick={action('clicked')}
-      type="secondary"
-      large
+      type="danger"
+      disabled={boolean('disabled', false)}
     >
       {text('text', 'Click me')}
     </Button>
-  ))
-  .add('large default', () => (
+  )
+  .add('Button - Danger Primary', () =>
     <Button
       onClick={action('clicked')}
-      type="default"
-      large
+      type="danger-primary"
+      disabled={boolean('disabled', false)}
     >
       {text('text', 'Click me')}
     </Button>
-  ))
+  )
+  .add('Button - Link', () =>
+    <Button
+      onClick={action('clicked')}
+      type="link"
+      disabled={boolean('disabled', false)}
+    >
+      {text('text', 'Click me')}
+    </Button>
+  )
diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss
new file mode 100644
index 000000000..0fc87415b
--- /dev/null
+++ b/ui/app/components/ui/button/buttons.scss
@@ -0,0 +1,244 @@
+/*
+  Buttons
+ */
+
+$hover-secondary: #B0D7F2;
+$hover-default: #B3B3B3;
+$hover-confirm: #0372C3;
+$hover-red: #FEB6BF;
+$hover-red-primary: #C72837;
+$hover-orange: #FFD3B5;
+
+%button {
+  @include h6;
+
+  font-weight: 500;
+  font-family: Roboto, Arial;
+  line-height: 1.25rem;
+  padding: .75rem 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: 6px;
+  width: 100%;
+  outline: none;
+  transition: border-color .3s ease, background-color .3s ease;
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: .5;
+    pointer-events: none;
+  }
+}
+
+%link {
+  @include h4;
+
+  color: $Blue-500;
+  line-height: 1.25rem;
+  cursor: pointer;
+  background-color: transparent;
+
+  &:hover {
+    color: $Blue-400;
+  }
+
+  &:active {
+    color: $Blue-600;
+  }
+
+  &--disabled,
+  &[disabled] {
+    cursor: auto;
+    opacity: 1;
+    pointer-events: none;
+    color: $hover-secondary;
+  }
+}
+
+%small-link {
+  @extend %link;
+  @include h6;
+}
+
+.button {
+  @extend %button;
+}
+
+.btn-secondary {
+  color: $Blue-500;
+  border: 2px solid $hover-secondary;
+
+  &:hover {
+    border-color: $Blue-500;
+  }
+
+  &:active {
+    background: $Blue-000;
+    border-color: $Blue-500;
+  }
+
+  &--disabled,
+  &[disabled] {
+    opacity: 1;
+    color: $hover-secondary;
+  }
+}
+
+.btn-warning {
+  color: $Orange-500;
+  border: 2px solid $hover-orange;
+
+  &:hover {
+    border-color: $Orange-500;
+  }
+
+  &:active {
+    background: $Orange-000;
+    border-color: $Orange-500;
+  }
+
+  &--disabled,
+  &[disabled] {
+    opacity: 1;
+    color: $hover-orange;
+  }
+}
+
+.btn-danger {
+  color: $Red-500;
+  border: 2px solid $hover-red;
+
+  &:hover {
+    border-color: $Red-500;
+  }
+
+  &:active {
+    background: $Red-000;
+    border-color: $Red-500;
+  }
+
+  &--disabled,
+  &[disabled] {
+    opacity: 1;
+    color: $hover-red;
+  }
+}
+
+.btn-danger-primary {
+  color: $white;
+  border: 2px solid $Red-500;
+  background-color: $Red-500;
+
+  &:hover {
+    border-color: $hover-red-primary;
+    background-color: $hover-red-primary;
+  }
+
+  &:active {
+    background: $Red-600;
+    border-color: $Red-600;
+  }
+
+  &--disabled,
+  &[disabled] {
+    opacity: 1;
+    border-color: $hover-red;
+    background-color: $hover-red;
+  }
+}
+
+.btn-default {
+  color: $Grey-500;
+  border: 2px solid $hover-default;
+
+  &:hover {
+    border-color: $Grey-500;
+  }
+
+  &:active {
+    background: #FBFBFC;
+    border-color: $Grey-500;
+  }
+
+  &--disabled,
+  &[disabled] {
+    opacity: 1;
+    color: $hover-default;
+  }
+}
+
+.btn-primary {
+  color: $white;
+  border: 2px solid $Blue-500;
+  background-color: $Blue-500;
+
+  &:hover {
+    border-color: $hover-confirm;
+    background-color: $hover-confirm;
+  }
+
+  &:active {
+    background: $Blue-600;
+    border-color: $Blue-600;
+  }
+
+  &--disabled,
+  &[disabled] {
+    border-color: $hover-secondary;
+    background-color: $hover-secondary;
+  }
+}
+
+.btn-link {
+  @extend %link;
+}
+
+.btn--large {
+  min-height: 54px;
+}
+
+/**
+  All Buttons styles are deviations from design guide
+ */
+
+.btn-raised {
+  color: $curious-blue;
+  background-color: $white;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+  padding: 6px;
+  height: initial;
+  min-height: initial;
+  width: initial;
+  min-width: initial;
+}
+
+.btn--first-time {
+  height: 54px;
+  width: 198px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .14);
+  color: $white;
+  font-size: 1.25rem;
+  font-weight: 500;
+  transition: 200ms ease-in-out;
+  background-color: rgba(247, 134, 28, .9);
+  border-radius: 0;
+}
+
+button[disabled],
+input[type="submit"][disabled] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+button.primary {
+  padding: 8px 12px;
+  background: #f7861c;
+  box-shadow: 0 3px 6px rgba(247, 134, 28, .36);
+  color: $white;
+  font-size: 1.1em;
+  font-family: Roboto;
+  text-transform: uppercase;
+}
diff --git a/ui/app/components/ui/page-container/index.scss b/ui/app/components/ui/page-container/index.scss
index b71a3cb9d..003c5a0e2 100644
--- a/ui/app/components/ui/page-container/index.scss
+++ b/ui/app/components/ui/page-container/index.scss
@@ -55,11 +55,6 @@
     border-top: 1px solid $geyser;
     flex: 0 0 auto;
 
-    .btn-default,
-    .btn-confirm {
-      font-size: 1rem;
-    }
-
     header {
       display: flex;
       flex-flow: row;
@@ -86,9 +81,6 @@
   }
 
   &__footer-button {
-    height: 55px;
-    font-size: 1rem;
-    text-transform: uppercase;
     margin-right: 16px;
 
     &:last-of-type {
diff --git a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
index 85b16cefe..4ef203521 100644
--- a/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/ui/page-container/page-container-footer/page-container-footer.component.js
@@ -45,7 +45,7 @@ export default class PageContainerFooter extends Component {
           </Button>}
 
           <Button
-            type={submitButtonType || 'primary'}
+            type={submitButtonType || 'secondary'}
             large
             className="page-container__footer-button"
             disabled={disabled}