feature: vertical align

src/styles/header/_index.scss

@@ -3,6 +3,13 @@ header {
   position: fixed;
   z-index: 999;
 
+  .v-aligned::before {
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    height: 100%;
+  }
+
   img.logo {
     max-width: 200px;
   }
@@ -25,7 +32,7 @@ header {
   /* End */
 
   solid-notifications {
-    color: var(--color-primary);
+    color: var(--color-heading);
 
     @media(min-width: 640px) {
       padding: 0;
@@ -60,6 +67,7 @@ header {
           }
 
           span {
+            background-color: var(--color-primary);
             color: white;
           }
         }
@@ -210,10 +218,10 @@ header {
               }
 
               .solid-notification__summary {
-                color: var(--color-grey);
+                color: #636363;
                 font-size: 1.2rem;
                 line-height: 1.7rem;
-                margin: 1.1rem 0 0;
+                margin-top: 4px;
 
                 @media(min-width: 640px) {
                   max-width: 226px;
@@ -225,6 +233,10 @@ header {
               }
             }
 
+            .solid-notification__date {
+              display: none;
+            }
+
             .solid-notification__read {
               display: none;
             }

src/views/partials/header.pug

@@ -1,11 +1,11 @@
-.segment.lg-quarter
+.segment.lg-quarter.v-aligned
   solid-link(next='dashboard')
     img.logo(src=`${clientLogo || '/images/logo.png'}`)
 
 .segment.lg-quarter
   span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')
 
-.segment.lg-quarter
+.segment.lg-quarter.v-aligned
   solid-notifications.notLoggedIn(
     nested-field="inbox"
     bind-user