settings page WIP

2 files changed, 47 insertions, 7 deletions

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>