blob: 5034bd7ed35e2cb1e665f21a9c2a1c89fd660ba4 (
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
94
95
96
97
98
99
100
101
102
|
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, ColorPicker } 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}>
<ColorPicker/>
<ColorPicker/>
<div style={{ display: "block" }}>
<h3>Schijfjes</h3>
</div>
</div>
<div style={SettingsSubsectionStyle}>
<ColorPicker/>
<div style={{ display: "block" }}>
<h3>Achtergrond</h3>
</div>
</div>
<div style={SettingsSubsectionStyle}>
<div style={{ float: "right" }}>
<CheckBox state={typeof window !== "undefined" && document.getElementsByTagName("html")[0].classList.contains("dark")} onclick={
(state) => document.getElementsByTagName("html")[0].classList[state ? "add" : "remove"]("dark")
}/>
</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>
);
}
|