From f0bb71e637ecc5d5f0c42f40830beeba73652ccb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 19 May 2021 18:21:00 +0100
Subject: [PATCH] chore(ui): tweak navbar UI

---
 ui/src/Styles/Components/NavBar.scss | 10 +++++++---
 ui/src/Styles/DarkTheme.scss         |  6 +++---
 ui/src/Styles/LightTheme.scss        |  6 +++---
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/ui/src/Styles/Components/NavBar.scss b/ui/src/Styles/Components/NavBar.scss
index 133e0d35b..6d7e270ba 100644
--- a/ui/src/Styles/Components/NavBar.scss
+++ b/ui/src/Styles/Components/NavBar.scss
@@ -18,8 +18,6 @@
   }
 
   & .components-navbar-button {
-    border-bottom: $border-width solid transparent;
-
     &.navbar-brand {
       padding-top: 0.4rem;
       padding-bottom: 0.4rem;
@@ -27,7 +25,13 @@
     }
 
     &:hover {
-      border-bottom: $border-width solid $white;
+      border-radius: 0.4rem;
+      @supports (backdrop-filter: blur(12px)) {
+        background-color: rgba($bg-focused, 0.5);
+      }
+      @supports not (backdrop-filter: blur(12px)) {
+        background-color: $bg-focused;
+      }
     }
   }
 
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 591e2803e..aaebcbf3f 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -31,9 +31,9 @@ $form-check-indicator-disabled-bg: $gray-700;
 $form-check-indicator-checked-disabled-bg: $gray-700;
 
 $navbar-dark-brand-color: $navbar-dark-color;
-$navbar-dark-brand-hover-color: $white;
-$navbar-dark-hover-color: $white;
-$navbar-dark-active-color: $white;
+$navbar-dark-brand-hover-color: $gray-200;
+$navbar-dark-hover-color: $gray-200;
+$navbar-dark-active-color: $gray-200;
 
 // fix active tab color, for some reason it ends up with $primary as bg color
 $nav-tabs-link-active-bg: $gray-800;
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index a0d67b0ea..0202ecca5 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -23,9 +23,9 @@ $tooltip-max-width: 400px;
 $link-color: $gray-700;
 
 $navbar-dark-brand-color: $navbar-dark-color;
-$navbar-dark-brand-hover-color: $gray-500;
-$navbar-dark-hover-color: $gray-500;
-$navbar-dark-active-color: $gray-500;
+$navbar-dark-brand-hover-color: $gray-200;
+$navbar-dark-hover-color: $gray-200;
+$navbar-dark-active-color: $gray-200;
 
 // fix active tab color, for some reason it ends up with $primary as bg color
 $nav-tabs-link-active-bg: #fff;