fix: style docsearch modal

fontsource · Apr 17, 2024 · 19add8e · 19add8e
1 parent e96c2ed
commit 19add8e
Show file tree

Hide file tree

Showing 2 changed files with 109 additions and 6 deletions.
diff --git a/website/app/components/docs/DocsHeader.module.css b/website/app/components/docs/DocsHeader.module.css
@@ -1,5 +1,104 @@
 /* DocsHeader */
-
 .title {
 	color: var(--mantine-color-purple-0);
 }
+
+.search-button {
+	height: 40px;
+	width: 240px;
+
+	padding: 8px 16px;
+	gap: 10px;
+
+	border-radius: 4px;
+
+	font-size: 15px;
+
+	@mixin light {
+		background-color: var(--mantine-color-background-2);
+		color: var(--mantine-color-text-1);
+	}
+
+	@mixin dark {
+		background-color: var(--mantine-color-background-6);
+		color: var(--mantine-color-text-0);
+	}
+
+	p {
+		opacity: 0.5;
+	}
+
+	@media (max-width: $mantine-breakpoint-sm) {
+		display: none;
+	}
+}
+
+.docsearch {
+	--docsearch-primary-color: var(--mantine-color-purple-0);
+	--docsearch-container-background: rgba(52, 58, 70, 0.8);
+	--docsearch-modal-shadow: none;
+	--docsearch-searchbox-shadow: 0 0 0 2px var(--mantine-color-purpleHover-5);
+	--docsearch-hit-height: 48px;
+	--docsearch-searchbox-height: 72px;
+
+	@mixin light {
+		--docsearch-modal-background: var(--mantine-color-background-0);
+		--docsearch-highlight-color: var(--mantine-color-purple-0);
+		--docsearch-hit-background: var(--mantine-color-background-1);
+
+		--docsearch-text-color: var(--mantine-color-text-1);
+	}
+
+	@mixin dark {
+		--docsearch-modal-background: var(--mantine-color-background-5);
+		--docsearch-hit-background: var(--mantine-color-background-6);
+		--docsearch-highlight-color: var(--mantine-color-purple-0);
+
+		--docsearch-text-color: var(--mantine-color-text-0);
+		--docsearch-hit-color: rgba(255, 255, 255, 0.7);
+	}
+
+	header {
+		border-radius: 16px 16px 0 0;
+		padding-bottom: 16px;
+		background-color: var(--docsearch-modal-background);
+
+		form {
+			@mixin light {
+				background-color: var(--mantine-color-background-0);
+				color: var(--mantine-color-text-1);
+			}
+
+			@mixin dark {
+				background-color: var(--mantine-color-background-5);
+				color: var(--mantine-color-text-0);
+			}
+		}
+	}
+
+	li {
+		padding-bottom: 10px;
+
+		a {
+			box-shadow: none;
+		}
+	}
+
+	footer {
+		@mixin light {
+			background-color: var(--mantine-color-background-0);
+			color: var(--mantine-color-text-1);
+		}
+
+		@mixin dark {
+			border-top: 2px solid var(--mantine-color-background-3);
+			box-shadow: none;
+			background-color: var(--mantine-color-background-5);
+			color: var(--mantine-color-text-0);
+		}
+
+		li {
+			padding-bottom: 0;
+		}
+	}
+}
diff --git a/website/app/components/docs/DocsHeader.tsx b/website/app/components/docs/DocsHeader.tsx
@@ -1,7 +1,7 @@
 import '@docsearch/css';
 
 import { type DocSearchModal as DocSearchModalComponent } from '@docsearch/react';
-import { Modal, Text, Title, UnstyledButton } from '@mantine/core';
+import { Group, Modal, Text, Title, UnstyledButton } from '@mantine/core';
 import { useDisclosure, useMounted } from '@mantine/hooks';
 import { Link, useNavigate } from '@remix-run/react';
 import { lazy, type LazyExoticComponent, useRef } from 'react';
@@ -23,7 +23,7 @@ export function Hit({ hit, children }: HitProps) {
 const DocSearchModal: LazyExoticComponent<typeof DocSearchModalComponent> =
 	lazy(
 		async () =>
-			// @ts-expect-error allow dynamic import
+			// @ts-expect-error allow dynamic import with no type declarations
 			await import('@docsearch/react/modal').then((mod) => ({
 				default: mod.DocSearchModal,
 			})),
@@ -58,12 +58,15 @@ export const DocsHeader = () => {
 			<UnstyledButton
 				ref={searchButtonRef}
 				onClick={open}
-				className={classes.wrapper}
+				className={classes['search-button']}
 			>
-				<IconSearch />
-				<Text>Search documentation</Text>
+				<Group>
+					<IconSearch />
+					<Text>Search documentation</Text>
+				</Group>
 			</UnstyledButton>
 			<Modal.Root
+				className={classes.docsearch}
 				opened={searchOpen}
 				onClose={close}
 				centered
@@ -77,6 +80,7 @@ export const DocsHeader = () => {
 								appId="YWR9D3OTR6"
 								apiKey="c9e0707b51c2712b86c1725c9ab09237"
 								indexName="fontsource"
+								placeholder="Search documentation..."
 								onClose={close}
 								initialScrollY={window.scrollY}
 								hitComponent={Hit}