diff options
author | kumavis <kumavis@users.noreply.github.com> | 2018-05-23 03:53:59 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-05-23 03:53:59 +0800 |
commit | b5bbfd32648a7deb0fd8b25c12825697e522adf6 (patch) | |
tree | dab36d56c4eaf230512b7430ddb3baf75356eab0 /ui/app/components/info-box | |
parent | a8e0d38cfbb1c01705b56288511c2a8ce392e25d (diff) | |
parent | 8245bf010e22dda3e00c044429e3f5b880691fcb (diff) | |
download | tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.gz tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.tar.zst tangerine-wallet-browser-b5bbfd32648a7deb0fd8b25c12825697e522adf6.zip |
Merge pull request #4308 from MetaMask/i4232-addtoken
Update designs for Add Token screen
Diffstat (limited to 'ui/app/components/info-box')
-rw-r--r-- | ui/app/components/info-box/index.js | 2 | ||||
-rw-r--r-- | ui/app/components/info-box/index.scss | 24 | ||||
-rw-r--r-- | ui/app/components/info-box/info-box.component.js | 49 |
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> + ) + } +} |