From 51a67d03d812a449a477aecf8ecc5700dd0ae221 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 13 Dec 2019 10:30:46 +0000
Subject: [PATCH] fix(ui): more consistent colors on navbar elements

---
 ui/src/Components/NavBar/FilterInput/History.js     |  2 +-
 .../FilterInput/__snapshots__/index.test.js.snap    |  4 ++--
 ui/src/Components/NavBar/FilterInput/index.js       |  2 +-
 ui/src/Styles/Components/NavBar.scss                | 13 ++++++++-----
 ui/src/Styles/DarkTheme.scss                        |  5 +++++
 ui/src/Styles/LightTheme.scss                       |  5 +++++
 6 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index cf206da3b..daceee0c6 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -238,7 +238,7 @@ const History = observer(
               <button
                 ref={ref}
                 onClick={this.collapse.toggle}
-                className="input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
+                className="input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon"
                 type="button"
                 data-toggle="dropdown"
                 aria-haspopup="true"
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
index 2e6fd634a..6c4a5916c 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -4,7 +4,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
 "
 <div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
   <div class=\\"input-group-prepend\\">
-    <span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent text-white\\">
+    <span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -45,7 +45,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
     </div>
   </div>
   <div class=\\"input-group-append bg-transparent\\">
-    <button class=\\"input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
+    <button class=\\"input-group-text border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 components-navbar-icon\\"
             type=\\"button\\"
             data-toggle=\\"dropdown\\"
             aria-haspopup=\\"true\\"
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index 20438e119..ad4148090 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -162,7 +162,7 @@ const FilterInput = onClickOutside(
               }`}
             >
               <div className="input-group-prepend">
-                <span className="input-group-text px-2 border-0 rounded-0 bg-transparent text-white">
+                <span className="input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon">
                   <FontAwesomeIcon icon={faSearch} />
                 </span>
               </div>
diff --git a/ui/src/Styles/Components/NavBar.scss b/ui/src/Styles/Components/NavBar.scss
index f8640f6b1..4f5722017 100644
--- a/ui/src/Styles/Components/NavBar.scss
+++ b/ui/src/Styles/Components/NavBar.scss
@@ -1,12 +1,15 @@
 .navbar-brand {
   min-width: 2.5rem;
-
-  &:hover,
-  &:focus {
-    color: $green !important;
-  }
 }
 
 .components-navbar-button:hover {
   border-bottom: $border-width solid $info;
 }
+
+.components-navbar-icon {
+  color: $navbar-dark-color;
+
+  &.cursor-pointer:hover {
+    color: $navbar-dark-hover-color;
+  }
+}
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 77bcfcfa5..e5b8e8929 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -22,6 +22,11 @@ $light: $gray-800;
 // make links light gray by default instead of green
 $link-color: $gray-400;
 
+$navbar-dark-brand-color: $navbar-dark-color;
+$navbar-dark-brand-hover-color: $white;
+$navbar-dark-hover-color: $white;
+$navbar-dark-active-color: $white;
+
 // 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 0bc003d90..6ee18c1f8 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -20,6 +20,11 @@ $btn-active-box-shadow: 0;
 // make links light gray by default instead of green
 $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;
+
 // fix active tab color, for some reason it ends up with $primary as bg color
 $nav-tabs-link-active-bg: #fff;