From 3fbbe86c5007ac82069feb342a462202d6a1a2b5 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 11 Feb 2021 11:25:06 +0100
Subject: semi-working dark mode toggle + color pickers

---
 components/ui.tsx  | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 pages/_app.tsx     |  1 +
 pages/settings.tsx | 17 +++++++++++++----
 public/index.html  |  1 -
 styles/dark.css    |  2 +-
 styles/global.css  |  2 +-
 6 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/components/ui.tsx b/components/ui.tsx
index bb2a2ff..e6fdceb 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -3,6 +3,7 @@ import { Component, CSSProperties, ReactNode } from "react";
 import SearchIcon from '@material-ui/icons/Search';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 
 export function Vierkant(props: {
 	href?: string;
@@ -154,9 +155,13 @@ export class CheckBox extends Component<{
 	state?: boolean;
 	style?: CSSProperties;
 	id?: string;
+	onclick?: (state: boolean) => void;
 }> {
 	state = { on: this.props.state || false }
-	public toggle = () => this.setState({ on: !this.state.on })
+	public toggle = () => {
+		this.setState({ on: !this.state.on });
+		this.props.onclick && this.props.onclick(!this.state.on);
+	}
 
 	render() {
 		return <div onClick={this.toggle} id={this.props.id} className={this.state.on ? "on" : "off"} style={{
@@ -173,5 +178,51 @@ export class CheckBox extends Component<{
 	}
 }
 
+export class ColorPicker extends Component<{
+	style?: CSSProperties;
+}> {
+	state: {
+		color: string;
+		dark: boolean;
+	} = {
+		color: "#012345",
+		dark: true
+	}
 
+	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>
+			</div>
+		</Button>
+	}
+}
 
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 7be2763..23f9f79 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,5 @@
 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 96c6a2f..5034bd7 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -3,7 +3,7 @@ import * as cookies from 'react-cookies';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant, IconLabelButton, CheckBox } from '../components/ui';
+import { Vierkant, IconLabelButton, CheckBox, ColorPicker } from '../components/ui';
 import { AccountAvatar } from '../components/account';
 import { CurrentGameSettings } from '../components/gameSettings';
 
@@ -53,14 +53,23 @@ export default function SettingsPage() {
 				<Vierkant fullwidth>
 					<h2>Kleuren</h2>
 					<div style={SettingsSubsectionStyle}>
-						<h3>Schijfjes</h3>
+						<ColorPicker/>
+						<ColorPicker/>
+						<div style={{ display: "block" }}>
+							<h3>Schijfjes</h3>
+						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
-						<h3>Achtergrond</h3>
+						<ColorPicker/>
+						<div style={{ display: "block" }}>
+							<h3>Achtergrond</h3>
+						</div>
 					</div>
 					<div style={SettingsSubsectionStyle}>
 						<div style={{ float: "right" }}>
-							<CheckBox/>
+							<CheckBox state={typeof window !== "undefined" && document.getElementsByTagName("html")[0].classList.contains("dark")} onclick={
+								(state) => document.getElementsByTagName("html")[0].classList[state ? "add" : "remove"]("dark")
+							}/>
 						</div>
 						<h3>Donkere modus</h3>
 					</div>
diff --git a/public/index.html b/public/index.html
index d9fdb5d..05b60c9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,7 +8,6 @@
 		<meta name="description" content="4 op een rij website voor informatica PO"/>
 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
-		<link rel="stylesheet" href="%PUBLIC_URL%/font/stylesheet.css"/>
 		<title>4 op een rij</title>
 	</head>
 	<body>
diff --git a/styles/dark.css b/styles/dark.css
index a0f652e..681116f 100644
--- a/styles/dark.css
+++ b/styles/dark.css
@@ -1,4 +1,4 @@
-:root {
+html.dark {
     --text: #FCFFFD;
     --text-alt: var(--text);
 
diff --git a/styles/global.css b/styles/global.css
index 2a82fa2..03f329e 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,4 +1,4 @@
-:root {
+html {
 	--text: #FCFFFD;
 	--page-background: var(--text);
 
-- 
cgit v1.2.3