fix: Wrong color of the search icon (#4407)

* fix: search icon wrong color

* fix: search icon color on hover and focus

Author: awoloszyn22

src/shared/components/GenericList/SearchInput.jsx

@@ -109,9 +109,10 @@ export function SearchInput({
       </Label>
       <Input
         id={`search-${entriesKind}`}
+        className="search-input"
         accessibleName={`search-${entriesKind}`}
         type="Search"
-        icon={<Icon className="bsl-has-color-status-4" name="search" />}
+        icon={<Icon name="search" className="search-icon" />}
         ref={searchInputRef}
         value={searchQuery}
         onInput={(e) => handleQueryChange(e.target.value)}

src/shared/components/GenericList/SearchInput.scss

@@ -3,8 +3,22 @@
   align-items: center;
   gap: 0.5rem;
 
-  #search-input {
+  .search-input {
     margin: 0;
+
+    &:focus {
+      .search-icon {
+        &:hover {
+          color: var(--sapIllus_HoverButtonColor);
+        }
+      }
+    }
+
+    .search-icon {
+      &:hover {
+        box-shadow: var(--sapField_Hover_Shadow);
+      }
+    }
   }
 }
 

src/styles/sapIllus-Fills.css

@@ -7,6 +7,7 @@
   --sapIllus_BackgroundColor: #e7e9ea;
   --sapIllus_ObjectFillColor: #fff;
   --sapIllus_AccentColor: #ffba10;
+  --sapIllus_HoverButtonColor: #0064d9;
   --sapIllus_NoColor: none;
   --sapIllus_PatternShadow: url(#sapIllus_PatternShadow);
   --sapIllus_PatternHighlight: url(#sapIllus_PatternHighlight);