fix: site search color contrast + code refactoring

RedTurtle · Feb 5, 2024 · f2a0013 · f2a0013
1 parent c654e61
commit f2a0013
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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;
   }
 }