From a55545850a3abb04f239adb14c341795fb9e313c Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Tue, 23 Aug 2022 01:02:46 +0200
Subject: [PATCH] refactor: better spacing

---
 .../website/src/components/DocContainer.tsx   |  2 +-
 .../website/src/components/ParameterTable.tsx |  2 +-
 .../website/src/components/SidebarLayout.tsx  | 24 +++++++++++++------
 .../src/components/TableOfContentItems.tsx    |  4 ++--
 .../website/src/components/TypeParamTable.tsx | 18 +++++++-------
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/website/src/components/DocContainer.tsx b/packages/website/src/components/DocContainer.tsx
index 6fab957a7..c12afc1e2 100644
--- a/packages/website/src/components/DocContainer.tsx
+++ b/packages/website/src/components/DocContainer.tsx
@@ -133,7 +133,7 @@ export function DocContainer({
 			{(kind === 'Class' || kind === 'Interface') && (methods?.length || properties?.length) ? (
 				<MediaQuery smallerThan="lg" styles={{ display: 'none' }}>
 					<Aside hiddenBreakpoint="lg" width={{ lg: 250 }} withBorder>
-						<ScrollArea p="xs" offsetScrollbars>
+						<ScrollArea p="sm" offsetScrollbars>
 							<TableOfContentItems properties={properties ?? []} methods={methods ?? []}></TableOfContentItems>
 						</ScrollArea>
 					</Aside>
diff --git a/packages/website/src/components/ParameterTable.tsx b/packages/website/src/components/ParameterTable.tsx
index 8670ba180..75f3d6b54 100644
--- a/packages/website/src/components/ParameterTable.tsx
+++ b/packages/website/src/components/ParameterTable.tsx
@@ -19,7 +19,7 @@ export function ParameterTable({ data }: { data: ParameterDocumentation[] }) {
 
 	return (
 		<Box>
-			<ScrollArea offsetScrollbars>
+			<ScrollArea pb="xs" offsetScrollbars>
 				<Table columns={['Name', 'Type', 'Optional', 'Description']} rows={rows} columnStyles={columnStyles} />
 			</ScrollArea>
 		</Box>
diff --git a/packages/website/src/components/SidebarLayout.tsx b/packages/website/src/components/SidebarLayout.tsx
index e9e4d0ab1..394aafc42 100644
--- a/packages/website/src/components/SidebarLayout.tsx
+++ b/packages/website/src/components/SidebarLayout.tsx
@@ -140,12 +140,12 @@ export function SidebarLayout({
 
 	return (
 		<AppShell
-			sx={{
+			sx={(theme) => ({
 				main: {
 					background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
 					overflowX: 'auto',
 				},
-			}}
+			})}
 			padding={0}
 			navbarOffsetBreakpoint="md"
 			asideOffsetBreakpoint="md"
@@ -213,7 +213,16 @@ export function SidebarLayout({
 				</Navbar>
 			}
 			header={
-				<Header height={70} p="md">
+				<Header
+					sx={(theme) => ({
+						boxShadow:
+							theme.colorScheme === 'dark'
+								? '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)'
+								: 'unset',
+					})}
+					height={70}
+					p="md"
+				>
 					<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}>
 						<Box>
 							<MediaQuery largerThan="md" styles={{ display: 'none' }}>
@@ -244,12 +253,13 @@ export function SidebarLayout({
 		>
 			<article>
 				<Box
-					sx={{
+					sx={(theme) => ({
 						position: 'relative',
 						minHeight: 'calc(100vh - 50px)',
 						zIndex: 1,
 						background: theme.colorScheme === 'dark' ? theme.colors.dark![8] : theme.colors.gray![0],
-					}}
+						boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+					})}
 					p="lg"
 					pb={80}
 				>
@@ -257,7 +267,7 @@ export function SidebarLayout({
 				</Box>
 				<Box sx={{ height: 200 }}></Box>
 				<Box
-					sx={{
+					sx={(theme) => ({
 						position: 'fixed',
 						bottom: 0,
 						left: 0,
@@ -274,7 +284,7 @@ export function SidebarLayout({
 						[theme.fn.smallerThan('md')]: {
 							paddingLeft: 24,
 						},
-					}}
+					})}
 					pt={70}
 				>
 					<Center>
diff --git a/packages/website/src/components/TableOfContentItems.tsx b/packages/website/src/components/TableOfContentItems.tsx
index 8fbec025f..bea884596 100644
--- a/packages/website/src/components/TableOfContentItems.tsx
+++ b/packages/website/src/components/TableOfContentItems.tsx
@@ -67,9 +67,9 @@ export function TableOfContentItems({
 
 	return (
 		<Box sx={{ wordBreak: 'break-all' }}>
-			<Group mb="md" ml={2}>
+			<Group mt={2} mb="sm" ml={2}>
 				<VscListSelection size={25} />
-				<Text>Table of contents</Text>
+				<Text weight={600}>Table of contents</Text>
 			</Group>
 			<Stack spacing={0}>
 				{propertyItems.length ? (
diff --git a/packages/website/src/components/TypeParamTable.tsx b/packages/website/src/components/TypeParamTable.tsx
index ed27b6015..ceafefb75 100644
--- a/packages/website/src/components/TypeParamTable.tsx
+++ b/packages/website/src/components/TypeParamTable.tsx
@@ -1,4 +1,4 @@
-import { Box, ScrollArea } from '@mantine/core';
+import { ScrollArea } from '@mantine/core';
 import { HyperlinkedText } from './HyperlinkedText';
 import { Table } from './Table';
 import { TSDoc } from './tsdoc/TSDoc';
@@ -20,14 +20,12 @@ export function TypeParamTable({ data }: { data: TypeParameterData[] }) {
 	};
 
 	return (
-		<Box sx={{ overflowX: 'auto' }}>
-			<ScrollArea offsetScrollbars>
-				<Table
-					columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
-					rows={rows}
-					columnStyles={rowElements}
-				/>
-			</ScrollArea>
-		</Box>
+		<ScrollArea pb="xs" offsetScrollbars>
+			<Table
+				columns={['Name', 'Constraints', 'Optional', 'Default', 'Description']}
+				rows={rows}
+				columnStyles={rowElements}
+			/>
+		</ScrollArea>
 	);
 }