From 2527a6a2e0a9e679cb5a19abb56ad6a363cf980d Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 18 Apr 2021 13:42:44 +0200
Subject: settings page / balloon+tuitje without inline css done
---
pages/_app.tsx | 1 +
pages/index.tsx | 2 +-
pages/settings.tsx | 63 ++++++++++++++++++++----------------------------------
3 files changed, 25 insertions(+), 41 deletions(-)
(limited to 'pages')
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>
--
cgit v1.2.3