From 1e5d21d7ed9ffd29a24e2861cad1143a69cd7a15 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 2 Apr 2021 16:02:25 +0200
Subject: [PATCH] fix: header - notifications look better on Firefox

---
 src/styles/header/_index.scss | 23 ++++++++++++++---------
 src/views/partials/header.pug |  2 +-
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/styles/header/_index.scss b/src/styles/header/_index.scss
index b296da1..d1e9eac 100644
--- a/src/styles/header/_index.scss
+++ b/src/styles/header/_index.scss
@@ -28,7 +28,9 @@ header {
   solid-notifications {
     color: var(--color-heading);
     align-self: center;
-    margin-top: 9px;
+
+    height: 25px;
+    width: 25px;
 
     .solid-notifications__container {
       position: relative;
@@ -39,11 +41,14 @@ header {
       }
 
       .solid-notifications__button {
-        margin-top: -9px;
-        font-size: 24px;
+        font-size: 25px;
+        padding: 0;
+        line-height: 1;
+        height: auto;
+        width: auto;
 
         &::before {
-          margin-left: -9px;
+          // margin-left: -9px;
         }
 
         &:hover, &:focus {
@@ -55,11 +60,11 @@ header {
         }
 
         .solid-notifications__counter {
-          height: 18px;
-          width: 18px;
-          left: 17px;
+          left: 12px;
           position: absolute;
-          top: 5px;
+          top: -4px;
+          width: 18px;
+          height: 18px;
 
           span {
             background-color: var(--color-primary);
@@ -93,7 +98,7 @@ header {
             position: absolute;
             width: 0;
             height: 0;
-            margin-left: -5.05em;
+            margin-left: -4.2em;
             top: 0px;
             left: 50%;
             border: 1em solid black;
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index e9db9e5..5277980 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -17,7 +17,7 @@ div
             )
 
     if componentSet.has("notification")
-      solid-notifications.segment.margin-right-small(
+      solid-notifications.segment.margin-right-large(
         nested-field="inbox"
         bind-user
       )