From f2a0013d3615e8d2d4508de6bed78b2a5b3a085a Mon Sep 17 00:00:00 2001
From: Wagner Trezub <wagner.trezub@redturtle.it>
Date: Mon, 5 Feb 2024 10:19:46 +0100
Subject: [PATCH] fix: site search color contrast + code refactoring

---
 src/components/SelectInput/SelectInput.jsx    |  2 +-
 src/theme/ItaliaTheme/Components/_search.scss |  1 +
 src/theme/extras/_search.scss                 | 56 +++++++++++--------
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
index 7e0e37ec9..6f605c872 100644
--- a/src/components/SelectInput/SelectInput.jsx
+++ b/src/components/SelectInput/SelectInput.jsx
@@ -111,7 +111,7 @@ SelectContainer.propTypes = {
 const Option = injectLazyLibs('reactSelect')((props) => {
   const components = props.reactSelect.components;
   return (
-    <div className="select-pill text-primary">
+    <div className="select-pill">
       <components.Option {...props} />
     </div>
   );
diff --git a/src/theme/ItaliaTheme/Components/_search.scss b/src/theme/ItaliaTheme/Components/_search.scss
index eb2d2dc1a..4aca2b046 100644
--- a/src/theme/ItaliaTheme/Components/_search.scss
+++ b/src/theme/ItaliaTheme/Components/_search.scss
@@ -8,5 +8,6 @@
     box-shadow: 0 0 0 2px var(--focus-outline-color) !important;
     outline: none !important;
     background-color: #0062e2;
+    color: #fff;
   }
 }
diff --git a/src/theme/extras/_search.scss b/src/theme/extras/_search.scss
index 20601c063..94001c5c0 100644
--- a/src/theme/extras/_search.scss
+++ b/src/theme/extras/_search.scss
@@ -87,39 +87,49 @@ body.search-modal-opened {
   }
 }
 
-.search-results-wrapper {
-  mark.highlighted-text {
-    background-color: $highlight-search;
+.search-view {
+  label.has-prepend {
+    z-index: unset;
   }
-
-  .card {
-    &::after {
-      content: none;
+  .search-results-wrapper {
+    mark.highlighted-text {
+      background-color: $highlight-search;
     }
 
-    .card-body {
-      .category-top {
-        .data:before {
-          content: none;
+    .card {
+      &::after {
+        content: none;
+      }
+
+      .card-body {
+        .category-top {
+          .data:before {
+            content: none;
+          }
         }
       }
     }
-  }
 
-  .ordering-widget {
-    @media (max-width: 991px) {
-      .bootstrap-select-wrapper {
-        label[for='search-sort-on'] {
-          display: none;
+    .ordering-widget {
+      @media (max-width: 991px) {
+        .bootstrap-select-wrapper {
+          label[for='search-sort-on'] {
+            display: none;
+          }
         }
       }
     }
-  }
 
-  .searchSpinnerWrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 2rem 0;
+    .searchSpinnerWrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 2rem 0;
+    }
+  }
+  .react-select__option--is-focused {
+    border-color: var(--focus-outline-color) !important;
+    box-shadow: 0 0 0 2px var(--focus-outline-color) !important;
+    outline: none !important;
   }
 }