From 766b25af4c28f6c2c224c404d7f89762b692bb57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 21 Nov 2019 20:53:52 +0000
Subject: [PATCH] feat(ui): more minimalistic style of the top filter bar

---
 ui/src/Components/NavBar/FilterInput/History.js           | 2 +-
 .../NavBar/FilterInput/__snapshots__/index.test.js.snap   | 8 ++++----
 ui/src/Components/NavBar/FilterInput/index.css            | 2 ++
 ui/src/Components/NavBar/FilterInput/index.js             | 6 +++---
 ui/src/DarkTheme.scss                                     | 4 ----
 5 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index e9f620b4d..d3d384be8 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/ui/src/Components/NavBar/FilterInput/History.js
@@ -240,7 +240,7 @@ const History = observer(
               <button
                 ref={ref}
                 onClick={this.collapse.toggle}
-                className="input-group-text rounded-right cursor-pointer components-navbar-history px-2"
+                className="input-group-text border-left-0 border-right-0 border-top-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 95dc37fe4..fbafcf007 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\\">
   <div class=\\"input-group-prepend\\">
-    <span class=\\"input-group-text px-2\\">
+    <span class=\\"input-group-text px-2 border-left-0 border-right-0 border-top-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\\">
+  <div class=\\"form-control components-filterinput border-left-0 border-right-0 border-top-0 rounded-0 bg-transparent\\">
     <div role=\\"combobox\\"
          aria-haspopup=\\"listbox\\"
          aria-owns=\\"react-autowhatever-1\\"
@@ -29,7 +29,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
          class=\\"autosuggest d-inline-block\\"
     >
       <input type=\\"text\\"
-             class=\\"components-filterinput-wrapper\\"
+             class=\\"components-filterinput-wrapper text-white\\"
              placeholder
              size=\\"1\\"
              value
@@ -45,7 +45,7 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
     </div>
   </div>
   <div class=\\"input-group-append\\">
-    <button class=\\"input-group-text rounded-right cursor-pointer components-navbar-history px-2\\"
+    <button class=\\"input-group-text border-left-0 border-right-0 border-top-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.css b/ui/src/Components/NavBar/FilterInput/index.css
index 09a942ed2..13cd709ea 100644
--- a/ui/src/Components/NavBar/FilterInput/index.css
+++ b/ui/src/Components/NavBar/FilterInput/index.css
@@ -3,6 +3,8 @@
   height: auto;
   min-height: 2.6rem;
 
+  box-shadow: none;
+
   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 0.25rem;
diff --git a/ui/src/Components/NavBar/FilterInput/index.js b/ui/src/Components/NavBar/FilterInput/index.js
index a21cffef5..359a07172 100644
--- a/ui/src/Components/NavBar/FilterInput/index.js
+++ b/ui/src/Components/NavBar/FilterInput/index.js
@@ -123,7 +123,7 @@ const FilterInput = observer(
       const { value } = inputProps;
       return (
         <input
-          className="components-filterinput-wrapper"
+          className="components-filterinput-wrapper text-white"
           placeholder=""
           size={value.length + 1}
           {...inputProps}
@@ -144,12 +144,12 @@ const FilterInput = observer(
         >
           <div className="input-group w-100 mr-2">
             <div className="input-group-prepend">
-              <span className="input-group-text px-2">
+              <span className="input-group-text px-2 border-left-0 border-right-0 border-top-0 rounded-0 bg-transparent text-white">
                 <FontAwesomeIcon icon={faSearch} />
               </span>
             </div>
             <div
-              className="form-control components-filterinput"
+              className="form-control components-filterinput border-left-0 border-right-0 border-top-0 rounded-0 bg-transparent"
               onClick={event => {
                 this.onInputClick(this.inputStore.ref, event);
               }}
diff --git a/ui/src/DarkTheme.scss b/ui/src/DarkTheme.scss
index 69abd4616..6162fcbe0 100644
--- a/ui/src/DarkTheme.scss
+++ b/ui/src/DarkTheme.scss
@@ -120,10 +120,6 @@ $badge-light-bg: #d2dae0;
 
   & .form-control {
     color: $gray-200 !important;
-    background-color: $alertgroup-body-bg !important;
-  }
-  & .input-group-text {
-    background-color: $silence-bg !important;
   }
 
   & .react-datepicker,