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

---
 components/navbar.tsx | 42 ++++++++++++++----------------------------
 1 file changed, 14 insertions(+), 28 deletions(-)

(limited to 'components/navbar.tsx')

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 70de574..932669d 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,8 +1,8 @@
 import axios from 'axios';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import { userInfo } from '../api/api';
-import { LogoDark } from '../components/logo';
+import Logo from '../components/logo';
 import { AccountAvatar } from './account';
 import { NotificationsArea } from './notificationsArea';
 import { SocketContext } from './socketContext';
@@ -15,12 +15,6 @@ import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 
-var NavBarItemStyle: CSSProperties = {
-	margin: 12,
-	marginBottom: 16,
-	display: 'block',
-};
-
 export function NavBar() {
 	var [loggedIn, setLoggedIn] = useState(false);
 	var [gotData, setGotData] = useState(false);
@@ -61,14 +55,13 @@ export function NavBar() {
 	}, []);
 
 	return <div
-		className='navbar'
+		className="navbar bg-800"
 		style={{
 			width: 48,
 			height: '100%',
 
 			lineHeight: 0,
 
-			backgroundColor: 'var(--background)',
 			display: 'inline-block',
 
 			position: 'fixed',
@@ -80,35 +73,28 @@ export function NavBar() {
 			zIndex: 2,
 		}}
 	>
-		<div style={NavBarItemStyle}>
-			<LogoDark />
+		<div className="item">
+			<Logo />
 		</div>
-		<a href='/' style={NavBarItemStyle}>
+		<a href='/' className="item">
 			<Home />
 		</a>
-		<a href='/game' style={NavBarItemStyle}>
+		<a href='/game' className="item">
 			<VideogameAssetIcon />
 		</a>
-		{false && <a href='/' style={NavBarItemStyle}>
+		{false && <a href='/' className="item">
 			<ExtensionIcon />
 		</a>}
-		<a href='/search' style={NavBarItemStyle}>
+		<a href='/search' className="item">
 			<SearchIcon />
 		</a>
 
-		<div
-			style={{
-				position: 'absolute',
-				bottom: -4,
-				left: 0,
-				backgroundColor: 'var(--background)',
-			}}
-		>
+		<div className="bg-800 bottomArea">
 			{loggedIn && <a
+				className="item"
 				style={{
 					overflow: 'visible',
-					position: 'relative',
-					...NavBarItemStyle,
+					position: 'relative'
 				}}
 			>
 				<div
@@ -134,12 +120,12 @@ export function NavBar() {
 					rerender={getNotifications}
 				/>
 			</a>}
-			<a href={loggedIn ? '/user' : '/login'} style={NavBarItemStyle}>
+			<a href={loggedIn ? '/user' : '/login'} className="item">
 				{loggedIn
 					? <AccountAvatar size={24} round />
 					: <PersonIcon />}
 			</a>
-			{loggedIn && <a href='/settings' style={NavBarItemStyle}>
+			{loggedIn && <a href='/settings' className="item">
 				<SettingsIcon />
 			</a>}
 		</div>
-- 
cgit v1.2.3


From 59459df904674bc3eaa95f4203113793c7c7fc9a Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 17 Apr 2021 17:25:11 +0200
Subject: dprint fmt

---
 components/logo.tsx        |  1 -
 components/navbar.tsx      | 22 +++++++++----------
 components/recentGames.tsx | 12 ++++++-----
 components/ui.tsx          |  6 ++++--
 pages/_app.tsx             |  4 ++--
 pages/index.tsx            | 54 +++++++++++++++++++++++-----------------------
 6 files changed, 51 insertions(+), 48 deletions(-)

(limited to 'components/navbar.tsx')

diff --git a/components/logo.tsx b/components/logo.tsx
index 9faf43f..df35370 100644
--- a/components/logo.tsx
+++ b/components/logo.tsx
@@ -11,4 +11,3 @@ export default function Logo() {
 		</div>
 	);
 }
-
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 932669d..7f6e694 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -55,7 +55,7 @@ export function NavBar() {
 	}, []);
 
 	return <div
-		className="navbar bg-800"
+		className='navbar bg-800'
 		style={{
 			width: 48,
 			height: '100%',
@@ -73,28 +73,28 @@ export function NavBar() {
 			zIndex: 2,
 		}}
 	>
-		<div className="item">
+		<div className='item'>
 			<Logo />
 		</div>
-		<a href='/' className="item">
+		<a href='/' className='item'>
 			<Home />
 		</a>
-		<a href='/game' className="item">
+		<a href='/game' className='item'>
 			<VideogameAssetIcon />
 		</a>
-		{false && <a href='/' className="item">
+		{false && <a href='/' className='item'>
 			<ExtensionIcon />
 		</a>}
-		<a href='/search' className="item">
+		<a href='/search' className='item'>
 			<SearchIcon />
 		</a>
 
-		<div className="bg-800 bottomArea">
+		<div className='bg-800 bottomArea'>
 			{loggedIn && <a
-				className="item"
+				className='item'
 				style={{
 					overflow: 'visible',
-					position: 'relative'
+					position: 'relative',
 				}}
 			>
 				<div
@@ -120,12 +120,12 @@ export function NavBar() {
 					rerender={getNotifications}
 				/>
 			</a>}
-			<a href={loggedIn ? '/user' : '/login'} className="item">
+			<a href={loggedIn ? '/user' : '/login'} className='item'>
 				{loggedIn
 					? <AccountAvatar size={24} round />
 					: <PersonIcon />}
 			</a>
-			{loggedIn && <a href='/settings' className="item">
+			{loggedIn && <a href='/settings' className='item'>
 				<SettingsIcon />
 			</a>}
 		</div>
diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index 65c819a..d619eeb 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -29,11 +29,13 @@ function GameOutcome(props: { game: gameInfo; }) {
 		}[props.game.status]();
 	})();
 	return <td>
-		<span className={"outcome " + {
-					'w': 'win',
-					'l': 'lose',
-					'd': 'draw',
-				}[props.game.outcome]}>
+		<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 db858a4..e2d19ad 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -17,7 +17,9 @@ export function Vierkant(props: {
 }) {
 	return <a
 		href={props.href}
-		className={["bg-800", "round-l", "pad-l", "vierkant", props.className, props.fullwidth && "fullwidth"].join(" ")}
+		className={['bg-800', 'round-l', 'pad-l', 'vierkant', props.className, props.fullwidth && 'fullwidth'].join(
+			' ',
+		)}
 		id={props.id}
 		onClick={props.onclick}
 	>
@@ -38,7 +40,7 @@ export function Button(props: {
 		onClick={props.onclick}
 		href={props.href}
 		id={props.id}
-		className={"button pad-s round-t " + props.className}
+		className={'button pad-s round-t ' + props.className}
 	>
 		{props.text
 			? <span>
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 46aa8d0..290e687 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -7,9 +7,9 @@ import '../styles/dark.css';
 import '../styles/disk.css';
 import '../styles/footer.css';
 import '../styles/global.css';
-import '../styles/utility.css';
-import '../styles/ui.css';
 import '../styles/navbar.css';
+import '../styles/ui.css';
+import '../styles/utility.css';
 
 import '../styles/index.css';
 
diff --git a/pages/index.tsx b/pages/index.tsx
index c3fe955..3d9da21 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -17,13 +17,13 @@ import { mdiRobotExcited } from '@mdi/js';
 import Icon from '@mdi/react';
 
 function LoginOrRegisterBox() {
-	return <div className="inner">
-		<span className="registerMessage posabs h0 t0">
+	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 className="sidebyside posabs h0 b0">
-			<Button href='/register' text='Registreren' className="register" />
-			<Button href='/login' text='Inloggen' className="login" />
+		<div className='sidebyside posabs h0 b0'>
+			<Button href='/register' text='Registreren' className='register' />
+			<Button href='/login' text='Inloggen' className='login' />
 		</div>
 	</div>;
 }
@@ -32,19 +32,19 @@ function AccountBox(props: {
 	info: userInfo;
 	sumGameInfo: userGameTotals;
 }) {
-	return <div className="inner profile">
-		<div className="picture posabs l0 t0">
+	return <div className='inner profile'>
+		<div className='picture posabs l0 t0'>
 			<AccountAvatar size={90} />
 		</div>
-		<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>
+		<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>;
@@ -92,22 +92,22 @@ export default function HomePage() {
 		<NavBar />
 		<CenteredPage width={802}>
 			<PageTitle>4 op een rij</PageTitle>
-			<div className="topbar">
-				<Vierkant className="gamemode" href='/game'>
-					<VideogameAssetIcon className="icon" />
-					<span className="text">Nieuw spel</span>
+			<div className='topbar'>
+				<Vierkant className='gamemode' href='/game'>
+					<VideogameAssetIcon className='icon' />
+					<span className='text'>Nieuw spel</span>
 				</Vierkant>
 				{false
-					&& <Vierkant className="gamemode" href='/'>
-						<ExtensionIcon className="icon" />
-						<span className="text">Puzzels</span>
+					&& <Vierkant className='gamemode' href='/'>
+						<ExtensionIcon className='icon' />
+						<span className='text'>Puzzels</span>
 					</Vierkant>}
 				{false
-					&& <Vierkant className="gamemode" href='/'>
-						<Icon path={mdiRobotExcited} className="icon" />
-						<span className="text">Tegen computer</span>
+					&& <Vierkant className='gamemode' href='/'>
+						<Icon path={mdiRobotExcited} className='icon' />
+						<span className='text'>Tegen computer</span>
 					</Vierkant>}
-				<Vierkant className="loginOrRegisterBox">
+				<Vierkant className='loginOrRegisterBox'>
 					{loggedIn
 						? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
 						: <LoginOrRegisterBox />}
-- 
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 'components/navbar.tsx')

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

