Refactor app-header css, including box shadow and z-index

ui/app/app.js

@@ -172,25 +172,11 @@ App.prototype.renderAppBar = function () {
     }, [
 
       h('.app-header.flex-row.flex-space-between', {
-        style: {
+        style: {},
-          alignItems: 'center',
-          visibility: props.isUnlocked ? 'visible' : 'none',
-          background: '#EFEFEF', // $gallery
-          paddingTop: '1.5vh',
-          height: '12vh',
-          maxHeight: '60px',
-          position: 'relative',
-          zIndex: 12,
-        },
       }, [
 
-        h('div.left-menu-section', {
+        h('div.left-menu-wrapper', {
-          style: {
+          style: {},
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginBottom: '1.8em',
-          },
         }, [
           // mini logo
           h('img', {
@@ -209,13 +195,8 @@ App.prototype.renderAppBar = function () {
 
         ]),
 
-        h('div', {
+        h('div.network-component-wrapper', {
-          style: {
+          style: {},
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginBottom: '1.8em',
-          },
         }, [
           // Network Indicator
           h(NetworkIndicator, {

ui/app/components/network.js

@@ -60,7 +60,7 @@ Network.prototype.render = function () {
   }
 
   return (
-    h('#network_component.pointer', {
+    h('.network-component.pointer', {
       title: hoverText,
       onClick: (event) => this.props.onClick(event),
     }, [

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

@@ -1,6 +1,22 @@
 .app-header {
+  align-items: center;
+  visibility: visible;
+  background: rgb(239, 239, 239);
+  padding-top: 1.5vh;
+  height: 12vh;
+  max-height: 60px;
+  position: relative;
+  z-index: 12;
   padding: 6px 8px;
   // background: #EFEFEF; // $gallery
+
+  @media screen and (max-width: 575px) {
+    position: fixed;
+    height: 34px;
+    width: 100%;
+    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.08);
+    z-index: 30;
+  }
 }
 
 .app-header h1 {
@@ -16,3 +32,23 @@ h2.page-subtitle {
   font-size: 1em;
   margin: 12px;
 }
+
+.network-component-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  @media screen and (min-width: 576px) {
+    margin-bottom: 1.8em;
+  }
+}
+
+.left-menu-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  @media screen and (min-width: 576px) {
+    margin-bottom: 1.8em;
+  }
+}

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

@@ -2,10 +2,10 @@
   NewUI Container Elements
  */
 
+// Main container
 .main-container {
   position: absolute;
   z-index: 18;
-  box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   font-family: DIN OT;
   display: flex;
   flex-wrap: wrap;
@@ -56,6 +56,7 @@
     margin-top: 35px;
     width: 85%;
     height: 90vh;
+    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   }
 }
 
@@ -64,6 +65,7 @@
     margin-top: 35px;
     width: 80%;
     height: 82vh;
+    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   }
 }
 
@@ -72,6 +74,7 @@
     margin-top: 35px;
     width: 65%;
     height: 82vh;
+    box-shadow: 0 0 7px 0 rgba(0,0,0,0.08);
   }
 }
 
@@ -86,7 +89,6 @@
 
   .main-container {
     margin-top: 35px;
-    // position: relative;
     width: 100%;
     height: 100%;
   }