From b9c2994d24e688305d63aaefd7fac88d88773ad9 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Tue, 10 Jul 2018 19:19:29 -0400
Subject: finish warning modal UI

---
 .../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 ++++++-
 5 files changed, 103 insertions(+), 2 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/components/modals')

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),
   )
 }
 
-- 
cgit v1.2.3


From 523cf9ad33d88719520ae5e7293329d133b64d4d Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Wed, 11 Jul 2018 00:20:40 -0400
Subject: account removal is working

---
 .../confirm-remove-account/confirm-remove-account.container.js    | 8 +++++++-
 ui/app/components/modals/modal.js                                 | 5 ++---
 2 files changed, 9 insertions(+), 4 deletions(-)

(limited to 'ui/app/components/modals')

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
index 9a612f2f6..fcb149b3f 100644
--- 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
@@ -3,6 +3,12 @@ import ConfirmRemoveAccount from './confirm-remove-account.component'
 
 const { hideModal, removeAccount } = require('../../../actions')
 
+const mapStateToProps = state => {
+  return {
+    address: state.appState.modal.modalState.props.address,
+  }
+}
+
 const mapDispatchToProps = dispatch => {
   return {
     hideModal: () => dispatch(hideModal()),
@@ -10,4 +16,4 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
-export default connect(null, mapDispatchToProps)(ConfirmRemoveAccount)
+export default connect(mapStateToProps, mapDispatchToProps)(ConfirmRemoveAccount)
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 758cfa4a2..9ace56661 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -1,5 +1,4 @@
-const React = require('react')
-const Component = React.Component
+const Component = require('react').Component
 const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
@@ -385,7 +384,7 @@ Modal.prototype.render = function () {
       backdropStyle: BACKDROPSTYLE,
       closeOnClick: !disableBackdropClick,
     },
-    React.cloneElement(children, {...this.props.modalState.props}, null),
+    children,
   )
 }
 
-- 
cgit v1.2.3


From 5a2a34591f8ab2aec3a056d5bb9e38ba5236cd07 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Wed, 11 Jul 2018 01:35:37 -0400
Subject: clean up

---
 ui/app/components/modals/modal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 9ace56661..e40944165 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -242,7 +242,7 @@ const MODALS = {
     },
   },
 
-  CONFIRM_FORGET_ACCOUNT: {
+  CONFIRM_REMOVE_ACCOUNT: {
     contents: h(ConfirmRemoveAccount),
     mobileModalStyle: {
       ...modalContainerMobileStyle,
-- 
cgit v1.2.3


From 2a0a7853249284cb27831890f3b62847ea27eb83 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 12 Jul 2018 00:23:08 -0400
Subject: added tooltip

---
 .../modals/confirm-remove-account/confirm-remove-account.component.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

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
index 93be2a4e7..d6c0c796d 100644
--- 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
@@ -26,7 +26,7 @@ class ConfirmRemoveAccount extends Component {
       <div className="modal-container">
         <div className="modal-container__content">
           <div className="modal-container__title">
-            { `${t('removeAccount')}` }
+            { `${t('removeAccount')}` }?
           </div>
           <div className="modal-container__address">
             {addressSummary(this.props.address)}
-- 
cgit v1.2.3


From 4b528405eac7cea54c743307e6f577abd6ce9507 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 12 Jul 2018 13:19:51 -0400
Subject: catching up with develop

---
 .../confirm-remove-account.component.js            | 44 +++++++++++++++++++---
 .../confirm-remove-account.container.js            |  3 +-
 2 files changed, 41 insertions(+), 6 deletions(-)

(limited to 'ui/app/components/modals')

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
index d6c0c796d..b9dc6364f 100644
--- 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
@@ -2,12 +2,15 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Button from '../../button'
 import { addressSummary } from '../../../util'
+import Identicon from '../../identicon'
+import genAccountLink from '../../../../lib/account-link'
 
 class ConfirmRemoveAccount extends Component {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
     removeAccount: PropTypes.func.isRequired,
-    address: PropTypes.string.isRequired,
+    identity: PropTypes.object.isRequired,
+    network: PropTypes.string.isRequired,
   }
 
   static contextTypes = {
@@ -15,10 +18,43 @@ class ConfirmRemoveAccount extends Component {
   }
 
   handleRemove () {
-    this.props.removeAccount(this.props.address)
+    this.props.removeAccount(this.props.identity.address)
       .then(() => this.props.hideModal())
   }
 
+  renderSelectedAccount () {
+    const { identity } = this.props
+    return (
+      <div className="modal-container__address">
+        <div className="account_identicon">
+          <Identicon
+              address={identity.address}
+              diameter={32}
+              style={{'marginLeft': '10px'}}
+          />
+        </div>
+        <div className="account_name">
+            <span className="account_label">Name</span>
+            <span className="account_value">{identity.name}</span>
+        </div>
+        <div className="account_address">
+            <span className="account_label">Public Address</span>
+            <span className="account_value">{ addressSummary(identity.address) }</span>
+        </div>
+        <div className="account_link">
+          <a
+            className="hw-account-list__item__link"
+            href={genAccountLink(identity.address, this.props.network)}
+            target={'_blank'}
+            title={this.context.t('etherscanView')}
+          >
+            <img src="images/popout.svg" />
+          </a>
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { t } = this.context
 
@@ -28,9 +64,7 @@ class ConfirmRemoveAccount extends Component {
           <div className="modal-container__title">
             { `${t('removeAccount')}` }?
           </div>
-          <div className="modal-container__address">
-            {addressSummary(this.props.address)}
-          </div>
+            { this.renderSelectedAccount() }
           <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>
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
index fcb149b3f..4b194c995 100644
--- 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
@@ -5,7 +5,8 @@ const { hideModal, removeAccount } = require('../../../actions')
 
 const mapStateToProps = state => {
   return {
-    address: state.appState.modal.modalState.props.address,
+    identity: state.appState.modal.modalState.props.identity,
+    network: state.metamask.network,
   }
 }
 
-- 
cgit v1.2.3


From 5710e648bd77aa7be6e9a4ba1d7d3fe4ea20c010 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Thu, 12 Jul 2018 18:19:33 -0400
Subject: remove account modal updated

---
 .../confirm-remove-account.component.js            | 19 ++++----
 ui/app/components/modals/index.scss                | 51 +++++++++++++++++++---
 2 files changed, 55 insertions(+), 15 deletions(-)

(limited to 'ui/app/components/modals')

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
index b9dc6364f..5a9f0f289 100644
--- 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
@@ -25,25 +25,24 @@ class ConfirmRemoveAccount extends Component {
   renderSelectedAccount () {
     const { identity } = this.props
     return (
-      <div className="modal-container__address">
-        <div className="account_identicon">
+      <div className="modal-container__account">
+        <div className="modal-container__account__identicon">
           <Identicon
               address={identity.address}
               diameter={32}
-              style={{'marginLeft': '10px'}}
           />
         </div>
-        <div className="account_name">
-            <span className="account_label">Name</span>
+        <div className="modal-container__account__name">
+            <span className="modal-container__account__label">Name</span>
             <span className="account_value">{identity.name}</span>
         </div>
-        <div className="account_address">
-            <span className="account_label">Public Address</span>
-            <span className="account_value">{ addressSummary(identity.address) }</span>
+        <div className="modal-container__account__address">
+            <span className="modal-container__account__label">Public Address</span>
+            <span className="account_value">{ addressSummary(identity.address, 4, 4) }</span>
         </div>
-        <div className="account_link">
+        <div className="modal-container__account__link">
           <a
-            className="hw-account-list__item__link"
+            className=""
             href={genAccountLink(identity.address, this.props.network)}
             target={'_blank'}
             title={this.context.t('etherscanView')}
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index b7f1f249d..1cefcb49c 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -19,12 +19,53 @@
     text-align: center;
     font-size: .875rem;
   }
-  
-  &__address {
-    text-align: center;
-    font-size: 1rem;
-    margin-top: 20px;
+
+  &__account {
+    border: 1px solid #b7b7b7;
+    border-radius: 4px;
+    padding: 10px;
+    display: flex;
+    margin-top: 10px;
     margin-bottom: 20px;
+    width: 100%;
+
+    &__identicon {
+      margin-right: 10px;
+    }
+
+    &__name,
+    &__address {
+      margin-right: 10px;
+      font-size: 14px;
+    }
+
+    &__name {
+      width: 100px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &__label {
+      font-size: 11px;
+      display: block;
+      color: #9b9b9b;
+    }
+
+    &__link {
+      margin-top: 16px;
+
+      img {
+        width: 15px;
+        height: 15px;
+      }
+    }
+
+    @media screen and (max-width: 575px) {
+      &__name {
+        width: 90px;
+      }
+    }
   }
 
   &__link {
-- 
cgit v1.2.3


From 289795fb1251f3d6bc2206efb2d640fcedae5ee4 Mon Sep 17 00:00:00 2001
From: brunobar79 <brunobar79@gmail.com>
Date: Fri, 13 Jul 2018 00:09:42 -0400
Subject: fix account balance bug

---
 ui/app/components/modals/index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ui/app/components/modals')

diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index 1cefcb49c..e198cca44 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -53,7 +53,7 @@
     }
 
     &__link {
-      margin-top: 16px;
+      margin-top: 14px;
 
       img {
         width: 15px;
-- 
cgit v1.2.3