diff options
| -rw-r--r-- | components/ui.tsx | 23 | ||||
| -rw-r--r-- | pages/settings.tsx | 36 |
2 files changed, 30 insertions, 29 deletions
diff --git a/components/ui.tsx b/components/ui.tsx index 2523745..11b9ddd 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -59,6 +59,29 @@ export function Button(props: { </a>; } +export function IconLabelButton(props: { + text: string; + icon: ReactNode; + onclick?: () => void; +}) { + return <Button onclick={props.onclick} style={{ + display: "inline-block", + verticalAlign: "top", + padding: 8, + float: "right", + marginLeft: 12 + }}> + {props.icon} + <span style={{ + display: "inline-block", + verticalAlign: "top", + fontWeight: 500, + marginLeft: 8, + marginTop: 3, marginBottom: 3, marginRight: 3 + }}>{props.text}</span> + </Button> +} + export function Input(props: { label?: string; style?: CSSProperties; diff --git a/pages/settings.tsx b/pages/settings.tsx index 51f7c3f..5569eb4 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,8 +1,8 @@ -import { CSSProperties, ReactNode } from 'react'; +import { CSSProperties } from 'react'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; -import { Vierkant, Button } from '../components/ui'; +import { Vierkant, IconLabelButton } from '../components/ui'; import { AccountAvatar } from '../components/account'; import { CurrentGameSettings } from '../components/gameSettings'; @@ -15,28 +15,6 @@ var SettingsSubsectionStyle: CSSProperties = { minHeight: 40 }; -function SettingsPageButton(props: { - text: string; - icon: ReactNode; - onclick?: () => void; -}) { - return <Button onclick={props.onclick} style={{ - display: "inline-block", - verticalAlign: "top", - padding: 8, - float: "right", - marginLeft: 12 - }}> - {props.icon} - <span style={{ - display: "inline-block", - verticalAlign: "top", - marginLeft: 8, - marginTop: 3, marginBottom: 3 - }}>{props.text}</span> - </Button> -} - export default function SettingsPage() { return ( <div> @@ -47,25 +25,25 @@ export default function SettingsPage() { <h2>Account</h2> <div style={SettingsSubsectionStyle}> <AccountAvatar size={100} dummy/> - <SettingsPageButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/> + <IconLabelButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/> </div> <div style={SettingsSubsectionStyle}> - <SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/> + <IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/> <div style={{ display: "block" }}> <b>Gebruikersnaam</b> <p>Hier staat hij dan</p> </div> </div> <div style={SettingsSubsectionStyle}> - <SettingsPageButton text="Bewerken" icon={<EditOutlinedIcon/>}/> - <SettingsPageButton text="Onthullen" icon={<VisibilityOutlinedIcon/>}/> + <IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/> + <IconLabelButton 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/>}/> + <IconLabelButton text="Bewerken" icon={<EditOutlinedIcon/>}/> <div style={{ display: "block" }}> <b>Wachtwoord</b> </div> |