settings page / balloon+tuitje without inline css done

1 files changed, 23 insertions, 40 deletions

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>