From b33439e75d4b22a0c68b5cb56851b518a5ea7db7 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 17 Apr 2021 10:30:24 +0200
Subject: started moving to css files

---
 styles/global.css       | 92 +++++++++++++++++++++++++++++++++++++++----------
 styles/index.module.css |  7 ++++
 styles/navbar.css       | 11 ++++++
 styles/ui.css           |  9 +++++
 styles/utility.css      | 27 +++++++++++++++
 5 files changed, 128 insertions(+), 18 deletions(-)
 create mode 100644 styles/index.module.css
 create mode 100644 styles/navbar.css
 create mode 100644 styles/ui.css
 create mode 100644 styles/utility.css

(limited to 'styles')

diff --git a/styles/global.css b/styles/global.css
index 1e87524..350a2a7 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,17 +1,73 @@
-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;
+:root {
+	--background: #E3E6EE;
+	--foreground: var(--gray-100);
+
+	--accent: #7E3AA6;
+
+	--error: #A63A4D;
+	--disk-b-alt: #582D35;
+
+	--confirm: #3AA699;
+	--disk-a-alt: #244743;
+
+	/* shade */
+	--gray-100: #141619;
+	--gray-200: #1F242D;
+	--gray-300: #293140;
+	--gray-700: #757D92;
+	--gray-800: #A9AFC0;
+	--gray-900: #CED2DC;
+
+	/* box-shadow */
+	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
+	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
+
+	/* border-radius */
+	--tight-corner: 6px;
+	--loose-corner: 8px;
+
+	/* margin/padding */
+	--spacing-small:  6px;
+	--spacing-medium: 12px;
+	--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;
@@ -27,17 +83,17 @@ h3 {
 	padding-bottom: 6px;
 }
 
-/* global font zize */
-p, b, i, span, td, th { font-size: 15px; }
-
 /* navbar fix */
 body { padding-left: 48px; }
 
 /* font */
-html { font-family: "Inter"; }
+html { font-family: "Inter", sans-serif; }
 
-/* background color */
-html, body { background-color: var(--page-background); }
+/* color */
+:root, html, body {
+	background-color: var(--background);
+	color: var(--foreground);
+}
 
 /* link fix */
 a {
diff --git a/styles/index.module.css b/styles/index.module.css
new file mode 100644
index 0000000..9b518ea
--- /dev/null
+++ b/styles/index.module.css
@@ -0,0 +1,7 @@
+.loginOrRegisterBox {
+	--squareSize: 90px;
+	vertical-align: top;
+	height: calc(var(--squareSize) + 2 * var(--spacing-large));
+	width: 100%;
+	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
+}
diff --git a/styles/navbar.css b/styles/navbar.css
new file mode 100644
index 0000000..5866b8f
--- /dev/null
+++ b/styles/navbar.css
@@ -0,0 +1,11 @@
+.navbar .item {
+	margin: var(--spacing-medium);
+	margin-bottom: calc(var(--spacing-medium) + 4px);
+	display: block;
+}
+
+.navbar .bottomArea {
+	position: absolute;
+	bottom: -4px;
+	left: 0;
+}
diff --git a/styles/ui.css b/styles/ui.css
new file mode 100644
index 0000000..d665044
--- /dev/null
+++ b/styles/ui.css
@@ -0,0 +1,9 @@
+.vierkant {
+	margin: var(--spacing-small);
+	display: inline-block;
+	position: relative;
+	box-sizing: border-box;
+}
+
+.fullwidth { width: calc(100% - var(--spacing-medium)); }
+
diff --git a/styles/utility.css b/styles/utility.css
new file mode 100644
index 0000000..753b88d
--- /dev/null
+++ b/styles/utility.css
@@ -0,0 +1,27 @@
+.drop-1 { box-shadow: var(--drop-level-1); }
+.drop-2 { box-shadow: var(--drop-level-2); }
+
+.pad-s { padding: var(--spacing-small); }
+.pad-m { padding: var(--spacing-medium); }
+.pad-l { padding: var(--spacing-large); }
+
+.round-l { border-radius: var(--loose-corner); }
+.round-t { border-radius: var(--tight-corner); }
+
+.bg-100 { background-color: var(--gray-100); }
+.bg-200 { background-color: var(--gray-200); }
+.bg-300 { background-color: var(--gray-300); }
+.bg-700 { background-color: var(--gray-700); }
+.bg-800 { background-color: var(--gray-800); }
+.bg-900 { background-color: var(--gray-900); }
+
+.subtile {
+	color: var(--gray-300);
+	font-style: italic;
+}
+
+/* no-select */
+.nosel {
+	user-select: none;
+	font-weight: 600;
+}
-- 
cgit v1.2.3


From dd77d6bb276f6a70b36f69d11cde7f5c8995f5e1 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 17 Apr 2021 17:24:59 +0200
Subject: home page without inline react styles :tada:

---
 components/recentGames.tsx |  20 +++----
 components/ui.tsx          |  21 +------
 pages/_app.tsx             |   2 +
 pages/index.tsx            | 144 +++++++++------------------------------------
 styles/global.css          |  13 ++--
 styles/index.css           |  72 +++++++++++++++++++++++
 styles/index.module.css    |   7 ---
 styles/ui.css              |  12 ++++
 styles/utility.css         |  27 ++++++++-
 9 files changed, 161 insertions(+), 157 deletions(-)
 create mode 100644 styles/index.css
 delete mode 100644 styles/index.module.css

(limited to 'styles')

diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index 988126f..65c819a 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -28,18 +28,14 @@ function GameOutcome(props: { game: gameInfo; }) {
 			},
 		}[props.game.status]();
 	})();
-	var outcome = props.game.outcome;
-	return <td
-		style={{
-			color: outcome == 'w'
-				? 'var(--disk-b-text)'
-				: outcome == 'l'
-				? 'var(--disk-a-text)'
-				: 'var(--text)',
-			opacity: !['w', 'l'].includes(outcome) ? 0.75 : 1.0,
-		}}
-	>
-		{gameStatus}
+	return <td>
+		<span className={"outcome " + {
+					'w': 'win',
+					'l': 'lose',
+					'd': 'draw',
+				}[props.game.outcome]}>
+			{gameStatus}
+		</span>
 	</td>;
 }
 
diff --git a/components/ui.tsx b/components/ui.tsx
index 99479a8..db858a4 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -30,6 +30,7 @@ export function Button(props: {
 	children?: ReactNode;
 	style?: CSSProperties;
 	href?: string;
+	className?: string;
 	onclick?: (() => void);
 	id?: string;
 }) {
@@ -37,26 +38,10 @@ export function Button(props: {
 		onClick={props.onclick}
 		href={props.href}
 		id={props.id}
-		style={{
-			padding: props.text ? 8 : 16,
-			textAlign: props.text ? 'center' : 'left',
-			borderRadius: 8,
-			backgroundColor: 'var(--disk-a)',
-			cursor: 'pointer',
-			position: 'relative',
-			textDecoration: 'none',
-			display: 'block',
-			userSelect: 'none',
-			...props.style,
-		}}
+		className={"button pad-s round-t " + props.className}
 	>
 		{props.text
-			? <span
-				style={{
-					fontWeight: 600,
-					userSelect: 'none',
-				}}
-			>
+			? <span>
 				{props.text}
 			</span>
 			: undefined}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bf9a280..46aa8d0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,6 +11,8 @@ import '../styles/utility.css';
 import '../styles/ui.css';
 import '../styles/navbar.css';
 
+import '../styles/index.css';
+
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <div>
 		<Head>
diff --git a/pages/index.tsx b/pages/index.tsx
index c1b912d..c3fe955 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { userGames, userGameTotals, userInfo } from '../api/api';
 import { Footer } from '../components/footer';
 import { SocketContext } from '../components/socketContext';
@@ -16,72 +16,14 @@ import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 import { mdiRobotExcited } from '@mdi/js';
 import Icon from '@mdi/react';
 
-import styles from '../styles/index.module.css';
-
-var GameModeIconStyle: CSSProperties = {
-	fontSize: 64,
-	width: 64,
-	height: 64,
-	display: 'inline-block',
-	position: 'absolute',
-	top: 24,
-	left: '50%',
-	transform: 'translateX(-50%)',
-};
-
-var GameModeTextStyle: CSSProperties = {
-	whiteSpace: 'nowrap',
-	display: 'inline-block',
-	position: 'absolute',
-	bottom: 24,
-	left: '50%',
-	transform: 'translateX(-50%)',
-	userSelect: 'none',
-	fontWeight: 500,
-};
-
-var SquareSize: CSSProperties = {
-	width: 90,
-	height: 90,
-};
-
-var InnerLoginOrRegisterBoxStyle: CSSProperties = {
-	position: 'relative',
-	width: '100%',
-	height: '100%',
-};
-
 function LoginOrRegisterBox() {
-	return <div style={{ ...InnerLoginOrRegisterBoxStyle, textAlign: 'center' }}>
-		<span
-			style={{
-				userSelect: 'none',
-				display: 'inline-block',
-				position: 'absolute',
-				fontSize: 14,
-				left: 0,
-				right: 0,
-				top: 0,
-				margin: '0 auto',
-				minWidth: 240,
-				maxWidth: 350,
-			}}
-		>
-			Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies
+	return <div className="inner">
+		<span className="registerMessage posabs h0 t0">
+			Log in of maak een account aan om toegang tot meer functies te krijgen
 		</span>
-		<div
-			style={{
-				display: 'grid',
-				gridGap: 24,
-				gridTemplateColumns: '1fr 1fr',
-				position: 'absolute',
-				left: 0,
-				right: 0,
-				bottom: 0,
-			}}
-		>
-			<Button href='/register' text='Registreren' style={{ backgroundColor: 'var(--background-alt)' }} />
-			<Button href='/login' text='Inloggen' />
+		<div className="sidebyside posabs h0 b0">
+			<Button href='/register' text='Registreren' className="register" />
+			<Button href='/login' text='Inloggen' className="login" />
 		</div>
 	</div>;
 }
@@ -90,44 +32,19 @@ function AccountBox(props: {
 	info: userInfo;
 	sumGameInfo: userGameTotals;
 }) {
-	return <div style={InnerLoginOrRegisterBoxStyle}>
-		<div
-			style={{
-				position: 'absolute',
-				top: 0,
-				left: 0,
-				...SquareSize,
-			}}
-		>
+	return <div className="inner profile">
+		<div className="picture posabs l0 t0">
 			<AccountAvatar size={90} />
 		</div>
-		<div
-			style={{
-				position: 'absolute',
-				top: 0,
-				left: 102,
-				width: 'calc(100% - 90px - 12px)',
-				height: '100%',
-			}}
-		>
-			<h2
-				style={{
-					maxWidth: 178,
-					fontSize: 20,
-					whiteSpace: 'nowrap',
-					overflow: 'hidden',
-					textOverflow: 'ellipsis',
-				}}
-			>
-				{props.info?.username}
-			</h2>
-			<p style={{ marginTop: 6 }}>Score: {props.info?.rating}</p>
-			<p style={{ position: 'absolute', bottom: 0, left: 0 }}>
-				<span style={{ color: 'var(--disk-b-text)' }}>{props.sumGameInfo?.win} W</span>
-				<span style={{ margin: '0 3px' }}>/</span>
-				<span style={{ color: 'var(--disk-a-text)' }}>{props.sumGameInfo?.lose} V</span>
-				<span style={{ margin: '0 3px' }}>/</span>
-				<span style={{ opacity: .75 }}>{props.sumGameInfo?.draw} G</span>
+		<div className="info posabs t0">
+			<h2 className="username truncate">{props.info?.username}</h2>
+			<p className="score">Score: {props.info?.rating}</p>
+			<p className="games posabs b0 l0">
+				<span className="outcome win">{props.sumGameInfo?.win} W</span>
+				<span className="divider">/</span>
+				<span className="outcome lose">{props.sumGameInfo?.lose} V</span>
+				<span className="divider">/</span>
+				<span className="outcome draw">{props.sumGameInfo?.draw} G</span>
 			</p>
 		</div>
 	</div>;
@@ -175,25 +92,22 @@ export default function HomePage() {
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>4 op een rij</PageTitle>
-			<div>
-				<Vierkant href='/game'>
-					<VideogameAssetIcon style={GameModeIconStyle} />
-					<span style={GameModeTextStyle}>Nieuw spel</span>
-					<div style={SquareSize}></div>
+			<div className="topbar">
+				<Vierkant className="gamemode" href='/game'>
+					<VideogameAssetIcon className="icon" />
+					<span className="text">Nieuw spel</span>
 				</Vierkant>
 				{false
-					&& <Vierkant href='/'>
-						<ExtensionIcon style={GameModeIconStyle} />
-						<span style={GameModeTextStyle}>Puzzels</span>
-						<div style={SquareSize}></div>
+					&& <Vierkant className="gamemode" href='/'>
+						<ExtensionIcon className="icon" />
+						<span className="text">Puzzels</span>
 					</Vierkant>}
 				{false
-					&& <Vierkant href='/'>
-						<Icon path={mdiRobotExcited} style={GameModeIconStyle} />
-						<span style={GameModeTextStyle}>Tegen computer</span>
-						<div style={SquareSize}></div>
+					&& <Vierkant className="gamemode" href='/'>
+						<Icon path={mdiRobotExcited} className="icon" />
+						<span className="text">Tegen computer</span>
 					</Vierkant>}
-				<Vierkant className={styles.loginOrRegisterBox}>
+				<Vierkant className="loginOrRegisterBox">
 					{loggedIn
 						? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
 						: <LoginOrRegisterBox />}
diff --git a/styles/global.css b/styles/global.css
index 350a2a7..3c28cfc 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,5 +1,5 @@
 :root {
-	--background: #E3E6EE;
+	--background: var(--gray-900);
 	--foreground: var(--gray-100);
 
 	--accent: #7E3AA6;
@@ -14,9 +14,10 @@
 	--gray-100: #141619;
 	--gray-200: #1F242D;
 	--gray-300: #293140;
-	--gray-700: #757D92;
-	--gray-800: #A9AFC0;
-	--gray-900: #CED2DC;
+	--gray-600: #757D92;
+	--gray-700: #A9AFC0;
+	--gray-800: #CED2DC;
+	--gray-900: #E3E6EE;
 
 	/* box-shadow */
 	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
@@ -150,3 +151,7 @@ input.light::placeholder { color: var(--text-alt); }
 	border-width: 2px;
 }
 
+.outcome.win { color: var(--disk-a-alt); }
+.outcome.lose { color: var(--disk-b-alt); }
+.outcome.draw { color: var(--gray-600); }
+
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..8ba12a6
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,72 @@
+.topbar * {
+	--squareSize: 90px;
+}
+
+.loginOrRegisterBox {
+	vertical-align: top;
+	height: calc(var(--squareSize) + 2 * var(--spacing-large));
+	width: 100%;
+	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
+}
+
+.loginOrRegisterBox .inner {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.loginOrRegisterBox .inner .registerMessage {
+	user-select: none;
+	display: inline-block;
+	margin: 0 auto;
+	min-width: 240px;
+	max-width: 350px;
+	text-align: center;
+}
+
+.loginOrRegisterBox .inner .button.register {
+	background-color: var(--gray-700);
+	color: var(--foreground);
+}
+
+.gamemode .icon {
+	font-size: 64px;
+	font-size: 64px;
+	height: 64px;
+	display: inline-block;
+	position: absolute;
+	top: var(--spacing-large);
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.gamemode .text {
+	white-space: nowrap;
+	display: inline-block;
+	position: absolute;
+	bottom: var(--spacing-large);
+	left: 50%;
+	transform: translateX(-50%);
+	user-select: none;
+	font-weight: 500;
+}
+
+.topbar .gamemode {
+	--size: calc(var(--squareSize) + 2 * var(--spacing-large));
+	width: var(--size);
+	height: var(--size);
+}
+
+.topbar .profile .info {
+	left: calc(90px + 12px);
+	width: calc(100% - 90px - 12px);
+	height: 100%;
+}
+
+.topbar .profile .info .username { max-width: 178px; }
+.topbar .profile .info .score { margin-top: var(--spacing-small); }
+
+.topbar .profile .info .games .divider {
+	margin: 0 3px;
+}
+
diff --git a/styles/index.module.css b/styles/index.module.css
deleted file mode 100644
index 9b518ea..0000000
--- a/styles/index.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.loginOrRegisterBox {
-	--squareSize: 90px;
-	vertical-align: top;
-	height: calc(var(--squareSize) + 2 * var(--spacing-large));
-	width: 100%;
-	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
-}
diff --git a/styles/ui.css b/styles/ui.css
index d665044..f1d65e2 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -7,3 +7,15 @@
 
 .fullwidth { width: calc(100% - var(--spacing-medium)); }
 
+.button {
+	background-color: var(--accent);
+	color: var(--gray-900);
+	text-align: center;
+	cursor: pointer;
+	position: relative;
+	text-decoration: none;
+	display: block;
+	user-select: none;
+	font-weight: 600;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 753b88d..4331d3a 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -15,13 +15,38 @@
 .bg-800 { background-color: var(--gray-800); }
 .bg-900 { background-color: var(--gray-900); }
 
+.posabs { position: absolute; }
+.posrel { position: relative; }
+
+.t0 { top: 0; }
+.b0 { bottom: 0; }
+.r0 { right: 0; }
+.l0 { left: 0; }
+
+.h0 { left: 0; right: 0; }
+.v0 { top: 0; bottom: 0; }
+
+.a0 { top: 0; bottom: 0; left: 0; right: 0; }
+
 .subtile {
 	color: var(--gray-300);
 	font-style: italic;
 }
 
-/* no-select */
 .nosel {
 	user-select: none;
 	font-weight: 600;
 }
+
+.sidebyside {
+	display: grid;
+	grid-gap: var(--spacing-medium);
+	grid-auto-flow: column;
+}
+
+.truncate {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
-- 
cgit v1.2.3


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

---
 components/ui.tsx  | 19 +++---------------
 pages/_app.tsx     |  1 +
 pages/index.tsx    |  6 +++---
 pages/search.tsx   | 56 +++++++++++-------------------------------------------
 styles/global.css  | 18 ++++++++++--------
 styles/search.css  | 12 ++++++++++++
 styles/utility.css | 11 ++++++++++-
 7 files changed, 50 insertions(+), 73 deletions(-)
 create mode 100644 styles/search.css

(limited to 'styles')

diff --git a/components/ui.tsx b/components/ui.tsx
index e2d19ad..60b80f4 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -12,14 +12,11 @@ export function Vierkant(props: {
 	children?: ReactNode;
 	className?: string;
 	id?: string;
-	fullwidth?: boolean;
 	onclick?: () => void;
 }) {
 	return <a
 		href={props.href}
-		className={['bg-800', 'round-l', 'pad-l', 'vierkant', props.className, props.fullwidth && 'fullwidth'].join(
-			' ',
-		)}
+		className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')}
 		id={props.id}
 		onClick={props.onclick}
 	>
@@ -98,6 +95,7 @@ export function Input(props: {
 	dark?: boolean;
 	autocomplete?: string;
 	autofocus?: boolean;
+	className?: string;
 }) {
 	return <input
 		id={props.id}
@@ -107,20 +105,9 @@ export function Input(props: {
 		placeholder={props.label}
 		spellCheck={false}
 		defaultValue={props.value ? String(props.value) : ''}
-		className={props.dark ? 'dark' : 'light'}
+		className={"input" + " " + (props.dark ? 'dark' : 'light') + " " + props.className}
 		autoComplete={props.autocomplete}
 		autoFocus={props.autofocus}
-		style={{
-			padding: 12,
-			border: 0,
-			width: 'calc(100% - 24px)',
-			fontSize: 14,
-			backgroundColor: 'var(--page-background)',
-			color: 'var(--text-alt)',
-			borderRadius: 8,
-			fontFamily: 'Inter',
-			...props.style,
-		}}
 	/>;
 }
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 290e687..3f66711 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -12,6 +12,7 @@ import '../styles/ui.css';
 import '../styles/utility.css';
 
 import '../styles/index.css';
+import '../styles/search.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 3d9da21..b5f4b50 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -107,17 +107,17 @@ export default function HomePage() {
 						<Icon path={mdiRobotExcited} className='icon' />
 						<span className='text'>Tegen computer</span>
 					</Vierkant>}
-				<Vierkant className='loginOrRegisterBox'>
+				<Vierkant className='loginOrRegisterBox pad-l'>
 					{loggedIn
 						? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
 						: <LoginOrRegisterBox />}
 				</Vierkant>
 			</div>
 			{loggedIn
-				&& <Vierkant fullwidth>
+				&& <Vierkant className="fullwidth pad-l">
 					<RecentGames games={gameInfo?.games} />
 				</Vierkant>}
-			<Vierkant fullwidth>
+			<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 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>}
diff --git a/styles/global.css b/styles/global.css
index 3c28cfc..b6ed028 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -116,14 +116,20 @@ h1, h2, h3, p, b, i, span, td, th {
 table { table-layout: fixed; }
 
 /* table styles */
-td, th {
-	padding: 4px;
-	font-size: 15px;
+td, th { padding: 4px; }
+
+input {
+	color: var(--foreground);
+	background-color: transparent;
+	font-family: inherit;
+	border: 0;
+	font-size: 1rem; /* why? */
 }
 
 input::placeholder {
 	font-style: italic;
-	opacity: .8;
+	opacity: 1;
+	color: var(--gray-600);
 }
 
 /* remove chrome's ugly :focus outline */
@@ -135,10 +141,6 @@ input::placeholder {
 /* material-ui default state */
 svg.MuiSvgIcon-root { transition: none !important; }
 
-input::placeholder { opacity: .75; }
-input.dark::placeholder { color: var(--text); }
-input.light::placeholder { color: var(--text-alt); }
-
 /* editable field status */
 *[contenteditable] { border-color: var(--background-alt); }
 *[contenteditable="true"]:focus { border-color: var(--disk-a); }
diff --git a/styles/search.css b/styles/search.css
new file mode 100644
index 0000000..06a3918
--- /dev/null
+++ b/styles/search.css
@@ -0,0 +1,12 @@
+.searchBar input {
+	width: calc(100% - 2 * var(--spacing-medium) - 48px);
+	margin: 2px 0;
+}
+
+.results .result .inner .userInfo {
+	left: calc(48px + var(--spacing-medium));
+}
+
+h1.noresults {
+	margin: 24px 32px;
+}
diff --git a/styles/utility.css b/styles/utility.css
index 4331d3a..783b168 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -28,8 +28,17 @@
 
 .a0 { top: 0; bottom: 0; left: 0; right: 0; }
 
+.dispnone { display: none; }
+.dispinbl { display: inline-block; }
+.dispbl { display: block; }
+
+.valigntop { vertical-align: top; }
+.valignsup { vertical-align: super; }
+
+.center { text-align: center; }
+
 .subtile {
-	color: var(--gray-300);
+	color: var(--gray-600);
 	font-style: italic;
 }
 
-- 
cgit v1.2.3


From 2527a6a2e0a9e679cb5a19abb56ad6a363cf980d Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 13:42:44 +0200
Subject: settings page / balloon+tuitje without inline css done

---
 components/ui.tsx   | 131 ++++++++++------------------------------------------
 pages/_app.tsx      |   1 +
 pages/index.tsx     |   2 +-
 pages/settings.tsx  |  63 +++++++++----------------
 styles/index.css    |   1 -
 styles/settings.css |   8 ++++
 styles/ui.css       |  46 ++++++++++++++++++
 styles/utility.css  |   2 +
 8 files changed, 105 insertions(+), 149 deletions(-)
 create mode 100644 styles/settings.css

(limited to 'styles')

diff --git a/components/ui.tsx b/components/ui.tsx
index 89e8ffe..f939456 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -27,10 +27,9 @@ export function Vierkant(props: {
 export function Button(props: {
 	text?: string;
 	children?: ReactNode;
-	style?: CSSProperties;
 	href?: string;
 	className?: string;
-	onclick?: (() => void);
+	onclick?: () => void;
 	id?: string;
 }) {
 	return <a
@@ -52,33 +51,18 @@ export function IconLabelButton(props: {
 	text: string;
 	icon: ReactNode;
 	onclick?: () => void;
-	style?: CSSProperties;
 	href?: string;
+	className?: string;
 }) {
 	return <Button
 		onclick={props.onclick}
 		href={props.href}
-		style={{
-			display: 'inline-block',
-			verticalAlign: 'top',
-			padding: 8,
-			float: 'right',
-			marginLeft: 12,
-			...props.style,
-		}}
+		className={"iconlabel dispinbl valigntop floatr" + " " + props.className}
 	>
-		{props.icon}
-		<span
-			style={{
-				display: 'inline-block',
-				verticalAlign: 'top',
-				fontWeight: 500,
-				marginLeft: 8,
-				marginTop: 3,
-				marginBottom: 3,
-				marginRight: 3,
-			}}
-		>
+		<div className="dispinbl icon">
+			{props.icon}
+		</div>
+		<span className="dispinbl valigntop label">
 			{props.text}
 		</span>
 	</Button>;
@@ -186,110 +170,43 @@ export function CheckBox(props: {
 	</div>;
 }
 
-export class ColorPicker extends Component<{
-	style?: CSSProperties;
-}> {
-	state: {
-		color: string;
-		dark: boolean;
-	} = {
-		color: '#012345',
-		dark: true,
-	};
+export function ColorPicker() {
+	var [ dark, setDark ] = useState(false);
+	var [ color, setColor ] = useState("#012345");
 
-	render() {
-		return <Button
-			style={{
-				display: 'inline-block',
-				verticalAlign: 'top',
-				padding: 6,
-				float: 'right',
-				marginLeft: 12,
-				color: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
-				borderColor: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
-				borderWidth: 2,
-				borderStyle: 'solid',
-				backgroundColor: this.state.color,
-				...this.props.style,
-			}}
-		>
-			<div>
-				<EditOutlinedIcon />
-				<div
-					style={{
-						width: 150,
-						height: 24,
-						display: 'inline-block',
-						textAlign: 'center',
-						verticalAlign: 'top',
-						position: 'relative',
-					}}
-				>
-					<span
-						style={{
-							position: 'absolute',
-							top: '50%',
-							left: '50%',
-							transform: 'translate(-50%, -50%)',
-							fontWeight: 600,
-							fontFeatureSettings: '"tnum", "ss01"',
-						}}
-					>
-						{this.state.color}
-					</span>
-				</div>
+	return <Button className="colorpicker dispinbl valigntop pad-s floatr">
+		<div>
+			<EditOutlinedIcon />
+			<div className="labelwrapper valigntop dispinbl center posrel">
+				<span className="label posabs">
+					{color}
+				</span>
 			</div>
-		</Button>;
-	}
+		</div>
+	</Button>;
 }
 
-export function Tuitje(props: {
-	style?: CSSProperties;
-	rotation?: number;
-}) {
+export function Tuitje() {
 	return <svg
 		width='36'
 		height='12'
 		viewBox='0 0 36 12'
 		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
-		style={{
-			...props.style,
-		}}
+		className="tuitje posabs"
 	>
 		<path
 			d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
-			fill={props.style?.background as string || 'var(--background)'}
+			fill='var(--background)'
 		/>
 	</svg>;
 }
 
 export function Bubble(props: {
 	children?: ReactNode;
-	style?: CSSProperties;
-	tuitjeStyle?: CSSProperties;
 }) {
-	return <Vierkant
-		style={{
-			position: 'absolute',
-			textAlign: 'center',
-			margin: 0,
-			overflow: 'visible',
-			left: '50%',
-			top: -24,
-			transform: 'translateY(-100%) translateX(-50%)',
-			boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-			...props.style,
-		}}
-	>
+	return <Vierkant className="bubble posabs center drop-2">
 		{props.children}
-		<Tuitje
-			style={{
-				position: 'absolute',
-				bottom: -12,
-				transform: 'translate(-50%, 0%) rotate(0deg)',
-				...props.tuitjeStyle,
-			}}
-		/>
+		<Tuitje />
 	</Vierkant>;
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 3f66711..bbdbae8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -13,6 +13,7 @@ import '../styles/utility.css';
 
 import '../styles/index.css';
 import '../styles/search.css';
+import '../styles/settings.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 9f63229..31aee57 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -107,7 +107,7 @@ export default function HomePage() {
 						<Icon path={mdiRobotExcited} className='icon' />
 						<span className='text'>Tegen computer</span>
 					</Vierkant>}
-				<Vierkant className='loginOrRegisterBox pad-l'>
+				<Vierkant className='loginOrRegisterBox pad-l valigntop'>
 					{loggedIn
 						? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
 						: <LoginOrRegisterBox />}
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 0f40a90..e9fc5fa 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,7 +1,6 @@
 import axios from 'axios';
 import reduce from 'image-blob-reduce';
-import { CSSProperties, useContext } from 'react';
-import * as cookies from 'react-cookies';
+import { useContext } from 'react';
 
 import { AccountAvatar } from '../components/account';
 import { Footer } from '../components/footer';
@@ -16,11 +15,6 @@ import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';
 import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined';
 import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 
-var SettingsSubsectionStyle: CSSProperties = {
-	marginTop: 24,
-	minHeight: 40,
-};
-
 async function uploadNewProfileImage() {
 	if (!this.result) return;
 
@@ -54,9 +48,9 @@ export default function SettingsPage() {
 			<NavBar />
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
-				<Vierkant fullwidth>
+				<Vierkant className="section account fullwidth pad-l">
 					<h2>Account</h2>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<AccountAvatar size={100} />
 						<label htmlFor='pfUpload'>
 							<IconLabelButton text='Nieuwe profielfoto uploaden' icon={<PublishOutlinedIcon />} />
@@ -65,7 +59,7 @@ export default function SettingsPage() {
 							type='file'
 							id='pfUpload'
 							accept='.png,.jpg,.jpeg'
-							style={{ display: 'none' }}
+							className="dispnone"
 							onChange={event => {
 								var file = event.target.files[0];
 								if (!file) return;
@@ -76,45 +70,45 @@ export default function SettingsPage() {
 							}}
 						/>
 					</div>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} />
-						<div style={{ display: 'block' }}>
+						<div className="dispbl">
 							<h3>Gebruikersnaam</h3>
 							<p>Hier staat hij dan</p>
 						</div>
 					</div>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} />
 						<IconLabelButton text='Onthullen' icon={<VisibilityOutlinedIcon />} />
-						<div style={{ display: 'block' }}>
+						<div className="dispbl">
 							<h3>Email</h3>
 							<p>******@example.com</p>
 						</div>
 					</div>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} />
-						<div style={{ display: 'block' }}>
+						<div className="dispbl">
 							<h3>Wachtwoord</h3>
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant fullwidth>
+				<Vierkant className="section colors fullwidth pad-l">
 					<h2>Kleuren</h2>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<ColorPicker />
 						<ColorPicker />
-						<div style={{ display: 'block' }}>
+						<div className="dispbl">
 							<h3>Schijfjes</h3>
 						</div>
 					</div>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<ColorPicker />
-						<div style={{ display: 'block' }}>
+						<div className="dispbl">
 							<h3>Achtergrond</h3>
 						</div>
 					</div>
-					<div style={SettingsSubsectionStyle}>
-						<div style={{ float: 'right' }}>
+					<div className="subsection">
+						<div className="floatr">
 							<CheckBox
 								state={preferences?.darkMode}
 								onclick={state => updatePreference({ 'darkMode': state })}
@@ -123,31 +117,20 @@ export default function SettingsPage() {
 						<h3>Donkere modus</h3>
 					</div>
 				</Vierkant>
-				<Vierkant fullwidth>
+				<Vierkant className="section gamerules fullwidth pad-l">
 					<h2>Standaard spelregels</h2>
-					<div style={SettingsSubsectionStyle}>
+					<div className="subsection">
 						<CurrentGameSettings />
 					</div>
 				</Vierkant>
-				<Vierkant fullwidth>
+				<Vierkant className="section logout fullwidth pad-l">
 					<h2>Uitloggen</h2>
-					<div
-						style={{
-							width: '100%',
-							textAlign: 'center',
-						}}
-					>
+					<div className="center">
 						<IconLabelButton
+							className="dispinbl"
 							icon={<ExitToAppOutlinedIcon />}
 							text='Uitloggen'
-							style={{
-								float: 'none',
-								marginLeft: 0,
-							}}
-							onclick={() => {
-								cookies.remove('token');
-								window.location.pathname = '/';
-							}}
+							href="/logout"
 						/>
 					</div>
 				</Vierkant>
diff --git a/styles/index.css b/styles/index.css
index 8ba12a6..fcda8e0 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -3,7 +3,6 @@
 }
 
 .loginOrRegisterBox {
-	vertical-align: top;
 	height: calc(var(--squareSize) + 2 * var(--spacing-large));
 	width: 100%;
 	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
diff --git a/styles/settings.css b/styles/settings.css
new file mode 100644
index 0000000..bcce5b5
--- /dev/null
+++ b/styles/settings.css
@@ -0,0 +1,8 @@
+.section.logout .button {
+	float: unset;
+}
+
+.subsection {
+	margin-top: var(--spacing-large);
+	min-height: 40px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index f1d65e2..b8cd44c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -19,3 +19,49 @@
 	font-weight: 600;
 }
 
+.button.iconlabel,
+.button.colorpicker {
+	margin-left: var(--spacing-medium);
+}
+
+.button.colorpicker {
+	--color: var(--gray-100);
+	--background: #ff00ff;
+
+	background-color: var(--background);
+	color: var(--color);
+	border-width: 2px;
+	border-style: solid;
+	border-color: var(--color);
+}
+
+.button.iconlabel .label {
+	margin: 3px;
+	margin-left: 8px;
+}
+
+.button.colorpicker .labelwrapper {
+	width: 150px;
+	height: 24px;
+}
+
+.button.colorpicker .labelwrapper .label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-feature-settings: "tnum", "ss01";
+}
+
+.bubble {
+	margin: 0;
+	overflow: visible;
+	left: 50%;
+	top: -24px;
+	transform: translateY(-100%) translateX(-50%);
+}
+
+.bubble .tuitje {
+	bottom: -12px;
+	transform: translate(-50%, 0%) rotate(0deg);
+}
diff --git a/styles/utility.css b/styles/utility.css
index 783b168..f8954cd 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -37,6 +37,8 @@
 
 .center { text-align: center; }
 
+.floatr { float: right; }
+
 .subtile {
 	color: var(--gray-600);
 	font-style: italic;
-- 
cgit v1.2.3


From af796b465c66a61b498facff010b372a52a24508 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 14:28:53 +0200
Subject: wip dialog box

---
 components/dialogBox.tsx    |  16 +-
 components/gameSettings.tsx | 363 +++++++++++++++++++++-----------------------
 styles/ui.css               |   5 +
 styles/utility.css          |   7 +
 4 files changed, 188 insertions(+), 203 deletions(-)

(limited to 'styles')

diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx
index 7abbded..0a61762 100644
--- a/components/dialogBox.tsx
+++ b/components/dialogBox.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { Vierkant } from './ui';
 
@@ -7,20 +7,10 @@ import CancelIcon from '@material-ui/icons/Cancel';
 export function DialogBox(props: {
 	children: ReactNode;
 	title: string;
-	style?: CSSProperties;
 	onclick?: () => void;
+	hidden?: boolean;
 }) {
-	return <Vierkant
-		style={{
-			position: 'fixed',
-			top: '50%',
-			left: '50%',
-			transform: 'translate(-50%, -50%)',
-			boxShadow: '0 8px 32px -5px #0007',
-			width: 392,
-			...props.style,
-		}}
-	>
+	return <Vierkant className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '')}>
 		<h2 style={{ marginBottom: 24 }}>{props.title}</h2>
 		<span onClick={props.onclick}>
 			<CancelIcon
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index f562e5d..3c3a699 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Component, CSSProperties, ReactNode } from 'react';
+import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';
 
 import { ruleset, userPreferences } from '../api/api';
 import { DialogBox } from './dialogBox';
@@ -7,106 +7,93 @@ import { Button, CheckBox, Input, Vierkant } from './ui';
 
 import BuildOutlinedIcon from '@material-ui/icons/BuildOutlined';
 
-type CurrentGameSettingsStateType = {
-	editGameRulesDialogVisible: boolean;
-	ruleset: ruleset;
-};
-
-export class CurrentGameSettings extends Component {
-	state: CurrentGameSettingsStateType = {
-		editGameRulesDialogVisible: false,
-		ruleset: {
-			timelimit: {
-				enabled: false,
-				shared: false,
-			},
-			ranked: false,
+export function CurrentGameSettings() {
+	var [editGameRulesDialogVisible, setEditGameRulesDialogVisible] = useState(false);
+	var [ruleset, setRuleset] = useState<ruleset>({
+		timelimit: {
+			enabled: false,
+			shared: false,
+			minutes: 0,
+			seconds: 0,
+			addmove: 0,
 		},
-	};
-
-	constructor(props: {}) {
-		super(props);
+		ranked: false,
+	});
 
-		if (typeof window === 'undefined') return; // return if run on server
-
-		axios.request<userPreferences>({
+	useEffect(() => {
+		axios.request<{ preferences: userPreferences; }>({
 			method: 'get',
 			url: `/api/user/preferences`,
 			headers: { 'content-type': 'application/json' },
 		})
-			// FIXME: this assumes the request ruleset has all properties of a ruleset
-			.then(request => this.setState({ ruleset: request.data.ruleset || this.state.ruleset }))
+			.then(request => setRuleset(request.data.preferences.ruleset))
 			.catch(() => {});
-	}
+	}, []);
 
-	showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true });
-	hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false });
-	setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules });
+	/* showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true }); */
+	/* hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false }); */
+	/* setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules }); */
 
-	render() {
-		var timelimit_str = this.state.ruleset.timelimit.enabled
-			? `${this.state.ruleset.timelimit.minutes}m${this.state.ruleset.timelimit.seconds}s plus ${this.state.ruleset.timelimit.addmove}`
-			: 'Geen tijdslimiet';
-		var ranked_str = this.state.ruleset.ranked
-			? 'Gerangschikt'
-			: 'Niet gerangschikt';
-		return <div
+	var timelimit_str = ruleset.timelimit.enabled
+		? `${ruleset.timelimit.minutes}m${ruleset.timelimit.seconds}s plus ${ruleset.timelimit.addmove}`
+		: 'Geen tijdslimiet';
+	var ranked_str = ruleset.ranked
+		? 'Gerangschikt'
+		: 'Niet gerangschikt';
+	return <div
+		style={{
+			position: 'relative',
+			height: 80,
+			overflow: 'visible',
+			zIndex: 1,
+		}}
+	>
+		<p
+			className='subtile nosel posabs'
 			style={{
-				position: 'relative',
-				height: 80,
-				overflow: 'visible',
-				zIndex: 1,
+				top: '50%',
+				left: 0,
+				transform: 'translateY(-50%)',
 			}}
 		>
-			<p
-				style={{
-					opacity: .75,
-					fontStyle: 'italic',
-					userSelect: 'none',
-					position: 'absolute',
-					top: '50%',
-					left: 0,
-					transform: 'translateY(-50%)',
-				}}
-			>
-				{timelimit_str}
-				<br />
-				{ranked_str}
-			</p>
-			<Button
+			{timelimit_str}
+			<br />
+			{ranked_str}
+		</p>
+		<Button
+			style={{
+				width: 150,
+				position: 'absolute',
+				top: '50%',
+				right: 0,
+				transform: 'translateY(-50%)',
+			}}
+			onclick={() => setEditGameRulesDialogVisible(true)}
+		>
+			<BuildOutlinedIcon style={{ fontSize: 48 }} />
+			<span
 				style={{
-					width: 150,
+					fontWeight: 600,
 					position: 'absolute',
+					right: 24,
 					top: '50%',
-					right: 0,
+					width: 85,
+					verticalAlign: 'middle',
+					textAlign: 'center',
 					transform: 'translateY(-50%)',
+					userSelect: 'none',
 				}}
-				onclick={this.showEditGameRules}
 			>
-				<BuildOutlinedIcon style={{ fontSize: 48 }} />
-				<span
-					style={{
-						fontWeight: 600,
-						position: 'absolute',
-						right: 24,
-						top: '50%',
-						width: 85,
-						verticalAlign: 'middle',
-						textAlign: 'center',
-						transform: 'translateY(-50%)',
-						userSelect: 'none',
-					}}
-				>
-					Spelregels aanpassen
-				</span>
-			</Button>
-			<EditGameSettings
-				parentState={this.state}
-				hideEditGameRules={this.hideEditGameRules}
-				setGameRules={this.setGameRules}
-			/>
-		</div>;
-	}
+				Spelregels aanpassen
+			</span>
+		</Button>
+		<EditGameSettings
+			hideEditGameRules={() => setEditGameRulesDialogVisible(false)}
+			setGameRules={setRuleset}
+			ruleset={ruleset}
+			visible={editGameRulesDialogVisible}
+		/>
+	</div>;
 }
 
 function GameSettingsSection(props: {
@@ -168,120 +155,116 @@ function GameRule(props: {
 }
 
 type editGameSettingsProps = {
-	parentState: CurrentGameSettingsStateType;
+	visible: boolean;
+	ruleset: ruleset;
 	hideEditGameRules: () => void;
 	setGameRules: (newRules: ruleset) => void;
 };
 
-export class EditGameSettings extends Component<editGameSettingsProps> {
-	render() {
-		return <DialogBox
-			title='Spelregels aanpassen'
+export function EditGameSettings(props: editGameSettingsProps) {
+	return <DialogBox
+		title='Spelregels aanpassen'
+		hidden={!props.visible}
+		onclick={props.hideEditGameRules}
+	>
+		<div
 			style={{
-				margin: 0,
-				display: this.props.parentState.editGameRulesDialogVisible ? 'block' : 'none',
+				marginTop: 24,
+				maxHeight: 500,
+				overflowY: 'scroll',
+				borderRadius: 8,
 			}}
-			onclick={this.props.hideEditGameRules}
 		>
-			<div
-				style={{
-					marginTop: 24,
-					maxHeight: 500,
-					overflowY: 'scroll',
-					borderRadius: 8,
-				}}
+			<GameSettingsSection
+				title='Tijdslimiet'
+				state={props.ruleset.timelimit.enabled}
+				id='timelimit'
 			>
-				<GameSettingsSection
-					title='Tijdslimiet'
-					state={this.props.parentState.ruleset.timelimit.enabled}
-					id='timelimit'
+				<div
+					style={{
+						display: 'grid',
+						gridTemplateColumns: '1fr 1fr 1fr',
+						gridGap: 16,
+						margin: '16px 0',
+					}}
 				>
-					<div
-						style={{
-							display: 'grid',
-							gridTemplateColumns: '1fr 1fr 1fr',
-							gridGap: 16,
-							margin: '16px 0',
-						}}
-					>
-						<Input
-							id='timelimit_minutes'
-							type='number'
-							label='min'
-							min={0}
-							max={60}
-							value={this.props.parentState.ruleset.timelimit.minutes}
-						/>
-						<Input
-							id='timelimit_seconds'
-							type='number'
-							label='sec'
-							min={0}
-							max={60}
-							value={this.props.parentState.ruleset.timelimit.seconds}
-						/>
-						<Input
-							id='timelimit_addmove'
-							type='number'
-							label='plus'
-							min={0}
-							value={this.props.parentState.ruleset.timelimit.addmove}
-						/>
-					</div>
-					<CheckBox id='timelimit_shared' state={this.props.parentState.ruleset.timelimit.shared} />
-					<span
-						style={{
-							verticalAlign: 'super',
-							marginLeft: 4,
-						}}
-					>
-						Timer gebruiken voor bijde spelers
-					</span>
-				</GameSettingsSection>
-				{false && <GameSettingsSection title='Regelset' state={false}>
-					<div
-						style={{
-							display: 'grid',
-							gridTemplateColumns: '1fr 1fr',
-							gridGap: 16,
-							margin: '16px 0',
-						}}
-					>
-						<GameRule title='+2' description='Extra kolommen' />
-						<GameRule title='+4' description='Extra kolommen' />
-					</div>
-					<GameRule style={{ marginBottom: 16 }} title='Gravity' description='De zwaartekracht draait soms' />
-					<GameRule title='Flashlight' description='Het veld wordt opgelicht door de vallende fiches' />
-				</GameSettingsSection>}
-				<GameSettingsSection
-					title='Gerangschikt spel'
-					state={this.props.parentState.ruleset.ranked}
-					id='ranked'
-					noMarginBottom
-				/>
-			</div>
-			<Button
-				style={{
-					textAlign: 'center',
-					marginTop: 24,
-				}}
-				onclick={() => {
-					var rules: ruleset = {
-						timelimit: {
-							enabled: document.getElementById('timelimit_enabled').classList.contains('on'),
-							minutes: Number((document.getElementById('timelimit_minutes') as HTMLInputElement).value),
-							seconds: Number((document.getElementById('timelimit_seconds') as HTMLInputElement).value),
-							addmove: Number((document.getElementById('timelimit_addmove') as HTMLInputElement).value),
-							shared: document.getElementById('timelimit_shared').classList.contains('on'),
-						},
-						ranked: document.getElementById('ranked_enabled').classList.contains('on'),
-					};
-					this.props.setGameRules(rules);
-					this.props.hideEditGameRules();
-				}}
-			>
-				Instellingen opslaan
-			</Button>
-		</DialogBox>;
-	}
+					<Input
+						id='timelimit_minutes'
+						type='number'
+						label='min'
+						min={0}
+						max={60}
+						value={props.ruleset.timelimit.minutes}
+					/>
+					<Input
+						id='timelimit_seconds'
+						type='number'
+						label='sec'
+						min={0}
+						max={60}
+						value={props.ruleset.timelimit.seconds}
+					/>
+					<Input
+						id='timelimit_addmove'
+						type='number'
+						label='plus'
+						min={0}
+						value={props.ruleset.timelimit.addmove}
+					/>
+				</div>
+				<CheckBox id='timelimit_shared' state={props.ruleset.timelimit.shared} />
+				<span
+					style={{
+						verticalAlign: 'super',
+						marginLeft: 4,
+					}}
+				>
+					Timer gebruiken voor bijde spelers
+				</span>
+			</GameSettingsSection>
+			{false && <GameSettingsSection title='Regelset' state={false}>
+				<div
+					style={{
+						display: 'grid',
+						gridTemplateColumns: '1fr 1fr',
+						gridGap: 16,
+						margin: '16px 0',
+					}}
+				>
+					<GameRule title='+2' description='Extra kolommen' />
+					<GameRule title='+4' description='Extra kolommen' />
+				</div>
+				<GameRule style={{ marginBottom: 16 }} title='Gravity' description='De zwaartekracht draait soms' />
+				<GameRule title='Flashlight' description='Het veld wordt opgelicht door de vallende fiches' />
+			</GameSettingsSection>}
+			<GameSettingsSection
+				title='Gerangschikt spel'
+				state={props.ruleset.ranked}
+				id='ranked'
+				noMarginBottom
+			/>
+		</div>
+		<Button
+			style={{
+				textAlign: 'center',
+				marginTop: 24,
+			}}
+			onclick={() => {
+				var rules: ruleset = {
+					timelimit: {
+						enabled: document.getElementById('timelimit_enabled').classList.contains('on'),
+						minutes: Number((document.getElementById('timelimit_minutes') as HTMLInputElement).value),
+						seconds: Number((document.getElementById('timelimit_seconds') as HTMLInputElement).value),
+						addmove: Number((document.getElementById('timelimit_addmove') as HTMLInputElement).value),
+						shared: document.getElementById('timelimit_shared').classList.contains('on'),
+					},
+					ranked: document.getElementById('ranked_enabled').classList.contains('on'),
+				};
+				props.setGameRules(rules);
+				props.hideEditGameRules();
+			}}
+		>
+			Instellingen opslaan
+		</Button>
+	</DialogBox>;
 }
diff --git a/styles/ui.css b/styles/ui.css
index b8cd44c..efc96b7 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -65,3 +65,8 @@
 	bottom: -12px;
 	transform: translate(-50%, 0%) rotate(0deg);
 }
+
+.dialogbox {
+	width: 392px;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index f8954cd..0393d1d 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -17,6 +17,7 @@
 
 .posabs { position: absolute; }
 .posrel { position: relative; }
+.posfix { position: fixed; }
 
 .t0 { top: 0; }
 .b0 { bottom: 0; }
@@ -61,3 +62,9 @@
 	text-overflow: ellipsis;
 }
 
+.abscenter {
+	top: 51%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
-- 
cgit v1.2.3


From 763d21dc09ea1ae5bf7bda03763386039de396a9 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 19:34:00 +0200
Subject: edit game rules working (still some inline css)

---
 components/dialogBox.tsx    | 19 ++++------
 components/gameSettings.tsx | 85 ++++++++-------------------------------------
 pages/_app.tsx              |  1 +
 styles/gameSettings.css     | 59 +++++++++++++++++++++++++++++++
 styles/ui.css               | 10 ++++++
 5 files changed, 92 insertions(+), 82 deletions(-)
 create mode 100644 styles/gameSettings.css

(limited to 'styles')

diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx
index 0a61762..4ead7c5 100644
--- a/components/dialogBox.tsx
+++ b/components/dialogBox.tsx
@@ -9,20 +9,15 @@ export function DialogBox(props: {
 	title: string;
 	onclick?: () => void;
 	hidden?: boolean;
+	className?: string;
 }) {
-	return <Vierkant className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '')}>
-		<h2 style={{ marginBottom: 24 }}>{props.title}</h2>
+	return <Vierkant
+		className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' '
+			+ props.className}
+	>
+		<h2 className='title'>{props.title}</h2>
 		<span onClick={props.onclick}>
-			<CancelIcon
-				style={{
-					position: 'absolute',
-					top: 25,
-					right: 25,
-					color: 'var(--text)',
-					opacity: .85,
-					cursor: 'pointer',
-				}}
-			/>
+			<CancelIcon className='posabs close icon subtile' />
 		</span>
 		{props.children}
 	</Vierkant>;
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index 3c3a699..bb01284 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -30,60 +30,24 @@ export function CurrentGameSettings() {
 			.catch(() => {});
 	}, []);
 
-	/* showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true }); */
-	/* hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false }); */
-	/* setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules }); */
-
 	var timelimit_str = ruleset.timelimit.enabled
 		? `${ruleset.timelimit.minutes}m${ruleset.timelimit.seconds}s plus ${ruleset.timelimit.addmove}`
 		: 'Geen tijdslimiet';
 	var ranked_str = ruleset.ranked
 		? 'Gerangschikt'
 		: 'Niet gerangschikt';
-	return <div
-		style={{
-			position: 'relative',
-			height: 80,
-			overflow: 'visible',
-			zIndex: 1,
-		}}
-	>
-		<p
-			className='subtile nosel posabs'
-			style={{
-				top: '50%',
-				left: 0,
-				transform: 'translateY(-50%)',
-			}}
-		>
+	return <div className='editGameSettings posrel'>
+		<p className='currentRules subtile nosel posabs l0'>
 			{timelimit_str}
 			<br />
 			{ranked_str}
 		</p>
 		<Button
-			style={{
-				width: 150,
-				position: 'absolute',
-				top: '50%',
-				right: 0,
-				transform: 'translateY(-50%)',
-			}}
+			className='posabs r0 pad-m'
 			onclick={() => setEditGameRulesDialogVisible(true)}
 		>
-			<BuildOutlinedIcon style={{ fontSize: 48 }} />
-			<span
-				style={{
-					fontWeight: 600,
-					position: 'absolute',
-					right: 24,
-					top: '50%',
-					width: 85,
-					verticalAlign: 'middle',
-					textAlign: 'center',
-					transform: 'translateY(-50%)',
-					userSelect: 'none',
-				}}
-			>
+			<BuildOutlinedIcon className='icon' />
+			<span className='posabs center nosel text'>
 				Spelregels aanpassen
 			</span>
 		</Button>
@@ -105,13 +69,7 @@ function GameSettingsSection(props: {
 }) {
 	return <Vierkant
 		id={props.id}
-		style={{
-			backgroundColor: 'var(--background-alt)',
-			width: '100%',
-			padding: 16,
-			margin: 0,
-			marginBottom: props.noMarginBottom ? 0 : 24,
-		}}
+		className='pad-m editableRulesSection'
 	>
 		<span
 			style={{
@@ -166,28 +124,15 @@ export function EditGameSettings(props: editGameSettingsProps) {
 		title='Spelregels aanpassen'
 		hidden={!props.visible}
 		onclick={props.hideEditGameRules}
+		className='gameRuleEdit'
 	>
-		<div
-			style={{
-				marginTop: 24,
-				maxHeight: 500,
-				overflowY: 'scroll',
-				borderRadius: 8,
-			}}
-		>
+		<div className='editableRules round-t'>
 			<GameSettingsSection
 				title='Tijdslimiet'
 				state={props.ruleset.timelimit.enabled}
 				id='timelimit'
 			>
-				<div
-					style={{
-						display: 'grid',
-						gridTemplateColumns: '1fr 1fr 1fr',
-						gridGap: 16,
-						margin: '16px 0',
-					}}
-				>
+				<div className='sidebyside timeControls'>
 					<Input
 						id='timelimit_minutes'
 						type='number'
@@ -195,6 +140,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
 						min={0}
 						max={60}
 						value={props.ruleset.timelimit.minutes}
+						className='pad-m round-t'
 					/>
 					<Input
 						id='timelimit_seconds'
@@ -203,6 +149,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
 						min={0}
 						max={60}
 						value={props.ruleset.timelimit.seconds}
+						className='pad-m round-t'
 					/>
 					<Input
 						id='timelimit_addmove'
@@ -210,19 +157,20 @@ export function EditGameSettings(props: editGameSettingsProps) {
 						label='plus'
 						min={0}
 						value={props.ruleset.timelimit.addmove}
+						className='pad-m round-t'
 					/>
 				</div>
 				<CheckBox id='timelimit_shared' state={props.ruleset.timelimit.shared} />
 				<span
+					className='valignsup'
 					style={{
-						verticalAlign: 'super',
 						marginLeft: 4,
 					}}
 				>
 					Timer gebruiken voor bijde spelers
 				</span>
 			</GameSettingsSection>
-			{false && <GameSettingsSection title='Regelset' state={false}>
+			{false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
 				<div
 					style={{
 						display: 'grid',
@@ -245,10 +193,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
 			/>
 		</div>
 		<Button
-			style={{
-				textAlign: 'center',
-				marginTop: 24,
-			}}
+			className='save'
 			onclick={() => {
 				var rules: ruleset = {
 					timelimit: {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bbdbae8..9521d58 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/gameSettings.css';
 import '../styles/index.css';
 import '../styles/search.css';
 import '../styles/settings.css';
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
new file mode 100644
index 0000000..533cea0
--- /dev/null
+++ b/styles/gameSettings.css
@@ -0,0 +1,59 @@
+.editGameSettings {
+	height: 80px;
+	overflow: visible;
+	z-index: 1;
+}
+
+.editGameSettings .currentRules {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+.editGameSettings > .button {
+	width: 150px;
+	top: 50%;
+	transform: translateY(-50%);
+	text-align: left;
+}
+
+.editGameSettings > .button .icon {
+	font-size: 48px;
+}
+
+.editGameSettings > .button .text {
+	right: var(--spacing-medium);
+	width: 85px;
+	top: 50%;
+	vertical-align: middle;
+	transform: translateY(-50%);
+}
+
+.editGameSettings .editableRules {
+	margin-top: var(--spacing-large);
+	max-height: 500px;
+	overflow-y: scroll;
+}
+
+.editGameSettings .editableRules .editableRulesSection {
+	width: 100%;
+	background-color: var(--gray-700);
+	margin: 0;
+	margin-bottom: var(--spacing-medium);
+}
+
+.editGameSettings .button {
+	line-height: normal;
+}
+
+.editGameSettings .editableRules .editableRulesSection .timeControls {
+	margin: var(--spacing-medium);
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.editGameSettings .editableRules .editableRulesSection .timeControls input {
+	background-color: var(--background);
+
+	width: calc(100% - 2 * var(--spacing-medium));
+}
+
diff --git a/styles/ui.css b/styles/ui.css
index efc96b7..55b24e2 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -70,3 +70,13 @@
 	width: 392px;
 }
 
+.dialogbox > .title {
+	margin-bottom: var(--spacing-large);
+}
+
+.dialogbox .icon.close {
+	top: 25px;
+	right: 25px;
+	cursor: pointer;
+}
+
-- 
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 'styles')

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 29436b8bdcba28d0c6362a2c6a68268411be7293 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Mon, 19 Apr 2021 14:36:28 +0200
Subject: user page without inline css :tada:

---
 pages/_app.tsx     |   1 +
 pages/user.tsx     | 456 ++++++++++++++++++++++++-----------------------------
 styles/global.css  |  16 --
 styles/user.css    |  46 ++++++
 styles/utility.css |   4 +
 5 files changed, 256 insertions(+), 267 deletions(-)
 create mode 100644 styles/user.css

(limited to 'styles')

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7cdb8e3..db62fa8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -16,6 +16,7 @@ import '../styles/index.css';
 import '../styles/loginregister.css';
 import '../styles/search.css';
 import '../styles/settings.css';
+import '../styles/user.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <div>
diff --git a/pages/user.tsx b/pages/user.tsx
index 4f7331c..e1c3674 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -1,6 +1,6 @@
 import Icon from '@mdi/react';
 import axios from 'axios';
-import { Children, ReactNode, useContext, useEffect, useState } from 'react';
+import { ReactNode, useContext, useEffect, useState } from 'react';
 
 import { userGames, userInfo } from '../api/api';
 import { AccountAvatar } from '../components/account';
@@ -35,60 +35,18 @@ function InfoModule(props: {
 	label: string;
 	icon: ReactNode;
 }) {
-	return <div
-		style={{
-			position: 'relative',
-			height: '100%',
-		}}
-	>
-		<div
-			style={{
-				position: 'absolute',
-				left: '50%',
-				transform: 'translateX(-50%)',
-			}}
-		>
+	return <div className='infoModule posrel'>
+		<div className='iconWrapper posabs'>
 			{props.icon}
 		</div>
-		<div
-			style={{
-				position: 'absolute',
-				top: 24 + 6,
-				left: 0,
-				right: 0,
-				bottom: 0,
-			}}
-		>
-			<span
-				style={{
-					position: 'absolute',
-					top: '50%',
-					transform: 'translateY(-50%)',
-					width: '100%',
-					textAlign: 'center',
-				}}
-			>
+		<div className='labelWrapper posabs h0 b0'>
+			<span className='label posabs center fullwidth'>
 				{props.label}
 			</span>
 		</div>
 	</div>;
 }
 
-function InfoSection(props: { children: ReactNode; }) {
-	return <Vierkant fullwidth>
-		<div
-			style={{
-				display: 'grid',
-				gridTemplateColumns: `repeat(${Children.count(props.children)}, 1fr)`,
-				gridGap: 12,
-				height: 64,
-			}}
-		>
-			{props.children}
-		</div>
-	</Vierkant>;
-}
-
 export default function AccountPage() {
 	var server = typeof window === 'undefined';
 	var loggedIn = !server && document.cookie.includes('token');
@@ -167,226 +125,222 @@ export default function AccountPage() {
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>Profiel</PageTitle>
-			<Vierkant fullwidth>
-				<AccountAvatar size={128} id={user?.id || ''} />
-				<div
-					style={{
-						display: 'inline-block',
-						verticalAlign: 'top',
-						marginLeft: 12,
-						width: 'calc(100% - 128px - 12px)',
-					}}
-				>
-					<h2 style={{ fontSize: 32 }}>{user?.username}</h2>
-					<p
-						id='status'
-						contentEditable={editingStatus ? 'true' : 'false'}
-						style={{
-							marginTop: 6,
-							transitionDuration: '.3s',
-						}}
-						suppressContentEditableWarning={true}
-					>
-						{user?.status}
-					</p>
-				</div>
-				<div
-					style={{
-						position: 'absolute',
-						backgroundColor: 'var(--background)',
-						height: '40px',
-						bottom: 24,
-						left: 24 + 12 + 128,
-						right: 24,
-					}}
-				>
-					{loggedIn && <div>
-						{ownPage
-							? <div>
-								<IconLabelButton icon={<SettingsOutlinedIcon />} href='/settings' text='Instellingen' />
-								{!editingStatus
-									? <IconLabelButton
-										icon={<EditOutlinedIcon />}
-										text='Status bewerken'
-										onclick={() => setEditingStatus(true)}
+			<Vierkant className='accountHeader w100m2m pad-l'>
+				<div className='inner posrel'>
+					<AccountAvatar size={128} id={user?.id || ''} />
+					<div className='userInfo dispinbl valigntop'>
+						<h2 className='username'>{user?.username}</h2>
+						<p
+							id='status'
+							className='status round-t'
+							contentEditable={editingStatus ? 'true' : 'false'}
+							suppressContentEditableWarning={true}
+						>
+							{user?.status}
+						</p>
+					</div>
+					<div className='posabs b0 r0'>
+						{loggedIn && <div>
+							{ownPage
+								? <div>
+									<IconLabelButton
+										icon={<SettingsOutlinedIcon />}
+										href='/settings'
+										text='Instellingen'
 									/>
-									: <IconLabelButton
-										icon={<DoneOutlinedIcon />}
-										text='Status opslaan'
-										onclick={() => {
-											setEditingStatus(false);
-											axios.request({
-												method: 'post',
-												url: `/api/user/status`,
-												headers: { 'content-type': 'application/json' },
-												data: { 'status': document.getElementById('status').innerText },
-											});
-										}}
-									/>}
-							</div>
-							: <div>
-								{(() => {
-									var icon = {
-										'blocked': <Icon size={1} path={mdiAccountCancelOutline} />,
-									}[relation] || <Icon size={1} path={mdiAccountCancelOutline} />;
+									{!editingStatus
+										? <IconLabelButton
+											icon={<EditOutlinedIcon />}
+											text='Status bewerken'
+											onclick={() => setEditingStatus(true)}
+										/>
+										: <IconLabelButton
+											icon={<DoneOutlinedIcon />}
+											text='Status opslaan'
+											onclick={() => {
+												setEditingStatus(false);
+												axios.request({
+													method: 'post',
+													url: `/api/user/status`,
+													headers: { 'content-type': 'application/json' },
+													data: { 'status': document.getElementById('status').innerText },
+												});
+											}}
+										/>}
+								</div>
+								: <div>
+									{(() => {
+										var icon = {
+											'blocked': <Icon size={1} path={mdiAccountCancelOutline} />,
+										}[relation] || <Icon size={1} path={mdiAccountCancelOutline} />;
 
-									var text = {
-										'blocked': 'Deblokkeren',
-									}[relation] || 'Blokkeren';
+										var text = {
+											'blocked': 'Deblokkeren',
+										}[relation] || 'Blokkeren';
 
-									return <IconLabelButton
-										icon={icon}
-										text={text}
-										onclick={() => {
-											var nextRelation = {
-												'blocked': {
-													'endpoint': '/api/social/unblock',
-													'action': `${user.username} gedeblokkeerd`,
-													'relation': 'none',
+										return <IconLabelButton
+											icon={icon}
+											text={text}
+											onclick={() => {
+												var nextRelation = {
+													'blocked': {
+														'endpoint': '/api/social/unblock',
+														'action': `${user.username} gedeblokkeerd`,
+														'relation': 'none',
+														'icon': <Icon size={1} path={mdiAccountCancelOutline} />,
+													},
+												}[relation] || {
+													'endpoint': '/api/social/block',
+													'action': `${user.username} geblokkeerd`,
+													'relation': 'blocked',
 													'icon': <Icon size={1} path={mdiAccountCancelOutline} />,
-												},
-											}[relation] || {
-												'endpoint': '/api/social/block',
-												'action': `${user.username} geblokkeerd`,
-												'relation': 'blocked',
-												'icon': <Icon size={1} path={mdiAccountCancelOutline} />,
-											};
+												};
 
-											axios.request({
-												method: 'post',
-												url: nextRelation.endpoint,
-												headers: { 'content-type': 'application/json' },
-												data: { 'id': user?.id },
-											})
-												.then(() => {
-													toast({
-														message: nextRelation.action,
-														type: 'confirmation',
-														icon: nextRelation.icon,
+												axios.request({
+													method: 'post',
+													url: nextRelation.endpoint,
+													headers: { 'content-type': 'application/json' },
+													data: { 'id': user?.id },
+												})
+													.then(() => {
+														toast({
+															message: nextRelation.action,
+															type: 'confirmation',
+															icon: nextRelation.icon,
+														});
+														setRelation(nextRelation.relation);
 													});
-													setRelation(nextRelation.relation);
-												});
-										}}
-									/>;
-								})()}
-								{(() => {
-									var icon = {
-										'friends': <Icon size={1} path={mdiAccountMinusOutline} />,
-										'outgoing': <Icon size={1} path={mdiAccountRemoveOutline} />,
-										'incoming': <PersonAddOutlinedIcon />,
-									}[relation] || <PersonAddOutlinedIcon />;
+											}}
+										/>;
+									})()}
+									{(() => {
+										var icon = {
+											'friends': <Icon size={1} path={mdiAccountMinusOutline} />,
+											'outgoing': <Icon size={1} path={mdiAccountRemoveOutline} />,
+											'incoming': <PersonAddOutlinedIcon />,
+										}[relation] || <PersonAddOutlinedIcon />;
 
-									var text = {
-										'friends': 'Vriend verwijderen',
-										'outgoing': 'Vriendschapsverzoek annuleren',
-										'incoming': 'Vriendschapsverzoek accepteren',
-									}[relation] || 'Vriendschapsverzoek sturen';
+										var text = {
+											'friends': 'Vriend verwijderen',
+											'outgoing': 'Vriendschapsverzoek annuleren',
+											'incoming': 'Vriendschapsverzoek accepteren',
+										}[relation] || 'Vriendschapsverzoek sturen';
 
-									return <IconLabelButton
-										icon={icon}
-										text={text}
-										onclick={() => {
-											var nextRelation = {
-												'friends': {
-													'endpoint': '/api/social/remove',
-													'action': `${user.username} succesvol verwijderd als vriend`,
-													'relation': 'none',
-													'icon': <Icon size={1} path={mdiAccountMinusOutline} />,
-												},
-												'outgoing': {
-													'endpoint': '/api/social/remove',
-													'action': `Vriendschapsverzoek naar ${user.username} geannuleerd`,
-													'relation': 'none',
-													'icon': <Icon size={1} path={mdiAccountMinusOutline} />,
-												},
-												'incoming': {
-													'endpoint': '/api/social/accept',
-													'action': `Vriendschapsverzoek van ${user.username} geaccepteerd`,
-													'relation': 'friends',
+										return <IconLabelButton
+											icon={icon}
+											text={text}
+											onclick={() => {
+												var nextRelation = {
+													'friends': {
+														'endpoint': '/api/social/remove',
+														'action': `${user.username} succesvol verwijderd als vriend`,
+														'relation': 'none',
+														'icon': <Icon size={1} path={mdiAccountMinusOutline} />,
+													},
+													'outgoing': {
+														'endpoint': '/api/social/remove',
+														'action':
+															`Vriendschapsverzoek naar ${user.username} geannuleerd`,
+														'relation': 'none',
+														'icon': <Icon size={1} path={mdiAccountMinusOutline} />,
+													},
+													'incoming': {
+														'endpoint': '/api/social/accept',
+														'action':
+															`Vriendschapsverzoek van ${user.username} geaccepteerd`,
+														'relation': 'friends',
+														'icon': <PersonAddOutlinedIcon />,
+													},
+												}[relation] || {
+													'endpoint': '/api/social/request',
+													'action': `Vriendschapsverzoek gestuurd naar ${user.username}`,
+													'relation': 'outgoing',
 													'icon': <PersonAddOutlinedIcon />,
-												},
-											}[relation] || {
-												'endpoint': '/api/social/request',
-												'action': `Vriendschapsverzoek gestuurd naar ${user.username}`,
-												'relation': 'outgoing',
-												'icon': <PersonAddOutlinedIcon />,
-											};
+												};
 
-											axios.request({
-												method: 'post',
-												url: nextRelation.endpoint,
-												headers: { 'content-type': 'application/json' },
-												data: { 'id': user?.id },
-											})
-												.then(() => {
-													toast({
-														message: nextRelation.action,
-														type: 'confirmation',
-														icon: nextRelation.icon,
+												axios.request({
+													method: 'post',
+													url: nextRelation.endpoint,
+													headers: { 'content-type': 'application/json' },
+													data: { 'id': user?.id },
+												})
+													.then(() => {
+														toast({
+															message: nextRelation.action,
+															type: 'confirmation',
+															icon: nextRelation.icon,
+														});
+														setRelation(nextRelation.relation);
 													});
-													setRelation(nextRelation.relation);
-												});
-										}}
-									/>;
-								})()}
-							</div>}
-					</div>}
+											}}
+										/>;
+									})()}
+								</div>}
+						</div>}
+					</div>
 				</div>
 			</Vierkant>
-			<InfoSection>
-				<InfoModule
-					icon={<Icon size={1} path={mdiCheckboxBlankCircle} color='var(--disk-b-text)' />}
-					label='Online'
-				/>
-				<InfoModule
-					icon={<AssignmentIndOutlinedIcon />}
-					label={(() => {
-						var memberSince = 'Lid sinds';
+			<Vierkant className='infosection pad-l w100m2m'>
+				<div className='inner sidebyside'>
+					<InfoModule
+						icon={<Icon size={1} path={mdiCheckboxBlankCircle} className='outcome win' />}
+						label='Online'
+					/>
+					<InfoModule
+						icon={<AssignmentIndOutlinedIcon />}
+						label={(() => {
+							var memberSince = 'Lid sinds';
 
-						var registered = new Date(user?.registered);
-						memberSince += ' ' + registered.toLocaleString('nl-nl', { month: 'long', day: 'numeric' });
+							var registered = new Date(user?.registered);
+							memberSince += ' ' + registered.toLocaleString('nl-nl', { month: 'long', day: 'numeric' });
 
-						var currentYear = new Date().getFullYear();
-						var memberYear = registered.getFullYear();
-						if (currentYear != memberYear) memberSince += ' ' + memberYear;
+							var currentYear = new Date().getFullYear();
+							var memberYear = registered.getFullYear();
+							if (currentYear != memberYear) memberSince += ' ' + memberYear;
 
-						return memberSince;
-					})()}
-				/>
-				<InfoModule
-					icon={<PeopleOutlineOutlinedIcon />}
-					label={(() => {
-						var label = user?.friends.toString() + ' ';
-						label += user?.friends == 1 ? 'vriend' : 'vrienden';
-						return label;
-					})()}
-				/>
-				<InfoModule icon={<Icon size={1} path={mdiEarth} />} label='Nederland' />
-			</InfoSection>
-			<InfoSection>
-				<InfoModule
-					icon={<ArrowUpwardOutlinedIcon style={{ color: 'var(--disk-b-text)' }} />}
-					label={gameInfo?.totals.win + ' keer gewonnen'}
-				/>
-				<InfoModule
-					icon={<Icon size={1} path={mdiEqual} />}
-					label={gameInfo?.totals.draw + ' keer gelijkspel'}
-				/>
-				<InfoModule
-					icon={<ArrowDownwardOutlinedIcon style={{ color: 'var(--disk-a-text)' }} />}
-					label={gameInfo?.totals.lose + ' keer verloren'}
-				/>
-				<InfoModule icon={<Icon size={1} path={mdiClipboardTextOutline} />} label={'Score: ' + user?.rating} />
-				<InfoModule
-					icon={<Icon size={1} path={mdiGamepadSquareOutline} />}
-					label={(() => {
-						var label = gameInfo?.totals.games.toString() + ' ';
-						label += gameInfo?.totals.games == 1 ? 'potje' : 'potjes';
-						return label;
-					})()}
-				/>
-			</InfoSection>
-			<Vierkant>
+							return memberSince;
+						})()}
+					/>
+					<InfoModule
+						icon={<PeopleOutlineOutlinedIcon />}
+						label={(() => {
+							var label = user?.friends.toString() + ' ';
+							label += user?.friends == 1 ? 'vriend' : 'vrienden';
+							return label;
+						})()}
+					/>
+					<InfoModule icon={<Icon size={1} path={mdiEarth} />} label='Nederland' />
+				</div>
+			</Vierkant>
+			<Vierkant className='infosection pad-l w100m2m sidebyside'>
+				<div className='inner sidebyside'>
+					<InfoModule
+						icon={<ArrowUpwardOutlinedIcon className='outcome win' />}
+						label={gameInfo?.totals.win + ' keer gewonnen'}
+					/>
+					<InfoModule
+						icon={<Icon size={1} path={mdiEqual} className='subtile' />}
+						label={gameInfo?.totals.draw + ' keer gelijkspel'}
+					/>
+					<InfoModule
+						icon={<ArrowDownwardOutlinedIcon className='outcome lose' />}
+						label={gameInfo?.totals.lose + ' keer verloren'}
+					/>
+					<InfoModule
+						icon={<Icon size={1} path={mdiClipboardTextOutline} />}
+						label={'Score: ' + user?.rating}
+					/>
+					<InfoModule
+						icon={<Icon size={1} path={mdiGamepadSquareOutline} />}
+						label={(() => {
+							var label = gameInfo?.totals.games.toString() + ' ';
+							label += gameInfo?.totals.games == 1 ? 'potje' : 'potjes';
+							return label;
+						})()}
+					/>
+				</div>
+			</Vierkant>
+			<Vierkant className='pad-l'>
 				<RecentGames games={gameInfo?.games} />
 			</Vierkant>
 		</CenteredPage>
diff --git a/styles/global.css b/styles/global.css
index b6ed028..f70b6bd 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -141,19 +141,3 @@ input::placeholder {
 /* material-ui default state */
 svg.MuiSvgIcon-root { transition: none !important; }
 
-/* editable field status */
-*[contenteditable] { border-color: var(--background-alt); }
-*[contenteditable="true"]:focus { border-color: var(--disk-a); }
-*[contenteditable="true"] {
-	background-color: var(--page-background);
-	color: var(--text-alt);
-	padding: 6px;
-	border-radius: 6px;
-	border-style: solid;
-	border-width: 2px;
-}
-
-.outcome.win { color: var(--disk-a-alt); }
-.outcome.lose { color: var(--disk-b-alt); }
-.outcome.draw { color: var(--gray-600); }
-
diff --git a/styles/user.css b/styles/user.css
new file mode 100644
index 0000000..d66fa94
--- /dev/null
+++ b/styles/user.css
@@ -0,0 +1,46 @@
+.infosection .inner {
+	height: 64px;
+}
+
+/* editable field status */
+*[contenteditable] {
+	box-shadow: inset 0 0 0 0px var(--foreground);
+}
+*[contenteditable="true"]:focus {
+	box-shadow: inset 0 0 0 2px var(--accent);
+}
+*[contenteditable="true"] {
+	background-color: var(--background);
+	color: var(--text-alt);
+	padding: 8px;
+	box-shadow: inset 0 0 0 2px var(--foreground);
+}
+
+.accountHeader .userInfo {
+	margin-left: var(--spacing-medium);
+	width: calc(100% - 128px - var(--spacing-medium));
+}
+
+.accountHeader .userInfo .username {
+	font-size: 2rem;
+}
+
+.accountHeader .userInfo .status {
+	transition-duration: .3s;
+	margin-top: var(--spacing-small);
+}
+
+.infoModule .iconWrapper {
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.infoModule .labelWrapper {
+	top: calc(24px + var(--spacing-small));
+}
+
+.infoModule .labelWrapper .label {
+	top: 50%;
+	transform: translateY(-50%);
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 7f5ebbd..be982f8 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -18,6 +18,10 @@
 .fg-100 { color: var(--gray-100); }
 .fg-900 { color: var(--gray-900); }
 
+.outcome.win { color: var(--disk-a-alt); }
+.outcome.lose { color: var(--disk-b-alt); }
+.outcome.draw { color: var(--gray-600); }
+
 .posabs { position: absolute; }
 .posrel { position: relative; }
 .posfix { position: fixed; }
-- 
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 'styles')

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 'styles')

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 ae4375d8b492c244328a88190e8ed10c8dbd2fda Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 20 Apr 2021 16:21:51 +0200
Subject: all pages without inline styles

---
 pages/game.tsx     | 8 +-------
 pages/login.tsx    | 2 +-
 pages/register.tsx | 2 +-
 styles/game.css    | 5 +++++
 4 files changed, 8 insertions(+), 9 deletions(-)

(limited to 'styles')

diff --git a/pages/game.tsx b/pages/game.tsx
index 9e702ed..de2c089 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -65,13 +65,7 @@ function VoerGame(props: {
 		});
 	}, []);
 
-	return <div
-		className='posrel abscenterv'
-		style={{
-			maxWidth: '100vh',
-			margin: '0 auto',
-		}}
-	>
+	return <div className='voerGame posrel abscenterv'>
 		<VoerBord
 			width={width}
 			height={height}
diff --git a/pages/login.tsx b/pages/login.tsx
index 73fbb52..4cadd82 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {
 	return (
 		<div>
 			<NavBar />
-			<CenteredPage width={500} style={{ height: '100vh' }}>
+			<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 63f51f7..2709a10 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -88,7 +88,7 @@ export default function RegisterPage() {
 	return (
 		<div>
 			<NavBar />
-			<CenteredPage width={500} style={{ height: '100vh' }}>
+			<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/styles/game.css b/styles/game.css
index de00b1c..f454691 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -68,3 +68,8 @@
 .gameBar .move.move-a { background-color: var(--error); }
 .gameBar .move.move-b { background-color: var(--confirm); }
 
+.voerGame {
+	max-width: 100vh;
+	margin: 0 auto;
+}
+
-- 
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 'styles')

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


From 93f24011f9613b7785b37dc4b0c963d9be22ba30 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 09:17:48 +0200
Subject: more components without inline css

---
 components/gameBar.tsx           |  53 +++++---------------
 components/notificationsArea.tsx | 103 ++++++---------------------------------
 components/page.tsx              |  27 ++--------
 components/recentGames.tsx       |  34 +++----------
 components/ui.tsx                |  19 ++------
 pages/_app.tsx                   |   2 +
 styles/game.css                  |  18 ++++++-
 styles/global.css                |   3 ++
 styles/notifications.css         |  51 +++++++++++++++++++
 styles/recentGames.css           |  21 ++++++++
 styles/ui.css                    |  19 ++++++++
 styles/utility.css               |   1 +
 12 files changed, 155 insertions(+), 196 deletions(-)
 create mode 100644 styles/notifications.css
 create mode 100644 styles/recentGames.css

(limited to 'styles')

diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index a3479d5..9a7ca59 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Bubble, Vierkant } from './ui';
+import { ReactNode } from 'react';
+import { Vierkant } from './ui';
 
 import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
 import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
@@ -9,21 +9,17 @@ import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 function GameBarModule(props: {
 	children?: ReactNode;
 	onclick?: () => void;
+	className?: string;
 }) {
 	return <Vierkant
-		className={'gameBarButton bg-700 pad-m round-t valigntop ' + (props.onclick ? 'cpointer' : '')}
+		className={'gameBarButton bg-700 pad-m round-t valigntop ' + props.className + ' '
+			+ (props.onclick ? 'cpointer' : '')}
 		onclick={props.onclick}
 	>
 		{props.children}
 	</Vierkant>;
 }
 
-var GameBarSpacer = () => <div style={{ width: 8, display: 'inline-block' }}></div>;
-
-var GameBarAlignStyle: CSSProperties = {
-	display: 'inline-block',
-};
-
 export function GameBar(props: {
 	turn: boolean;
 	player1: boolean;
@@ -32,7 +28,7 @@ export function GameBar(props: {
 }) {
 	return <Vierkant className='gameBar bg-800 w100m2m pad-s'>
 		<div>
-			<div style={{ ...GameBarAlignStyle, float: 'left' }}>
+			<div className='floatl dispinbl'>
 				{props.active && <div
 					className={'move dispinbl ' + (props.turn ? 'move-a' : 'move-b')}
 				/>}
@@ -44,49 +40,22 @@ export function GameBar(props: {
 						: 'Tegenstander'}
 				</h2>
 			</div>
-			<div
-				style={{
-					...GameBarAlignStyle,
-					position: 'absolute',
-					top: '50%',
-					left: '50%',
-					transform: 'translate(-50%, -50%)',
-				}}
-			>
-				<span
-					style={{
-						color: 'var(--text)',
-						fontSize: 20,
-						opacity: .75 - .75,
-					}}
-				>
-					0-0
-				</span>
+			<div className='score winning dispnone subtile posabs abscenter'>
+				<span>0-0</span>
 			</div>
-			<div style={{ ...GameBarAlignStyle, float: 'right' }}>
+			<div className='buttons floatr dispinbl'>
 				<GameBarModule>
 					<SettingsRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
-				<GameBarModule>
-					<span
-						style={{
-							margin: '0 4px',
-							fontSize: 20,
-						}}
-					>
-						00:00
-					</span>
+				<GameBarModule className='timer nosel'>
+					<span>00:00</span>
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule onclick={props.resignFunction}>
 					<ExitToAppRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule>
 					<NavigateBeforeRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule>
 					<NavigateNextRoundedIcon />
 				</GameBarModule>
diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx
index 9573b72..8ee554a 100644
--- a/components/notificationsArea.tsx
+++ b/components/notificationsArea.tsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { CSSProperties, ReactNode, useContext, useEffect, useState } from 'react';
+import { ReactNode, useContext, useEffect, useState } from 'react';
 
 import { gameInfo, userInfo } from '../api/api';
 import { AccountAvatar } from './account';
@@ -35,52 +35,14 @@ export function NotificationsArea(props: {
 		setPreviousMessages(messages);
 	});
 
-	return props.visible && <Bubble
-		style={{
-			left: 48 + 12,
-			top: 92,
-			transform: 'translateY(-100%)',
-			textAlign: 'left',
-			width: 400,
-			height: 450,
-		}}
-		tuitjeStyle={{
-			left: 12,
-			bottom: 86,
-			transform: 'translate(-100%, 100%) rotate(90deg)',
-		}}
-	>
-		<h2 style={{ marginBottom: 24 }}>Meldingen</h2>
-		<div
-			style={{
-				overflowY: 'scroll',
-				whiteSpace: 'normal',
-				height: 450 - 24 * 4,
-				borderRadius: 6,
-			}}
-		>
+	return props.visible && <Bubble className='notificationsArea bg-700 pad-l'>
+		<h2 className='title'>Meldingen</h2>
+		<div className='inner round-t'>
 			{props.gameInvites?.map(game => <GameInvite hide={props.rerender} game={game} />)}
 			{props.friendRequests?.map(user => <FriendRequest hide={props.rerender} user={user} />)}
 			{messages == 0
-				&& <div
-					style={{
-						position: 'absolute',
-						left: 0,
-						right: 0,
-						bottom: 0,
-						top: 0,
-					}}
-				>
-					<h1
-						style={{
-							position: 'absolute',
-							top: '50%',
-							left: '50%',
-							whiteSpace: 'nowrap',
-							transform: 'translate(-50%, -50%)',
-							opacity: .7,
-						}}
-					>
+				&& <div className='noMsgsWrapper posabs a0'>
+					<h1 className='posabs abscenter subtile'>
 						Geen meldingen
 					</h1>
 				</div>}
@@ -88,48 +50,24 @@ export function NotificationsArea(props: {
 	</Bubble>;
 }
 
-var FriendRequestButtonStyle: CSSProperties = {
-	borderRadius: 6,
-	display: 'inline-block',
-	marginLeft: 0,
-	textAlign: 'center',
-};
-
 function Acceptable(props: {
 	children?: ReactNode;
 	onAccept?: () => void;
 	onDeny?: () => void;
 }) {
-	return <Vierkant
-		style={{
-			borderRadius: 8,
-			background: 'var(--background-alt)',
-			margin: 0,
-			padding: 12,
-			width: '100%',
-			marginBottom: 12,
-		}}
-	>
-		<div style={{ position: 'relative' }}>
+	return <Vierkant className='acceptable bg-800 round-t pad-m fullwidth'>
+		<div className='posrel'>
 			{props.children}
-			<div
-				style={{
-					display: 'grid',
-					gridTemplateColumns: '1fr, 1fr',
-					gridGap: 12,
-					marginTop: 12,
-					gridAutoFlow: 'column',
-				}}
-			>
+			<div className='sidebyside buttons'>
 				<IconLabelButton
+					className='accept'
 					onclick={props.onAccept}
-					style={FriendRequestButtonStyle}
 					icon={<DoneIcon />}
 					text='Accepteren'
 				/>
 				<IconLabelButton
+					className='deny'
 					onclick={props.onDeny}
-					style={FriendRequestButtonStyle}
 					icon={<CloseIcon />}
 					text='Verwijderen'
 				/>
@@ -171,14 +109,8 @@ function FriendRequest(props: {
 	>
 		<a href={'/user?id=' + props.user.id}>
 			<AccountAvatar size={48} id={props.user.id} />
-			<div
-				style={{
-					display: 'inline-block',
-					verticalAlign: 'top',
-					marginLeft: 6,
-				}}
-			>
-				<i style={{ display: 'block' }}>Vriendschapsverzoek</i>
+			<div className='userInfo dispinbl valigntop'>
+				<i className='dispbl'>Vriendschapsverzoek</i>
 				<b>{props.user.username}</b>
 			</div>
 		</a>
@@ -191,13 +123,8 @@ function GameInvite(props: {
 }) {
 	return <Acceptable>
 		<a>
-			<div
-				style={{
-					display: 'inline-block',
-					verticalAlign: 'top',
-				}}
-			>
-				<i style={{ display: 'block' }}>Partijuitnodiging</i>
+			<div className='userInfo dispinbl valigntop'>
+				<i className='dispbl'>Partijuitnodiging</i>
 				<p>
 					<b>
 						<a href={'/user?id=' + props.game.opponent?.id}>{props.game.opponent?.username}</a>
diff --git a/components/page.tsx b/components/page.tsx
index b8e3dac..b8e8770 100644
--- a/components/page.tsx
+++ b/components/page.tsx
@@ -1,26 +1,15 @@
-import { Component, CSSProperties, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 
 export function CenteredPage(props: {
 	width?: number;
 	children?: ReactNode;
-	style?: CSSProperties;
 	className?: string;
 }) {
 	return <div
 		className='CenteredPageOuter'
-		style={{
-			maxWidth: props.width,
-			margin: '0 auto',
-		}}
+		style={{ maxWidth: props.width }}
 	>
-		<div
-			className={'CenteredPageInner ' + props.className}
-			style={{
-				margin: '0 6px',
-				lineHeight: 0,
-				...props.style,
-			}}
-		>
+		<div className={'CenteredPageInner ' + props.className}>
 			{props.children}
 		</div>
 	</div>;
@@ -28,15 +17,7 @@ export function CenteredPage(props: {
 
 export class PageTitle extends Component {
 	render() {
-		return <h1
-			style={{
-				color: 'var(--text-alt)',
-				marginLeft: 6,
-				marginTop: 32,
-				marginBottom: 64,
-				fontSize: 25,
-			}}
-		>
+		return <h1 className='pageTitle'>
 			{this.props.children}
 		</h1>;
 	}
diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index d619eeb..6683e20 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -1,18 +1,7 @@
 import friendlyTime from 'friendly-time';
-import { CSSProperties } from 'react';
 
 import { gameInfo } from '../api/api';
 
-var LeftAlignedTableColumn: CSSProperties = {
-	textAlign: 'left',
-	paddingLeft: 16,
-};
-
-var RightAlignedTableColumn: CSSProperties = {
-	textAlign: 'right',
-	paddingRight: 16,
-};
-
 function GameOutcome(props: { game: gameInfo; }) {
 	var gameStatus = (() => {
 		return {
@@ -42,10 +31,10 @@ function GameOutcome(props: { game: gameInfo; }) {
 }
 
 export default function RecentGames(props: { games?: Array<gameInfo>; }) {
-	return <div>
+	return <div className='recentGames'>
 		<h2>Recente partijen</h2>
 		{props.games?.length > 0
-			? <table width='100%' style={{ marginTop: '16px', textAlign: 'center' }}>
+			? <table width='100%' className='recentGames center'>
 				<tbody>
 					<tr>
 						<th style={{ width: '50%' }}>Tegenstander</th>
@@ -55,19 +44,14 @@ export default function RecentGames(props: { games?: Array<gameInfo>; }) {
 					</tr>
 					{props.games?.map(game =>
 						<tr key={game.id}>
-							<td style={LeftAlignedTableColumn}>
-								<a
-									href={'/user?id=' + game.opponent?.id}
-									style={{
-										fontWeight: 500,
-									}}
-								>
+							<td className='leftAlignedColumn'>
+								<a href={'/user?id=' + game.opponent?.id}>
 									{game.opponent?.username}
 								</a>
 							</td>
 							<GameOutcome game={game} />
 							<td>{Math.max(0, game.moves.length - 1)}</td>
-							<td style={RightAlignedTableColumn}>
+							<td className='rightAlignedColumn'>
 								{(() => {
 									var timeCreated = new Date(game.created);
 									return friendlyTime(timeCreated);
@@ -77,13 +61,7 @@ export default function RecentGames(props: { games?: Array<gameInfo>; }) {
 					)}
 				</tbody>
 			</table>
-			: <h1
-				style={{
-					textAlign: 'center',
-					opacity: .6,
-					margin: '32px 64px',
-				}}
-			>
+			: <h1 className='nogames center subtile'>
 				Deze gebruiker heeft nog geen partijen gespeeld
 			</h1>}
 	</div>;
diff --git a/components/ui.tsx b/components/ui.tsx
index 11914c8..7474240 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -70,7 +70,6 @@ export function IconLabelButton(props: {
 
 export function Input(props: {
 	label?: string;
-	style?: CSSProperties;
 	type?: string;
 	id?: string;
 	min?: number;
@@ -109,7 +108,6 @@ export function SearchBar(props: { label?: string; }) {
 
 export function CheckBox(props: {
 	state?: boolean;
-	style?: CSSProperties;
 	id?: string;
 	onclick?: (state: boolean) => void;
 }) {
@@ -130,12 +128,7 @@ export function CheckBox(props: {
 	return <div
 		onClick={toggle}
 		id={props.id}
-		className={on ? 'on' : 'off'}
-		style={{
-			...props.style,
-			display: 'inline-block',
-			cursor: 'pointer',
-		}}
+		className={'checkbox dispinbl ' + (on ? 'on' : 'off')}
 	>
 		{on
 			? <CheckBoxIcon />
@@ -168,17 +161,15 @@ export function Tuitje() {
 		xmlns='http://www.w3.org/2000/svg'
 		className='tuitje posabs'
 	>
-		<path
-			d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
-			fill='var(--background)'
-		/>
+		<path d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z' />
 	</svg>;
 }
 
 export function Bubble(props: {
 	children?: ReactNode;
+	className?: string;
 }) {
-	return <Vierkant className='bubble posabs center drop-2'>
+	return <Vierkant className={'bubble posabs center drop-2 ' + props.className}>
 		{props.children}
 		<Tuitje />
 	</Vierkant>;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 31bc0e7..317b389 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,6 +8,8 @@ import '../styles/disk.css';
 import '../styles/footer.css';
 import '../styles/global.css';
 import '../styles/navbar.css';
+import '../styles/notifications.css';
+import '../styles/recentGames.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
 
diff --git a/styles/game.css b/styles/game.css
index 2c1eb94..d482f9b 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -35,7 +35,10 @@
 	margin: 3px;
 }
 
-.gameBar .gameBarButton { margin: 0; }
+.gameBar .gameBarButton {
+	margin: 0;
+	margin-left: var(--spacing-small);
+}
 
 .gameBar .move {
 	width: 32px;
@@ -48,6 +51,19 @@
 .gameBar .move.move-a { background-color: var(--error); }
 .gameBar .move.move-b { background-color: var(--confirm); }
 
+.gameBar .timer span {
+	margin: 0 4px;
+	font-size: 20px;
+}
+
+.gameBar .score {
+	font-size: 20px;
+	z-index: 1;
+}
+
+.gameBar .score.winning { color: var(--disk-a-alt); }
+.gameBar .score.losing { color: var(--disk-b-alt); }
+
 .voerGame {
 	max-width: 100vh;
 	margin: 0 auto;
diff --git a/styles/global.css b/styles/global.css
index 541dd76..79aa026 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -39,6 +39,9 @@ html, body {
 	padding: 0;
 }
 
+/* section font size */
+h1 { font-size: 25px; }
+
 /* subsection font size */
 h2 { font-size: 20px; }
 
diff --git a/styles/notifications.css b/styles/notifications.css
new file mode 100644
index 0000000..ec47836
--- /dev/null
+++ b/styles/notifications.css
@@ -0,0 +1,51 @@
+.notificationsArea {
+	left: calc(48px + var(--spacing-medium));
+	top: 92px;
+	transform: translateY(-100%);
+	text-align: left;
+	width: 400px;
+	height: 450px;
+}
+
+.notificationsArea .tuitje {
+	left: var(--spacing-medium);
+	bottom: 86px;
+	transform: translate(-100%, 100%) rotate(90deg);
+	fill: var(--gray-700);
+}
+
+.notificationsArea .title {
+	margin-bottom: var(--spacing-large);
+}
+
+.notificationsArea .inner {
+	overflow-y: scroll;
+	white-space: normal;
+	height: calc(450px - 4 * var(--spacing-large));
+}
+
+.notificationsArea .acceptable {
+	margin: 0;
+	margin-bottom: var(--spacing-medium);
+}
+
+.notificationsArea .acceptable:last-child {
+	margin-bottom: 0;
+}
+
+.notificationsArea .buttons .button {
+	margin: 0;
+}
+
+.notificationsArea .buttons {
+	margin-top: var(--spacing-medium);
+}
+
+.notificationsArea .noMsgsWrapper h1 {
+	white-space: nowrap;
+	user-select: none;
+}
+
+.notificationsArea .acceptable .userInfo {
+	margin-left: var(--spacing-small);
+}
diff --git a/styles/recentGames.css b/styles/recentGames.css
new file mode 100644
index 0000000..c7150aa
--- /dev/null
+++ b/styles/recentGames.css
@@ -0,0 +1,21 @@
+table .leftAlignedColumn {
+	text-align: left;
+	padding-left: var(--spacing-medium);
+}
+
+table .rightAlignedColumn {
+	text-align: right;
+	padding-left: var(--spacing-medium);
+}
+
+table.recentGames {
+	margin-top: var(--spacing-medium);
+}
+
+table.recentGames a {
+	font-weight: 500;
+}
+
+div.recentGames .nogames {
+	margin: 32px 64px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index 6dbc388..cb95b36 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -89,3 +89,22 @@ html.dark .dialogbox { background-color: var(--gray-700); }
 	box-sizing: border-box;
 }
 
+.checkbox {
+	cursor: pointer;
+}
+
+.CenteredPageOuter {
+	margin: 0 auto;
+}
+
+.CenteredPageInner {
+	margin: 0 var(--spacing-small);
+	line-height: 0;
+}
+
+.pageTitle {
+	margin-left: var(--spacing-small);
+	margin-top: 32px;
+	margin-bottom: 64px;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 0ff6b10..cc358e6 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -49,6 +49,7 @@
 .center { text-align: center; }
 
 .floatr { float: right; }
+.floatl { float: left; }
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }
 
-- 
cgit v1.2.3


From de2853cc4793b7948b94525a0a4f964e49943131 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 09:57:40 +0200
Subject: even more components without inline css

---
 components/gameSettings.tsx | 60 ++++++++++++---------------------------------
 components/navbar.tsx       | 42 +++----------------------------
 styles/gameSettings.css     | 25 +++++++++++++++----
 styles/navbar.css           | 25 +++++++++++++++++++
 styles/notifications.css    |  5 ++--
 5 files changed, 67 insertions(+), 90 deletions(-)

(limited to 'styles')

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index bb01284..13462be 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 import { ruleset, userPreferences } from '../api/api';
 import { DialogBox } from './dialogBox';
@@ -71,24 +71,15 @@ function GameSettingsSection(props: {
 		id={props.id}
 		className='pad-m editableRulesSection'
 	>
-		<span
-			style={{
-				verticalAlign: 'top',
-				fontSize: 14,
-				fontWeight: 600,
-			}}
-		>
+		<span className='valigntop nosel'>
 			{props.title}
 		</span>
-		<CheckBox
-			state={props.state}
-			id={`${props.id}_enabled`}
-			style={{
-				verticalAlign: 'top',
-				float: 'right',
-				margin: -3,
-			}}
-		/>
+		<div className='checkboxWrapper valigntop floatr'>
+			<CheckBox
+				state={props.state}
+				id={props.id + '_enabled'}
+			/>
+		</div>
 		<div>{props.children}</div>
 	</Vierkant>;
 }
@@ -96,19 +87,10 @@ function GameSettingsSection(props: {
 function GameRule(props: {
 	title: string;
 	description: string;
-	style?: CSSProperties;
 }) {
-	return <div
-		style={{
-			backgroundColor: 'var(--page-background)',
-			borderRadius: 8,
-			padding: '16px 0',
-			textAlign: 'center',
-			...props.style,
-		}}
-	>
-		<h1 style={{ color: 'var(--disk-a)', fontSize: 42 }}>{props.title}</h1>
-		<p style={{ color: 'var(--text-alt)', maxWidth: 250, margin: '0 auto' }}>{props.description}</p>
+	return <div className='gamerule pad-m round-t center bg-900'>
+		<h1>{props.title}</h1>
+		<p>{props.description}</p>
 	</div>;
 }
 
@@ -161,28 +143,16 @@ export function EditGameSettings(props: editGameSettingsProps) {
 					/>
 				</div>
 				<CheckBox id='timelimit_shared' state={props.ruleset.timelimit.shared} />
-				<span
-					className='valignsup'
-					style={{
-						marginLeft: 4,
-					}}
-				>
+				<span className='valignsup'>
 					Timer gebruiken voor bijde spelers
 				</span>
 			</GameSettingsSection>
-			{false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
-				<div
-					style={{
-						display: 'grid',
-						gridTemplateColumns: '1fr 1fr',
-						gridGap: 16,
-						margin: '16px 0',
-					}}
-				>
+			{true && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
+				<div className='sidebyside'>
 					<GameRule title='+2' description='Extra kolommen' />
 					<GameRule title='+4' description='Extra kolommen' />
 				</div>
-				<GameRule style={{ marginBottom: 16 }} title='Gravity' description='De zwaartekracht draait soms' />
+				<GameRule title='Gravity' description='De zwaartekracht draait soms' />
 				<GameRule title='Flashlight' description='Het veld wordt opgelicht door de vallende fiches' />
 			</GameSettingsSection>}
 			<GameSettingsSection
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 7f6e694..5ce43bb 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -54,25 +54,7 @@ export function NavBar() {
 		})();
 	}, []);
 
-	return <div
-		className='navbar bg-800'
-		style={{
-			width: 48,
-			height: '100%',
-
-			lineHeight: 0,
-
-			display: 'inline-block',
-
-			position: 'fixed',
-			top: 0,
-			left: 0,
-
-			overflow: 'visible',
-			whiteSpace: 'nowrap',
-			zIndex: 2,
-		}}
-	>
+	return <div className='navbar bg-800 h100vh dispinbl t0 l0 posfix'>
 		<div className='item'>
 			<Logo />
 		</div>
@@ -90,29 +72,13 @@ export function NavBar() {
 		</a>
 
 		<div className='bg-800 bottomArea'>
-			{loggedIn && <a
-				className='item'
-				style={{
-					overflow: 'visible',
-					position: 'relative',
-				}}
-			>
+			{loggedIn && <a className='notifications item posrel'>
 				<div
-					style={{ cursor: 'pointer' }}
+					className='iconWrapper'
 					onClick={() => setNotificationsAreaVisible(!notificationsAreaVisible)}
 				>
 					<NotificationsIcon />
-					{gotNotifications && <div
-						style={{
-							backgroundColor: 'var(--disk-a)',
-							width: 8,
-							height: 8,
-							borderRadius: 4,
-							position: 'absolute',
-							top: 2,
-							right: 2,
-						}}
-					/>}
+					{gotNotifications && <div className='notificationDot posabs' />}
 				</div>
 				<NotificationsArea
 					visible={notificationsAreaVisible}
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
index d9ba262..3c45fb4 100644
--- a/styles/gameSettings.css
+++ b/styles/gameSettings.css
@@ -29,7 +29,7 @@
 }
 
 .editGameSettings .editableRules {
-	margin-top: var(--spacing-large);
+	margin: var(--spacing-large) 0;
 	max-height: 500px;
 	overflow-y: scroll;
 }
@@ -43,11 +43,14 @@
 html.dark .editGameSettings .editableRules .editableRulesSection {
 	background-color: var(--gray-800);
 }
-
-.editGameSettings .button {
-	line-height: normal;
+.editGameSettings .editableRules .editableRulesSection:last-child {
+	margin-bottom: 0;
 }
 
+.editGameSettings .button { line-height: normal; }
+
+.editGameSettings .checkboxWrapper { margin: -3px; }
+
 .editGameSettings .editableRules .editableRulesSection .timeControls {
 	margin: var(--spacing-medium);
 	margin-left: 0;
@@ -56,7 +59,19 @@ html.dark .editGameSettings .editableRules .editableRulesSection {
 
 .editGameSettings .editableRules .editableRulesSection .timeControls input {
 	background-color: var(--background);
-
 	width: calc(100% - 2 * var(--spacing-medium));
 }
 
+.editGameSettings .editableRules .gamerule {
+	margin-top: var(--spacing-medium);
+}
+
+.editGameSettings .editableRules .gamerule h1 {
+	color: var(--accent);
+	font-size: 2.5rem;
+}
+
+#timelimit .valignsup {
+	margin-left: var(--spacing-small);
+}
+
diff --git a/styles/navbar.css b/styles/navbar.css
index 5866b8f..baf9fd6 100644
--- a/styles/navbar.css
+++ b/styles/navbar.css
@@ -9,3 +9,28 @@
 	bottom: -4px;
 	left: 0;
 }
+
+.navbar {
+	width: 48px;
+	line-height: 0;
+	overflow: visible;
+	white-space: nowrap;
+	z-index: 2;
+}
+
+.navbar .bottomArea .item.notifications {
+	overflow: visible;
+}
+
+.navbar .bottomArea .item.notifications > .iconWrapper {
+	cursor: pointer;
+}
+
+.notifications .notificationDot {
+	background-color: var(--accent);
+	width: 8px;
+	height: 8px;
+	border-radius: 4px;
+	top: 2px;
+	right: 2px;
+}
diff --git a/styles/notifications.css b/styles/notifications.css
index ec47836..db1598d 100644
--- a/styles/notifications.css
+++ b/styles/notifications.css
@@ -1,4 +1,5 @@
-.notificationsArea {
+/* a tags are here because of css specificity */
+a.notificationsArea {
 	left: calc(48px + var(--spacing-medium));
 	top: 92px;
 	transform: translateY(-100%);
@@ -7,7 +8,7 @@
 	height: 450px;
 }
 
-.notificationsArea .tuitje {
+a.notificationsArea .tuitje {
 	left: var(--spacing-medium);
 	bottom: 86px;
 	transform: translate(-100%, 100%) rotate(90deg);
-- 
cgit v1.2.3


From 31396f6b4f1271cb646947111661d9bb59ca951f Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 10:22:50 +0200
Subject: toasts without inline css

---
 components/gameSettings.tsx |  2 +-
 components/toast.tsx        | 75 +++++++--------------------------------------
 pages/_app.tsx              |  1 +
 styles/toast.css            | 66 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 79 insertions(+), 65 deletions(-)
 create mode 100644 styles/toast.css

(limited to 'styles')

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index 13462be..e2c60e6 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -147,7 +147,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
 					Timer gebruiken voor bijde spelers
 				</span>
 			</GameSettingsSection>
-			{true && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
+			{false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
 				<div className='sidebyside'>
 					<GameRule title='+2' description='Extra kolommen' />
 					<GameRule title='+4' description='Extra kolommen' />
diff --git a/components/toast.tsx b/components/toast.tsx
index 97e17e6..3a72ae1 100644
--- a/components/toast.tsx
+++ b/components/toast.tsx
@@ -1,26 +1,14 @@
-import { createContext, CSSProperties, ReactNode, useState } from 'react';
+import { createContext, ReactNode, useState } from 'react';
 
 import CloseIcon from '@material-ui/icons/Close';
 
 function ToastArea(props: {
-	style?: CSSProperties;
 	children?: ReactNode;
 	rerender?: boolean;
 }) {
 	return <div
 		id='ToastArea'
-		style={{
-			position: 'fixed',
-			whiteSpace: 'nowrap',
-			bottom: 12,
-			left: '50%',
-			transform: 'translateX(-50%)',
-			zIndex: 1,
-			maxWidth: 600,
-			width: 'calc(100% - 48px - 48px)',
-			margin: '0 24px',
-			...props.style,
-		}}
+		className='posfix abscenterh'
 	>
 		{props.children}
 	</div>;
@@ -32,71 +20,30 @@ function Toast(props: {
 	icon?: ReactNode;
 	children?: ReactNode;
 	type?: 'normal' | 'confirmation' | 'error';
-	style?: CSSProperties;
 }) {
 	var [visible, setVisibility] = useState(true);
 
 	setTimeout(() => setVisibility(false), 10e3);
 
-	return visible && <div
-		style={{
-			padding: 0,
-			marginBottom: 12,
-			borderRadius: 6,
-			boxShadow: '0 8px 12px -4px #00000033',
-			color: props.type === 'confirmation' ? 'var(--background)' : 'var(--text)',
-			backgroundColor: props.type === 'normal'
-				? 'var(--background)'
-				: props.type === 'confirmation'
-				? 'var(--disk-b)'
-				: props.type === 'error'
-				? 'var(--disk-a)'
-				: 'var(--background)',
-			...props.style,
-		}}
-	>
+	return visible && <div className={'round-t drop-1 toast ' + props.type}>
 		{props.children
 			|| <div
-				style={{
-					lineHeight: 0,
-					padding: 12,
-					minHeight: props.description ? 36 : 24,
-					position: 'relative',
-				}}
+				className={'inner pad-m posrel '
+					+ (props.description ? 'hasDescription' : '') + ' '
+					+ (props.icon ? 'hasIcon' : '')}
 			>
-				<div
-					style={{
-						position: 'absolute',
-						left: 12,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					}}
-				>
+				<div className='icon posabs abscenterv'>
 					{props.icon}
 				</div>
-				<div
-					style={{
-						userSelect: 'none',
-						position: 'absolute',
-						left: props.icon ? 48 : 12,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					}}
-				>
-					<h2 style={{ fontSize: 16 }}>{props.text}</h2>
+				<div className='content nosel posabs abscenterv'>
+					<h2>{props.text}</h2>
 					<p>{props.description}</p>
 				</div>
 				<div
-					style={{
-						cursor: 'pointer',
-						position: 'absolute',
-						right: 12,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					}}
+					className='closeIcon posabs abscenterv'
 					onClick={() => setVisibility(false)}
 				>
-					<CloseIcon style={{ fontSize: 24 }} />
+					<CloseIcon />
 				</div>
 			</div>}
 	</div>;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 317b389..c1347e8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,6 +10,7 @@ import '../styles/global.css';
 import '../styles/navbar.css';
 import '../styles/notifications.css';
 import '../styles/recentGames.css';
+import '../styles/toast.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
 
diff --git a/styles/toast.css b/styles/toast.css
new file mode 100644
index 0000000..2ecbcfb
--- /dev/null
+++ b/styles/toast.css
@@ -0,0 +1,66 @@
+.toast.error {
+	background-color: var(--error);
+}
+.toast.confirmation {
+	background-color: var(--confirm);
+}
+.toast.normal {
+	background-color: var(--gray-700);
+}
+
+.toast.confirmation,
+.toast.error {
+	color: var(--gray-900);
+}
+
+html.dark .toast.confirmation,
+html.dark .toast.error {
+	background-color: var(--gray-700);
+	color: var(--foreground);
+}
+html.dark .toast.error {
+	box-shadow: inset 0 0 0 2px var(--error);
+}
+html.dark .toast.confirmation {
+	box-shadow: inset 0 0 0 2px var(--confirm);
+}
+
+.toast {
+	margin-bottom: var(--spacing-medium);
+}
+
+#ToastArea {
+	white-space: nowrap;
+	bottom: var(--spacing-medium);
+	z-index: 1;
+	max-width: 600px;
+	width: calc(100% - 2 * 48px);
+	margin: 0 var(--spacing-large);
+}
+
+.toast .inner {
+	line-height: 0;
+	min-height: 24px;
+}
+
+.toast .inner.hasDescription {
+	min-height: 36px;
+}
+
+.toast .inner .icon,
+.toast .inner .content {
+	left: var(--spacing-medium);
+}
+
+.toast .inner.hasIcon .content {
+	left: calc(36px + var(--spacing-medium));
+}
+
+.toast .inner .content h2 {
+	font-size: 1rem;
+}
+
+.toast .inner .closeIcon {
+	right: var(--spacing-medium);
+	cursor: pointer;
+}
-- 
cgit v1.2.3


From dfedb61b158270a1df4a72985b3638217fc4124e Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 10:26:03 +0200
Subject: accountAvatar with some css

---
 components/account.tsx | 4 +---
 styles/ui.css          | 8 ++++++++
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'styles')

diff --git a/components/account.tsx b/components/account.tsx
index f24135f..cb44346 100644
--- a/components/account.tsx
+++ b/components/account.tsx
@@ -19,14 +19,12 @@ export function AccountAvatar(props: {
 	if (props.dummy) image = dummy;
 
 	return <div
+		className={'accountAvatar dispinbl ' + (props.round ? 'round' : '')}
 		style={{
 			width: props.size,
 			height: props.size,
 			backgroundColor: props.fallbackFill || 'var(--background)',
 			backgroundImage: `url(${image})`,
-			backgroundSize: 'cover',
-			display: 'inline-block',
-			borderRadius: props.size / 2 * Number(props.round || 0),
 		}}
 	/>;
 }
diff --git a/styles/ui.css b/styles/ui.css
index cb95b36..2736a2c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -108,3 +108,11 @@ html.dark .dialogbox { background-color: var(--gray-700); }
 	margin-bottom: 64px;
 }
 
+.accountAvatar {
+	background-size: cover;
+}
+
+.accountAvatar.round {
+	border-radius: 9999999px;
+}
+
-- 
cgit v1.2.3


From 286519adb6088f9d9a6dec513f4dd0da02827b4f Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 10:38:58 +0200
Subject: readme update

---
 readme.md        |   9 +++--
 styles/readme.md | 102 ++++++-------------------------------------------------
 2 files changed, 18 insertions(+), 93 deletions(-)

(limited to 'styles')

diff --git a/readme.md b/readme.md
index 3edf03a..4f172d8 100644
--- a/readme.md
+++ b/readme.md
@@ -42,11 +42,16 @@
 
 A design prototype of the website can be found on
 [Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1).
-An outdated version of the API documentation is still on Google Docs, but I'm
-moving and updating it to be in api/readme.md.
+The api documentation can be found in api/readme.md.
 
 ![](./diagram.png)
 
+## other readme's
+
+- [api](api/readme.md)
+- [voerbak](voerbak/readme.md)
+- [styles](styles/readme.md)
+
 ## setup
 
 To set up this project you'll need to install npm and pip dependencies, pull all
diff --git a/styles/readme.md b/styles/readme.md
index 1d1e96f..62fcfa7 100644
--- a/styles/readme.md
+++ b/styles/readme.md
@@ -1,103 +1,23 @@
-# Styles
+# styles
 
-This is the folder where all website css should be. Currently most of the css is
-done using inline styles in the .tsx files, but they're being moved to seperate
-.css files in here. A redesign has also been in the making and we now have a
-style guide to follow while writing the website:
+## dark
 
-## Dark
+![dark mode style guide](./styleguidedark.png)
 
-![Dark mode style guide](./styleguidedark.png)
+## light
 
-## Light
-
-![Light mode style guide](./styleguidelight.png)
+![light mode style guide](./styleguidelight.png)
 
 The new designs can be found on
 [Figma](https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=0%3A1).
 The Figma designs are in dark mode, but the website will (for now) still have
 light mode as it's default theme.
 
-After the move to .css files is done I'll also start working on the new theming
-settings, and allow custom themes to be created with css that can easily be
-selected in the settings page instead of having to copy-paste color codes
-manually.
-
-## Show me the css
-
-These will eventually be moved to global.css when the move to .css files is
-done.
-
-```css
-:root {
-	--background: #E3E6EE;
-	--foreground: var(--gray-900);
-
-	--accent: #7E3AA6;
-
-	--error: #A63A4D;
-	--disk-b-alt: #582D35;
-
-	--confirm: #3AA699;
-	--disk-a-alt: #244743;
-}
-
-@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;
-	}
-}
-
-:root {
-	/* shade */
-	--gray-100: #CED2DC;
-	--gray-200: #A9AFC0;
-	--gray-300: #757D92;
-	--gray-700: #293140;
-	--gray-800: #1F242D;
-	--gray-900: #141619;
-
-	/* box-shadow */
-	--drop-level-2: 0px 8px 32px 0px  rgba(0, 0, 0, 0.3);
-	--drop-level-1: 0px 8px 12px -4px rgba(0, 0, 0, 0.15);
-
-	/* border-radius */
-	--tight-corner: 6px;
-	--loose-corner: 8px;
-
-	/* margin/padding */
-	--spacing-small:  6px;
-	--spacing-medium: 12px;
-	--spacing-large:  24px;
-}
-
-html {
-	font-family: "Inter", sans-serif;
-	font-size: 14px;
-}
-
-/* headings */
-h1, h2, h3 { font-weight: 700; }
-h1 { font-size: 25px; }
-h2 { font-size: 20px; }
+I'm now working on the new theming settings, and allow custom themes to be
+created with css that can easily be selected in the settings page instead of
+having to copy-paste color codes manually.
 
-.subtile {
-	color: var(--gray-300);
-	font-style: italic;
-}
+There are utility styles in ./utility.css. These are supposed to mimick
+something like tailwind css. Most styles from the style guide are also defined
+in ./global.css.
 
-/* no-select */
-.nosel {
-	user-select: none;
-	font-weight: 600;
-}
-```
-- 
cgit v1.2.3


From 5cb39d822716c650e520c3855ef049ff308a348c Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 10:39:14 +0200
Subject: dprint fmt

---
 styles/readme.md | 1 -
 1 file changed, 1 deletion(-)

(limited to 'styles')

diff --git a/styles/readme.md b/styles/readme.md
index 62fcfa7..58e6db0 100644
--- a/styles/readme.md
+++ b/styles/readme.md
@@ -20,4 +20,3 @@ having to copy-paste color codes manually.
 There are utility styles in ./utility.css. These are supposed to mimick
 something like tailwind css. Most styles from the style guide are also defined
 in ./global.css.
-
-- 
cgit v1.2.3