Skip to content

Commit 56bc1d3

Browse files
johurul-pimjojohurul-pimjo
authored
Merge pull request #70 from tusar-pimjo/docs/preview-dark
fix(doc): fix global search modal dark mode styles
2 parents 749b5ed + c9dac11 commit 56bc1d3

File tree

3 files changed

+44
-41
lines changed

3 files changed

+44
-41
lines changed

‎apps/docs/src/components/copy-to-clipboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function CopyToClipboard({ content, showLabel, className }: PropsType) {
4040
)}
4141

4242
{showLabel && (
43-
<span className="text-[#374151] font-medium -tracking-[0.2px]">
43+
<span className="text-[#374151] font-medium -tracking-[0.2px] dark:text-gray-400">
4444
{isCopied ? "Copied" : "Copy"}{" "}
4545
<span className="sr-only">to clipboard</span>
4646
</span>

‎apps/docs/src/components/global-header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,15 +80,15 @@ export default function GlobalHeader() {
8080
<div className="flex gap-3 items-center">
8181
<button
8282
onClick={() => setIsSearchOpen(true)}
83-
className="flex max-2xl:pr-1.5 max-2xl:pl-2 max-2xl:py-1 2xl:h-11 2xl:w-65 dark:bg-white/5 items-center gap-1.5 2xl:gap-3 rounded-full 2xl:rounded-xl border border-gray-200 bg-white px-3 text-gray-400 dark:border-[#111827] transition hover:bg-gray-50 dark:hover:bg-white/10"
83+
className="group flex md:h-10.5 max-2xl:pr-1.5 max-2xl:pl-2 max-2xl:py-1 2xl:h-11 2xl:w-65 dark:bg-white/5 items-center gap-1.5 2xl:gap-3 rounded-xl border border-gray-200 bg-white px-3 text-gray-400 dark:border-[#111827] transition hover:bg-gray-50 dark:hover:bg-white/10"
8484
>
8585
<SearchIcon className="size-5" />
8686

8787
<span className="hidden 2xl:flex text-sm flex-1">
8888
Quick search...
8989
</span>
9090

91-
<span className="flex h-6.5 w-10 items-center dark:border-[#111827] justify-center rounded-lg border border-gray-100 text-xs max-2xl:rounded-full">
91+
<span className="flex h-6.5 w-10 bg-white items-center dark:border-[#111827] justify-center rounded-lg border border-gray-100 text-xs dark:bg-white/10 dark:group-hover:border-transparent">
9292
⌘ K
9393
</span>
9494
</button>

‎apps/docs/src/components/search-modal.tsx‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
107107
if (items.length === 0) return null;
108108

109109
return (
110-
<div key={title}>
110+
<div key={title} className="">
111111
<div className="py-3">
112112
<div className="px-5 py-3">
113113
<h3 className="text-sm leading-5 font-medium tracking-[0.2px] text-gray-400">
@@ -126,13 +126,13 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
126126
onClick={() => onClose()}
127127
className={`flex w-full items-center justify-between rounded-lg px-5 py-3 text-left transition-colors ${
128128
selectedIndex === globalIndex
129-
? "bg-gray-100"
130-
: "hover:bg-gray-50"
129+
? "bg-gray-100 dark:bg-[#111827]"
130+
: "hover:bg-gray-50 dark:hover:bg-[#111827]"
131131
}`}
132132
>
133133
<div className="flex-1">
134134
<div className="flex items-center gap-2">
135-
<span className="text-sm leading-5 font-medium tracking-[0.2px] text-gray-700">
135+
<span className="text-sm leading-5 font-medium tracking-[0.2px] text-gray-700 dark:text-white/90">
136136
{item.title}
137137
</span>
138138

@@ -164,10 +164,10 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
164164
{/* Modal */}
165165
<div
166166
ref={modalRef}
167-
className="relative w-full max-w-[600px] overflow-hidden rounded-3xl bg-white p-3 shadow-2xl"
167+
className="relative w-full max-w-150 overflow-hidden rounded-3xl bg-white p-3 shadow-2xl dark:bg-[#030712] dark:border-[#111827]"
168168
>
169169
{/* Search Input */}
170-
<div className="flex h-12.5 items-center gap-3 rounded-xl border border-[#EDEDED] bg-gray-50 p-2.5 pl-5">
170+
<div className="flex h-12.5 items-center gap-3 rounded-xl border border-[#EDEDED] bg-gray-50 p-2.5 pl-5 dark:bg-[#111827] dark:border-[#111827]">
171171
<svg
172172
width="16"
173173
height="16"
@@ -187,32 +187,35 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
187187
placeholder="Type something to search..."
188188
value={searchQuery}
189189
onChange={e => setSearchQuery(e.target.value)}
190-
className="placeholder:text-md flex-1 bg-transparent text-base text-gray-900 outline-none placeholder:leading-6 placeholder:tracking-[-0.2px] placeholder:text-gray-400"
190+
className="placeholder:text-md flex-1 bg-transparent text-base text-gray-900 outline-none placeholder:leading-6 placeholder:tracking-[-0.2px] placeholder:text-gray-400 dark:placeholder:text-[#6B7280] dark:text-white"
191191
/>
192-
<button
193-
onClick={() => {
194-
setSearchQuery("");
195-
}}
196-
className="inline-flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500"
197-
aria-label="Close search"
198-
>
199-
<svg
200-
xmlns="http://www.w3.org/2000/svg"
201-
width={20}
202-
height={20}
203-
viewBox="0 0 20 20"
204-
fill="none"
192+
193+
{searchQuery.length > 0 && (
194+
<button
195+
onClick={() => {
196+
setSearchQuery("");
197+
}}
198+
className="inline-flex size-8 cursor-pointer items-center justify-center rounded-lg bg-transparent text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-white"
199+
aria-label="Close search"
205200
>
206-
<path
207-
d="M13.736 4.99a.9.9 0 011.274 1.273L11.273 10l3.737 3.737a.9.9 0 01-1.274 1.274L10 11.274 6.262 15.01a.9.9 0 01-1.274-1.274L8.726 10 4.988 6.263a.9.9 0 011.274-1.274l3.737 3.738 3.737-3.738z"
208-
fill="currentColor"
209-
/>
210-
</svg>
211-
</button>
201+
<svg
202+
xmlns="http://www.w3.org/2000/svg"
203+
width={20}
204+
height={20}
205+
viewBox="0 0 20 20"
206+
fill="none"
207+
>
208+
<path
209+
d="M13.736 4.99a.9.9 0 011.274 1.273L11.273 10l3.737 3.737a.9.9 0 01-1.274 1.274L10 11.274 6.262 15.01a.9.9 0 01-1.274-1.274L8.726 10 4.988 6.263a.9.9 0 011.274-1.274l3.737 3.738 3.737-3.738z"
210+
fill="currentColor"
211+
/>
212+
</svg>
213+
</button>
214+
)}
212215
</div>
213216

214217
{/* Results */}
215-
<div className="max-h-[400px] overflow-y-auto">
218+
<div className="max-h-100 overflow-y-auto">
216219
{allResults.length === 0 ? (
217220
<div className="px-5 py-8 text-center text-sm text-gray-500">
218221
{searchQuery
@@ -226,13 +229,13 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
226229
(blocks.length > 0 ||
227230
templates.length > 0 ||
228231
pages.length > 0) && (
229-
<div className="space-5 border-t border-dashed border-gray-100" />
232+
<div className="space-5 border-t border-dashed border-gray-100 dark:border-[#1F2937]" />
230233
)}
231234

232235
{renderSection("Blocks", blocks, docs.length)}
233236
{blocks.length > 0 &&
234237
(templates.length > 0 || pages.length > 0) && (
235-
<div className="space-5 border-t border-dashed border-gray-100" />
238+
<div className="space-5 border-t border-dashed border-gray-100 dark:border-[#1F2937]" />
236239
)}
237240

238241
{renderSection(
@@ -241,7 +244,7 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
241244
docs.length + blocks.length
242245
)}
243246
{templates.length > 0 && pages.length > 0 && (
244-
<div className="space-5 border-t border-dashed border-gray-100" />
247+
<div className="space-5 border-t border-dashed border-gray-100 dark:border-[#1F2937]" />
245248
)}
246249

247250
{renderSection(
@@ -254,34 +257,34 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
254257
</div>
255258

256259
{/* Footer */}
257-
<div className="border-t border-dashed border-gray-200 px-5 pt-5 pb-3">
260+
<div className="border-t border-dashed border-gray-200 px-5 pt-5 pb-3 dark:border-[#1F2937]">
258261
<div className="flex items-center justify-center gap-x-6 text-xs text-gray-500">
259262
<div className="flex items-center gap-2">
260-
<span className="text-xs leading-4 tracking-[-0.2px] text-gray-500">
263+
<span className="text-xs leading-4 tracking-[-0.2px] text-gray-500 dark:text-[#9CA3AF]">
261264
Navigate
262265
</span>
263266
<span className="flex items-center gap-1">
264-
<kbd className="rounded-md bg-gray-100 p-1.5 text-[10px] font-medium">
267+
<kbd className="rounded-md bg-gray-100 p-1.5 text-[10px] font-medium dark:bg-[#111827]">
265268
<ArrowDownward className="size-3" />
266269
</kbd>
267-
<kbd className="rounded-md bg-gray-100 p-1.5 text-[10px] font-medium">
270+
<kbd className="rounded-md bg-gray-100 p-1.5 text-[10px] font-medium dark:bg-[#111827]">
268271
<ArrowUpward className="size-3" />
269272
</kbd>
270273
</span>
271274
</div>
272275
<div className="flex items-center gap-2">
273-
<kbd className="rounded-md bg-gray-100 p-1.5 text-[10px] font-medium">
276+
<kbd className="rounded-md bg-gray-100 p-1.5 text-[10px] font-medium dark:bg-[#111827]">
274277
<TurnDownLeft className="size-3.5" />
275278
</kbd>
276-
<span className="text-xs leading-4 tracking-[-0.2px] text-gray-500">
279+
<span className="text-xs leading-4 tracking-[-0.2px] text-gray-500 dark:text-[#9CA3AF]">
277280
Enter
278281
</span>
279282
</div>
280283
<div className="flex items-center gap-2">
281-
<kbd className="rounded-md bg-gray-100 p-1.5 text-xs leading-4 font-medium tracking-[-0.2px]">
284+
<kbd className="rounded-md bg-gray-100 p-1.5 text-xs leading-4 font-medium tracking-[-0.2px] dark:bg-[#111827]">
282285
esc
283286
</kbd>
284-
<span className="text-xs leading-4 tracking-[-0.2px] text-gray-500">
287+
<span className="text-xs leading-4 tracking-[-0.2px] text-gray-500 dark:text-[#9CA3AF]">
285288
Close
286289
</span>
287290
</div>

0 commit comments

Comments
 (0)