Update designs for Add Token screen

3 files changed, 75 insertions, 0 deletions

diff --git a/ui/app/components/info-box/index.js b/ui/app/components/info-box/index.js
new file mode 100644
index 000000000..6110422ed
--- /dev/null
+++ b/ui/app/components/info-box/index.js
@@ -0,0 +1,2 @@
+import InfoBox from './info-box.component'
+module.exports = InfoBox
diff --git a/ui/app/components/info-box/index.scss b/ui/app/components/info-box/index.scss
new file mode 100644
index 000000000..8b5626d79
--- /dev/null
+++ b/ui/app/components/info-box/index.scss
@@ -0,0 +1,24 @@
+.info-box {
+  border-radius: 4px;
+  background-color: $alabaster;
+  position: relative;
+  padding: 16px;
+  display: flex;
+  flex-flow: column;
+  color: $mid-gray;
+
+  &__close::after {
+    content: '\00D7';
+    font-size: 29px;
+    font-weight: 200;
+    color: $dusty-gray;
+    position: absolute;
+    right: 12px;
+    top: 0;
+    cursor: pointer;
+  }
+
+  &__description {
+    font-size: .75rem;
+  }
+}
diff --git a/ui/app/components/info-box/info-box.component.js b/ui/app/components/info-box/info-box.component.js
new file mode 100644
index 000000000..8688b8e8f
--- /dev/null
+++ b/ui/app/components/info-box/info-box.component.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class InfoBox extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
+  static propTypes = {
+    onClose: PropTypes.func,
+    title: PropTypes.string,
+    description: PropTypes.string,
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isShowing: true,
+    }
+  }
+
+  handleClose () {
+    const { onClose } = this.props
+
+    if (onClose) {
+      onClose()
+    } else {
+      this.setState({ isShowing: false })
+    }
+  }
+
+  render () {
+    const { title, description } = this.props
+
+    return !this.state.isShowing
+      ? null
+      : (
+        <div className="info-box">
+          <div
+            className="info-box__close"
+            onClick={() => this.handleClose()}
+          />
+          <div className="info-box__title">{ title }</div>
+          <div className="info-box__description">{ description }</div>
+        </div>
+      )
+  }
+}