blob: e8b34ef0aae7e5a78802c1e4c430a57340cc76ad (
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
|
import { CSSProperties, ReactNode } from 'react';
import { NavBar } from '../components/navbar';
import { CenteredPage, PageTitle } from '../components/page';
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 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 style={SettingsSectionStyle}>
<h2 style={SettingsSectionHeaderStyle}>Kleuren</h2>
</Vierkant>
<Vierkant style={SettingsSectionStyle}>
<h2 style={SettingsSectionHeaderStyle}>Standaard spelregels</h2>
<CurrentGameSettings/>
</Vierkant>
</CenteredPage>
</div>
);
}
|