Skip to content

Commit dbacc46

Browse files
committed
fix: home search
1 parent d492ff0 commit dbacc46

File tree

5 files changed

+22
-11
lines changed

5 files changed

+22
-11
lines changed

public/assets/search-white.svg

Lines changed: 3 additions & 0 deletions
Loading

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/** Style Algolia */
22

33
#searchModal.mini {
4-
background: #ffffff;
54
position: fixed;
65
top: 65px;
76
left: 0;
@@ -15,7 +14,6 @@
1514
top: 0;
1615
height: fit-content;
1716
max-height: 80vh;
18-
background: #fff;
1917
position: absolute;
2018
border-radius: 24px;
2119
padding-top: 0;
@@ -141,7 +139,7 @@
141139
.hit {
142140
line-height: 32px;
143141
display: block;
144-
@apply text-primary mb-2;
142+
@apply mb-2 text-black;
145143
}
146144

147145
.queryResults {
@@ -177,6 +175,7 @@
177175
.hitList mark {
178176
background-color: transparent;
179177
font-weight: bold;
178+
@apply text-inherit;
180179
}
181180

182181
.hideSm {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
overflow: hidden;
1010
padding: 0 20px;
1111
border-radius: 0;
12-
@apply bg-white;
12+
@apply bg-pure-white;
1313
}
1414

1515
.wrapper.large {
@@ -21,7 +21,6 @@
2121
margin: 0;
2222
font-size: 16px;
2323
width: 100%;
24-
color: rgb(12, 22, 44);
2524
outline: none;
2625
display: block;
2726
appearance: none;
@@ -34,6 +33,8 @@
3433
border-radius: 0;
3534
height: 50px;
3635
line-height: 45px;
36+
37+
@apply text-black border-black;
3738
}
3839
.input.large {
3940
height: 48px;
@@ -90,6 +91,7 @@
9091
background: transparent url(/svgs/search.svg) left 22px center no-repeat;
9192
padding-left: 60px;
9293
padding-right: 22px;
94+
background-size: 22px auto;
9395
}
9496

9597
.input:focus {

src/components/Header/Search/SearchInput.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,16 @@ export const SearchInput = ({ size, onClose }: { onClose: () => void }) => {
2424
}, [debouncedValue])
2525

2626
return (
27-
<div className={clsx(styles.wrapper, styles[size])}>
27+
<div className={clsx(styles.wrapper, styles[size], "dark:!bg-dark-normal")}>
2828
<input
29-
className={clsx(styles.input, styles[size], ".focus-visible")}
29+
className={clsx(
30+
styles.input,
31+
styles[size],
32+
".focus-visible",
33+
"dark:text-white",
34+
"dark:border-white",
35+
"dark:!bg-[url(/assets/search-white.svg)]"
36+
)}
3037
onBlur={onClose}
3138
onChange={handleChange}
3239
ref={inputRef}

src/components/Header/Search/SearchModal.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ function EmptyQueryBoundary({ children, fallback }) {
4646
<a
4747
style={{ padding: "var(--space-1x) var(--space-2x)" }}
4848
href={article.url}
49-
className={clsx(styles.hit, "paragraph-200", "recommended-match-hit")}
49+
className={clsx(styles.hit, "paragraph-200", "recommended-match-hit", "dark:text-white")}
5050
>
5151
{article.title}
5252
</a>
@@ -66,7 +66,7 @@ function EmptyQueryBoundary({ children, fallback }) {
6666
<a
6767
style={{ padding: "var(--space-1x) var(--space-2x)" }}
6868
href={article.url}
69-
className={clsx(styles.hit, "paragraph-200", "recently-viewed-match-hit")}
69+
className={clsx(styles.hit, "paragraph-200", "recently-viewed-match-hit", "dark:text-white")}
7070
>
7171
{article.title}
7272
</a>
@@ -119,7 +119,7 @@ function CustomHits({ title, hitClassName, ...props }: UseHitsProps & { title: s
119119
<a
120120
// style={{ padding: "var(--space-1x) var(--space-2x)" }}
121121
href={hit.url}
122-
className={clsx(styles.hit, hitClassName, "paragraph-200")}
122+
className={clsx(styles.hit, hitClassName, "paragraph-200 dark:text-white")}
123123
dangerouslySetInnerHTML={{
124124
__html: hit._highlightResult.title.value,
125125
}}
@@ -146,7 +146,7 @@ export function SearchModal({ size = "mini", isOpen, onClose }: { size: Size; is
146146
}
147147

148148
return (
149-
<div id={styles.searchModal} className={styles[size]}>
149+
<div id={styles.searchModal} className={clsx(styles[size], "bg-pure-white", "dark:!bg-dark-normal")}>
150150
<InstantSearch indexName={getIndexName()} searchClient={searchClient}>
151151
<SearchInput size={size} onClose={onClose} />
152152
<div className={styles.resultsWrapper}>

0 commit comments

Comments
 (0)