Update designs for Add Token screen

1 files changed, 49 insertions, 0 deletions

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>
+      )
+  }
+}