Extract Add Token button into its own component

6 files changed, 82 insertions, 23 deletions

diff --git a/ui/app/components/add-token-button/add-token-button.component.js b/ui/app/components/add-token-button/add-token-button.component.js
new file mode 100644
index 000000000..10887aed8
--- /dev/null
+++ b/ui/app/components/add-token-button/add-token-button.component.js
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+
+export default class AddTokenButton extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    onClick: () => {},
+  }
+
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { onClick } = this.props
+
+    return (
+      <div className="add-token-button">
+        <h1 className="add-token-button__help-header">{t('missingYourTokens')}</h1>
+        <p className="add-token-button__help-desc">{t('clickToAdd', [t('addToken')])}</p>
+        <div
+          className="add-token-button__button"
+          onClick={onClick}
+        >
+          {t('addToken')}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/ui/app/components/add-token-button/index.js b/ui/app/components/add-token-button/index.js
new file mode 100644
index 000000000..15c4fe6ca
--- /dev/null
+++ b/ui/app/components/add-token-button/index.js
@@ -0,0 +1 @@
+export { default } from './add-token-button.component'
diff --git a/ui/app/components/add-token-button/index.scss b/ui/app/components/add-token-button/index.scss
new file mode 100644
index 000000000..39f404716
--- /dev/null
+++ b/ui/app/components/add-token-button/index.scss
@@ -0,0 +1,26 @@
+.add-token-button {
+  display: flex;
+  flex-direction: column;
+  color: lighten($scorpion, 25%);
+  width: 185px;
+  margin: 36px auto;
+  text-align: center;
+
+  &__help-header {
+    font-weight: bold;
+    font-size: 1rem;
+  }
+
+  &__help-desc {
+    font-size: 0.75rem;
+    margin-top: 1rem;
+  }
+
+  &__button {
+    font-size: 0.75rem;
+    margin: 1rem;
+    text-transform: uppercase;
+    color: $curious-blue;
+    cursor: pointer;
+  }
+}
diff --git a/ui/app/components/index.scss b/ui/app/components/index.scss
index bf34fd732..beffdb221 100644
--- a/ui/app/components/index.scss
+++ b/ui/app/components/index.scss
@@ -1,5 +1,7 @@
 @import './app-header/index';
 
+@import './add-token-button/index';
+
 @import './button-group/index';
 
 @import './card/index';
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 064a6ab55..8a7cb0f8d 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -17,7 +17,7 @@ const TokenList = require('./token-list')
 const selectors = require('../selectors')
 const { ADD_TOKEN_ROUTE } = require('../routes')
 
-import Button from './button'
+import AddTokenButton from './add-token-button'
 
 module.exports = compose(
   withRouter,
@@ -100,15 +100,30 @@ WalletView.prototype.renderWalletBalance = function () {
   ])
 }
 
+WalletView.prototype.renderAddToken = function () {
+  const {
+    sidebarOpen,
+    hideSidebar,
+    history,
+  } = this.props
+
+  return h(AddTokenButton, {
+    onClick () {
+      history.push(ADD_TOKEN_ROUTE)
+      if (sidebarOpen) {
+        hideSidebar()
+      }
+    },
+  })
+}
+
 WalletView.prototype.render = function () {
   const {
     responsiveDisplayClassname,
     selectedAddress,
     keyrings,
     showAccountDetailModal,
-    sidebarOpen,
     hideSidebar,
-    history,
     identities,
   } = this.props
   // temporary logs + fake extra wallets
@@ -201,14 +216,7 @@ WalletView.prototype.render = function () {
 
     h(TokenList),
 
-    h(Button, {
-      type: 'primary',
-      className: 'wallet-view__add-token-button',
-      onClick: () => {
-        history.push(ADD_TOKEN_ROUTE)
-        sidebarOpen && hideSidebar()
-      },
-    }, this.context.t('addToken')),
+    this.renderAddToken(),
   ])
 }
 
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 8e963d495..233e781ef 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -120,18 +120,6 @@ $wallet-view-bg: $alabaster;
       }
     }
   }
-
-  &__add-token-button {
-    flex: 0 0 auto;
-    margin: 36px auto;
-    background: none;
-    transition: border-color .3s ease;
-    width: 150px;
-
-    &:hover {
-      border-color: $curious-blue;
-    }
-  }
 }
 
 @media screen and (min-width: 576px) {