From 4779f25206649a879fc87b603bc5fd3c304c4538 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 26 Dec 2019 21:34:40 +0000
Subject: [PATCH] fix(ui): tweak navbar css to better align elements

---
 ui/src/Components/MainModal/index.js     |  2 +-
 ui/src/Components/OverviewModal/index.js |  4 +--
 ui/src/Components/SilenceModal/index.js  |  2 +-
 ui/src/Styles/Components/NavBar.scss     | 40 +++++++++++++-----------
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/ui/src/Components/MainModal/index.js b/ui/src/Components/MainModal/index.js
index a0f00422e..791dbde63 100644
--- a/ui/src/Components/MainModal/index.js
+++ b/ui/src/Components/MainModal/index.js
@@ -47,7 +47,7 @@ const MainModal = observer(
         <React.Fragment>
           <li
             className={`nav-item components-navbar-button ${
-              this.toggle.show ? "border-bottom border-info" : ""
+              this.toggle.show ? "border-info" : ""
             }`}
           >
             <TooltipWrapper title="Settings">
diff --git a/ui/src/Components/OverviewModal/index.js b/ui/src/Components/OverviewModal/index.js
index 0b779ce58..007df4ce5 100644
--- a/ui/src/Components/OverviewModal/index.js
+++ b/ui/src/Components/OverviewModal/index.js
@@ -47,8 +47,8 @@ const OverviewModal = observer(
           <TooltipWrapper title="Show alert overview">
             <Flash spy={alertStore.info.totalAlerts}>
               <div
-                className={`text-center d-inline-block cursor-pointer navbar-brand m-0 components-navbar-button ${
-                  this.toggle.show ? "border-bottom border-info" : ""
+                className={`text-center d-inline-block cursor-pointer navbar-brand m-0 components-navbar-button  ${
+                  this.toggle.show ? "border-info" : ""
                 }`}
                 onClick={this.toggle.toggle}
               >
diff --git a/ui/src/Components/SilenceModal/index.js b/ui/src/Components/SilenceModal/index.js
index 9c8002041..aaf176f2f 100644
--- a/ui/src/Components/SilenceModal/index.js
+++ b/ui/src/Components/SilenceModal/index.js
@@ -45,7 +45,7 @@ const SilenceModal = observer(
         <React.Fragment>
           <li
             className={`nav-item components-navbar-button ${
-              silenceFormStore.toggle.visible ? "border-bottom border-info" : ""
+              silenceFormStore.toggle.visible ? "border-info" : ""
             }`}
           >
             <TooltipWrapper title="New silence">
diff --git a/ui/src/Styles/Components/NavBar.scss b/ui/src/Styles/Components/NavBar.scss
index 9bf9424d4..df525d6e9 100644
--- a/ui/src/Styles/Components/NavBar.scss
+++ b/ui/src/Styles/Components/NavBar.scss
@@ -4,27 +4,29 @@
   & .form-control.components-filterinput {
     min-height: 2.6rem;
   }
-}
 
-.navbar-brand {
-  min-width: 2.5rem;
-}
-
-.components-navbar-button {
-  &.navbar-brand {
-    padding-top: 0.36rem;
-    padding-bottom: 0.36rem;
+  & .navbar-brand {
+    min-width: 2.5rem;
   }
 
-  &:hover {
-    border-bottom: $border-width solid $info;
-  }
-}
-
-.components-navbar-icon {
-  color: $navbar-dark-color;
-
-  &.cursor-pointer:hover {
-    color: $navbar-dark-hover-color;
+  & .components-navbar-button {
+    border-bottom: $border-width solid transparent;
+
+    &.navbar-brand {
+      padding-top: 0.362rem;
+      padding-bottom: 0.362rem;
+    }
+
+    &:hover {
+      border-bottom: $border-width solid $info;
+    }
+  }
+
+  & .components-navbar-icon {
+    color: $navbar-dark-color;
+
+    &.cursor-pointer:hover {
+      color: $navbar-dark-hover-color;
+    }
   }
 }