Hook up actions to EditAccountNameModal

8 files changed, 150 insertions, 111 deletions

diff --git a/ui/app/components/dropdowns/components/account-dropdowns.js b/ui/app/components/dropdowns/components/account-dropdowns.js
index 043789b6c..2854ec95d 100644
--- a/ui/app/components/dropdowns/components/account-dropdowns.js
+++ b/ui/app/components/dropdowns/components/account-dropdowns.js
@@ -115,7 +115,7 @@ class AccountDropdowns extends Component {
                   fontSize: '16px',
                 },
                 onClick: () => {
-                  actions.showNewAccountModal()
+                  actions.showEditAccountModal(identity)
                 },
               }, [
                 'Edit',
@@ -394,8 +394,14 @@ const mapDispatchToProps = (dispatch) => {
       showAccountDetailModal: () => {
         dispatch(actions.showModal({ name: 'ACCOUNT_DETAILS' }))
       },
+      showEditAccountModal: (identity) => {
+        dispatch(actions.showModal({
+          name: 'EDIT_ACCOUNT_NAME',
+          identity,
+        }))
+      },
       showNewAccountModal: () => {
-        dispatch(actions.showModal({ name: 'EDIT_ACCOUNT_NAME' }))
+        dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
       },
       addNewAccount: () => dispatch(actions.addNewAccount()),
       showImportPage: () => dispatch(actions.showImportPage()),
diff --git a/ui/app/components/modals/account-details-modal.js b/ui/app/components/modals/account-details-modal.js
index 45f54908f..38d08314b 100644
--- a/ui/app/components/modals/account-details-modal.js
+++ b/ui/app/components/modals/account-details-modal.js
@@ -30,34 +30,34 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModa
 // It utilizes modal styles
 AccountDetailsModal.prototype.render = function () {
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.buy-modal-content.transfers-subview', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
         style: {},
       }, [
-        h('div.modal-content-title', {
+        h('div.buy-modal-content-title', {
           style: {},
         }, 'Account Details Modal'),
         h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.modal-content-option', {
+        h('div.buy-modal-content-option', {
           onClick: () => {},
         }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
       ]),
@@ -67,7 +67,7 @@ AccountDetailsModal.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/buy-options-modal.js b/ui/app/components/modals/buy-options-modal.js
index 170ac96b8..76e0da4f1 100644
--- a/ui/app/components/modals/buy-options-modal.js
+++ b/ui/app/components/modals/buy-options-modal.js
@@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 // It utilizes modal styles
 BuyOptions.prototype.render = function () {
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.buy-modal-content.transfers-subview', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
         style: {},
       }, [
-        h('div.modal-content-title', {
+        h('div.buy-modal-content-title', {
           style: {},
         }, 'Transfers'),
         h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.modal-content-option', {
+        h('div.buy-modal-content-option', {
           onClick: () => {
             const { toCoinbase, address } = this.props
             toCoinbase(address)
           },
         }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
       ]),
@@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/edit-account-name-modal.js b/ui/app/components/modals/edit-account-name-modal.js
index 5d2d2e120..0128fe412 100644
--- a/ui/app/components/modals/edit-account-name-modal.js
+++ b/ui/app/components/modals/edit-account-name-modal.js
@@ -3,78 +3,73 @@ const h = require('react-hyperscript')
 const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../../actions')
+const { getSelectedAccount } = require('../../selectors')
 
 function mapStateToProps (state) {
   return {
-    network: state.metamask.network,
-    address: state.metamask.selectedAddress,
+    selectedAccount: getSelectedAccount(state),
+    identity: state.appState.modal.modalState.identity,
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
-    toCoinbase: (address) => {
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-    },
     hideModal: () => {
       dispatch(actions.hideModal())
-    }
+    },
+    saveAccountLabel: (account, label) => {
+      dispatch(actions.saveAccountLabel(account, label))
+    },
   }
 }
 
-inherits(BuyOptions, Component)
-function BuyOptions () {
+inherits(EditAccountNameModal, Component)
+function EditAccountNameModal () {
   Component.call(this)
+  this.state = {
+    inputText: '',
+  }
 }
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
+module.exports = connect(mapStateToProps, mapDispatchToProps)(EditAccountNameModal)
 
-// BuyOptions is currently meant to be rendered inside <Modal />
+// EditAccountNameModal is currently meant to be rendered inside <Modal />
 // It is the only component in this codebase that does so
 // It utilizes modal styles
-BuyOptions.prototype.render = function () {
+EditAccountNameModal.prototype.render = function () {
+  const { hideModal, saveAccountLabel, identity } = this.props
+
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.flex-column.edit-account-name-modal-content', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
-        style: {},
-      }, [
-        h('div.modal-content-title', {
-          style: {},
-        }, 'Edit Account Name Modal'),
-        h('div', {}, 'How would you like to buy Ether?'),
-      ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
-
-        h('div.modal-content-option', {
-          onClick: () => {
-            const { toCoinbase, address } = this.props
-            toCoinbase(address)
-          },
-        }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
-        ]),
+      h('div.edit-account-name-modal-cancel', {}, [
+        h('i.fa.fa-times'),
+      ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
-        ]),
+      h('div.edit-account-name-modal-title', {
+      }, ['Edit Account Name']),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
-        ]),
+      h('input.edit-account-name-modal-input', {
+        placeholder: identity.name,
+        onChange: (event) => {
+          this.setState({ inputText: event.target.value })
+        },
+        value: this.state.inputText,
+      }, []),
 
+      h('button.btn-clear.edit-account-name-modal-save-button', {
+        onClick: () => {
+          if (this.state.inputText.length !== 0) {
+            saveAccountLabel(identity.address, this.state.inputText)
+            hideModal()
+          }
+        },
+        disabled: this.state.inputText.length === 0,
+      }, [
+        'SAVE',
       ]),
 
-      h('button', {
-        style: {
-          background: 'white',
-        },
-        onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/components/modals/new-account-modal.js b/ui/app/components/modals/new-account-modal.js
index e4b3ca328..c55d69964 100644
--- a/ui/app/components/modals/new-account-modal.js
+++ b/ui/app/components/modals/new-account-modal.js
@@ -34,37 +34,37 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(BuyOptions)
 // It utilizes modal styles
 BuyOptions.prototype.render = function () {
   return h('div', {}, [
-    h('div.modal-content.transfers-subview', {
+    h('div.buy-modal-content.transfers-subview', {
     }, [
-      h('div.modal-content-title-wrapper.flex-column.flex-center', {
+      h('div.buy-modal-content-title-wrapper.flex-column.flex-center', {
         style: {},
       }, [
-        h('div.modal-content-title', {
+        h('div.buy-modal-content-title', {
           style: {},
         }, 'New Account Modal'),
         h('div', {}, 'How would you like to buy Ether?'),
       ]),
 
-      h('div.modal-content-options.flex-column.flex-center', {}, [
+      h('div.buy-modal-content-options.flex-column.flex-center', {}, [
 
-        h('div.modal-content-option', {
+        h('div.buy-modal-content-option', {
           onClick: () => {
             const { toCoinbase, address } = this.props
             toCoinbase(address)
           },
         }, [
-          h('div.modal-content-option-title', {}, 'Coinbase'),
-          h('div.modal-content-option-subtitle', {}, 'Buy with Fiat'),
+          h('div.buy-modal-content-option-title', {}, 'Coinbase'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Buy with Fiat'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Shapeshift'),
-          h('div.modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Shapeshift'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Trade any digital asset for any other'),
         ]),
 
-        h('div.modal-content-option', {}, [
-          h('div.modal-content-option-title', {}, 'Direct Deposit'),
-          h('div.modal-content-option-subtitle', {}, 'Deposit from another account'),
+        h('div.buy-modal-content-option', {}, [
+          h('div.buy-modal-content-option-title', {}, 'Direct Deposit'),
+          h('div.buy-modal-content-option-subtitle', {}, 'Deposit from another account'),
         ]),
 
       ]),
@@ -74,7 +74,7 @@ BuyOptions.prototype.render = function () {
           background: 'white',
         },
         onClick: () => { this.props.hideModal() },
-      }, h('div.modal-content-footer#modal-content-footer-text',{}, 'Cancel')),
+      }, h('div.buy-modal-content-footer#buy-modal-content-footer-text',{}, 'Cancel')),
     ])
   ])
 }
diff --git a/ui/app/css/itcss/components/buttons.scss b/ui/app/css/itcss/components/buttons.scss
index 9916db488..c304e07ab 100644
--- a/ui/app/css/itcss/components/buttons.scss
+++ b/ui/app/css/itcss/components/buttons.scss
@@ -27,11 +27,11 @@ button.btn-clear {
 //   box-shadow: 0px 3px 6px rgba(254, 35, 17, 0.36);
 // }
 
-// button[disabled], input[type="submit"][disabled] {
-//   cursor: not-allowed;
-//   background: rgba(197, 197, 197, 1);
-//   box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
-// }
+button[disabled], input[type="submit"][disabled] {
+  cursor: not-allowed;
+  background: rgba(197, 197, 197, 1);
+  box-shadow: 0px 3px 6px rgba(197, 197, 197, 0.36);
+}
 
 // button.spaced {
 //   margin: 2px;
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 8bf7cd44f..c8bd1fb85 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -1,4 +1,5 @@
-.modal-content {
+// Buy Modal
+.buy-modal-content {
   flex-direction: column;
   align-items: center;
   justify-content: center;
@@ -7,29 +8,29 @@
 }
 
 @media screen and (max-width: 575px) {
-  .modal-content-title-wrapper {
+  .buy-modal-content-title-wrapper {
     justify-content: space-around;
     width: 100%;
     height: 100px;
   }
 
-  .modal-content-title {
+  .buy-modal-content-title {
     font-size: 26px;
     margin-top: 15px;
   }
 
-  .modal-content-options {
+  .buy-modal-content-options {
     flex-direction: column;
     padding: 5% 33%;
   }
 
-  .modal-content-footer {
+  .buy-modal-content-footer {
     text-transform: uppercase;
     width: 100%;
     height: 50px;
   }
 
-  div.modal-content-option {
+  div.buy-modal-content-option {
     display: flex;
     flex-direction: column;
     width: 80vw;
@@ -41,40 +42,40 @@
     padding: 0% 7%;
     justify-content: space-around;
 
-    div.modal-content-option-title {
+    div.buy-modal-content-option-title {
       font-size: 20px;
     }
 
-    div.modal-content-option-subtitle {
+    div.buy-modal-content-option-subtitle {
       font-size: 16px;
     }
   }
 }
 
 @media screen and (min-width: 576px) {
-  .modal-content-title-wrapper {
+  .buy-modal-content-title-wrapper {
     justify-content: space-around;
     width: 100%;
     height: 110px;
   }
 
-  .modal-content-title {
+  .buy-modal-content-title {
     font-size: 26px;
     margin-top: 15px;
   }
 
-  .modal-content-footer {
+  .buy-modal-content-footer {
     text-transform: uppercase;
     width: 100%;
     height: 50px;
   }
 
-  .modal-content-options {
+  .buy-modal-content-options {
     flex-direction: row;
     margin: 20px 0;
   }
 
-  div.modal-content-option {
+  div.buy-modal-content-option {
     display: flex;
     flex-direction: column;
     width: 20vw;
@@ -85,7 +86,7 @@
     margin: 0 .5vw;
     justify-content: space-around;
 
-    div.modal-content-option-title {
+    div.buy-modal-content-option-title {
       font-size: 20px;
 
       @media screen and (max-width: 679px) {
@@ -97,7 +98,7 @@
       }
     }
 
-    div.modal-content-option-subtitle {
+    div.buy-modal-content-option-subtitle {
       font-size: 16px;
       padding: 0 10px;
       height: 25%;
@@ -121,8 +122,45 @@
       }
     }
 
-    div.modal-content-footer {
+    div.buy-modal-content-footer {
       margin-top: 8vh;
     }
   }
 }
+
+// Edit Account Name Modal
+.edit-account-name-modal-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+
+.edit-account-name-modal-cancel {
+  position: absolute;
+  top: 12px;
+  right: 20px;
+  font-size: 25px;
+}
+
+.edit-account-name-modal-title {
+  margin: 15px;
+}
+
+.edit-account-name-modal-save-button {
+  width: 33%;
+  height: 45px;
+  margin: 15px;
+  font-weight: bold;
+  margin-top: 25px;
+}
+
+.edit-account-name-modal-input {
+  width: 90%;
+  height: 50px;
+  text-align: left;
+  margin: 10px;
+  padding: 10px;
+  font-size: 18px;
+}
diff --git a/ui/app/css/itcss/trumps/index.scss b/ui/app/css/itcss/trumps/index.scss
index e09642aa8..d9a4202a4 100644
--- a/ui/app/css/itcss/trumps/index.scss
+++ b/ui/app/css/itcss/trumps/index.scss
@@ -65,7 +65,7 @@ i.fa.fa-question-circle.fa-lg.menu-icon {
 // See components/modal.scss
 
 /* stylelint-disable */
-#modal-content-footer-text {
+#buy-modal-content-footer-text {
   font-family: 'DIN OT';
   font-size: 16px;
 }