From 19a2e555b61d2f1ccffc4fed3cdb47cc4c65f10c Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Tue, 15 Dec 2020 15:11:30 +0100
Subject: [PATCH] feature: vertical align

---
 src/styles/header/_index.scss | 18 +++++++++++++++---
 src/views/partials/header.pug |  4 ++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index cea8e22..50e2afc 100644
--- a/src/styles/header/_index.scss
+++ b/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;
             }
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index 56d25bc..7e81c15 100644
--- a/src/views/partials/header.pug
+++ b/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