refactor: cleanup css

packages/website/src/components/CodeListing.tsx

@@ -26,15 +26,15 @@ export function CodeListing({
 }: CodeListingProps) {
 	return (
 		<div className={className}>
-			<div key={name} className="flex flex-col mb-2 ml-3">
-				<div className="w-full flex flex-row">
-					<h4 className="font-mono my-0">{`${name}`}</h4>
-					<h4 className="mx-3 my-0">{separator}</h4>
-					<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0">
+			<div key={name} className="flex flex-col">
+				<div className="w-full flex flex-row gap-3">
+					<h4 className="font-mono m-0">{`${name}`}</h4>
+					<h4 className="m-0">{separator}</h4>
+					<h4 className="font-mono m-0">
 						<HyperlinkedText tokens={typeTokens} />
 					</h4>
 				</div>
-				{summary && <p className="text-dark-100 mt-2">{summary}</p>}
+				{summary && <p className="text-dark-100 dark:text-gray-300">{summary}</p>}
 				{children}
 			</div>
 		</div>

packages/website/src/components/DocContainer.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { CodeListingSeparatorType } from './CodeListing';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Section } from './Section';
 import { TypeParamTable } from './TypeParamTable';
@@ -21,27 +22,26 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 	return (
 		<>
 			<div className="bg-white dark:bg-dark border-b-solid border-gray border-0.5 border-width-0.5 sticky top-0 px-10 py-2">
-				<h2 className="flex items-center break-all m-0 dark:text-white">
-					{generateIcon(kind, 'mr-2')}
+				<h2 className="flex gap-2 items-center break-all m-0 dark:text-white">
+					{generateIcon(kind)}
 					{name}
 				</h2>
 			</div>
 
 			<div className="px-10 pt-5 pb-10">
-				<div>
-					<SyntaxHighlighter
-						wrapLines
-						wrapLongLines
-						language="typescript"
-						style={vscDarkPlus}
-						codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
-					>
-						{excerpt}
-					</SyntaxHighlighter>
-				</div>
+				<SyntaxHighlighter
+					wrapLines
+					wrapLongLines
+					language="typescript"
+					style={vscDarkPlus}
+					codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
+				>
+					{excerpt}
+				</SyntaxHighlighter>
 				{extendsTokens?.length ? (
-					<div className="flex flex-row items-center dark:text-white">
-						<h3 className="mr-5 mt-0 mb-0">Extends</h3>
+					<div className="flex flex-row items-center dark:text-white gap-3">
+						<h3 className="m-0">Extends:</h3>
+						<h3 className="m-0">{CodeListingSeparatorType.Type}</h3>
 						<p className="font-mono">
 							<HyperlinkedText tokens={extendsTokens} />
 						</p>
@@ -49,11 +49,11 @@ export function DocContainer({ name, kind, excerpt, summary, typeParams, childre
 				) : null}
 				<div className="space-y-10">
 					<Section title="Summary" className="dark:text-white">
-						<p className="text-dark-100 mb-0 dark:text-gray-400">{summary ?? 'No summary provided.'}</p>
+						<p className="text-dark-100 dark:text-gray-300 m-0">{summary ?? 'No summary provided.'}</p>
 					</Section>
 					{typeParams?.length ? (
 						<Section title="Type Parameters" className="dark:text-white" defaultClosed>
-							<TypeParamTable data={typeParams} className="mb-5 p-3" />
+							<TypeParamTable data={typeParams} />
 						</Section>
 					) : null}
 					<div className="space-y-10">{children}</div>

packages/website/src/components/HyperlinkedText.tsx

@@ -19,12 +19,16 @@ export function HyperlinkedText({ tokens }: HyperlinkedTextProps) {
 				if (token.path) {
 					return (
 						<Link key={token.text} href={token.path}>
-							{token.text}
+							<a className="text-blue-500 dark:text-blue-300">{token.text}</a>
 						</Link>
 					);
 				}
 
-				return token.text;
+				return (
+					<span key={token.text} className="text-blue-500 dark:text-blue-300">
+						{token.text}
+					</span>
+				);
 			})}
 		</>
 	);

packages/website/src/components/ItemSidebar.tsx

@@ -19,30 +19,30 @@ function onMenuClick() {
 
 export function ItemSidebar({ packageName, data, selectedMember }: ItemListProps) {
 	return (
-		<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-b-solid border-0.5 border-gray border-width-0.5">
-			<div className=" border-b-solid border-0.5 border-gray border-width-0.5 py-2 sticky top-0">
-				<h2 className="px-2 flex items-center m-0 dark:text-white">
-					<VscPackage className="px-1" />
+		<div className="flex flex-col max-h-full min-w-[270px] lg:border-r-solid border-0.5 border-gray">
+			<div className="border-b-0.5 border-gray py-2">
+				<h2 className="flex gap-2 items-center m-0 px-2 dark:text-white">
+					<VscPackage />
 					{`${packageName}`}
 				</h2>
 				<button className="lg:hidden mr-2 bg-transparent border-none cursor-pointer" onClick={onMenuClick}>
 					<FiMenu size={32} />
 				</button>
 			</div>
-			<div className="hidden lg:block lg:min-h-screen overflow-y-scroll overflow-x-clip p-7 space-y-2">
+			<div className="hidden lg:block lg:min-h-full overflow-y-scroll overflow-x-clip p-7 space-y-2">
 				{data.members.map((member, i) => (
-					<div key={i} className="mb-1">
-						<div className="flex items-center align-center no-underline break-all text-blue-500 dark:text-blue-300">
-							<Link href={member.path}>
-								<a
-									className={`no-underline m-0 hover:color-black hover:font-semibold  ${
-										selectedMember === member.name ? 'color-black font-semibold' : 'color-gray-600'
-									}`}
-								>
-									{member.name}
-								</a>
-							</Link>
-						</div>
+					<div key={i} className="flex items-center no-underline break-all text-blue-500 dark:text-blue-300">
+						<Link href={member.path}>
+							<a
+								className={`no-underline m-0 ${
+									selectedMember === member.name
+										? 'text-blue-500 dark:text-blue-300 font-semibold'
+										: 'text-black dark:text-white hover:text-dark-100 dark:hover:text-gray-300 hover:font-semibold'
+								}`}
+							>
+								{member.name}
+							</a>
+						</Link>
 					</div>
 				))}
 			</div>

packages/website/src/components/MethodItem.tsx

@@ -28,23 +28,23 @@ function onAnchorClick() {
 export function MethodItem({ data }: MethodItemProps) {
 	return (
 		<div className="flex flex-col">
-			<div className="flex content-center">
+			<div className="flex">
 				<button className="bg-transparent border-none cursor-pointer dark:text-white" onClick={onAnchorClick}>
 					<FiLink size={16} />
 				</button>
-				<div className="flex flex-col ml-3">
-					<div className="w-full flex flex-row">
-						<h4 className="font-mono my-0 break-all">{`${getShorthandName(data)}`}</h4>
-						<h4 className="mx-3 my-0">:</h4>
-						<h4 className="font-mono text-blue-800 dark:text-blue-400 my-0 break-all ">
+				<div className="flex flex-col">
+					<div className="w-full flex flex-row gap-3">
+						<h4 className="font-mono m-0 break-all">{`${getShorthandName(data)}`}</h4>
+						<h4 className="m-0">:</h4>
+						<h4 className="font-mono m-0 break-all">
 							<HyperlinkedText tokens={data.returnTypeTokens} />
 						</h4>
 					</div>
 				</div>
 			</div>
-			<div className="mx-10">
-				{data.summary && <p className="text-dark-100 dark:text-gray-400 mt-2">{data.summary}</p>}
-				{data.parameters.length ? <ParameterTable className="mb-10 mx-5" data={data.parameters} /> : null}
+			<div className="mx-7 mb-5">
+				{data.summary && <p className="text-dark-100 dark:text-gray-300">{data.summary}</p>}
+				{data.parameters.length ? <ParameterTable data={data.parameters} /> : null}
 			</div>
 		</div>
 	);

packages/website/src/components/MethodList.tsx

@@ -9,7 +9,7 @@ export interface MethodListProps {
 export function MethodList({ data }: MethodListProps) {
 	return (
 		<div>
-			<div className="flex flex-col">
+			<div className="flex flex-col gap-5">
 				{data.map((method) => (
 					<MethodItem key={method.name} data={method} />
 				))}

packages/website/src/components/PropertyList.tsx

@@ -7,7 +7,7 @@ export interface PropertyListProps {
 
 export function PropertyList({ data }: PropertyListProps) {
 	return (
-		<div className="flex flex-col">
+		<div className="flex flex-col gap-5">
 			{data.map((prop) => (
 				<CodeListing key={prop.name} name={prop.name} typeTokens={prop.propertyTypeTokens} summary={prop.summary} />
 			))}

packages/website/src/components/Section.tsx

@@ -16,29 +16,36 @@ export function Section({ title, children, className, defaultClosed }: SectionPr
 	return (
 		<div className={className}>
 			<AnimatePresence initial={false}>
-				<h3 className="-ml-4 flex whitespace-pre-wrap pl-4 font-semibold dark:text-white">
+				<h3 className="flex gap-2 whitespace-pre-wrap font-semibold dark:text-white">
 					<div onClick={() => setCollapsed(!collapsed)}>
-						{collapsed ? <VscChevronRight className="mr-2" size={20} /> : <VscChevronDown className="mr-2" size={20} />}
+						{collapsed ? <VscChevronRight size={20} /> : <VscChevronDown size={20} />}
 					</div>
-
 					{title}
 				</h3>
-				{!collapsed && (
-					<motion.div
-						transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
-						key="content"
-						initial="collapsed"
-						animate="open"
-						exit="collapsed"
-						variants={{
-							open: { opacity: 1, height: 'auto' },
-							collapsed: { opacity: 0, height: 0 },
-						}}
-					>
-						<div className="pb-5">{children}</div>
-					</motion.div>
+				{collapsed ? null : (
+					<>
+						<motion.div
+							transition={{ duration: 0.5, ease: [0.04, 0.62, 0.23, 0.98] }}
+							key="content"
+							initial="collapsed"
+							animate="open"
+							exit="collapsed"
+							variants={{
+								open: {
+									opacity: 1,
+									height: 'auto',
+									paddingLeft: '1.75rem',
+									paddingRight: '1.75rem',
+									paddingBottom: '2.5rem',
+								},
+								collapsed: { opacity: 0, height: 0, paddingLeft: '1.75rem', paddingRight: '1.75rem', paddingBottom: 0 },
+							}}
+						>
+							{children}
+						</motion.div>
+						<Separator />
+					</>
 				)}
-				<Separator />
 			</AnimatePresence>
 		</div>
 	);

packages/website/src/components/Seperator.tsx

@@ -1,3 +1,3 @@
 export function Separator() {
-	return <div className="h-[1px] w-full bg-gray-300 mb-3" />;
+	return <div className="h-[1px] w-full bg-gray-300" />;
 }

packages/website/src/components/SidebarLayout.tsx

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import { type ItemListProps, ItemSidebar } from './ItemSidebar';
-import type { findMember } from '~/model.server';
+import type { findMember } from '~/util/model.server';
 
 export function SidebarLayout({
 	packageName,

packages/website/src/components/Table.tsx

@@ -19,7 +19,7 @@ export function Table({ rows, columns, columnStyles, className }: TableProps) {
 				<thead>
 					<tr>
 						{columns.map((column) => (
-							<th key={column} className="border-b z-10 text-left text-sm pl-2 border-slate-400">
+							<th key={column} className="border-b z-10 text-left text-sm pl-2 border-gray">
 								{column}
 							</th>
 						))}
@@ -31,9 +31,7 @@ export function Table({ rows, columns, columnStyles, className }: TableProps) {
 							{Object.entries(row).map(([colName, val]) => (
 								<td
 									key={colName}
-									className={`p-2 text-sm border-b text-left border-slate-300 break-all ${
-										columnStyles?.[colName] ?? ''
-									}`}
+									className={`p-2 text-sm border-b text-left border-gray break-all ${columnStyles?.[colName] ?? ''}`}
 								>
 									{val}
 								</td>