Merge pull request #5536 from whymarrh/add-token-help

Add clarifying text to the "Add Token" button

3 files changed, 61 insertions, 0 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;
+  }
+}