Improving header styles

src/base.scss

@@ -9,16 +9,15 @@
 }
 
 :root {
-    // --primary: #1e88e5; 
     --primary: #196eb9;
-    // or 196eb9 => Needs further investigations
+    // 1e88e5 or 196eb9 => Needs further investigations
     --on-primary: white;
     --secondary: #d8701b;
     --on-secondary: black;
     --error: rgb(255, 0, 0);
+    --primary-transparent: #196eb917
 }
 
-$default-font-size: 1rem;
 $primary: var(--primary) !default;
 $on-primary: var(--on-primary) !default;
 

src/base/_global.scss

@@ -1,10 +1,9 @@
 * {
     box-sizing: border-box;
     font-family: 'Roboto', sans-serif;
-    font-size: $default-font-size;
+    font-size: 1rem;
 }
 
-
 html,
 body {
     margin: 0;
@@ -43,4 +42,8 @@ h5 {
 
 h6 {
     font-size: .67rem;
+}
+
+hr {
+    border-top: 1px solid rgb(128, 128, 128);
 }

src/base/_header.scss

@@ -1,35 +1,56 @@
+:root {
+    --header-height: 4rem;
+}
+
 .header {
     background: $primary !important;
     color: $on-primary !important;
 
     display: flex;
-    justify-content: space-between;
-    padding: .75rem;
-    margin-bottom: .5rem;
+    // justify-content: space-between;
+    padding: 1rem;
 
     >* {
+        max-height: 2rem;
         margin: 0;
         background: $primary;
         color: $on-primary;
     }
 
-    .header-title {
-        overflow: hidden;
+    >*:not(:last-child) {
+        margin-right: 1rem;
+    }
+
+    span {
+        line-height: 1.5rem;
+        font-size: 1.5rem;
+        padding: .25rem;
         text-overflow: ellipsis;
         white-space: nowrap;
-        flex-grow: 1;
-        margin: 0 1rem;
     }
 
-    .header-icon-button {
-        display: block;
-        margin-top: auto;
-        margin-bottom: auto;
-        min-width: $default-font-size;
-
-        >svg {
-            height: $default-font-size;
-            width: $default-font-size;
-        }
+    svg {
+        height: 2rem;
+        width: auto;
     }
+
+    // .header-title {
+    //     overflow: hidden;
+    //     text-overflow: ellipsis;
+    //     white-space: nowrap;
+    //     flex-grow: 1;
+    //     margin: 0 1rem;
+    // }
+
+    // .header-icon-button {
+    //     display: block;
+    //     margin-top: auto;
+    //     margin-bottom: auto;
+    //     min-width: 1rem;
+
+    //     >svg {
+    //         height: 1rem;
+    //         width: 1rem;
+    //     }
+    // }
 }