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,30 +109,74 @@ App.prototype.renderAppBar = function () {
         },
       }, props.isUnlocked && [
 
-        h(NetworkIndicator, {
+        h('div', {
-          network: this.props.network,
+          style: {
-          onClick: (event) => {
+            display: 'flex',
-            event.preventDefault()
+            flexDirection: 'row',
-            event.stopPropagation()
+            alignItems: 'center',
-            this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
           },
-        }),
+        }, [
+
+          // mini logo
+          h('img', {
+            height: 24,
+            width: 24,
+            src: '/images/icon-128.png',
+          }),
+
+          h(NetworkIndicator, {
+            network: this.props.network,
+            onClick: (event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
+            },
+          }),
+        ]),
 
         // metamask name
-        h('h1', 'MetaMask'),
+        h('h1', {
-        // hamburger
+          style: {
-        h(SandwichExpando, {
+            position: 'relative',
-          width: 16,
+            left: '3px',
-          barHeight: 2,
-          padding: 0,
-          isOpen: props.menuOpen,
-          color: 'rgb(247,146,30)',
-          onClick: (event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            this.props.dispatch(actions.toggleMenu())
           },
-        }),
+        }, '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,
+            barHeight: 2,
+            padding: 0,
+            isOpen: props.menuOpen,
+            color: 'rgb(247,146,30)',
+            onClick: (event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              this.props.dispatch(actions.toggleMenu())
+            },
+          }),
+        ]),
       ]),
     ])
   )