diff options
| author | lonkaars <l.leblansch@gmail.com> | 2021-02-05 17:11:08 +0100 |
|---|---|---|
| committer | lonkaars <l.leblansch@gmail.com> | 2021-02-05 17:11:08 +0100 |
| commit | bb0c8d7ef101130deb5f4842294bbee87e7eb51b (patch) | |
| tree | 779f564f5697cceeb804ee528e15bb0c39636ae0 | |
| parent | bd9b2f0bb91239a6bc87ae21feac8c7d66f5995d (diff) | |
icon outline + account settings
| -rw-r--r-- | components/gameSettings.tsx | 4 | ||||
| -rw-r--r-- | pages/settings.tsx | 47 | ||||
| -rw-r--r-- | 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; } |