finish warning modal UI

8 files changed, 111 insertions, 3 deletions

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 (
+      <div className="modal-container">
+        <div className="modal-container__content">
+          <div className="modal-container__title">
+            { `${t('removeAccount')}` }
+          </div>
+          <div className="modal-container__address">
+            {addressSummary(this.props.address)}
+          </div>
+          <div className="modal-container__description">
+            { t('removeAccountDescription') }
+            <a className="modal-container__link" rel="noopener noreferrer" target="_blank" href="https://consensys.zendesk.com/hc/en-us/articles/360004180111-What-are-imported-accounts-New-UI-">{ t('learnMore') }</a>
+          </div>
+        </div>
+        <div className="modal-container__footer">
+          <Button
+            type="default"
+            className="modal-container__footer-button"
+            onClick={() => this.props.hideModal()}
+          >
+            { t('nevermind') }
+          </Button>
+          <Button
+            type="secondary"
+            className="modal-container__footer-button"
+            onClick={() => this.handleRemove()}
+          >
+            { t('remove') }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
+
+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 {