Merge pull request #1304 from prymitive/tweak-navbar

fix(ui): tweak navbar css to better align elements

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">

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}
               >

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">

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;
+    }
   }
 }