From df9fa920f97dbcef1579f0a12ba7873116f28a93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Garc=C3=ADa?= <dgarcia@initios.com>
Date: Fri, 23 Nov 2018 14:48:09 +0100
Subject: [PATCH] Increase top margin for notifications counter

---
 .../dropdown-notifications.jade               |  2 +-
 .../navigation-bar/navigation-bar.scss        | 21 ++++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade b/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade
index 4898c830..ce314317 100644
--- a/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade
+++ b/app/modules/navigation-bar/dropdown-notifications/dropdown-notifications.jade
@@ -6,7 +6,7 @@ a(
     ng-class="{'active': active}"
 )
     tg-svg(svg-icon="icon-bell")
-    div.counter(ng-if="total", ng-class="{'active': newEvent}") {{ total }}
+    div.counter(ng-if="total", ng-class="{'active': newEvent, 'large': total > 99, 'small': total < 10}") {{ total }}
 div.navbar-dropdown-notifications(
     ng-show="visible",
     ng-mouseleave="visible=false"
diff --git a/app/modules/navigation-bar/navigation-bar.scss b/app/modules/navigation-bar/navigation-bar.scss
index f2cb3b31..56426ebe 100644
--- a/app/modules/navigation-bar/navigation-bar.scss
+++ b/app/modules/navigation-bar/navigation-bar.scss
@@ -215,13 +215,24 @@ $dropdown-width: 350px;
         border-radius: 50%;
         color: $white;
         font-size: .7rem;
-        height: 20px;
-        left: 35px;
-        line-height: 20px;
+        height: 18px;
+        left: 37px;
+        line-height: 18px;
         position: absolute;
         text-align: center;
-        top: 0;
-        width: 20px;
+        top: 3px;
+        width: 18px;
+        &.small {
+            height: 17px;
+            line-height: 17px;
+            width: 17px;
+        }
+        &.large {
+            height: 22px;
+            line-height: 22px;
+            top: 2px;
+            width: 22px;
+        }
         &.active {
             animation-duration: 2s;
             animation-name: highlightFadeOut;