From f1c130fa7cca1e5c977309cf509c0429852040ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 28 Nov 2019 18:51:11 +0000
Subject: [PATCH] fix(ui): border overrides causes color flap on load

---
 ui/src/Components/NavBar/FilterInput/History.js  |  2 +-
 .../FilterInput/__snapshots__/index.test.js.snap |  8 ++++----
 ui/src/Components/NavBar/FilterInput/index.js    | 16 +++++++---------
 ui/src/Styles/Components/FilterInput.scss        |  4 +---
 4 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index 6f45606a8..cf206da3b 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-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
+                className="input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2"
                 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 601041d51..f9da87833 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.js.snap
@@ -2,9 +2,9 @@
 
 exports[`<FilterInput /> matches snapshot on default render 1`] = `
 "
-<div class=\\"input-group w-100 mr-2\\">
+<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-prepend\\">
-    <span class=\\"input-group-text px-2 border-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent text-white\\">
+    <span class=\\"input-group-text px-2 border-0 rounded-0 bg-transparent text-white\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -21,7 +21,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
       </svg>
     </span>
   </div>
-  <div class=\\"form-control components-filterinput border-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent\\">
+  <div class=\\"form-control components-filterinput border-0 rounded-0 bg-transparent\\">
     <div role=\\"combobox\\"
          aria-haspopup=\\"listbox\\"
          aria-owns=\\"react-autowhatever-1\\"
@@ -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-left-0 border-right-0 border-top-0 border-light rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
+    <button class=\\"input-group-text border-0 rounded-0 bg-transparent text-white cursor-pointer components-navbar-history px-2\\"
             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 1ed033bf2..d71e29ef1 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -149,20 +149,18 @@ const FilterInput = observer(
           onSubmit={this.onSubmit}
           data-filters={alertStore.filters.values.map(f => f.raw).join(" ")}
         >
-          <div className="input-group w-100 mr-2">
+          <div
+            className={`input-group w-100 mr-2 border-left-0 border-right-0 border-top-0 border border-light ${
+              this.inputStore.focused ? "bg-focused" : "bg-transparent"
+            }`}
+          >
             <div className="input-group-prepend">
-              <span
-                className={`input-group-text px-2 border-left-0 border-right-0 border-top-0 border-light rounded-0 ${
-                  this.inputStore.focused ? "bg-focused" : "bg-transparent"
-                } text-white`}
-              >
+              <span className="input-group-text px-2 border-0 rounded-0 bg-transparent text-white">
                 <FontAwesomeIcon icon={faSearch} />
               </span>
             </div>
             <div
-              className={`form-control components-filterinput border-left-0 border-right-0 border-top-0 border-light rounded-0 ${
-                this.inputStore.focused ? "bg-focused" : "bg-transparent"
-              }`}
+              className="form-control components-filterinput border-0 rounded-0 bg-transparent"
               onClick={event => {
                 this.onInputClick(this.inputStore.ref, event);
               }}
diff --git a/ui/src/Styles/Components/FilterInput.scss b/ui/src/Styles/Components/FilterInput.scss
index 2982f3267..65a7e542e 100644
--- a/ui/src/Styles/Components/FilterInput.scss
+++ b/ui/src/Styles/Components/FilterInput.scss
@@ -27,8 +27,6 @@ input.components-filterinput-wrapper {
   margin-bottom: 2px;
 }
 
-.form-control.bg-focused,
-.input-group-text.bg-focused,
-.input-group-append.bg-focused {
+.bg-focused {
   background-color: lighten($blue, 5%);
 }