icon outline + account settings

1 files changed, 31 insertions, 16 deletions

diff --git a/pages/settings.tsx b/pages/settings.tsx
index e8b34ef..51f7c3f 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -7,10 +7,13 @@ import { AccountAvatar } from '../components/account';
 import { CurrentGameSettings } from '../components/gameSettings';
 
 import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
+import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 
-var SettingsSectionHeaderStyle: CSSProperties = {
-	marginBottom: 24
-}
+var SettingsSectionStyle: CSSProperties = { width: "calc(100% - 12px)" };
+var SettingsSubsectionStyle: CSSProperties = {
+	marginTop: 24,
+	minHeight: 40
+};
 
 function SettingsPageButton(props: {
 	text: string;
@@ -21,7 +24,8 @@ function SettingsPageButton(props: {
 		display: "inline-block",
 		verticalAlign: "top",
 		padding: 8,
-		float: "right"
+		float: "right",
+		marginLeft: 12
 	}}>
 		{props.icon}
 		<span style={{
@@ -33,9 +37,6 @@ function SettingsPageButton(props: {
 	</Button>
 }
 
-var SettingsSectionStyle: CSSProperties = { width: "calc(100% - 12px)" };
-var SettingsSubsectionStyle: CSSProperties = { marginTop: 24 };
-
 export default function SettingsPage() {
 	return (
 		<div>
@@ -43,27 +44,41 @@ export default function SettingsPage() {
 			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
 				<Vierkant style={SettingsSectionStyle}>
-					<h2 style={SettingsSectionHeaderStyle}>Account</h2>
+					<h2>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"
-						}}>
+						<SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
+						<div style={{ display: "block" }}>
 							<b>Gebruikersnaam</b>
-							<p>Gebruikersnaam</p>
+							<p>Hier staat hij dan</p>
+						</div>
+					</div>
+					<div style={SettingsSubsectionStyle}>
+						<SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
+						<SettingsPageButton text="Onthullen" icon={<VisibilityOutlinedIcon/>}/>
+						<div style={{ display: "block" }}>
+							<b>Email</b>
+							<p>******@example.com</p>
+						</div>
+					</div>
+					<div style={SettingsSubsectionStyle}>
+						<SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
+						<div style={{ display: "block" }}>
+							<b>Wachtwoord</b>
 						</div>
 					</div>
 				</Vierkant>
 				<Vierkant style={SettingsSectionStyle}>
-					<h2 style={SettingsSectionHeaderStyle}>Kleuren</h2>
+					<h2>Kleuren</h2>
 				</Vierkant>
 				<Vierkant style={SettingsSectionStyle}>
-					<h2 style={SettingsSectionHeaderStyle}>Standaard spelregels</h2>
-					<CurrentGameSettings/>
+					<h2>Standaard spelregels</h2>
+					<div style={SettingsSubsectionStyle}>
+						<CurrentGameSettings/>
+					</div>
 				</Vierkant>
 			</CenteredPage>
 		</div>