diff options
Diffstat (limited to 'ui/app/components')
6 files changed, 233 insertions, 1 deletions
diff --git a/ui/app/components/app/home-notification/home-notification.component.js b/ui/app/components/app/home-notification/home-notification.component.js new file mode 100644 index 000000000..cc46eb53a --- /dev/null +++ b/ui/app/components/app/home-notification/home-notification.component.js @@ -0,0 +1,110 @@ +import React, { PureComponent } from 'react' +import {Tooltip as ReactTippy} from 'react-tippy' +import PropTypes from 'prop-types' +import Button from '../../ui/button' + +export default class HomeNotification extends PureComponent { + static contextTypes = { + metricsEvent: PropTypes.func, + } + + static defaultProps = { + onAccept: null, + ignoreText: null, + onIgnore: null, + infoText: null, + } + + static propTypes = { + acceptText: PropTypes.string.isRequired, + onAccept: PropTypes.func, + ignoreText: PropTypes.string, + onIgnore: PropTypes.func, + descriptionText: PropTypes.string.isRequired, + infoText: PropTypes.string, + } + + handleAccept = () => { + this.props.onAccept() + } + + handleIgnore = () => { + this.props.onIgnore() + } + + render () { + const { descriptionText, acceptText, onAccept, ignoreText, onIgnore, infoText } = this.props + + return ( + <div className="home-notification"> + <div className="home-notification__header"> + <div className="home-notification__header-container"> + <img + className="home-notification__icon" + alt="" + src="images/icons/connect.svg" + /> + <div className="home-notification__text"> + { descriptionText } + </div> + </div> + { + infoText ? ( + <ReactTippy + style={{ + display: 'flex', + }} + html={( + <p className="home-notification-tooltip__content"> + {infoText} + </p> + )} + offset={-36} + distance={36} + animation="none" + position="top" + arrow + theme="info" + > + <img + alt="" + src="images/icons/info.svg" + /> + </ReactTippy> + ) : ( + null + ) + } + </div> + <div className="home-notification__buttons"> + { + (onAccept && acceptText) ? ( + <Button + type="primary" + className="home-notification__accept-button" + onClick={this.handleAccept} + > + { acceptText } + </Button> + ) : ( + null + ) + } + { + (onIgnore && ignoreText) ? ( + <Button + type="secondary" + className="home-notification__ignore-button" + onClick={this.handleIgnore} + > + { ignoreText } + </Button> + ) : ( + null + ) + } + </div> + </div> + ) + } +} diff --git a/ui/app/components/app/home-notification/index.js b/ui/app/components/app/home-notification/index.js new file mode 100644 index 000000000..918a35be2 --- /dev/null +++ b/ui/app/components/app/home-notification/index.js @@ -0,0 +1 @@ +export { default } from './home-notification.component' diff --git a/ui/app/components/app/home-notification/index.scss b/ui/app/components/app/home-notification/index.scss new file mode 100644 index 000000000..9cc868d46 --- /dev/null +++ b/ui/app/components/app/home-notification/index.scss @@ -0,0 +1,106 @@ +.tippy-tooltip.info-theme { + background: rgba(36, 41, 46, 0.9); + color: $white; + border-radius: 8px; +} + +.home-notification { + background: rgba(36, 41, 46, 0.9); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); + border-radius: 8px; + height: 116px; + padding: 16px; + margin: 8px; + + display: flex; + flex-flow: column; + justify-content: space-between; + + &__header-container { + display: flex; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__text { + font-family: Roboto, 'sans-serif'; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: $white; + margin-left: 10px; + margin-right: 8px; + } + + .fa-info-circle { + color: #6A737D; + } + + &__ignore-button { + border: 2px solid #6A737D; + box-sizing: border-box; + border-radius: 6px; + color: $white; + background-color: inherit; + height: 34px; + width: 155px; + padding: 0; + + &:hover { + border-color: #6A737D; + background-color: #6A737D; + } + + &:active { + background-color: #141618; + } + } + + &__accept-button { + border: 2px solid #6A737D; + box-sizing: border-box; + border-radius: 6px; + color: $white; + background-color: inherit; + height: 34px; + width: 155px; + padding: 0; + + &:hover { + border-color: #6A737D; + background-color: #6A737D; + } + + &:active { + background-color: #141618; + } + } + + &__buttons { + display: flex; + width: 100%; + justify-content: space-between; + flex-direction: row-reverse; + } +} + +.home-notification-tooltip { + &__tooltip-container { + display: flex; + } + + &__content { + font-family: Roboto, 'sans-serif'; + font-style: normal; + font-weight: normal; + font-size: 12px; + color: $white; + text-align: left; + display: inline-block; + width: 200px; + } +} diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss index 1236f0c38..9b7da8c2e 100644 --- a/ui/app/components/app/index.scss +++ b/ui/app/components/app/index.scss @@ -79,3 +79,5 @@ @import 'gas-customization/gas-price-button-group/index'; @import '../ui/toggle-button/index'; + +@import 'home-notification/index'; diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js index 3c096e3fd..157e7200b 100644 --- a/ui/app/components/app/transaction-list/transaction-list.component.js +++ b/ui/app/components/app/transaction-list/transaction-list.component.js @@ -10,11 +10,13 @@ export default class TransactionList extends PureComponent { } static defaultProps = { + children: null, pendingTransactions: [], completedTransactions: [], } static propTypes = { + children: PropTypes.node, pendingTransactions: PropTypes.array, completedTransactions: PropTypes.array, selectedToken: PropTypes.object, @@ -120,6 +122,7 @@ export default class TransactionList extends PureComponent { return ( <div className="transaction-list"> { this.renderTransactions() } + { this.props.children } </div> ) } diff --git a/ui/app/components/app/transaction-view/transaction-view.component.js b/ui/app/components/app/transaction-view/transaction-view.component.js index 7014ca173..fb2c2145c 100644 --- a/ui/app/components/app/transaction-view/transaction-view.component.js +++ b/ui/app/components/app/transaction-view/transaction-view.component.js @@ -10,6 +10,14 @@ export default class TransactionView extends PureComponent { t: PropTypes.func, } + static propTypes = { + children: PropTypes.node, + } + + static defaultProps = { + children: null, + } + render () { return ( <div className="transaction-view"> @@ -20,7 +28,9 @@ export default class TransactionView extends PureComponent { <div className="transaction-view__balance-wrapper"> <TransactionViewBalance /> </div> - <TransactionList /> + <TransactionList> + { this.props.children } + </TransactionList> </div> ) } |