From f58f11c512b97851c0acb3c3c24d87c3272f60bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 12 Dec 2019 16:24:20 +0000
Subject: [PATCH 1/2] fix(ui): follow navbar button colors when setting color
 for filter input border

---
 .../NavBar/FilterInput/__snapshots__/index.test.js.snap    | 2 +-
 ui/src/Components/NavBar/FilterInput/index.js              | 2 +-
 ui/src/Styles/Components/FilterInput.scss                  | 7 +++++++
 ui/src/Styles/DarkTheme.scss                               | 1 +
 ui/src/Styles/LightTheme.scss                              | 1 +
 5 files changed, 11 insertions(+), 2 deletions(-)

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 f9da87833..2e6fd634a 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`<FilterInput /> matches snapshot on default render 1`] = `
 "
-<div class=\\"input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light bg-transparent\\">
+<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\\">
       <svg aria-hidden=\\"true\\"
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index e93c79e21..20438e119 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -157,7 +157,7 @@ const FilterInput = onClickOutside(
             data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
           >
             <div
-              className={`input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light ${
+              className={`input-group w-100 mr-2 components-filterinput-outer ${
                 this.inputStore.focused ? "bg-focused" : "bg-transparent"
               }`}
             >
diff --git a/ui/src/Styles/Components/FilterInput.scss b/ui/src/Styles/Components/FilterInput.scss
index 65a7e542e..0a95d919e 100644
--- a/ui/src/Styles/Components/FilterInput.scss
+++ b/ui/src/Styles/Components/FilterInput.scss
@@ -1,3 +1,10 @@
+.input-group.components-filterinput-outer {
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: $border-width solid $filterinput-border;
+}
+
 .form-control.components-filterinput {
   cursor: text;
   height: auto;
diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss
index 42150504e..77bcfcfa5 100644
--- a/ui/src/Styles/DarkTheme.scss
+++ b/ui/src/Styles/DarkTheme.scss
@@ -64,6 +64,7 @@ $accordion-active-bg: $gray-700;
 $filter-input-hoover-bg: $gray-700;
 $filter-input-hoover-color: $white;
 $placeholder-color: $gray-600;
+$filterinput-border: $navbar-dark-color;
 
 $datepicker__background-color: $gray-700;
 $datepicker__border-color: $gray-800;
diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss
index 54073aa51..0bc003d90 100644
--- a/ui/src/Styles/LightTheme.scss
+++ b/ui/src/Styles/LightTheme.scss
@@ -55,6 +55,7 @@ $accordion-active-bg: $gray-200;
 $filter-input-hoover-bg: $white;
 $filter-input-hoover-color: $black;
 $placeholder-color: $secondary;
+$filterinput-border: $navbar-dark-color;
 
 $datepicker__background-color: $white;
 $datepicker__border-color: $gray-300;

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 2/2] 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;