more settings page

3 files changed, 27 insertions, 9 deletions

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 23f9f79..7be2763 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,5 +1,4 @@
 import '../styles/global.css';
-import '../styles/dark.css';
 
 export default function VierOpEenRijWebsite({ Component, pageProps }) {
 	return <Component {...pageProps}/>
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 5569eb4..11161a3 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -2,7 +2,7 @@ import { CSSProperties } from 'react';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant, IconLabelButton } from '../components/ui';
+import { Vierkant, IconLabelButton, CheckBox } from '../components/ui';
 import { AccountAvatar } from '../components/account';
 import { CurrentGameSettings } from '../components/gameSettings';
 
@@ -30,7 +30,7 @@ export default function SettingsPage() {
 					<div style={SettingsSubsectionStyle}>
 						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
 						<div style={{ display: "block" }}>
-							<b>Gebruikersnaam</b>
+							<h3>Gebruikersnaam</h3>
 							<p>Hier staat hij dan</p>
 						</div>
 					</div>
@@ -38,19 +38,31 @@ export default function SettingsPage() {
 						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
 						<IconLabelButton text="Onthullen" icon={<VisibilityOutlinedIcon/>}/>
 						<div style={{ display: "block" }}>
-							<b>Email</b>
+							<h3>Email</h3>
 							<p>******@example.com</p>
 						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
 						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
 						<div style={{ display: "block" }}>
-							<b>Wachtwoord</b>
+							<h3>Wachtwoord</h3>
 						</div>
 					</div>
 				</Vierkant>
 				<Vierkant style={SettingsSectionStyle}>
 					<h2>Kleuren</h2>
+					<div style={SettingsSubsectionStyle}>
+						<h3>Schijfjes</h3>
+					</div>
+					<div style={SettingsSubsectionStyle}>
+						<h3>Achtergrond</h3>
+					</div>
+					<div style={SettingsSubsectionStyle}>
+						<div style={{ float: "right" }}>
+							<CheckBox/>
+						</div>
+						<h3>Donkere modus</h3>
+					</div>
 				</Vierkant>
 				<Vierkant style={SettingsSectionStyle}>
 					<h2>Standaard spelregels</h2>
diff --git a/styles/global.css b/styles/global.css
index a59d911..0152efd 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -18,6 +18,15 @@ html, body {
 	padding: 0;
 }
 
+/* subsection font size */
+h2 { font-size: 20px; }
+
+/* subsubsection font size */
+h3 {
+	font-size: .9rem;
+	padding-bottom: 6px;
+}
+
 /* global font zize */
 p, b, i, span, td, th { font-size: 15px; }
 
@@ -25,9 +34,7 @@ p, b, i, span, td, th { font-size: 15px; }
 body { padding-left: 48px; }
 
 /* font */
-html {
-	font-family: "Inter";
-}
+html { font-family: "Inter"; }
 
 /* background color */
 html { background-color: var(--page-background); }
@@ -40,7 +47,7 @@ a { color: var(--text); }
 .CenteredPageInner > * { text-align: left; }
 
 /* line height reset */
-h1, h2, p, b, span, td, th {
+h1, h2, h3, p, b, span, td, th {
 	margin: 0;
 	line-height: 1.2;
 }