aboutsummaryrefslogtreecommitdiff
path: root/pages/settings.tsx
blob: 96c6a2f2ef6c103a891ab423704638e114394a2a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import { CSSProperties } from 'react';
import * as cookies from 'react-cookies';

import { NavBar } from '../components/navbar';
import { CenteredPage, PageTitle } from '../components/page';
import { Vierkant, IconLabelButton, CheckBox } from '../components/ui';
import { AccountAvatar } from '../components/account';
import { CurrentGameSettings } from '../components/gameSettings';

import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined';

var SettingsSubsectionStyle: CSSProperties = {
	marginTop: 24,
	minHeight: 40
};

export default function SettingsPage() {
	return (
		<div>
			<NavBar/>
			<CenteredPage width={802}>
				<PageTitle>Instellingen</PageTitle>
				<Vierkant fullwidth>
					<h2>Account</h2>
					<div style={SettingsSubsectionStyle}>
						<AccountAvatar size={100} dummy/>
						<IconLabelButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
					</div>
					<div style={SettingsSubsectionStyle}>
						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
						<div style={{ display: "block" }}>
							<h3>Gebruikersnaam</h3>
							<p>Hier staat hij dan</p>
						</div>
					</div>
					<div style={SettingsSubsectionStyle}>
						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
						<IconLabelButton text="Onthullen" icon={<VisibilityOutlinedIcon/>}/>
						<div style={{ display: "block" }}>
							<h3>Email</h3>
							<p>******@example.com</p>
						</div>
					</div>
					<div style={SettingsSubsectionStyle}>
						<IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/>
						<div style={{ display: "block" }}>
							<h3>Wachtwoord</h3>
						</div>
					</div>
				</Vierkant>
				<Vierkant fullwidth>
					<h2>Kleuren</h2>
					<div style={SettingsSubsectionStyle}>
						<h3>Schijfjes</h3>
					</div>
					<div style={SettingsSubsectionStyle}>
						<h3>Achtergrond</h3>
					</div>
					<div style={SettingsSubsectionStyle}>
						<div style={{ float: "right" }}>
							<CheckBox/>
						</div>
						<h3>Donkere modus</h3>
					</div>
				</Vierkant>
				<Vierkant fullwidth>
					<h2>Standaard spelregels</h2>
					<div style={SettingsSubsectionStyle}>
						<CurrentGameSettings/>
					</div>
				</Vierkant>
				<Vierkant fullwidth>
					<h2>Uitloggen</h2>
					<div style={{
						width: "100%",
						textAlign: "center"
					}}>
						<IconLabelButton icon={<ExitToAppOutlinedIcon/>} text="Uitloggen" style={{
							float: "none",
							marginLeft: 0
						}} onclick={() => {
							cookies.remove("token")
							window.location.pathname = "/";
						}}/>
					</div>
				</Vierkant>
			</CenteredPage>
		</div>
	);
}