diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/index.tsx | 2 | ||||
| -rw-r--r-- | pages/settings.tsx | 63 |
3 files changed, 25 insertions, 41 deletions
diff --git a/pages/_app.tsx b/pages/_app.tsx index 3f66711..bbdbae8 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -13,6 +13,7 @@ import '../styles/utility.css'; import '../styles/index.css'; import '../styles/search.css'; +import '../styles/settings.css'; export default function VierOpEenRijWebsite({ Component, pageProps }) { return <div> diff --git a/pages/index.tsx b/pages/index.tsx index 9f63229..31aee57 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -107,7 +107,7 @@ export default function HomePage() { <Icon path={mdiRobotExcited} className='icon' /> <span className='text'>Tegen computer</span> </Vierkant>} - <Vierkant className='loginOrRegisterBox pad-l'> + <Vierkant className='loginOrRegisterBox pad-l valigntop'> {loggedIn ? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} /> : <LoginOrRegisterBox />} diff --git a/pages/settings.tsx b/pages/settings.tsx index 0f40a90..e9fc5fa 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -1,7 +1,6 @@ import axios from 'axios'; import reduce from 'image-blob-reduce'; -import { CSSProperties, useContext } from 'react'; -import * as cookies from 'react-cookies'; +import { useContext } from 'react'; import { AccountAvatar } from '../components/account'; import { Footer } from '../components/footer'; @@ -16,11 +15,6 @@ import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined'; import PublishOutlinedIcon from '@material-ui/icons/PublishOutlined'; import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined'; -var SettingsSubsectionStyle: CSSProperties = { - marginTop: 24, - minHeight: 40, -}; - async function uploadNewProfileImage() { if (!this.result) return; @@ -54,9 +48,9 @@ export default function SettingsPage() { <NavBar /> <CenteredPage width={802}> <PageTitle>Instellingen</PageTitle> - <Vierkant fullwidth> + <Vierkant className="section account fullwidth pad-l"> <h2>Account</h2> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <AccountAvatar size={100} /> <label htmlFor='pfUpload'> <IconLabelButton text='Nieuwe profielfoto uploaden' icon={<PublishOutlinedIcon />} /> @@ -65,7 +59,7 @@ export default function SettingsPage() { type='file' id='pfUpload' accept='.png,.jpg,.jpeg' - style={{ display: 'none' }} + className="dispnone" onChange={event => { var file = event.target.files[0]; if (!file) return; @@ -76,45 +70,45 @@ export default function SettingsPage() { }} /> </div> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} /> - <div style={{ display: 'block' }}> + <div className="dispbl"> <h3>Gebruikersnaam</h3> <p>Hier staat hij dan</p> </div> </div> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} /> <IconLabelButton text='Onthullen' icon={<VisibilityOutlinedIcon />} /> - <div style={{ display: 'block' }}> + <div className="dispbl"> <h3>Email</h3> <p>******@example.com</p> </div> </div> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <IconLabelButton text='Bewerken' icon={<EditOutlinedIcon />} /> - <div style={{ display: 'block' }}> + <div className="dispbl"> <h3>Wachtwoord</h3> </div> </div> </Vierkant> - <Vierkant fullwidth> + <Vierkant className="section colors fullwidth pad-l"> <h2>Kleuren</h2> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <ColorPicker /> <ColorPicker /> - <div style={{ display: 'block' }}> + <div className="dispbl"> <h3>Schijfjes</h3> </div> </div> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <ColorPicker /> - <div style={{ display: 'block' }}> + <div className="dispbl"> <h3>Achtergrond</h3> </div> </div> - <div style={SettingsSubsectionStyle}> - <div style={{ float: 'right' }}> + <div className="subsection"> + <div className="floatr"> <CheckBox state={preferences?.darkMode} onclick={state => updatePreference({ 'darkMode': state })} @@ -123,31 +117,20 @@ export default function SettingsPage() { <h3>Donkere modus</h3> </div> </Vierkant> - <Vierkant fullwidth> + <Vierkant className="section gamerules fullwidth pad-l"> <h2>Standaard spelregels</h2> - <div style={SettingsSubsectionStyle}> + <div className="subsection"> <CurrentGameSettings /> </div> </Vierkant> - <Vierkant fullwidth> + <Vierkant className="section logout fullwidth pad-l"> <h2>Uitloggen</h2> - <div - style={{ - width: '100%', - textAlign: 'center', - }} - > + <div className="center"> <IconLabelButton + className="dispinbl" icon={<ExitToAppOutlinedIcon />} text='Uitloggen' - style={{ - float: 'none', - marginLeft: 0, - }} - onclick={() => { - cookies.remove('token'); - window.location.pathname = '/'; - }} + href="/logout" /> </div> </Vierkant> |