From 6010f06c9cca7ce65d0dbb361194960e9f8ce2ff Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 11 Aug 2023 15:47:45 -0400
Subject: [PATCH] Fleet UI: Add hover/focus state to icon and border of label
 filter search (#13299)

---
 .../CustomLabelGroupHeading.tsx                       |  2 +-
 .../components/CustomLabelGroupHeading/_styles.scss   | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
index 5ddf98e242..f6e564b216 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/CustomLabelGroupHeading.tsx
@@ -61,7 +61,6 @@ const CustomLabelGroupHeading = (
         </div>
       </div>
       <div className={`${baseClass}__field`}>
-        <Icon name="search" />
         <input
           className={`${baseClass}__input`}
           ref={inputRef}
@@ -77,6 +76,7 @@ const CustomLabelGroupHeading = (
           onClick={handleInputClick}
           onBlur={onBlurLabelSearchInput}
         />
+        <Icon name="search" />
       </div>
     </components.GroupHeading>
   );
diff --git a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
index e4d6a12bf0..38a1599708 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/components/CustomLabelGroupHeading/_styles.scss
@@ -48,9 +48,18 @@
       color: $ui-fleet-black-50;
     }
 
-    &:focus {
+    &:focus,
+    &:hover {
       outline: none;
       border-color: $core-vibrant-blue;
+
+      + .icon {
+        svg {
+          path {
+            fill: $core-vibrant-blue;
+          }
+        }
+      }
     }
 
     &--disabled {