refactor: cleanup css

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>