Merge pull request #315 from MetaMask/UpdatedMenuBar

Updated menu bar

ui/app/account-detail.js

@@ -53,20 +53,12 @@ AccountDetailScreen.prototype.render = function () {
       }, [
 
         // header - identicon + nav
-        h('.flex-row.flex-space-between', {
+        h('.flex-row.flex-center', {
           style: {
             marginTop: 28,
           },
         }, [
 
-          // invisible placeholder for later
-          h('i.fa.fa-users.fa-lg.color-orange', {
-            style: {
-              width: '30px',
-              visibility: 'hidden',
-            },
-          }),
-
           // large identicon
           h('.identicon-wrapper.flex-column.flex-center.select-none', [
             h(Identicon, {
@@ -74,12 +66,6 @@ AccountDetailScreen.prototype.render = function () {
               address: selected,
             }),
           ]),
-
-          // small accounts nav
-          h('img.cursor-pointer.color-orange', {
-            src: 'images/switch_acc.svg',
-            onClick: this.navigateToAccounts.bind(this),
-          }),
         ]),
 
         h('.flex-center', {
@@ -218,11 +204,6 @@ AccountDetailScreen.prototype.transactionList = function () {
   })
 }
 
-AccountDetailScreen.prototype.navigateToAccounts = function (event) {
-  event.stopPropagation()
-  this.props.dispatch(actions.showAccountsPage())
-}
-
 AccountDetailScreen.prototype.requestAccountExport = function () {
   this.props.dispatch(actions.requestExportAccount())
 }

ui/app/app.js

@@ -109,6 +109,21 @@ App.prototype.renderAppBar = function () {
         },
       }, props.isUnlocked && [
 
+        h('div', {
+          style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        }, [
+
+          // mini logo
+          h('img', {
+            height: 24,
+            width: 24,
+            src: '/images/icon-128.png',
+          }),
+
           h(NetworkIndicator, {
             network: this.props.network,
             onClick: (event) => {
@@ -117,9 +132,37 @@ App.prototype.renderAppBar = function () {
               this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
             },
           }),
+        ]),
 
         // metamask name
-        h('h1', 'MetaMask'),
+        h('h1', {
+          style: {
+            position: 'relative',
+            left: '3px',
+          },
+        }, 'MetaMask'),
+
+        h('div', {
+          style: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          },
+        }, [
+
+          // small accounts nav
+          h('img.cursor-pointer.color-orange', {
+            src: 'images/switch_acc.svg',
+            style: {
+              width: '23.5px',
+              marginRight: '8px',
+            },
+            onClick: (event) => {
+              event.stopPropagation()
+              this.props.dispatch(actions.showAccountsPage())
+            },
+          }),
+
           // hamburger
           h(SandwichExpando, {
             width: 16,
@@ -134,6 +177,7 @@ App.prototype.renderAppBar = function () {
             },
           }),
         ]),
+      ]),
     ])
   )
 }