From b9c2994d24e688305d63aaefd7fac88d88773ad9 Mon Sep 17 00:00:00 2001 From: brunobar79 Date: Tue, 10 Jul 2018 19:19:29 -0400 Subject: finish warning modal UI --- ui/app/components/account-menu/index.js | 5 ++ .../confirm-remove-account.component.js | 60 ++++++++++++++++++++++ .../confirm-remove-account.container.js | 13 +++++ .../modals/confirm-remove-account/index.js | 2 + ui/app/components/modals/index.scss | 11 ++++ ui/app/components/modals/modal.js | 19 ++++++- ui/app/css/itcss/components/account-menu.scss | 3 +- ui/app/css/itcss/components/new-account.scss | 1 + 8 files changed, 111 insertions(+), 3 deletions(-) create mode 100644 ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js create mode 100644 ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js create mode 100644 ui/app/components/modals/confirm-remove-account/index.js (limited to 'ui/app') diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 9530d6aeb..b561ea186 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -68,6 +68,9 @@ function mapDispatchToProps (dispatch) { dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, + showForgetAccountConfirmationModal: (address) => { + return dispatch(actions.showModal({ name: 'CONFIRM_FORGET_ACCOUNT', address })) + }, } } @@ -204,7 +207,9 @@ AccountMenu.prototype.renderForgetAccount = function (keyring, address) { AccountMenu.prototype.forgetAccount = function (e, address) { e.preventDefault() e.stopPropagation() + const { showForgetAccountConfirmationModal } = this.props console.log('should forget address: ', address) + showForgetAccountConfirmationModal(address) } AccountMenu.prototype.renderKeyringType = function (keyring) { diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js new file mode 100644 index 000000000..93be2a4e7 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.component.js @@ -0,0 +1,60 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import Button from '../../button' +import { addressSummary } from '../../../util' + +class ConfirmRemoveAccount extends Component { + static propTypes = { + hideModal: PropTypes.func.isRequired, + removeAccount: PropTypes.func.isRequired, + address: PropTypes.string.isRequired, + } + + static contextTypes = { + t: PropTypes.func, + } + + handleRemove () { + this.props.removeAccount(this.props.address) + .then(() => this.props.hideModal()) + } + + render () { + const { t } = this.context + + return ( +
+
+
+ { `${t('removeAccount')}` } +
+
+ {addressSummary(this.props.address)} +
+
+ { t('removeAccountDescription') } + { t('learnMore') } +
+
+
+ + +
+
+ ) + } +} + +export default ConfirmRemoveAccount diff --git a/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js new file mode 100644 index 000000000..9a612f2f6 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/confirm-remove-account.container.js @@ -0,0 +1,13 @@ +import { connect } from 'react-redux' +import ConfirmRemoveAccount from './confirm-remove-account.component' + +const { hideModal, removeAccount } = require('../../../actions') + +const mapDispatchToProps = dispatch => { + return { + hideModal: () => dispatch(hideModal()), + removeAccount: (address) => dispatch(removeAccount(address)), + } +} + +export default connect(null, mapDispatchToProps)(ConfirmRemoveAccount) diff --git a/ui/app/components/modals/confirm-remove-account/index.js b/ui/app/components/modals/confirm-remove-account/index.js new file mode 100644 index 000000000..9763fbe05 --- /dev/null +++ b/ui/app/components/modals/confirm-remove-account/index.js @@ -0,0 +1,2 @@ +import ConfirmRemoveAccount from './confirm-remove-account.container' +module.exports = ConfirmRemoveAccount diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss index ad6fe16d3..591e35148 100644 --- a/ui/app/components/modals/index.scss +++ b/ui/app/components/modals/index.scss @@ -17,6 +17,17 @@ text-align: center; font-size: .875rem; } + + &__address { + text-align: center; + font-size: 1rem; + margin-top: 20px; + margin-bottom: 20px; + } + + &__link { + color: #2f9ae0; + } &__content { overflow-y: auto; diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 85e85597a..758cfa4a2 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -1,4 +1,5 @@ -const Component = require('react').Component +const React = require('react') +const Component = React.Component const h = require('react-hyperscript') const inherits = require('util').inherits const connect = require('react-redux').connect @@ -20,6 +21,7 @@ const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const CustomizeGasModal = require('../customize-gas-modal') const NotifcationModal = require('./notification-modal') const ConfirmResetAccount = require('./confirm-reset-account') +const ConfirmRemoveAccount = require('./confirm-remove-account') const TransactionConfirmed = require('./transaction-confirmed') const WelcomeBeta = require('./welcome-beta') const Notification = require('./notification') @@ -241,6 +243,19 @@ const MODALS = { }, }, + CONFIRM_FORGET_ACCOUNT: { + contents: h(ConfirmRemoveAccount), + mobileModalStyle: { + ...modalContainerMobileStyle, + }, + laptopModalStyle: { + ...modalContainerLaptopStyle, + }, + contentStyle: { + borderRadius: '8px', + }, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), @@ -370,7 +385,7 @@ Modal.prototype.render = function () { backdropStyle: BACKDROPSTYLE, closeOnClick: !disableBackdropClick, }, - children, + React.cloneElement(children, {...this.props.modalState.props}, null), ) } diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 20fc68424..ba5d176ef 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -88,7 +88,8 @@ .forget-account-icon { width: 25px; - margin-left: 10px; + padding-left: 10px; + height: 25px; } &:hover { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index 7dfa839ab..66eb47378 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ b/ui/app/css/itcss/components/new-account.scss @@ -156,6 +156,7 @@ .hw-connect { &__title { padding-top: 10px; + font-weight: 500; } &__msg { -- cgit v1.2.3