edit game rules working (still some inline css)

5 files changed, 92 insertions, 82 deletions

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;
+}
+