Switch existing modals from using Notification to Modal. Remove Notification component. Add CancelTransaction modal

3 files changed, 24 insertions, 38 deletions

diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
index 14a4da62a..f1a4542ac 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
@@ -1,8 +1,8 @@
-import React, { Component } from 'react'
+import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Button from '../../button'
+import Modal, { ModalContent } from '../../modal'
 
-class ConfirmResetAccount extends Component {
+export default class ConfirmResetAccount extends PureComponent {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     resetAccount: PropTypes.func.isRequired,
@@ -12,7 +12,7 @@ class ConfirmResetAccount extends Component {
     t: PropTypes.func,
   }
 
-  handleReset () {
+  handleReset = () => {
     this.props.resetAccount()
       .then(() => this.props.hideModal())
   }
@@ -21,34 +21,18 @@ class ConfirmResetAccount extends Component {
     const { t } = this.context
 
     return (
-      <div className="modal-container">
-        <div className="modal-container__content">
-          <div className="modal-container__title">
-            { `${t('resetAccount')}?` }
-          </div>
-          <div className="modal-container__description">
-            { t('resetAccountDescription') }
-          </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.handleReset()}
-          >
-            { t('reset') }
-          </Button>
-        </div>
-      </div>
+      <Modal
+        onSubmit={this.handleReset}
+        onCancel={() => this.props.hideModal()}
+        submitText={t('reset')}
+        cancelText={t('nevermind')}
+        submitType="secondary"
+      >
+        <ModalContent
+          title={`${t('resetAccount')}?`}
+          description={t('resetAccountDescription')}
+        />
+      </Modal>
     )
   }
 }
-
-export default ConfirmResetAccount
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
index 9630a5593..c8a7b8478 100644
--- a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
@@ -1,13 +1,16 @@
 import { connect } from 'react-redux'
+import { compose } from 'recompose'
+import withModalProps from '../../../higher-order-components/with-modal-props'
 import ConfirmResetAccount from './confirm-reset-account.component'
-
-const { hideModal, resetAccount } = require('../../../actions')
+import { resetAccount } from '../../../actions'
 
 const mapDispatchToProps = dispatch => {
   return {
-    hideModal: () => dispatch(hideModal()),
     resetAccount: () => dispatch(resetAccount()),
   }
 }
 
-export default connect(null, mapDispatchToProps)(ConfirmResetAccount)
+export default compose(
+  withModalProps,
+  connect(null, mapDispatchToProps)
+)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/modals/confirm-reset-account/index.js
index c812ffc55..ca4d9c5bf 100644
--- a/ui/app/components/modals/confirm-reset-account/index.js
+++ b/ui/app/components/modals/confirm-reset-account/index.js
@@ -1,2 +1 @@
-import ConfirmResetAccount from './confirm-reset-account.container'
-module.exports = ConfirmResetAccount
+export { default } from './confirm-reset-account.container'