Fix margin, padding, height for header.

ui/app/app.js

@@ -198,46 +198,47 @@ App.prototype.renderAppBar = function () {
       h('.app-header.flex-row.flex-space-between', {
         style: {},
       }, [
+        h('div.app-header-contents', {}, [
+          h('div.left-menu-wrapper', {
+            style: {},
+          }, [
+            // mini logo
+            h('img', {
+              height: 24,
+              width: 24,
+              src: '/images/icon-128.png',
+            }),
 
-        h('div.left-menu-wrapper', {
+            // metamask name
-          style: {},
+            h('h1', {
-        }, [
+              style: {
-          // mini logo
+                position: 'relative',
-          h('img', {
+                left: '9px',
-            height: 24,
+              },
-            width: 24,
+            }, 'MetaMask'),
-            src: '/images/icon-128.png',
-          }),
 
-          // metamask name
+          ]),
-          h('h1', {
-            style: {
-              position: 'relative',
-              left: '9px',
-            },
-          }, 'MetaMask'),
 
-        ]),
+          h('div.network-component-wrapper', {
+            style: {},
+          }, [
+            // Network Indicator
+            h(NetworkIndicator, {
+              network: this.props.network,
+              provider: this.props.provider,
+              onClick: (event) => {
+                event.preventDefault()
+                event.stopPropagation()
+                if (this.props.networkDropdownOpen === false) {
+                  this.props.showNetworkDropdown()
+                } else {
+                  this.props.hideNetworkDropdown()
+                }
+              },
+            }),
 
-        h('div.network-component-wrapper', {
+          ]),
-          style: {},
+        ])
-        }, [
-          // Network Indicator
-          h(NetworkIndicator, {
-            network: this.props.network,
-            provider: this.props.provider,
-            onClick: (event) => {
-              event.preventDefault()
-              event.stopPropagation()
-              if (this.props.networkDropdownOpen === false) {
-                this.props.showNetworkDropdown()
-              } else {
-                this.props.hideNetworkDropdown()
-              }
-            },
-          }),
-
-        ]),
       ]),
 
     ])

ui/app/css/itcss/components/header.scss

@@ -3,8 +3,8 @@
   visibility: visible;
   background: $gallery;
   padding: 6px 8px;
-  height: 12vh;
+  height: 14.4vh;
-  max-height: 60px;
+  max-height: 97px;
   position: relative;
   z-index: $header-z-index;
 
@@ -17,6 +17,18 @@
   }
 }
 
+.app-header-contents {
+  display: flex;
+  justify-content: inherit;
+  width: 100%;
+
+  @media screen and (min-width: 576px) {
+    width: 80vw;
+    margin-left: 10vw;
+    margin-bottom: 15px;
+  }
+}
+
 .app-header h1 {
   font-family: 'Montserrat Regular';
   text-transform: uppercase;

ui/app/css/itcss/components/newui-sections.scss

@@ -106,7 +106,7 @@ $wallet-view-bg: $wild-sand;
 
 @media screen and (min-width: 769px) {
   .main-container {
-    margin-top: 35px;
+    margin-top: 6.9vh;
     width: 80%;
     height: 82vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@@ -115,7 +115,7 @@ $wallet-view-bg: $wild-sand;
 
 @media screen and (min-width: 1281px) {
   .main-container {
-    margin-top: 35px;
+    margin-top: 6.9vh;
     width: 65%;
     height: 82vh;
     box-shadow: 0 0 7px 0 rgba(0, 0, 0, .08);
@@ -162,5 +162,5 @@ $wallet-view-bg: $wild-sand;
 .account-options-menu {
   align-items: center;
   justify-content: flex-start;
-  margin: 5% 7%;
+  margin: 5% 7% 0%;
 }