From 5ed743cddddd5c7a2ff1469b6017f1107e00a20e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 10 Aug 2020 18:40:09 +0100
Subject: [PATCH] chore(ui): animate filter input background change

---
 ui/src/Components/NavBar/FilterInput/History.tsx     |  4 ++--
 .../FilterInput/__snapshots__/index.test.tsx.snap    | 10 +++++-----
 ui/src/Components/NavBar/FilterInput/index.tsx       | 10 +++-------
 ui/src/Styles/Components/FilterInput.scss            | 12 ++++++++++++
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.tsx b/ui/src/Components/NavBar/FilterInput/History.tsx
index dedae4483..cb9451a69 100644
--- a/ui/src/Components/NavBar/FilterInput/History.tsx
+++ b/ui/src/Components/NavBar/FilterInput/History.tsx
@@ -222,7 +222,7 @@ const History: FC<{
     // needed to keep track of all filter changes
     <span
       ref={ref}
-      className="input-group-text border-0 rounded-0 bg-transparent px-0"
+      className="input-group-text border-0 rounded-0 bg-inherit px-0"
     >
       <Manager
         data-filters={alertStore.filters.values
@@ -234,7 +234,7 @@ const History: FC<{
             <button
               ref={ref}
               onClick={toggle}
-              className="btn border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon"
+              className="btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon"
               type="button"
               data-toggle="dropdown"
               aria-haspopup="true"
diff --git a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
index 870a9fdcb..8deb7ddca 100644
--- a/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap
+++ b/ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.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 components-navbar-icon\\">
+    <span class=\\"input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon\\">
       <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-0 rounded-0 bg-transparent\\">
+  <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
     <div role=\\"combobox\\"
          aria-haspopup=\\"listbox\\"
          aria-owns=\\"react-autowhatever-1\\"
@@ -44,9 +44,9 @@ exports[`<FilterInput /> matches snapshot on default render 1`] = `
       </div>
     </div>
   </div>
-  <div class=\\"input-group-append bg-transparent\\">
-    <span class=\\"input-group-text border-0 rounded-0 bg-transparent px-0\\">
-      <button class=\\"btn border-0 rounded-0 bg-transparent cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
+  <div class=\\"input-group-append inherit\\">
+    <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
+      <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
               type=\\"button\\"
               data-toggle=\\"dropdown\\"
               aria-haspopup=\\"true\\"
diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx
index 0a5235255..a6f3c6753 100644
--- a/ui/src/Components/NavBar/FilterInput/index.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.tsx
@@ -139,12 +139,12 @@ const FilterInput: FC<{
         }`}
       >
         <div className="input-group-prepend">
-          <span className="input-group-text px-2 border-0 rounded-0 bg-transparent components-navbar-icon">
+          <span className="input-group-text px-2 border-0 rounded-0 bg-inherit components-navbar-icon">
             <FontAwesomeIcon icon={faSearch} />
           </span>
         </div>
         <div
-          className="form-control components-filterinput border-0 rounded-0 bg-transparent"
+          className="form-control components-filterinput border-0 rounded-0 bg-inherit"
           onClick={(event) =>
             onInputClick((event.target as HTMLDivElement).className)
           }
@@ -177,11 +177,7 @@ const FilterInput: FC<{
             theme={AutosuggestTheme}
           />
         </div>
-        <div
-          className={`input-group-append ${
-            isFocused ? "bg-focused" : "bg-transparent"
-          }`}
-        >
+        <div className="input-group-append inherit">
           <History alertStore={alertStore} settingsStore={settingsStore} />
         </div>
       </div>
diff --git a/ui/src/Styles/Components/FilterInput.scss b/ui/src/Styles/Components/FilterInput.scss
index 408aefac8..61caa1a75 100644
--- a/ui/src/Styles/Components/FilterInput.scss
+++ b/ui/src/Styles/Components/FilterInput.scss
@@ -3,6 +3,10 @@
   border-left: 0;
   border-right: 0;
   border-bottom: $border-width solid $filterinput-border;
+
+  .bg-inherit {
+    background-color: inherit;
+  }
 }
 
 .form-control.components-filterinput {
@@ -36,3 +40,11 @@ input.components-filterinput-wrapper {
 .bg-focused {
   background-color: $bg-focused;
 }
+
+.input-group.components-filterinput-outer {
+  &,
+  & .btn,
+  & .btn > svg {
+    transition: background-color 0.2s linear;
+  }
+}