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

2 files changed, 40 insertions, 2 deletions

diff --git a/ui/app/css/itcss/components/header.scss b/ui/app/css/itcss/components/header.scss
index 0525d00fc..405c45f7f 100644
--- a/ui/app/css/itcss/components/header.scss
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index f087d2651..39cdc507a 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/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%;
   }