From 41b8ba275b88a3f5c7fe105604b3f09e9bfa8c55 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 7 Jan 2021 10:54:37 +0100
Subject: spelregels aanpassen knop doet het

---
 src/components/gameSettings.tsx | 44 ++++++++++++++++++++++++++++++++++++-----
 src/components/ui.tsx           | 29 +++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
index 86dea5b..bd28221 100644
--- a/src/components/gameSettings.tsx
+++ b/src/components/gameSettings.tsx
@@ -2,13 +2,47 @@
 // gameID: string;
 // }
 
+import { Button } from './ui';
+
+import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
+
 export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
-	return <div>
-		<p style={{ opacity: .6, fontStyle: "italic" }}>
-		Geen tijdslimiet<br/>
-		Standaardregels<br/>
-		Gerangschikt
+	return <div style={{
+		position: "relative",
+		height: 80
+	}}>
+		<p style={{
+			opacity: .6,
+			fontStyle: "italic",
+			userSelect: "none",
+			position: "absolute",
+			top: "50%",
+			left: 0,
+			transform: "translateY(-50%)"
+		}}>
+			Geen tijdslimiet<br/>
+			Standaardregels<br/>
+			Gerangschikt
 		</p>
+		<Button style={{
+			width: 150,
+			position: "absolute",
+			top: "50%",
+			right: 0,
+			transform: "translateY(-50%)"
+		}}>
+			<BuildRoundedIcon style={{ fontSize: 48 }}/>
+			<span style={{
+				fontWeight: 600,
+				position: "absolute",
+				right: 24,
+				top: "50%",
+				width: 85,
+				verticalAlign: "middle",
+				textAlign: "center",
+				transform: "translateY(-50%)"
+			}}>Spelregels aanpassen</span>
+		</Button>
 	</div>;
 
 }
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 558eab8..d869151 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -24,3 +24,32 @@ export function Vierkant(props: VierkantProps) {
 	}} href={props.href}>{props.children}</a>
 }
 
+interface ButtonProps {
+	text?: string;
+	children?: ReactNode;
+	style?: CSSProperties;
+	onclick?: (() => void);
+}
+
+export function Button(props: ButtonProps) {
+	return <div onClick={props.onclick} style={{
+		padding: props.text ? 8 : 16,
+		textAlign: props.text ? "center" : "left",
+		borderRadius: 8,
+		backgroundColor: "var(--disk-a)",
+		cursor: "pointer",
+		position: "relative",
+		...props.style
+	}}>
+	{ 
+		props.text ?
+			<span style={{
+				fontWeight: 600,
+				userSelect: "none"
+			}}>{props.text}</span>
+			: undefined
+	}
+	{ props.children }
+	</div>;
+}
+
-- 
cgit v1.2.3