New Account modal

10 files changed, 132 insertions, 65 deletions

diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js
index 821bb6efe..c66dcfc66 100644
--- a/ui/app/accounts/import/index.js
+++ b/ui/app/accounts/import/index.js
@@ -37,6 +37,7 @@ AccountImportSubview.prototype.render = function () {
     h('div.flex-center', {
       style: {
         flexDirection: 'column',
+        marginTop: '32px',
       },
     }, [
       h('.section-title.flex-row.flex-center', [
diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js
index 3b1118271..2ebdba24a 100644
--- a/ui/app/components/account-menu/index.js
+++ b/ui/app/components/account-menu/index.js
@@ -23,20 +23,50 @@ function mapStateToProps (state) {
   }
 }
 
-// identities, accounts, selected, menuItemStyles, actions, keyrings
-
 function mapDispatchToProps (dispatch) {
   return {
     toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()),
+    showAccountDetail: address => {
+      dispatch(actions.showAccountDetail(address))
+      dispatch(actions.toggleAccountMenu())
+    },
+    lockMetamask: () => {
+      dispatch(actions.lockMetamask())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showConfigPage: () => {
+      console.log('hihihih')
+      dispatch(actions.showConfigPage())
+      dispatch(actions.toggleAccountMenu())
+    },
+    showNewAccountModal: () => {
+      dispatch(actions.showModal({ name: 'NEW_ACCOUNT' }))
+      dispatch(actions.toggleAccountMenu())
+    },
+    showImportPage: () => {
+      dispatch(actions.showImportPage())
+      dispatch(actions.toggleAccountMenu())
+    },
   }
 }
 
 AccountMenu.prototype.render = function () {
-  const { isAccountMenuOpen, toggleAccountMenu } = this.props
-
+  const {
+    isAccountMenuOpen,
+    toggleAccountMenu,
+    showNewAccountModal,
+    showImportPage,
+    lockMetamask,
+    showConfigPage,
+  } = this.props
+
+  console.log(showConfigPage)
   return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [
     h(CloseArea, { onClick: toggleAccountMenu }),
-    h(Item, { className: 'account-menu__header' }, [
+    h(Item, {
+      className: 'account-menu__header',
+      onClick: lockMetamask,
+    }, [
       'My Accounts',
       h('button.account-menu__logout-button', 'Log out'),
     ]),
@@ -44,23 +74,22 @@ AccountMenu.prototype.render = function () {
     h('div.account-menu__accounts', this.renderAccounts()),
     h(Divider),
     h(Item, {
-      onClick: true,
+      onClick: showNewAccountModal,
       icon: h('img', { src: 'images/plus-btn-white.svg' }),
       text: 'Create Account',
     }),
     h(Item, {
-      onClick: true,
+      onClick: showImportPage,
       icon: h('img', { src: 'images/import-account.svg' }),
       text: 'Import Account',
     }),
     h(Divider),
     h(Item, {
-      onClick: true,
       icon: h('img', { src: 'images/mm-info-icon.svg' }),
       text: 'Info & Help',
     }),
     h(Item, {
-      onClick: true,
+      onClick: showConfigPage,
       icon: h('img', { src: 'images/settings.svg' }),
       text: 'Settings',
     }),
@@ -68,7 +97,13 @@ AccountMenu.prototype.render = function () {
 }
 
 AccountMenu.prototype.renderAccounts = function () {
-  const { identities, accounts, selected, actions, keyrings } = this.props
+  const {
+    identities,
+    accounts,
+    selected,
+    keyrings,
+    showAccountDetail,
+  } = this.props
 
   return Object.keys(identities).map((key, index) => {
     const identity = identities[key]
@@ -84,12 +119,8 @@ AccountMenu.prototype.renderAccounts = function () {
     })
 
     return h(
-      'div.account-menu__account',
-      {
-        onClick: () => {
-          this.props.actions.showAccountDetail(identity.address)
-        },
-      },
+      'div.account-menu__account.menu__item--clickable',
+      { onClick: () => showAccountDetail(identity.address) },
       [
         h('div.account-menu__check-mark', [
           isSelected ? h('i.fa.fa-check') : null,
@@ -104,44 +135,11 @@ AccountMenu.prototype.renderAccounts = function () {
         ),
 
         h('div.account-menu__account-info', [
-
-          this.indicateIfLoose(keyring),
-
-          h('div.account-menu__name', {
-            style: {
-              fontSize: '18px',
-              maxWidth: '145px',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            },
-          }, identity.name || ''),
-
+          h('div.account-menu__name', identity.name || ''),
           h('div.account-menu__balance', formattedBalance),
         ]),
 
-        h('div.account-menu__action', {
-          onClick: () => {
-            actions.showEditAccountModal(identity)
-          },
-        }, 'Edit'),
-
-// =======
-//             },
-//           ),
-//           this.indicateIfLoose(keyring),
-//           h('span', {
-//             style: {
-//               marginLeft: '20px',
-//               fontSize: '24px',
-//               maxWidth: '145px',
-//               whiteSpace: 'nowrap',
-//               overflow: 'hidden',
-//               textOverflow: 'ellipsis',
-//             },
-//           }, identity.name || ''),
-//           h('span', { style: { marginLeft: '20px', fontSize: '24px' } }, isSelected ? h('.check', '✓') : null),
-// >>>>>>> master:ui/app/components/account-dropdowns.js
+        this.indicateIfLoose(keyring),
       ],
     )
   })
diff --git a/ui/app/components/dropdowns/components/menu.js b/ui/app/components/dropdowns/components/menu.js
index 323103f0b..f6d8a139e 100644
--- a/ui/app/components/dropdowns/components/menu.js
+++ b/ui/app/components/dropdowns/components/menu.js
@@ -28,8 +28,8 @@ Item.prototype.render = function () {
   const textComponent = text ? h('div.menu__item__text', text) : null
 
   return children
-    ? h('div', { className: itemClassName }, children)
-    : h('div.menu__item', { className: itemClassName }, [ iconComponent, textComponent ]
+    ? h('div', { className: itemClassName, onClick }, children)
+    : h('div.menu__item', { className: itemClassName, onClick }, [ iconComponent, textComponent ]
       .filter(d => Boolean(d))
     )
 }
diff --git a/ui/app/config.js b/ui/app/config.js
index 0fe232c07..282a28301 100644
--- a/ui/app/config.js
+++ b/ui/app/config.js
@@ -30,7 +30,7 @@ ConfigScreen.prototype.render = function () {
   var warning = state.warning
 
   return (
-    h('.flex-column.flex-grow', [
+    h('.flex-column.flex-grow', { style: { marginTop: '32px' } }, [
 
       // subtitle and nav
       h('.section-title.flex-row.flex-center', [
diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss
index 5ed42f627..857903ce1 100644
--- a/ui/app/css/itcss/components/account-menu.scss
+++ b/ui/app/css/itcss/components/account-menu.scss
@@ -39,6 +39,7 @@
     font-size: 12px;
     line-height: 23px;
     padding: 0 24px;
+    font-weight: 200;
   }
 
   img {
@@ -50,8 +51,68 @@
     display: flex;
     flex-flow: column nowrap;
     overflow-y: auto;
-    height: 272px;
+    max-height: 240px;
     position: relative;
     z-index: 200;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media screen and (max-width: 575px) {
+      max-height: 215px;
+    }
+
+    .keyring-label {
+      margin-top: 5px;
+    }
+  }
+
+  &__account {
+    display: flex;
+    flex-flow: row nowrap;
+    padding: 16px 14px;
+    flex: 0 0 auto;
+
+    @media screen and (max-width: 575px) {
+      padding: 12px 14px;
+    }
+  }
+
+  &__account-info {
+    flex: 1 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
+    padding-top: 4px;
+  }
+
+  &__check-mark {
+    width: 14px;
+    flex: 0 0 auto;
+  }
+
+  .identicon {
+    margin: 0 12px 0 0;
+    flex: 0 0 auto;
+  }
+
+  &__name {
+    color: $white;
+    font-size: 18px;
+    font-weight: 200;
+    line-height: 16px;
+  }
+
+  &__balance {
+    color: $dusty-gray;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  &__action {
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: 200;
+    cursor: pointer;
   }
 }
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 15c752923..d4f0fe5ac 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -37,7 +37,7 @@
     overflow-y: auto;
     top: 0;
     box-shadow: none;
-    height: calc(100vh - 41px - 100px);
+    height: calc(100vh - 58px - 100px);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index 512cbd995..ef84dc3f4 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/ui/app/css/itcss/components/header.scss
@@ -58,6 +58,10 @@
   text-transform: uppercase;
   font-weight: 400;
   color: #22232c; // $shark
+
+  @media screen and (max-width: 575px) {
+    display: none;
+  }
 }
 
 h2.page-subtitle {
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 0f83146a8..c98ee70d9 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -13,6 +13,10 @@
     position: relative;
     z-index: 200;
 
+    @media screen and (max-width: 575px) {
+      padding: 14px;
+    }
+
     &--clickable {
       cursor: pointer;
 
diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss
index bf699ac57..bb8c4eea8 100644
--- a/ui/app/css/itcss/components/network.scss
+++ b/ui/app/css/itcss/components/network.scss
@@ -2,6 +2,7 @@
   border: 1px solid $shark;
   border-radius: 82px;
   padding: 6px;
+  flex: 0 0 auto;
 
   &.ethereum-network {
     border-color: rgb(3, 135, 137);
diff --git a/ui/app/css/itcss/tools/utilities.scss b/ui/app/css/itcss/tools/utilities.scss
index 4a55303b9..ca9fd0d9c 100644
--- a/ui/app/css/itcss/tools/utilities.scss
+++ b/ui/app/css/itcss/tools/utilities.scss
@@ -231,17 +231,15 @@ hr.horizontal-line {
 
 .keyring-label {
   z-index: 1;
-  font-size: 11px;
-  background: rgba(255, 0, 0, .8);
-  bottom: -47px;
-  color: $white;
+  font-size: 8px;
+  line-height: 8px;
+  background: rgba(255, 255, 255, 0.4);
+  color: #fff;
   border-radius: 10px;
-  height: 20px;
-  min-width: 20px;
-  position: absolute;
-  top: 0px;
-  right: 5px;
   padding: 4px;
+  width: 41px;
+  text-align: center;
+  height: 15px;
 }
 
 .ether-balance {