Rearrange header components: closer to redesigned UI

ui/app/app.js

@@ -82,7 +82,7 @@ App.prototype.render = function () {
       // app bar
       this.renderAppBar(),
       this.renderNetworkDropdown(),
-      this.renderDropdown(),
+      // this.renderDropdown(),
 
       h(Loading, {
         isLoading: isLoading || isLoadingNetwork,
@@ -120,7 +120,7 @@ App.prototype.renderAppBar = function () {
         style: {
           alignItems: 'center',
           visibility: props.isUnlocked ? 'visible' : 'none',
-          background: props.isUnlocked ? 'white' : 'none',
+          background: '#EFEFEF', // $gallery
           height: '38px',
           position: 'relative',
           zIndex: 12,
@@ -134,7 +134,6 @@ App.prototype.renderAppBar = function () {
             alignItems: 'center',
           },
         }, [
-
           // mini logo
           h('img', {
             height: 24,
@@ -142,46 +141,34 @@ App.prototype.renderAppBar = function () {
             src: '/images/icon-128.png',
           }),
 
-          h(NetworkIndicator, {
+          // metamask name
-            network: this.props.network,
+          h('h1', {
-            provider: this.props.provider,
+            style: {
-            onClick: (event) => {
+              position: 'relative',
-              event.preventDefault()
+              left: '9px',
-              event.stopPropagation()
-              this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
             },
-          }),
+          }, 'MetaMask'),
-        ]),
 
-        // metamask name
+        ]),
-        props.isUnlocked && h('h1', {
-          style: {
-            position: 'relative',
-            left: '9px',
-          },
-        }, 'MetaMask'),
 
-        props.isUnlocked && h('div', {
+        h('div', {
           style: {
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'center',
           },
         }, [
-
+          // Network Indicator
-          // hamburger
+          h(NetworkIndicator, {
-          props.isUnlocked && h(SandwichExpando, {
+            network: this.props.network,
-            width: 16,
+            provider: this.props.provider,
-            barHeight: 2,
-            padding: 0,
-            isOpen: state.isMainMenuOpen,
-            color: 'rgb(247,146,30)',
             onClick: (event) => {
               event.preventDefault()
               event.stopPropagation()
-              this.setState({ isMainMenuOpen: !state.isMainMenuOpen })
+              this.setState({ isNetworkMenuOpen: !isNetworkMenuOpen })
             },
           }),
+
         ]),
       ]),
     ])
@@ -213,8 +200,8 @@ App.prototype.renderNetworkDropdown = function () {
     zIndex: 11,
     style: {
       position: 'absolute',
-      left: '2px',
+      right: '2px',
-      top: '36px',
+      top: '38px',
     },
     innerStyle: {
       padding: '2px 16px 2px 0px',