settings page WIP

4 files changed, 55 insertions, 14 deletions

diff --git a/api/api.ts b/api/api.ts
index b8a92e3..4ba44e7 100644
--- a/api/api.ts
+++ b/api/api.ts
@@ -16,10 +16,17 @@ export type ruleset = {
 		shared: boolean;
 	},
 	ranked: boolean;
-};
+}
+
+export type userColors = {
+	diskA: string;
+	diskB: string;
+	background: string;
+}
 
 export interface userPreferences {
 	darkMode?: boolean;
 	ruleset?: ruleset;
+	userColors?: userColors;
 }
 
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index 8f15aa1..fab1d55 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -162,11 +162,6 @@ type editGameSettingsProps = {
 };
 
 export class EditGameSettings extends Component<editGameSettingsProps> {
-	constructor(props: editGameSettingsProps) {
-		super(props);
-		console.log(this.props.parentState)
-	}
-
 	render () {
 		return <DialogBox title="Spelregels aanpassen" style={{
 			margin: 0,
@@ -213,7 +208,6 @@ export class EditGameSettings extends Component<editGameSettingsProps> {
 				}
 				this.props.setGameRules(rules);
 				this.props.hideEditGameRules();
-				console.log(rules)
 			}}>Instellingen opslaan</Button>
 		</DialogBox>;
 	}
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 6bb7c46..e8b34ef 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -1,28 +1,67 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant } from '../components/ui';
-/* import { AccountAvatar } from '../components/account'; */
-import { CurrentGameSettings, EditGameSettings } from '../components/gameSettings';
+import { Vierkant, Button } from '../components/ui';
+import { AccountAvatar } from '../components/account';
+import { CurrentGameSettings } from '../components/gameSettings';
+
+import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 
 var SettingsSectionHeaderStyle: CSSProperties = {
 	marginBottom: 24
 }
 
+function SettingsPageButton(props: {
+	text: string;
+	icon: ReactNode;
+	onclick?: () => void;
+}) {
+	return <Button onclick={props.onclick} style={{
+		display: "inline-block",
+		verticalAlign: "top",
+		padding: 8,
+		float: "right"
+	}}>
+		{props.icon}
+		<span style={{
+			display: "inline-block",
+			verticalAlign: "top",
+			marginLeft: 8,
+			marginTop: 3, marginBottom: 3
+		}}>{props.text}</span>
+	</Button>
+}
+
+var SettingsSectionStyle: CSSProperties = { width: "calc(100% - 12px)" };
+var SettingsSubsectionStyle: CSSProperties = { marginTop: 24 };
+
 export default function SettingsPage() {
 	return (
 		<div>
 			<NavBar/>
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
-				<Vierkant width="calc(100% - 12px)">
+				<Vierkant style={SettingsSectionStyle}>
 					<h2 style={SettingsSectionHeaderStyle}>Account</h2>
+					<div style={SettingsSubsectionStyle}>
+						<AccountAvatar size={100} dummy/>
+						<SettingsPageButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
+					</div>
+					<div style={SettingsSubsectionStyle}>
+						<SettingsPageButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
+						<div style={{
+							display: "block"
+						}}>
+							<b>Gebruikersnaam</b>
+							<p>Gebruikersnaam</p>
+						</div>
+					</div>
 				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
+				<Vierkant style={SettingsSectionStyle}>
 					<h2 style={SettingsSectionHeaderStyle}>Kleuren</h2>
 				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
+				<Vierkant style={SettingsSectionStyle}>
 					<h2 style={SettingsSectionHeaderStyle}>Standaard spelregels</h2>
 					<CurrentGameSettings/>
 				</Vierkant>