even more components without inline css

2 files changed, 19 insertions, 83 deletions

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}