fix: home search

Author: Holybasil

public/assets/search-white.svg

@@ -1,7 +1,6 @@
 /** Style Algolia */
 
 #searchModal.mini {
-  background: #ffffff;
   position: fixed;
   top: 65px;
   left: 0;
@@ -15,7 +14,6 @@
   top: 0;
   height: fit-content;
   max-height: 80vh;
-  background: #fff;
   position: absolute;
   border-radius: 24px;
   padding-top: 0;
@@ -141,7 +139,7 @@
 .hit {
   line-height: 32px;
   display: block;
-  @apply text-primary mb-2;
+  @apply mb-2 text-black;
 }
 
 .queryResults {
@@ -177,6 +175,7 @@
 .hitList mark {
   background-color: transparent;
   font-weight: bold;
+  @apply text-inherit;
 }
 
 .hideSm {

src/components/Header/Search/Search.module.css

@@ -9,7 +9,7 @@
   overflow: hidden;
   padding: 0 20px;
   border-radius: 0;
-  @apply bg-white;
+  @apply bg-pure-white;
 }
 
 .wrapper.large {
@@ -21,7 +21,6 @@
   margin: 0;
   font-size: 16px;
   width: 100%;
-  color: rgb(12, 22, 44);
   outline: none;
   display: block;
   appearance: none;
@@ -34,6 +33,8 @@
   border-radius: 0;
   height: 50px;
   line-height: 45px;
+
+  @apply text-black border-black;
 }
 .input.large {
   height: 48px;
@@ -90,6 +91,7 @@
     background: transparent url(/svgs/search.svg) left 22px center no-repeat;
     padding-left: 60px;
     padding-right: 22px;
+    background-size: 22px auto;
   }
 
   .input:focus {

src/components/Header/Search/SearchInput.module.css

@@ -24,9 +24,16 @@ export const SearchInput = ({ size, onClose }: { onClose: () => void }) => {
   }, [debouncedValue])
 
   return (
-    <div className={clsx(styles.wrapper, styles[size])}>
+    <div className={clsx(styles.wrapper, styles[size], "dark:!bg-dark-normal")}>
       <input
-        className={clsx(styles.input, styles[size], ".focus-visible")}
+        className={clsx(
+          styles.input,
+          styles[size],
+          ".focus-visible",
+          "dark:text-white",
+          "dark:border-white",
+          "dark:!bg-[url(/assets/search-white.svg)]"
+        )}
         onBlur={onClose}
         onChange={handleChange}
         ref={inputRef}

src/components/Header/Search/SearchInput.tsx

@@ -46,7 +46,7 @@ function EmptyQueryBoundary({ children, fallback }) {
                   <a
                     style={{ padding: "var(--space-1x) var(--space-2x)" }}
                     href={article.url}
-                    className={clsx(styles.hit, "paragraph-200", "recommended-match-hit")}
+                    className={clsx(styles.hit, "paragraph-200", "recommended-match-hit", "dark:text-white")}
                   >
                     {article.title}
                   </a>
@@ -66,7 +66,7 @@ function EmptyQueryBoundary({ children, fallback }) {
                       <a
                         style={{ padding: "var(--space-1x) var(--space-2x)" }}
                         href={article.url}
-                        className={clsx(styles.hit, "paragraph-200", "recently-viewed-match-hit")}
+                        className={clsx(styles.hit, "paragraph-200", "recently-viewed-match-hit", "dark:text-white")}
                       >
                         {article.title}
                       </a>
@@ -119,7 +119,7 @@ function CustomHits({ title, hitClassName, ...props }: UseHitsProps & { title: s
               <a
                 // style={{ padding: "var(--space-1x) var(--space-2x)" }}
                 href={hit.url}
-                className={clsx(styles.hit, hitClassName, "paragraph-200")}
+                className={clsx(styles.hit, hitClassName, "paragraph-200 dark:text-white")}
                 dangerouslySetInnerHTML={{
                   __html: hit._highlightResult.title.value,
                 }}
@@ -146,7 +146,7 @@ export function SearchModal({ size = "mini", isOpen, onClose }: { size: Size; is
   }
 
   return (
-    <div id={styles.searchModal} className={styles[size]}>
+    <div id={styles.searchModal} className={clsx(styles[size], "bg-pure-white", "dark:!bg-dark-normal")}>
       <InstantSearch indexName={getIndexName()} searchClient={searchClient}>
         <SearchInput size={size} onClose={onClose} />
         <div className={styles.resultsWrapper}>