From bb0c8d7ef101130deb5f4842294bbee87e7eb51b Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Fri, 5 Feb 2021 17:11:08 +0100
Subject: icon outline + account settings

---
 components/gameSettings.tsx |  4 ++--
 pages/settings.tsx          | 47 ++++++++++++++++++++++++++++++---------------
 styles/global.css           |  2 +-
 3 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index fab1d55..0b30801 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -5,7 +5,7 @@ import { Button, Vierkant, CheckBox, Input } from './ui';
 import { DialogBox } from './dialogBox';
 import { ruleset, userPreferences } from '../api/api';
 
-import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
+import BuildOutlinedIcon from '@material-ui/icons/BuildOutlined';
 
 
 type CurrentGameSettingsStateType = {
@@ -76,7 +76,7 @@ export class CurrentGameSettings extends Component {
 				right: 0,
 				transform: "translateY(-50%)"
 			}} onclick={this.showEditGameRules}>
-				<BuildRoundedIcon style={{ fontSize: 48 }}/>
+				<BuildOutlinedIcon style={{ fontSize: 48 }}/>
 				<span style={{
 					fontWeight: 600,
 					position: "absolute",
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>
diff --git a/styles/global.css b/styles/global.css
index d8c13ac..a59d911 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -40,7 +40,7 @@ a { color: var(--text); }
 .CenteredPageInner > * { text-align: left; }
 
 /* line height reset */
-h1, h2, p, span, td, th {
+h1, h2, p, b, span, td, th {
 	margin: 0;
 	line-height: 1.2;
 }
-- 
cgit v1.2.3