update: header ok

src/styles/abstracts/_variables.scss

@@ -34,7 +34,7 @@
   --color-highlight-primary: var(--color-primary);
   --color-user-panel: var(--color-black);
   --color-bell: var(--color-secondary);
-  --color-avatar-background: var(--color-grey-11);
+  --color-avatar-background: var(--color-grey-10);
   --color-title: var(--color-secondary);
   --color-h1: var(--color-secondary);
   --color-h2: var(--color-secondary);

src/styles/base/header.scss

@@ -7,63 +7,19 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
   display: flex;
   flex-shrink: 0;
-  // padding: 1.6rem 0.64rem;
-  padding: 0 2.5rem;
   position: relative;
   z-index: 1;
 
+  &.is-spaced {
+    padding: 0 2.5rem;
+  }
+
   #logo {
-    flex: 1 1 0;
-  }
-  
-  #search-bar {
-    position: relative;
-    
-    #search-input {
-      border-radius: 10em;
-      padding: 0.64rem 1.28rem;
-      border: 1px solid var(--color-grey-10);
-      height: 3.8rem;
-      width: 28rem;
-      -webkit-appearance: textfield;
-    
-      & ~ #close-search-icon,
-      & ~ #search-icon {
-        color: var(--color-grey-10);
-        display: block;
-        font-size: 1.7rem;
-        margin: auto;
-        position: absolute;
-        right: 3.7rem;
-        top: 50%;
-        transform: translateY(-50%);
-        -webkit-text-stroke: 1px var(--color-grey-10);
-      }
-    
-      & ~ #close-search-icon {
-        opacity: 0;
-      }
-    
-      &:focus {
-        & ~ #close-search-icon {
-          opacity: 1;
-        }
-    
-        & ~ #search-icon {
-          visibility: hidden;
-        }
-      }
-    }
-  }
-
-  sib-notifications {
-    color: var(--color-bell);
-
-    @include breakpoint(sm) {
-      padding: 0;
-    }
+    flex: 1 0 0;
+    align-items: stretch;
   }
   
+  /* General styling for both notification and user's panel */
   details {
     margin-right: 2.5rem;
     position: relative;
@@ -83,33 +39,42 @@
       }
     }
   }
+  /* End */
   
-  .sib-notifications__container {
-    position: relative;
-  
-    .sib-notifications__button {
-      @include icon('bell');
-      font-size: 3rem;
-  
-      &::before {
-        margin-left: 0;
-      }
-  
-      img {
-        display: none;
-      }
-  
-      .sib-notifications__counter {
-        left: 2.1rem;
-        position: absolute;
-        top: -3px;
-      }
+  sib-notifications {
+    color: var(--color-bell);
+
+    @include breakpoint(sm) {
+      padding: 0;
     }
   
-    .sib-notifications__list {
-      position: absolute;
-      right: 0;
-      top: 5.6rem;
+    .sib-notifications__container {
+      position: relative;
+    
+      .sib-notifications__button {
+        @include icon('bell');
+        font-size: 3rem;
+    
+        &::before {
+          margin-left: 0;
+        }
+    
+        img {
+          display: none;
+        }
+    
+        .sib-notifications__counter {
+          left: 2.1rem;
+          position: absolute;
+          top: -3px;
+        }
+      }
+    
+      .sib-notifications__list {
+        position: absolute;
+        right: 0;
+        top: 5.6rem;
+      }
     }
   }