Skip to content

Commit fb6da94

Browse files
samejrsamejr
committed
Light mode styling
1 parent 2c378d5 commit fb6da94

File tree

2 files changed

+18
-16
lines changed

2 files changed

+18
-16
lines changed

‎app/components/SearchBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export function SearchBar() {
5050
"w-[95vw] max-w-2xl rounded-lg",
5151
"top-0 left-[50%] -translate-x-[50%]",
5252
"mt-[60px]",
53-
"bg-white border-[1px] dark:border-slate-700 dark:bg-slate-800"
53+
"bg-white border-[1px] border-slate-500 dark:border-slate-700 dark:bg-slate-800"
5454
)}
5555
>
5656
<SearchPalette

‎app/components/SearchPalette.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -108,21 +108,21 @@ export function SearchPalette({
108108
<>
109109
<div
110110
{...cb.getComboboxProps()}
111-
className="search-container max-h-[60vh] px-4 pt-4 overflow-hidden"
111+
className="max-h-[60vh] px-4 pt-4 overflow-hidden"
112112
>
113113
<label
114114
{...cb.getLabelProps()}
115-
className="relative text-gray-400 focus-within:text-gray-600 block"
115+
className="relative text-slate-400 focus-within:text-slate-600 block"
116116
>
117-
<SearchIcon className="absolute w-7 h-7 top-1/2 transform -translate-y-1/2 left-3 text-white pointer-events-none" />
117+
<SearchIcon className="absolute w-7 h-7 top-1/2 transform -translate-y-1/2 left-3 text-slate-700 transition dark:text-white pointer-events-none" />
118118
<input
119119
{...cb.getInputProps({ onKeyDown: handleInputKeyDown })}
120120
type="text"
121121
placeholder="Search the JSON…"
122-
className="search-field w-full pl-12 pr-4 py-4 rounded-sm text-white text-2xl caret-indigo-700 bg-slate-900 border-indigo-700 focus:outline-none focus:ring focus:ring-indigo-700"
122+
className="w-full pl-12 pr-4 py-4 rounded-sm text-slate-900 bg-slate-100 text-2xl caret-indigo-700 border-indigo-700 transition dark:text-white dark:bg-slate-900 focus:outline-none focus:ring focus:ring-indigo-700"
123123
/>
124124
</label>
125-
<div className="search-content flex flex-col mt-4 mb-2">
125+
<div className="flex flex-col mt-4 mb-2">
126126
<div className="results flex">
127127
{searchState.status !== "idle" &&
128128
(!searchState.results || searchState.results.length === 0) && (
@@ -155,7 +155,7 @@ export function SearchPalette({
155155
</div>
156156
<ul
157157
{...cb.getMenuProps({ ref: listRef })}
158-
className="search-items w-full max-h-[calc(60vh-120px)] overflow-y-auto relative"
158+
className="w-full max-h-[calc(60vh-120px)] overflow-y-auto relative"
159159
>
160160
<li
161161
key="total-size"
@@ -187,20 +187,22 @@ export function SearchPalette({
187187
})}
188188
</ul>
189189
</div>
190-
<div className="footer flex items-center w-full gap-4 px-3 py-2 border-t-[1px] border-slate-700 rounded-br-lg rounded-bl-lg bg-slate-900">
190+
<div className="flex items-center w-full gap-4 px-3 py-2 border-t-[1px] bg-slate-100 border-slate-200 rounded-br-lg rounded-bl-lg transition dark:bg-slate-900 dark:border-slate-700">
191191
<div className="flex items-center gap-1">
192192
<ShortcutIcon className="w-4 h-4 text-sm text-slate-900 bg-slate-300 transition duration-75 group-hover:bg-slate-100 dark:bg-slate-500 dark:group-hover:bg-slate-600">
193193
⏎
194194
</ShortcutIcon>
195-
<Body className="text-slate-500">to select</Body>
195+
<Body className="text-slate-700 dakr:text-slate-500">to select</Body>
196196
</div>
197197
<div className="flex items-center gap-1">
198198
<ArrowKeysUpDownIcon className="transition text-slate-300 dark:text-slate-500" />
199-
<Body className="text-slate-500">to navigate</Body>
199+
<Body className="text-slate-700 dakr:text-slate-500">
200+
to navigate
201+
</Body>
200202
</div>
201203
<div className="flex items-center gap-1">
202204
<EscapeKeyIcon className="transition text-slate-300 dark:text-slate-500" />
203-
<Body className="text-slate-500">to close</Body>
205+
<Body className="text-slate-700 dakr:text-slate-500">to close</Body>
204206
</div>
205207
</div>
206208
</>
@@ -231,13 +233,13 @@ export function SearchItem({
231233
<div
232234
className={classnames(
233235
"w-full h-[calc(100%-4px)] mb-2 rounded-sm group",
234-
isHighlighted ? "dark:bg-indigo-700" : "dark:bg-slate-900"
236+
isHighlighted ? "bg-indigo-700" : "bg-slate-100 dark:bg-slate-900"
235237
)}
236238
>
237239
<div className="flex items-center w-full p-2 pl-4 pr-3">
238-
<ItemIcon className="h-6 w-6 text-slate-400 group-hover:text-white"></ItemIcon>
240+
<ItemIcon className="h-6 w-6 text-slate-500 group-hover:text-white group-hover:dark:text-slate-800 dark:text-slate-400"></ItemIcon>
239241
<div className="flex flex-col w-full ml-3">
240-
<div className="path flex items-center gap-1 mb-1 text-white">
242+
<div className="path flex items-center gap-1 mb-1 text-slate-800 dark:text-white group-hover:text-white">
241243
{components.map((c, index) => {
242244
return [
243245
<Body key={c.toString() + index + "body"} className="text-lg">
@@ -301,8 +303,8 @@ function SearchResultValue({
301303
return (
302304
<Mono
303305
className={classnames(
304-
"text-slate-500",
305-
isHighlighted ? "dark:text-white" : ""
306+
"",
307+
isHighlighted ? "text-white" : "text-slate-600 dark:text-slate-500"
306308
)}
307309
>
308310
{output}

0 commit comments

Comments
 (0)