fix: general styling

packages/website/package.json

@@ -54,8 +54,8 @@
 		"minisearch": "^5.0.0",
 		"next": "^12.2.5",
 		"next-mdx-remote": "^4.1.0",
+		"next-progress": "^2.2.0",
 		"next-themes": "^0.2.0",
-		"nextjs-progressbar": "^0.0.14",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-icons": "^4.4.0",

packages/website/src/components/AnchorButton.tsx

@@ -1,4 +1,4 @@
-import { styled } from '../../stitches.config';
+import { darkTheme, styled } from '../../stitches.config';
 
 export const AnchorButton = styled('a', {
 	display: 'flex',
@@ -29,15 +29,28 @@ export const AnchorButton = styled('a', {
 	variants: {
 		color: {
 			secondary: {
+				color: 'black',
 				backgroundColor: '$gray4',
 
 				'&:hover': {
 					backgroundColor: '$gray5',
 				},
 
 				'&:active': {
-					backgroundColor: '$gray7',
+					backgroundColor: '$gray6',
 				},
+
+				[`.${darkTheme} &`]: {
+					color: 'white',
+				},
+			},
+		},
+
+		dense: {
+			true: {
+				height: 24,
+				padding: '0 8px',
+				fontSize: 12,
 			},
 		},
 	},

packages/website/src/components/Container.tsx

@@ -3,14 +3,18 @@ import { styled } from '../../stitches.config';
 export const Container = styled('div', {
 	display: 'flex',
 	flexDirection: 'column',
-	height: '100%',
-	placeContent: 'center',
 	placeItems: 'center',
-	padding: '0 32px',
+	padding: '64px 32px',
 	maxWidth: 1_200,
 	margin: 'auto',
 	gap: 50,
 
+	'@md': {
+		height: '100%',
+		placeContent: 'center',
+		padding: '0 64px',
+	},
+
 	variants: {
 		xs: {
 			true: {

packages/website/src/components/DocContainer.tsx

@@ -8,7 +8,6 @@ import type {
 import { Group, Stack, Title, Text, Box, MediaQuery, Aside, ScrollArea, Skeleton, Divider } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { useRouter } from 'next/router';
-import { useTheme } from 'next-themes';
 import { Fragment, type PropsWithChildren } from 'react';
 import {
 	VscSymbolClass,
@@ -19,10 +18,9 @@ import {
 	VscListSelection,
 	VscSymbolParameter,
 } from 'react-icons/vsc';
-import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
+import { SyntaxHighlighter } from './SyntaxHighlighter';
 import { TableOfContentItems } from './TableOfContentItems';
 import { TypeParamTable } from './TypeParamTable';
 import { TSDoc } from './tsdoc/TSDoc';
@@ -66,7 +64,6 @@ export function DocContainer({
 }: DocContainerProps) {
 	const router = useRouter();
 	const matches = useMediaQuery('(max-width: 768px)');
-	const { theme } = useTheme();
 
 	return (
 		<Group>
@@ -89,14 +86,7 @@ export function DocContainer({
 
 				<Skeleton visible={router.isFallback} radius="sm">
 					<Box pb="xs">
-						<SyntaxHighlighter
-							wrapLongLines
-							language="typescript"
-							style={theme === 'dark' ? vscDarkPlus : ghcolors}
-							codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-						>
-							{excerpt}
-						</SyntaxHighlighter>
+						<SyntaxHighlighter code={excerpt} />
 					</Box>
 				</Skeleton>
 

packages/website/src/components/SelectionButton.tsx

@@ -0,0 +1,17 @@
+import { styled } from '../../stitches.config';
+
+export const SelectionButton = styled('div', {
+	color: '$gray12',
+	backgroundColor: '$gray3',
+	padding: 10,
+	borderRadius: 4,
+
+	'&:hover': {
+		backgroundColor: '$gray4',
+	},
+
+	'&:active': {
+		backgroundColor: '$gray5',
+		transform: 'translate3d(0, 1px, 0)',
+	},
+});

packages/website/src/components/SidebarLayout.tsx

@@ -35,8 +35,8 @@ import { WiDaySunny, WiNightClear } from 'react-icons/wi';
 import useSWR from 'swr';
 import vercelLogo from '../assets/powered-by-vercel.svg';
 import { SidebarItems } from './SidebarItems';
+import { PACKAGES } from '~/util/constants';
 import type { findMember } from '~/util/model.server';
-import { PACKAGES } from '~/util/packages';
 
 const fetcher = async (url: string) => {
 	const res = await fetch(url);
@@ -211,9 +211,8 @@ export function SidebarLayout({
 
 	return (
 		<AppShell
-			sx={(theme) => ({
+			sx={() => ({
 				main: {
-					background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
 					overflowX: 'auto',
 				},
 			})}

packages/website/src/components/SplitContainer.tsx

@@ -4,14 +4,13 @@ export const SplitContainer = styled('div', {
 	display: 'flex',
 	placeContent: 'space-between',
 	placeItems: 'center',
-	gap: 16,
+	gap: 20,
 
 	variants: {
 		vertical: {
 			true: {
 				flexDirection: 'column',
 				placeContent: 'unset',
-				placeItems: 'unset',
 			},
 		},
 

packages/website/src/components/SyntaxHighlighter.tsx

@@ -0,0 +1,31 @@
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { vscDarkPlus, ghcolors } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+export function SyntaxHighlighter({ language = 'typescript', code }: { code: string; language?: string }) {
+	return (
+		<>
+			<div data-theme="dark">
+				<PrismAsyncLight
+					wrapLines
+					wrapLongLines
+					language={language}
+					style={vscDarkPlus}
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+				>
+					{code}
+				</PrismAsyncLight>
+			</div>
+			<div data-theme="light">
+				<PrismAsyncLight
+					wrapLines
+					wrapLongLines
+					language={language}
+					style={ghcolors}
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+				>
+					{code}
+				</PrismAsyncLight>
+			</div>
+		</>
+	);
+}

packages/website/src/components/TextHighlight.tsx

@@ -0,0 +1,8 @@
+import { styled } from '../../stitches.config';
+
+export const TextHighlight = styled('span', {
+	position: 'relative',
+	backgroundColor: '$blue9',
+	borderRadius: 4,
+	padding: '4px 12px',
+});