2 files changed, 61 insertions, 20 deletions

diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
index 19eadb7..79a5029 100644
--- a/src/components/gameSettings.tsx
+++ b/src/components/gameSettings.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-import { Button, Vierkant, CheckBox } from './ui';
+import { Button, Vierkant, CheckBox, Input } from './ui';
 import { DialogBox } from './dialogBox';
 
 import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
@@ -46,18 +46,29 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
 	</div>;
 }
 
-interface GameSettingsSectionProps {
+function GameSettingsSection(props: {
 	children?: ReactNode;
 	title: string;
 	state: boolean;
-}
-
-function GameSettingsSection(props: GameSettingsSectionProps) {
+}) {
 	return <Vierkant style={{
 		backgroundColor: "var(--background-alt)",
-		width: "calc(100% - 12px)"
+		width: "calc(100% - 12px)",
+		padding: 16
 	}}>
-	<div>{props.children}</div>
+	<span style={{
+		verticalAlign: "top",
+		fontSize: 14,
+		fontWeight: 600
+	}}>{props.title}</span>
+	<CheckBox state={props.state} style={{
+		verticalAlign: "top",
+		float: "right",
+		margin: -3
+	}}/>
+	<div style={{
+		marginTop: 16
+	}}>{props.children}</div>
 	</Vierkant>
 }
 
@@ -68,8 +79,22 @@ export function EditGameSettings() {
 			maxHeight: 500,
 			overflowY: "scroll"
 		}}>
-			<CheckBox state={false}/>
 			<GameSettingsSection title="Tijdslimiet" state={false}>
+				<div style={{
+					display: "grid",
+					gridTemplateColumns: "1fr 1fr 1fr",
+					gridGap: 16,
+					marginBottom: 16
+				}}>
+					<Input type="number" label="min"/>
+					<Input type="number" label="sec"/>
+					<Input type="number" label="plus"/>
+				</div>
+				<CheckBox state={false}/>
+				<span style={{
+					verticalAlign: "super",
+					marginLeft: 4
+				}}>Timer gebruiken voor bijde spelers</span>
 			</GameSettingsSection>
 		</div>
 	</DialogBox>;
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index a9ca479..4f836c2 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -54,23 +54,35 @@ export function Button(props: {
 	</div>;
 }
 
-export function Input(props: { label?: string }) {
+export function Input(props: {
+	label?: string,
+	style?: CSSProperties,
+	type?: string
+}) {
+	return <input type={props.type || "text"} placeholder={props.label} spellCheck={false} style={{
+		padding: 12,
+		border: 0,
+		width: "calc(100% - 24px)",
+		fontSize: 14,
+		backgroundColor: "var(--page-background)",
+		color: "var(--text-alt)",
+		borderRadius: 8,
+		fontFamily: "Inter",
+		...props.style
+	}}/>
+}
+
+export function SearchBar(props: { label?: string }) {
 	return <div style={{
 		marginTop: 24,
 		borderRadius: 8,
 		overflow: "hidden",
 		width: "100%"
 	}}>
-		<input type="text" placeholder={props.label} spellCheck={false} style={{
-			padding: 12,
-			border: 0,
+		<Input label={props.label} style={{
 			width: "calc(100% - 24px - 41px)",
-			fontSize: 14,
-			backgroundColor: "var(--page-background)",
-			color: "var(--text-alt)",
-			borderBottomLeftRadius: 8,
-			borderTopLeftRadius: 8,
-			fontFamily: "Inter"
+			borderTopRightRadius: 0,
+			borderBottomRightRadius: 0
 		}}/>
 		<div style={{
 			width: 41,
@@ -91,13 +103,17 @@ export function Input(props: { label?: string }) {
 }
 
 export class CheckBox extends Component<{
-	state?: boolean
+	state?: boolean,
+	style?: CSSProperties
 }> {
 	state = { on: this.props.state || false }
 	public toggle = () => this.setState({ on: !this.state.on })
 
 	render() {
-		return <div onClick={this.toggle}>
+		return <div onClick={this.toggle} style={{
+			...this.props.style,
+			display: "inline-block"
+		}}>
 		{
 			this.state.on ?
 			<CheckBoxIcon style={{ fontSize: 24 }}/> :