Position account icon, name, and caret

3 files changed, 85 insertions, 23 deletions

diff --git a/ui/app/components/account-dropdowns.js b/ui/app/components/account-dropdowns.js
index b23600e9b..3129e0226 100644
--- a/ui/app/components/account-dropdowns.js
+++ b/ui/app/components/account-dropdowns.js
@@ -218,16 +218,16 @@ class AccountDropdowns extends Component {
       },
       [
         enableAccountsSelector && h(
-          // 'i.fa.fa-angle-down',
-          'div.cursor-pointer.color-orange.accounts-selector',
+          'i.fa.fa-angle-down',
+          // 'div.cursor-pointer.color-orange.accounts-selector',
           {
             style: {
-              // fontSize: '1.8em',
-              background: 'url(images/switch_acc.svg) white center center no-repeat',
-              height: '25px',
-              width: '25px',
-              transform: 'scale(0.75)',
-              marginRight: '3px',
+              // fontSize: '135%',
+              // background: 'url(images/switch_acc.svg) white center center no-repeat',
+              // height: '25px',
+              // width: '25px',
+              // transform: 'scale(0.75)',
+              // marginRight: '3px',
             },
             onClick: (event) => {
               event.stopPropagation()
@@ -243,8 +243,7 @@ class AccountDropdowns extends Component {
           'i.fa.fa-ellipsis-h',
           {
             style: {
-              marginRight: '0.5em',
-              fontSize: '1.8em',
+              fontSize: '135%',
             },
             onClick: (event) => {
               event.stopPropagation()
diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js
index 1c7330193..c96819ab9 100644
--- a/ui/app/components/wallet-view.js
+++ b/ui/app/components/wallet-view.js
@@ -13,6 +13,7 @@ function mapStateToProps (state) {
   return {
     network: state.metamask.network,
     sidebarOpen: state.appState.sidebarOpen,
+    identities: state.metamask.identities,
   }
 }
 
@@ -32,7 +33,7 @@ const noop = () => {}
 
 WalletView.prototype.render = function () {
   const selected = '0x82df11beb942BEeeD58d466fCb0F0791365C7684' // TODO: remove fake address
-  const { network, responsiveDisplayClassname, style } = this.props
+  const { network, responsiveDisplayClassname, style, identities } = this.props
 
   return h('div.wallet-view.flex-column' + (responsiveDisplayClassname || ''), {
     style: {},
@@ -43,19 +44,64 @@ WalletView.prototype.render = function () {
       style: {}
     }, [
 
-      h('.identicon-wrapper.select-none', [
-        h(Identicon, {
-          diameter: 24,
-          address: selected,
-        }),
+      h('div.flex-row.account-options-menu', {
+      }, [
+
+        h(AccountDropdowns, {
+          // selected,
+          // network,
+          // identities: props.identities,
+          enableAccountOptions: true,
+        }, []),
+
       ]),
 
-      h('span.account-name', {
-        style: {}
+      h('div.flex-column.flex-center', {
+
       }, [
-        'Account 1'
+
+        h('.identicon-wrapper.select-none', {
+          style: {
+            marginBottom: '1%',
+          },
+        }, [
+          h(Identicon, {
+            diameter: 54,
+            address: selected,
+          }),
+        ]),
+
+        h('span.account-name', {
+          style: {}
+        }, [
+          'Account 1'
+        ]),
+
+        //  h(AccountDropdowns, {
+        //   style: {
+        //     // position: 'absolute',
+        //     // left: '58.5%',
+        //     // top: '10.25%',
+        //   },
+        //   selected,
+        //   network,
+        //   identities,
+        //   enableAccountsSelector: true,
+        // }, []),
+        h('div.flex-column.flex-center,', {
+          style: {
+            position: 'absolute',
+            marginLeft: '42px',
+            marginTop: '-10px',
+          },
+        }, h('i.fa.fa-angle-down', {}, [])),
+
       ]),
 
+      // position: absolute;
+      // left: 58.5%;
+      // top: 10.25%;
+
       h(
         AccountDropdowns,
         {
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 02acfca47..684e998d5 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -15,17 +15,27 @@
 
 
 // tx view
+
 .tx-view {
   flex: 63.5 0 66.5%;
-  background: '#FFFFFF'; // TODO: add to resuable colors
+  background: #FFFFFF; // TODO: add to resuable colors
 }
 
+
+// wallet view
+
 .wallet-view {
   flex: 33.5 0 33.5%;
   background: #FAFAFA, // TODO: add to reusable colors
 }
 
-// wallet view
+.account-options-menu {
+  align-items: center;
+  justify-content: flex-start;
+  margin: 5% 7%;
+}
+
+
 
 .wallet-view.sidebar {
   flex: 1 0 230px;
@@ -118,6 +128,13 @@
 
 // wallet view
 .account-name {
-  font-size: 102%;
-  margin-left: 3%;
+  @media screen and (max-width: 575px) {
+    font-size: 102%;
+    margin-left: 3%;
+  }
+
+  @media screen and (max-width: 575px) {
+    text-align: center;
+  }
+
 }