From 18652c6ff5e10208298bea67ffce6b4ed327c97d Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 11:30:10 +0200
Subject: search page without inline css

---
 pages/search.tsx | 56 +++++++++++---------------------------------------------
 1 file changed, 11 insertions(+), 45 deletions(-)

(limited to 'pages/search.tsx')

diff --git a/pages/search.tsx b/pages/search.tsx
index 2b8668a..90f1f67 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,32 +24,21 @@ function search(callback: (results: Array<userInfo>) => void) {
 }
 
 function SearchResults(props: { userList: Array<userInfo>; }) {
-	return <div>
+	return <div className="results">
 		{props.userList?.map(user => <SearchResult user={user} key={user.id} />)}
 	</div>;
 }
 
 function SearchResult(props: { user: userInfo; }) {
 	return <Vierkant
-		style={{
-			padding: 12,
-		}}
-		fullwidth
+		className="result pad-m fullwidth"
 		href={'/user?id=' + props.user.id}
 	>
-		<div style={{ position: 'relative' }}>
+		<div className="inner posrel">
 			<AccountAvatar size={48} id={props.user.id} />
-			<div
-				style={{
-					position: 'absolute',
-					top: 0,
-					right: 0,
-					bottom: 0,
-					left: 48 + 12,
-				}}
-			>
-				<b>{props.user.username}</b>
-				<p>{props.user.status}</p>
+			<div className="userInfo posabs v0 r0">
+				<b className="username">{props.user.username}</b>
+				<p className="status">{props.user.status}</p>
 			</div>
 		</div>
 	</Vierkant>;
@@ -58,40 +47,22 @@ function SearchResult(props: { user: userInfo; }) {
 function SearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant
-		fullwidth
-		style={{
-			padding: 8,
-			marginBottom: 24,
-		}}
-	>
+	return <Vierkant className="pad-m fullwidth searchBar">
 		<form onSubmit={props.searchFunction}>
 			<Input
 				id='searchBar'
 				label='Zoeken voor gebruikers...'
 				autocomplete='off'
-				dark
 				autofocus
-				style={{
-					backgroundColor: 'var(--background)',
-					color: 'var(--text)',
-					padding: 14,
-					fontSize: 16,
-					width: 'calc(100% - 48px - 14px * 2)',
-				}}
+				className="pad-m"
 			/>
 			<Button
-				style={{
-					padding: 12,
-					float: 'right',
-					display: 'inline-block',
-					borderRadius: 4,
-				}}
+				className="pad-m dispinbl valigntop"
 				onclick={props.searchFunction}
 			>
 				<SearchOutlinedIcon />
 			</Button>
-			<input type='submit' style={{ display: 'none' }} />
+			<input type='submit' className="dispnone" />
 		</form>
 	</Vierkant>;
 }
@@ -112,12 +83,7 @@ export default function HomePage() {
 			<SearchBar searchFunction={getSearchResults} />
 			<SearchResults userList={results} />
 			{searched && results.length == 0 && <h1
-				style={{
-					opacity: .6,
-					color: 'var(--text)',
-					textAlign: 'center',
-					margin: '24px 32px',
-				}}
+				className="noresults center subtile"
 			>
 				Geen zoekresultaten gevonden
 			</h1>}
-- 
cgit v1.2.3


From 5d964348d6b7af2b17d9838b1fe8b78d76a68cbc Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 11:30:28 +0200
Subject: dprint fmt

---
 components/ui.tsx |  2 +-
 pages/index.tsx   |  4 ++--
 pages/search.tsx  | 22 +++++++++++-----------
 3 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'pages/search.tsx')

diff --git a/components/ui.tsx b/components/ui.tsx
index 60b80f4..89e8ffe 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -105,7 +105,7 @@ export function Input(props: {
 		placeholder={props.label}
 		spellCheck={false}
 		defaultValue={props.value ? String(props.value) : ''}
-		className={"input" + " " + (props.dark ? 'dark' : 'light') + " " + props.className}
+		className={'input' + ' ' + (props.dark ? 'dark' : 'light') + ' ' + props.className}
 		autoComplete={props.autocomplete}
 		autoFocus={props.autofocus}
 	/>;
diff --git a/pages/index.tsx b/pages/index.tsx
index b5f4b50..9f63229 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -114,10 +114,10 @@ export default function HomePage() {
 				</Vierkant>
 			</div>
 			{loggedIn
-				&& <Vierkant className="fullwidth pad-l">
+				&& <Vierkant className='fullwidth pad-l'>
 					<RecentGames games={gameInfo?.games} />
 				</Vierkant>}
-			<Vierkant className="fullwidth pad-l">
+			<Vierkant className='fullwidth pad-l'>
 				<h2>Nieuws ofzo</h2>
 				<p style={{ margin: '6px 0' }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
 			</Vierkant>
diff --git a/pages/search.tsx b/pages/search.tsx
index 90f1f67..6e52865 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,21 +24,21 @@ function search(callback: (results: Array<userInfo>) => void) {
 }
 
 function SearchResults(props: { userList: Array<userInfo>; }) {
-	return <div className="results">
+	return <div className='results'>
 		{props.userList?.map(user => <SearchResult user={user} key={user.id} />)}
 	</div>;
 }
 
 function SearchResult(props: { user: userInfo; }) {
 	return <Vierkant
-		className="result pad-m fullwidth"
+		className='result pad-m fullwidth'
 		href={'/user?id=' + props.user.id}
 	>
-		<div className="inner posrel">
+		<div className='inner posrel'>
 			<AccountAvatar size={48} id={props.user.id} />
-			<div className="userInfo posabs v0 r0">
-				<b className="username">{props.user.username}</b>
-				<p className="status">{props.user.status}</p>
+			<div className='userInfo posabs v0 r0'>
+				<b className='username'>{props.user.username}</b>
+				<p className='status'>{props.user.status}</p>
 			</div>
 		</div>
 	</Vierkant>;
@@ -47,22 +47,22 @@ function SearchResult(props: { user: userInfo; }) {
 function SearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant className="pad-m fullwidth searchBar">
+	return <Vierkant className='pad-m fullwidth searchBar'>
 		<form onSubmit={props.searchFunction}>
 			<Input
 				id='searchBar'
 				label='Zoeken voor gebruikers...'
 				autocomplete='off'
 				autofocus
-				className="pad-m"
+				className='pad-m'
 			/>
 			<Button
-				className="pad-m dispinbl valigntop"
+				className='pad-m dispinbl valigntop'
 				onclick={props.searchFunction}
 			>
 				<SearchOutlinedIcon />
 			</Button>
-			<input type='submit' className="dispnone" />
+			<input type='submit' className='dispnone' />
 		</form>
 	</Vierkant>;
 }
@@ -83,7 +83,7 @@ export default function HomePage() {
 			<SearchBar searchFunction={getSearchResults} />
 			<SearchResults userList={results} />
 			{searched && results.length == 0 && <h1
-				className="noresults center subtile"
+				className='noresults center subtile'
 			>
 				Geen zoekresultaten gevonden
 			</h1>}
-- 
cgit v1.2.3


From 08ba9024f532554fe2135d2596f1169828b01e5f Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Mon, 19 Apr 2021 09:51:38 +0200
Subject: login/register pages done + fullwidth css class edited

---
 components/ui.tsx        |  2 +-
 pages/_app.tsx           |  1 +
 pages/index.tsx          |  2 +-
 pages/login.tsx          | 44 ++++++++++++++++----------------------------
 pages/register.tsx       | 38 +++++++++++++++++++-------------------
 pages/search.tsx         |  4 ++--
 pages/settings.tsx       |  8 ++++----
 styles/loginregister.css | 13 +++++++++++++
 styles/ui.css            |  2 --
 styles/utility.css       | 10 ++++++++++
 10 files changed, 67 insertions(+), 57 deletions(-)
 create mode 100644 styles/loginregister.css

(limited to 'pages/search.tsx')

diff --git a/components/ui.tsx b/components/ui.tsx
index 6555813..9aa48cc 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -1,4 +1,4 @@
-import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { CSSProperties, ReactNode, useEffect, useState } from 'react';
 
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 9521d58..7cdb8e3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import '../styles/utility.css';
 
 import '../styles/gameSettings.css';
 import '../styles/index.css';
+import '../styles/loginregister.css';
 import '../styles/search.css';
 import '../styles/settings.css';
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 31aee57..873cf8b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -117,7 +117,7 @@ export default function HomePage() {
 				&& <Vierkant className='fullwidth pad-l'>
 					<RecentGames games={gameInfo?.games} />
 				</Vierkant>}
-			<Vierkant className='fullwidth pad-l'>
+			<Vierkant className='w100m2m pad-l'>
 				<h2>Nieuws ofzo</h2>
 				<p style={{ margin: '6px 0' }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
 			</Vierkant>
diff --git a/pages/login.tsx b/pages/login.tsx
index 1e14573..9e26b50 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -49,44 +49,32 @@ export default function LoginPage() {
 		<div>
 			<NavBar />
 			<CenteredPage width={500} style={{ height: '100vh' }}>
-				<div
-					style={{
-						position: 'relative',
-						top: '50%',
-						transform: 'translateY(-50%)',
-						margin: '0 auto',
-						textAlign: 'center',
-					}}
-				>
-					<Vierkant>
+				<div className='posrel center centeredForm'>
+					<Vierkant className='pad-l'>
 						<form onSubmit={(e) => submitLogin(e, toast)}>
 							<Input
 								autofocus
 								autocomplete='username'
 								id='email'
 								label='email of gebruikersnaam'
-								style={{ marginBottom: 12 }}
-							>
-							</Input>
-							<Input autocomplete='current-password' id='password' label='wachtwoord' type='password'>
-							</Input>
-							<div
-								style={{
-									marginTop: 24,
-									gridGap: 24,
-									display: 'grid',
-									gridTemplateColumns: '1fr 1fr',
-								}}
-							>
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<Input
+								autocomplete='current-password'
+								id='password'
+								label='wachtwoord'
+								type='password'
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<div className='sidebyside'>
 								<Button
 									href='/register'
 									text='Registreren'
-									style={{ backgroundColor: 'var(--background-alt)' }}
-								>
-								</Button>
-								<Button text='Inloggen' onclick={() => submitLogin(null, toast)}></Button>
+									className='register bg-700 fg-100'
+								/>
+								<Button text='Inloggen' className='login' onclick={() => submitLogin(null, toast)} />
 							</div>
-							<input type='submit' style={{ display: 'none' }} />
+							<input type='submit' className='dispnone' />
 						</form>
 					</Vierkant>
 				</div>
diff --git a/pages/register.tsx b/pages/register.tsx
index f78d092..90dab3e 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -89,34 +89,34 @@ export default function RegisterPage() {
 		<div>
 			<NavBar />
 			<CenteredPage width={500} style={{ height: '100vh' }}>
-				<div
-					style={{
-						position: 'relative',
-						top: '50%',
-						transform: 'translateY(-50%)',
-						margin: '0 auto',
-						textAlign: 'center',
-					}}
-				>
-					<Vierkant>
+				<div className='posrel center centeredForm'>
+					<Vierkant className='pad-l'>
 						<form onSubmit={(e) => submitRegister(e, toast)}>
 							<Input
 								autofocus
 								autocomplete='username'
 								id='username'
 								label='gebruikersnaam'
-								style={{ marginBottom: 12 }}
-							>
-							</Input>
-							<Input autocomplete='email' id='email' label='email' style={{ marginBottom: 12 }}></Input>
-							<Input autocomplete='new-password' id='password' label='wachtwoord' type='password'></Input>
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<Input
+								autocomplete='email'
+								id='email'
+								label='email'
+								className='pad-m fullwidth bg-900 round-t'
+							/>
+							<Input
+								autocomplete='new-password'
+								id='password'
+								label='wachtwoord'
+								type='password'
+								className='pad-m fullwidth bg-900 round-t'
+							/>
 							<Button
 								text='Registreren'
-								style={{ marginTop: 24 }}
 								onclick={() => submitRegister(null, toast)}
-							>
-							</Button>
-							<input type='submit' style={{ display: 'none' }} />
+							/>
+							<input type='submit' className='dispnone' />
 						</form>
 					</Vierkant>
 				</div>
diff --git a/pages/search.tsx b/pages/search.tsx
index 6e52865..e874775 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -24,7 +24,7 @@ function search(callback: (results: Array<userInfo>) => void) {
 }
 
 function SearchResults(props: { userList: Array<userInfo>; }) {
-	return <div className='results'>
+	return <div className='results w100m2m'>
 		{props.userList?.map(user => <SearchResult user={user} key={user.id} />)}
 	</div>;
 }
@@ -47,7 +47,7 @@ function SearchResult(props: { user: userInfo; }) {
 function SearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant className='pad-m fullwidth searchBar'>
+	return <Vierkant className='pad-m w100m2m searchBar'>
 		<form onSubmit={props.searchFunction}>
 			<Input
 				id='searchBar'
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 9a09178..672edac 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -48,7 +48,7 @@ export default function SettingsPage() {
 			<NavBar />
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
-				<Vierkant className='section account fullwidth pad-l'>
+				<Vierkant className='section account w100m2m pad-l'>
 					<h2>Account</h2>
 					<div className='subsection'>
 						<AccountAvatar size={100} />
@@ -92,7 +92,7 @@ export default function SettingsPage() {
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant className='section colors fullwidth pad-l'>
+				<Vierkant className='section colors w100m2m pad-l'>
 					<h2>Kleuren</h2>
 					<div className='subsection'>
 						<ColorPicker />
@@ -117,13 +117,13 @@ export default function SettingsPage() {
 						<h3>Donkere modus</h3>
 					</div>
 				</Vierkant>
-				<Vierkant className='section gamerules fullwidth pad-l'>
+				<Vierkant className='section gamerules w100m2m pad-l'>
 					<h2>Standaard spelregels</h2>
 					<div className='subsection'>
 						<CurrentGameSettings />
 					</div>
 				</Vierkant>
-				<Vierkant className='section logout fullwidth pad-l'>
+				<Vierkant className='section logout w100m2m pad-l'>
 					<h2>Uitloggen</h2>
 					<div className='center'>
 						<IconLabelButton
diff --git a/styles/loginregister.css b/styles/loginregister.css
new file mode 100644
index 0000000..854aeb2
--- /dev/null
+++ b/styles/loginregister.css
@@ -0,0 +1,13 @@
+.centeredForm {
+	top: 50%;
+	transform: translateY(-50%);
+	margin: 0 auto;
+}
+
+.centeredForm .input {
+	margin-bottom: var(--spacing-medium);
+}
+
+.centeredForm .input:nth-last-of-type(2) {
+	margin-bottom: var(--spacing-large);
+}
diff --git a/styles/ui.css b/styles/ui.css
index 55b24e2..8003a7c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -5,8 +5,6 @@
 	box-sizing: border-box;
 }
 
-.fullwidth { width: calc(100% - var(--spacing-medium)); }
-
 .button {
 	background-color: var(--accent);
 	color: var(--gray-900);
diff --git a/styles/utility.css b/styles/utility.css
index 0393d1d..7f5ebbd 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -15,6 +15,9 @@
 .bg-800 { background-color: var(--gray-800); }
 .bg-900 { background-color: var(--gray-900); }
 
+.fg-100 { color: var(--gray-100); }
+.fg-900 { color: var(--gray-900); }
+
 .posabs { position: absolute; }
 .posrel { position: relative; }
 .posfix { position: fixed; }
@@ -40,6 +43,13 @@
 
 .floatr { float: right; }
 
+.w100m2m { width: calc(100% - var(--spacing-medium)); }
+
+.fullwidth {
+	width: 100%;
+	box-sizing: border-box;
+}
+
 .subtile {
 	color: var(--gray-600);
 	font-style: italic;
-- 
cgit v1.2.3


From 319938d57b8cd225de1dd3f63433f6561f92311e Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 20 Apr 2021 15:00:46 +0200
Subject: new game dialog not broken anyore

---
 components/page.tsx |   9 +++--
 components/ui.tsx   |  37 +++----------------
 pages/_app.tsx      |   1 +
 pages/game.tsx      | 101 ++++++++++++----------------------------------------
 pages/search.tsx    |  14 ++++----
 styles/game.css     |  34 ++++++++++++++++++
 styles/search.css   |   3 +-
 styles/ui.css       |  14 ++++++++
 styles/utility.css  |  16 ++++++++-
 9 files changed, 103 insertions(+), 126 deletions(-)
 create mode 100644 styles/game.css

(limited to 'pages/search.tsx')

diff --git a/components/page.tsx b/components/page.tsx
index 506e2db..b8e3dac 100644
--- a/components/page.tsx
+++ b/components/page.tsx
@@ -1,12 +1,11 @@
 import { Component, CSSProperties, ReactNode } from 'react';
 
-interface CenteredPageProps {
+export function CenteredPage(props: {
 	width?: number;
 	children?: ReactNode;
 	style?: CSSProperties;
-}
-
-export function CenteredPage(props: CenteredPageProps) {
+	className?: string;
+}) {
 	return <div
 		className='CenteredPageOuter'
 		style={{
@@ -15,7 +14,7 @@ export function CenteredPage(props: CenteredPageProps) {
 		}}
 	>
 		<div
-			className='CenteredPageInner'
+			className={'CenteredPageInner ' + props.className}
 			style={{
 				margin: '0 6px',
 				lineHeight: 0,
diff --git a/components/ui.tsx b/components/ui.tsx
index 9aa48cc..80bfba1 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -96,41 +96,14 @@ export function Input(props: {
 }
 
 export function SearchBar(props: { label?: string; }) {
-	return <div
-		style={{
-			marginTop: 24,
-			borderRadius: 8,
-			overflow: 'hidden',
-			width: '100%',
-		}}
-	>
+	return <div className='searchBar round-t fullwidth'>
 		<Input
 			label={props.label}
-			style={{
-				width: 'calc(100% - 24px - 41px)',
-				borderTopRightRadius: 0,
-				borderBottomRightRadius: 0,
-			}}
+			className='pad-m bg-700'
 		/>
-		<div
-			style={{
-				width: 41,
-				height: 41,
-				backgroundColor: 'var(--disk-a)',
-				display: 'inline-block',
-				verticalAlign: 'top',
-				position: 'relative',
-			}}
-		>
-			<SearchIcon
-				style={{
-					position: 'absolute',
-					top: '50%',
-					left: '50%',
-					transform: 'translate(-50%, -50%)',
-				}}
-			/>
-		</div>
+		<Button className='dispinbl valigntop'>
+			<SearchIcon className='icon' />
+		</Button>
 	</div>;
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index db62fa8..31bc0e7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,6 +11,7 @@ import '../styles/navbar.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
 
+import '../styles/game.css';
 import '../styles/gameSettings.css';
 import '../styles/index.css';
 import '../styles/loginregister.css';
diff --git a/pages/game.tsx b/pages/game.tsx
index b5200a7..d6d7fb0 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -66,10 +66,8 @@ function VoerGame(props: {
 	}, []);
 
 	return <div
+		className='posrel abscenterv'
 		style={{
-			position: 'relative',
-			top: '50%',
-			transform: 'translateY(-50%)',
 			maxWidth: '100vh',
 			margin: '0 auto',
 		}}
@@ -109,30 +107,22 @@ function GameOutcomeDialog(props: {
 }) {
 	return <DialogBox
 		title='Speluitkomst'
-		style={{ display: props.visible ? 'inline-block' : 'none' }}
+		hidden={!props.visible}
+		className='outcomeDialog'
 		onclick={() => {
 			window.history.replaceState(null, null, '/');
 			window.location.reload();
 		}}
 	>
-		<div
-			style={{
-				width: '100%',
-				textAlign: 'center',
-			}}
-		>
+		<div className='inner fullwidth center'>
 			<h2
-				style={{
-					color: props.outcome == 0
-						? 'var(--text)'
-						: props.outcome == props.player
-						? 'var(--disk-a-text)'
-						: props.outcome != props.player
-						? 'var(--disk-b-text)'
-						: 'var(--text)',
-					opacity: props.outcome == 0 ? .75 : 1,
-					marginTop: 8,
-				}}
+				className={'outcome' + ' ' + (props.outcome == 0
+					? 'draw'
+					: props.outcome == props.player
+					? 'lose'
+					: props.outcome != props.player
+					? 'win'
+					: 'draw')}
 			>
 				{props.outcome == 0
 					? 'Gelijkspel'
@@ -142,7 +132,7 @@ function GameOutcomeDialog(props: {
 					? 'Gewonnen'
 					: '???'}
 			</h2>
-			{false && <p style={{ marginTop: 24 }}>
+			{false && <p className='analysis'>
 				0 Gemiste winstzetten<br />
 				6 Optimale zetten<br />
 				0 Blunders
@@ -150,42 +140,11 @@ function GameOutcomeDialog(props: {
 			{false && <IconLabelButton
 				text='Opnieuw spelen'
 				icon={<RefreshIcon />}
-				style={{
-					float: 'none',
-					marginTop: 24,
-					padding: '12px 32px',
-				}}
 			/>}
 		</div>
 	</DialogBox>;
 }
 
-var InviteButtonStyle: CSSProperties = {
-	backgroundColor: 'var(--page-background)',
-	height: 160,
-	padding: 12,
-};
-
-var InviteButtonIconStyle: CSSProperties = {
-	fontSize: 100,
-	position: 'absolute',
-	top: 12,
-	left: '50%',
-	transform: 'translateX(-50%)',
-};
-
-var InviteButtonLabelStyle: CSSProperties = {
-	position: 'absolute',
-	bottom: 12,
-	left: '50%',
-	transform: 'translateX(-50%)',
-	textAlign: 'center',
-	color: 'var(--text-alt)',
-	width: 136,
-	fontSize: 20,
-	userSelect: 'none',
-};
-
 export default function GamePage() {
 	var [gameID, setGameID] = useState('');
 	var [player1, setPlayer1] = useState(true);
@@ -226,7 +185,7 @@ export default function GamePage() {
 
 	return <div>
 		<NavBar />
-		<CenteredPage width={900} style={{ height: '100vh' }}>
+		<CenteredPage width={900} className='h100vh'>
 			<VoerGame
 				active={active}
 				gameID={gameID}
@@ -236,22 +195,16 @@ export default function GamePage() {
 			/>
 			<DialogBox
 				title='Nieuw spel'
-				style={{ display: gameIDUrl || gameID ? 'none' : 'inline-block' }}
+				className='newGameDialog'
+				hidden={!!(gameIDUrl || gameID)}
 				onclick={() => {
 					window.history.go(-1);
 				}}
 			>
 				<CurrentGameSettings />
-				<div
-					style={{
-						marginTop: 24,
-						display: 'grid',
-						gridTemplateColumns: '1fr 1fr',
-						gridGap: 24,
-					}}
-				>
+				<div className='sidebyside gg-l'>
 					<Button
-						style={InviteButtonStyle}
+						className='inviteButton random pad-m'
 						onclick={() => {
 							axios.request<{ id: string; player_1: boolean; game_started: boolean; }>({
 								url: '/api/game/random',
@@ -266,16 +219,11 @@ export default function GamePage() {
 								.catch(() => {});
 						}}
 					>
-						<WifiTetheringRoundedIcon
-							style={{
-								color: 'var(--disk-b)',
-								...InviteButtonIconStyle,
-							}}
-						/>
-						<h2 style={InviteButtonLabelStyle}>Willekeurige speler</h2>
+						<WifiTetheringRoundedIcon className='icon posabs abscenterh' />
+						<h2 className='label center posabs abscenterh nosel'>Willekeurige speler</h2>
 					</Button>
 					<Button
-						style={InviteButtonStyle}
+						className='inviteButton link pad-m'
 						onclick={() => {
 							axios.request<{ id: string; }>({
 								method: 'post',
@@ -300,13 +248,8 @@ export default function GamePage() {
 								.catch(() => {});
 						}}
 					>
-						<LinkRoundedIcon
-							style={{
-								color: 'var(--disk-a)',
-								...InviteButtonIconStyle,
-							}}
-						/>
-						<h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2>
+						<LinkRoundedIcon className='icon posabs abscenterh' />
+						<h2 className='label center posabs abscenterh nosel'>Uitnodigen via link</h2>
 					</Button>
 				</div>
 				<SearchBar label='Zoeken in vriendenlijst' />
diff --git a/pages/search.tsx b/pages/search.tsx
index e874775..e0f3123 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -10,7 +10,7 @@ import { Button, Input, Vierkant } from '../components/ui';
 import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
 
 function search(callback: (results: Array<userInfo>) => void) {
-	var query: string = (document.getElementById('searchBar') as HTMLInputElement).value;
+	var query: string = (document.getElementById('bigSearchBar') as HTMLInputElement).value;
 	if (query.length < 3) return;
 
 	axios.request<{ 'results': Array<userInfo>; }>({
@@ -44,20 +44,20 @@ function SearchResult(props: { user: userInfo; }) {
 	</Vierkant>;
 }
 
-function SearchBar(props: {
+function BigSearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant className='pad-m w100m2m searchBar'>
+	return <Vierkant className='pad-m w100m2m bigSearchBar posrel'>
 		<form onSubmit={props.searchFunction}>
 			<Input
-				id='searchBar'
+				id='bigSearchBar'
 				label='Zoeken voor gebruikers...'
 				autocomplete='off'
 				autofocus
-				className='pad-m'
+				className='pad-m posabs abscenterv'
 			/>
 			<Button
-				className='pad-m dispinbl valigntop'
+				className='pad-m dispinbl valigntop floatr'
 				onclick={props.searchFunction}
 			>
 				<SearchOutlinedIcon />
@@ -80,7 +80,7 @@ export default function HomePage() {
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>Zoeken</PageTitle>
-			<SearchBar searchFunction={getSearchResults} />
+			<BigSearchBar searchFunction={getSearchResults} />
 			<SearchResults userList={results} />
 			{searched && results.length == 0 && <h1
 				className='noresults center subtile'
diff --git a/styles/game.css b/styles/game.css
new file mode 100644
index 0000000..ae8c3ff
--- /dev/null
+++ b/styles/game.css
@@ -0,0 +1,34 @@
+.outcomeDialog .inner > * {
+	margin-top: var(--spacing-medium);
+}
+
+.outcomeDialog .inner .button {
+	float: unset;
+	padding: var(--spacing-medium) var(--spacing-large);
+}
+
+.newGameDialog .inviteButton {
+	height: 160px;
+}
+
+.newGameDialog .inviteButton.random {
+	background-color: var(--confirm);
+}
+
+.newGameDialog .inviteButton.link {
+	background-color: var(--error);
+}
+
+.newGameDialog .inviteButton .icon {
+	top: var(--spacing-medium);
+	font-size: 100px;
+}
+
+.newGameDialog .inviteButton .label {
+	bottom: var(--spacing-medium);
+}
+
+.newGameDialog > div {
+	margin-top: var(--spacing-large);
+}
+
diff --git a/styles/search.css b/styles/search.css
index 06a3918..696294d 100644
--- a/styles/search.css
+++ b/styles/search.css
@@ -1,6 +1,5 @@
-.searchBar input {
+.bigSearchBar .input {
 	width: calc(100% - 2 * var(--spacing-medium) - 48px);
-	margin: 2px 0;
 }
 
 .results .result .inner .userInfo {
diff --git a/styles/ui.css b/styles/ui.css
index 8003a7c..cd9f461 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -78,3 +78,17 @@
 	cursor: pointer;
 }
 
+.searchBar {
+	overflow: hidden;
+}
+
+.searchBar .button {
+	border-radius: 0;
+	padding: 10px;
+}
+
+.searchBar .input {
+	width: calc(100% - 44px);
+	box-sizing: border-box;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index be982f8..d3c5897 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -49,6 +49,9 @@
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }
 
+.w100vw { width: 100vw; }
+.h100vh { height: 100vh; }
+
 .fullwidth {
 	width: 100%;
 	box-sizing: border-box;
@@ -64,6 +67,7 @@
 	font-weight: 600;
 }
 
+.gg-l { grid-gap: var(--spacing-large) !important; }
 .sidebyside {
 	display: grid;
 	grid-gap: var(--spacing-medium);
@@ -76,8 +80,18 @@
 	text-overflow: ellipsis;
 }
 
+.abscenterh {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.abscenterv {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
 .abscenter {
-	top: 51%;
+	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 }
-- 
cgit v1.2.3


From c140e56db162755d7f85e89306236a0a09bf4e35 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 20 Apr 2021 16:14:04 +0200
Subject: site not longer broken (i think) still some inline css remains....

---
 components/dialogBox.tsx |  2 +-
 components/gameBar.tsx   | 41 +++++++--------------------------------
 components/ui.tsx        |  2 +-
 components/voerBord.tsx  | 50 +++++-------------------------------------------
 pages/game.tsx           |  2 +-
 pages/index.tsx          | 12 ++++++------
 pages/login.tsx          |  2 +-
 pages/register.tsx       |  2 +-
 pages/search.tsx         |  2 +-
 pages/settings.tsx       |  8 ++++----
 pages/user.tsx           |  8 ++++----
 styles/disk.css          |  4 ++--
 styles/game.css          | 36 ++++++++++++++++++++++++++++++++++
 styles/utility.css       |  3 +++
 14 files changed, 73 insertions(+), 101 deletions(-)

(limited to 'pages/search.tsx')

diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx
index 4ead7c5..a5b02fa 100644
--- a/components/dialogBox.tsx
+++ b/components/dialogBox.tsx
@@ -12,7 +12,7 @@ export function DialogBox(props: {
 	className?: string;
 }) {
 	return <Vierkant
-		className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' '
+		className={'dialogbox bg-800 drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' '
 			+ props.className}
 	>
 		<h2 className='title'>{props.title}</h2>
diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index 0d7d4d9..a3479d5 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -11,14 +11,7 @@ function GameBarModule(props: {
 	onclick?: () => void;
 }) {
 	return <Vierkant
-		style={{
-			backgroundColor: 'var(--background-alt)',
-			padding: 12,
-			borderRadius: 6,
-			margin: 0,
-			verticalAlign: 'top',
-			cursor: props.onclick ? 'pointer' : 'default',
-		}}
+		className={'gameBarButton bg-700 pad-m round-t valigntop ' + (props.onclick ? 'cpointer' : '')}
 		onclick={props.onclick}
 	>
 		{props.children}
@@ -37,33 +30,13 @@ export function GameBar(props: {
 	active: boolean;
 	resignFunction: () => void;
 }) {
-	return <Vierkant
-		className='gameBar'
-		style={{
-			padding: 8,
-			width: 'calc(100% - 12px)',
-		}}
-	>
-		<div style={{ gridAutoColumns: 'auto' }}>
+	return <Vierkant className='gameBar bg-800 w100m2m pad-s'>
+		<div>
 			<div style={{ ...GameBarAlignStyle, float: 'left' }}>
-				<div
-					style={{
-						width: 32,
-						height: 32,
-						margin: 8,
-						backgroundColor: props.turn ? 'var(--disk-b)' : 'var(--disk-a)',
-						borderRadius: 16,
-						display: 'inline-block',
-					}}
-				/>
-				<h2
-					style={{
-						fontSize: 20,
-						margin: 12,
-						verticalAlign: 'top',
-						display: 'inline-block',
-					}}
-				>
+				{props.active && <div
+					className={'move dispinbl ' + (props.turn ? 'move-a' : 'move-b')}
+				/>}
+				<h2 className='pad-m valigntop dispinbl'>
 					{!props.active
 						? 'Wachten op tegenstander...'
 						: props.turn == props.player1
diff --git a/components/ui.tsx b/components/ui.tsx
index 80bfba1..11914c8 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -16,7 +16,7 @@ export function Vierkant(props: {
 }) {
 	return <a
 		href={props.href}
-		className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')}
+		className={['round-l', 'vierkant', props.className].join(' ')}
 		id={props.id}
 		onClick={props.onclick}
 	>
diff --git a/components/voerBord.tsx b/components/voerBord.tsx
index 93e350c..ffb291b 100644
--- a/components/voerBord.tsx
+++ b/components/voerBord.tsx
@@ -1,62 +1,22 @@
-function Disc() {
-	return <div
-		className='disk'
-		style={{
-			position: 'absolute',
-			top: 0,
-			left: 0,
-			right: 0,
-			bottom: 0,
-			borderRadius: 999999,
-			margin: 3,
-		}}
-	/>;
-}
-
 export function VoerBord(props: {
 	width: number;
 	height: number;
 	onMove: (move: number) => void;
 	active: boolean;
 }) {
-	return <table
-		className='voerBord'
-		style={{
-			borderSpacing: 8,
-			width: '100%',
-		}}
-	>
+	return <table className={'voerBord fullwidth ' + (props.active ? 'active' : '')}>
 		<tbody>
 			{[...Array(props.height).keys()].map((row) => (
 				<tr key={`r-${row}`}>
 					{[...Array(props.width).keys()].map((column) => (
 						<td
-							style={{
-								position: 'relative',
-								width: '100%',
-								padding: 0,
-							}}
+							className='posrel outer cell fullwidth'
 							key={`c-${row}x${column}`}
 						>
+							<div className='dispbl square' />
+							<div className='disk posabs a0' />
 							<div
-								style={{
-									display: 'block',
-									marginTop: '100%',
-								}}
-							/>
-							<Disc />
-							<div
-								style={{
-									position: 'absolute',
-									top: 0,
-									left: 0,
-									right: 0,
-									bottom: 0,
-									borderRadius: 6,
-									border: '2px solid var(--background-alt)',
-									opacity: .5,
-									cursor: props.active ? 'pointer' : 'default',
-								}}
+								className='posabs a0 round-t inner cell'
 								id={`pos-${(props.height - row - 1) * props.width + column}`}
 								onClick={event => {
 									props.onMove(Number((event.target as HTMLElement).id.split('-')[1]));
diff --git a/pages/game.tsx b/pages/game.tsx
index d6d7fb0..9e702ed 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -1,7 +1,7 @@
 import Icon from '@mdi/react';
 import axios from 'axios';
 import copy from 'copy-to-clipboard';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import * as cookies from 'react-cookies';
 import { Socket } from 'socket.io-client';
 import { SocketContext } from '../components/socketContext';
diff --git a/pages/index.tsx b/pages/index.tsx
index 873cf8b..c4b4baf 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -93,31 +93,31 @@ export default function HomePage() {
 		<CenteredPage width={802}>
 			<PageTitle>4 op een rij</PageTitle>
 			<div className='topbar'>
-				<Vierkant className='gamemode' href='/game'>
+				<Vierkant className='gamemode bg-800' href='/game'>
 					<VideogameAssetIcon className='icon' />
 					<span className='text'>Nieuw spel</span>
 				</Vierkant>
 				{false
-					&& <Vierkant className='gamemode' href='/'>
+					&& <Vierkant className='gamemode bg-800' href='/'>
 						<ExtensionIcon className='icon' />
 						<span className='text'>Puzzels</span>
 					</Vierkant>}
 				{false
-					&& <Vierkant className='gamemode' href='/'>
+					&& <Vierkant className='gamemode bg-800' href='/'>
 						<Icon path={mdiRobotExcited} className='icon' />
 						<span className='text'>Tegen computer</span>
 					</Vierkant>}
-				<Vierkant className='loginOrRegisterBox pad-l valigntop'>
+				<Vierkant className='loginOrRegisterBox pad-l valigntop bg-800'>
 					{loggedIn
 						? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
 						: <LoginOrRegisterBox />}
 				</Vierkant>
 			</div>
 			{loggedIn
-				&& <Vierkant className='fullwidth pad-l'>
+				&& <Vierkant className='w100m2m pad-l bg-800'>
 					<RecentGames games={gameInfo?.games} />
 				</Vierkant>}
-			<Vierkant className='w100m2m pad-l'>
+			<Vierkant className='w100m2m pad-l bg-800'>
 				<h2>Nieuws ofzo</h2>
 				<p style={{ margin: '6px 0' }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
 			</Vierkant>
diff --git a/pages/login.tsx b/pages/login.tsx
index 9e26b50..73fbb52 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -50,7 +50,7 @@ export default function LoginPage() {
 			<NavBar />
 			<CenteredPage width={500} style={{ height: '100vh' }}>
 				<div className='posrel center centeredForm'>
-					<Vierkant className='pad-l'>
+					<Vierkant className='pad-l bg-800'>
 						<form onSubmit={(e) => submitLogin(e, toast)}>
 							<Input
 								autofocus
diff --git a/pages/register.tsx b/pages/register.tsx
index 90dab3e..63f51f7 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -90,7 +90,7 @@ export default function RegisterPage() {
 			<NavBar />
 			<CenteredPage width={500} style={{ height: '100vh' }}>
 				<div className='posrel center centeredForm'>
-					<Vierkant className='pad-l'>
+					<Vierkant className='pad-l bg-800'>
 						<form onSubmit={(e) => submitRegister(e, toast)}>
 							<Input
 								autofocus
diff --git a/pages/search.tsx b/pages/search.tsx
index e0f3123..7aba29c 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -47,7 +47,7 @@ function SearchResult(props: { user: userInfo; }) {
 function BigSearchBar(props: {
 	searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
 }) {
-	return <Vierkant className='pad-m w100m2m bigSearchBar posrel'>
+	return <Vierkant className='pad-m bg-800 w100m2m bigSearchBar posrel'>
 		<form onSubmit={props.searchFunction}>
 			<Input
 				id='bigSearchBar'
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 672edac..0ca2c30 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -48,7 +48,7 @@ export default function SettingsPage() {
 			<NavBar />
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
-				<Vierkant className='section account w100m2m pad-l'>
+				<Vierkant className='section account w100m2m pad-l bg-800'>
 					<h2>Account</h2>
 					<div className='subsection'>
 						<AccountAvatar size={100} />
@@ -92,7 +92,7 @@ export default function SettingsPage() {
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant className='section colors w100m2m pad-l'>
+				<Vierkant className='section colors w100m2m pad-l bg-800'>
 					<h2>Kleuren</h2>
 					<div className='subsection'>
 						<ColorPicker />
@@ -117,13 +117,13 @@ export default function SettingsPage() {
 						<h3>Donkere modus</h3>
 					</div>
 				</Vierkant>
-				<Vierkant className='section gamerules w100m2m pad-l'>
+				<Vierkant className='section gamerules w100m2m pad-l bg-800'>
 					<h2>Standaard spelregels</h2>
 					<div className='subsection'>
 						<CurrentGameSettings />
 					</div>
 				</Vierkant>
-				<Vierkant className='section logout w100m2m pad-l'>
+				<Vierkant className='section logout w100m2m pad-l bg-800'>
 					<h2>Uitloggen</h2>
 					<div className='center'>
 						<IconLabelButton
diff --git a/pages/user.tsx b/pages/user.tsx
index e1c3674..9741275 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -125,7 +125,7 @@ export default function AccountPage() {
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>Profiel</PageTitle>
-			<Vierkant className='accountHeader w100m2m pad-l'>
+			<Vierkant className='accountHeader w100m2m pad-l bg-800'>
 				<div className='inner posrel'>
 					<AccountAvatar size={128} id={user?.id || ''} />
 					<div className='userInfo dispinbl valigntop'>
@@ -280,7 +280,7 @@ export default function AccountPage() {
 					</div>
 				</div>
 			</Vierkant>
-			<Vierkant className='infosection pad-l w100m2m'>
+			<Vierkant className='infosection pad-l w100m2m bg-800'>
 				<div className='inner sidebyside'>
 					<InfoModule
 						icon={<Icon size={1} path={mdiCheckboxBlankCircle} className='outcome win' />}
@@ -312,7 +312,7 @@ export default function AccountPage() {
 					<InfoModule icon={<Icon size={1} path={mdiEarth} />} label='Nederland' />
 				</div>
 			</Vierkant>
-			<Vierkant className='infosection pad-l w100m2m sidebyside'>
+			<Vierkant className='infosection pad-l w100m2m sidebyside bg-800'>
 				<div className='inner sidebyside'>
 					<InfoModule
 						icon={<ArrowUpwardOutlinedIcon className='outcome win' />}
@@ -340,7 +340,7 @@ export default function AccountPage() {
 					/>
 				</div>
 			</Vierkant>
-			<Vierkant className='pad-l'>
+			<Vierkant className='pad-l bg-800'>
 				<RecentGames games={gameInfo?.games} />
 			</Vierkant>
 		</CenteredPage>
diff --git a/styles/disk.css b/styles/disk.css
index d858335..2646fed 100644
--- a/styles/disk.css
+++ b/styles/disk.css
@@ -1,3 +1,3 @@
 .voerBord .disk.state-0 { background-color: var(--page-background); }
-.voerBord .disk.state-1 { background-color: var(--disk-a); }
-.voerBord .disk.state-2 { background-color: var(--disk-b); }
+.voerBord .disk.state-1 { background-color: var(--confirm); }
+.voerBord .disk.state-2 { background-color: var(--error); }
diff --git a/styles/game.css b/styles/game.css
index ae8c3ff..de00b1c 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -32,3 +32,39 @@
 	margin-top: var(--spacing-large);
 }
 
+.voerBord {
+	border-spacing: var(--spacing-small);
+}
+
+.voerBord .cell.inner {
+	border: 2px solid var(--gray-800);
+}
+
+.voerBord .square {
+	margin-top: 100%;
+}
+
+.voerBord.active .cell.inner {
+	cursor: pointer;
+}
+
+.voerBord .disk {
+	border-radius: 999999999px;
+	margin: 3px;
+}
+
+.gameBar .gameBarButton {
+	margin: 0;
+}
+
+.gameBar .move {
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+
+	margin: 8px;
+}
+
+.gameBar .move.move-a { background-color: var(--error); }
+.gameBar .move.move-b { background-color: var(--confirm); }
+
diff --git a/styles/utility.css b/styles/utility.css
index d3c5897..0ff6b10 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -43,6 +43,9 @@
 .valigntop { vertical-align: top; }
 .valignsup { vertical-align: super; }
 
+.cpointer { cursor: pointer; }
+.cdefault { cursor: default; }
+
 .center { text-align: center; }
 
 .floatr { float: right; }
-- 
cgit v1.2.3


From 84bfb5e738a100a6572344bf8babaa1a776d8947 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 20 Apr 2021 16:32:08 +0200
Subject: dark mode working now :tada:

---
 pages/login.tsx         |  2 +-
 pages/register.tsx      |  2 +-
 pages/search.tsx        |  2 +-
 styles/dark.css         | 22 ++++++++++++++++------
 styles/game.css         | 45 +++++++++++++++------------------------------
 styles/gameSettings.css |  3 +++
 styles/global.css       | 36 ------------------------------------
 styles/ui.css           | 13 +++++--------
 8 files changed, 42 insertions(+), 83 deletions(-)

(limited to 'pages/search.tsx')

diff --git a/pages/login.tsx b/pages/login.tsx
index 4cadd82..da13f45 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {
 	return (
 		<div>
 			<NavBar />
-			<CenteredPage width={500} className="h100vh">
+			<CenteredPage width={500} className='h100vh'>
 				<div className='posrel center centeredForm'>
 					<Vierkant className='pad-l bg-800'>
 						<form onSubmit={(e) => submitLogin(e, toast)}>
diff --git a/pages/register.tsx b/pages/register.tsx
index 2709a10..bc2fc0f 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -88,7 +88,7 @@ export default function RegisterPage() {
 	return (
 		<div>
 			<NavBar />
-			<CenteredPage width={500} className="h100vh">
+			<CenteredPage width={500} className='h100vh'>
 				<div className='posrel center centeredForm'>
 					<Vierkant className='pad-l bg-800'>
 						<form onSubmit={(e) => submitRegister(e, toast)}>
diff --git a/pages/search.tsx b/pages/search.tsx
index 7aba29c..99f99b0 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -31,7 +31,7 @@ function SearchResults(props: { userList: Array<userInfo>; }) {
 
 function SearchResult(props: { user: userInfo; }) {
 	return <Vierkant
-		className='result pad-m fullwidth'
+		className='result bg-800 pad-m fullwidth'
 		href={'/user?id=' + props.user.id}
 	>
 		<div className='inner posrel'>
diff --git a/styles/dark.css b/styles/dark.css
index 681116f..b44171b 100644
--- a/styles/dark.css
+++ b/styles/dark.css
@@ -1,9 +1,19 @@
 html.dark {
-    --text: #FCFFFD;
-    --text-alt: var(--text);
+	--background: var(--gray-900);
+	--foreground: #FFFFF3;
 
-    --page-background: #11171a;
-    --background: #222d33;
-    --background-alt: #344047;
-}
+	--accent: #AD34F3;
+
+	--error: #FF4365;
+	--disk-b-alt: #F49BA1;
 
+	--confirm: #00D9C0;
+	--disk-a-alt: #86F3F3;
+
+	--gray-100: #CED2DC;
+	--gray-200: #A9AFC0;
+	--gray-300: #757D92;
+	--gray-700: #293140;
+	--gray-800: #1F242D;
+	--gray-900: #141619;
+}
diff --git a/styles/game.css b/styles/game.css
index f454691..2c1eb94 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -7,55 +7,35 @@
 	padding: var(--spacing-medium) var(--spacing-large);
 }
 
-.newGameDialog .inviteButton {
-	height: 160px;
-}
+.newGameDialog .inviteButton { height: 160px; }
 
-.newGameDialog .inviteButton.random {
-	background-color: var(--confirm);
-}
+.newGameDialog .inviteButton.random { background-color: var(--confirm); }
 
-.newGameDialog .inviteButton.link {
-	background-color: var(--error);
-}
+.newGameDialog .inviteButton.link { background-color: var(--error); }
 
 .newGameDialog .inviteButton .icon {
 	top: var(--spacing-medium);
 	font-size: 100px;
 }
 
-.newGameDialog .inviteButton .label {
-	bottom: var(--spacing-medium);
-}
+.newGameDialog .inviteButton .label { bottom: var(--spacing-medium); }
 
-.newGameDialog > div {
-	margin-top: var(--spacing-large);
-}
+.newGameDialog > div { margin-top: var(--spacing-large); }
 
-.voerBord {
-	border-spacing: var(--spacing-small);
-}
+.voerBord { border-spacing: var(--spacing-small); }
 
-.voerBord .cell.inner {
-	border: 2px solid var(--gray-800);
-}
+.voerBord .cell.inner { border: 2px solid var(--gray-800); }
 
-.voerBord .square {
-	margin-top: 100%;
-}
+.voerBord .square { margin-top: 100%; }
 
-.voerBord.active .cell.inner {
-	cursor: pointer;
-}
+.voerBord.active .cell.inner { cursor: pointer; }
 
 .voerBord .disk {
 	border-radius: 999999999px;
 	margin: 3px;
 }
 
-.gameBar .gameBarButton {
-	margin: 0;
-}
+.gameBar .gameBarButton { margin: 0; }
 
 .gameBar .move {
 	width: 32px;
@@ -73,3 +53,8 @@
 	margin: 0 auto;
 }
 
+html.dark .newGameDialog .inviteButton { background-color: var(--gray-800); }
+html.dark .newGameDialog .inviteButton.random .icon { color: var(--confirm); }
+html.dark .newGameDialog .inviteButton.link .icon { color: var(--error); }
+html.dark .newGameDialog .searchBar .input { background-color: var(--gray-800); }
+
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
index 533cea0..d9ba262 100644
--- a/styles/gameSettings.css
+++ b/styles/gameSettings.css
@@ -40,6 +40,9 @@
 	margin: 0;
 	margin-bottom: var(--spacing-medium);
 }
+html.dark .editGameSettings .editableRules .editableRulesSection {
+	background-color: var(--gray-800);
+}
 
 .editGameSettings .button {
 	line-height: normal;
diff --git a/styles/global.css b/styles/global.css
index f70b6bd..541dd76 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -33,42 +33,6 @@
 	--spacing-large:  24px;
 }
 
-@media (prefers-color-scheme: dark) {
-	:root {
-		--background: var(--gray-900);
-		--foreground: #FFFFF3;
-
-		--accent: #AD34F3;
-
-		--error: #FF4365;
-		--disk-b-alt: #F49BA1;
-
-		--confirm: #00D9C0;
-		--disk-a-alt: #86F3F3;
-
-		--gray-100: #CED2DC;
-		--gray-200: #A9AFC0;
-		--gray-300: #757D92;
-		--gray-700: #293140;
-		--gray-800: #1F242D;
-		--gray-900: #141619;
-	}
-}
-
-/* html { */
-/* 	--text: #FCFFFD; */
-/* 	--page-background: var(--text); */
-
-/* 	--background: #5D737E; */
-/* 	--text-alt: var(--background); */
-/* 	--background-alt: #81949E; */
-
-/* 	--disk-a: #E16D82; */
-/* 	--disk-a-text: #FDC0C4; */
-/* 	--disk-b: #71D9CC; */
-/* 	--disk-b-text: #C0FDEB; */
-/* } */
-
 /* default margin */
 html, body {
 	margin: 0;
diff --git a/styles/ui.css b/styles/ui.css
index cd9f461..6dbc388 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -5,6 +5,7 @@
 	box-sizing: border-box;
 }
 
+html.dark .button { color: var(--foreground); }
 .button {
 	background-color: var(--accent);
 	color: var(--gray-900);
@@ -64,20 +65,16 @@
 	transform: translate(-50%, 0%) rotate(0deg);
 }
 
-.dialogbox {
-	width: 392px;
-}
-
-.dialogbox > .title {
-	margin-bottom: var(--spacing-large);
-}
-
+.dialogbox { width: 392px; }
+.dialogbox > .title { margin-bottom: var(--spacing-large); }
 .dialogbox .icon.close {
 	top: 25px;
 	right: 25px;
 	cursor: pointer;
 }
 
+html.dark .dialogbox { background-color: var(--gray-700); }
+
 .searchBar {
 	overflow: hidden;
 }
-- 
cgit v1.2.3