settings page / balloon+tuitje without inline css done

8 files changed, 105 insertions, 149 deletions

diff --git a/components/ui.tsx b/components/ui.tsx
index 89e8ffe..f939456 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -27,10 +27,9 @@ export function Vierkant(props: {
 export function Button(props: {
 	text?: string;
 	children?: ReactNode;
-	style?: CSSProperties;
 	href?: string;
 	className?: string;
-	onclick?: (() => void);
+	onclick?: () => void;
 	id?: string;
 }) {
 	return <a
@@ -52,33 +51,18 @@ export function IconLabelButton(props: {
 	text: string;
 	icon: ReactNode;
 	onclick?: () => void;
-	style?: CSSProperties;
 	href?: string;
+	className?: string;
 }) {
 	return <Button
 		onclick={props.onclick}
 		href={props.href}
-		style={{
-			display: 'inline-block',
-			verticalAlign: 'top',
-			padding: 8,
-			float: 'right',
-			marginLeft: 12,
-			...props.style,
-		}}
+		className={"iconlabel dispinbl valigntop floatr" + " " + props.className}
 	>
-		{props.icon}
-		<span
-			style={{
-				display: 'inline-block',
-				verticalAlign: 'top',
-				fontWeight: 500,
-				marginLeft: 8,
-				marginTop: 3,
-				marginBottom: 3,
-				marginRight: 3,
-			}}
-		>
+		<div className="dispinbl icon">
+			{props.icon}
+		</div>
+		<span className="dispinbl valigntop label">
 			{props.text}
 		</span>
 	</Button>;
@@ -186,110 +170,43 @@ export function CheckBox(props: {
 	</div>;
 }
 
-export class ColorPicker extends Component<{
-	style?: CSSProperties;
-}> {
-	state: {
-		color: string;
-		dark: boolean;
-	} = {
-		color: '#012345',
-		dark: true,
-	};
+export function ColorPicker() {
+	var [ dark, setDark ] = useState(false);
+	var [ color, setColor ] = useState("#012345");
 
-	render() {
-		return <Button
-			style={{
-				display: 'inline-block',
-				verticalAlign: 'top',
-				padding: 6,
-				float: 'right',
-				marginLeft: 12,
-				color: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
-				borderColor: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
-				borderWidth: 2,
-				borderStyle: 'solid',
-				backgroundColor: this.state.color,
-				...this.props.style,
-			}}
-		>
-			<div>
-				<EditOutlinedIcon />
-				<div
-					style={{
-						width: 150,
-						height: 24,
-						display: 'inline-block',
-						textAlign: 'center',
-						verticalAlign: 'top',
-						position: 'relative',
-					}}
-				>
-					<span
-						style={{
-							position: 'absolute',
-							top: '50%',
-							left: '50%',
-							transform: 'translate(-50%, -50%)',
-							fontWeight: 600,
-							fontFeatureSettings: '"tnum", "ss01"',
-						}}
-					>
-						{this.state.color}
-					</span>
-				</div>
+	return <Button className="colorpicker dispinbl valigntop pad-s floatr">
+		<div>
+			<EditOutlinedIcon />
+			<div className="labelwrapper valigntop dispinbl center posrel">
+				<span className="label posabs">
+					{color}
+				</span>
 			</div>
-		</Button>;
-	}
+		</div>
+	</Button>;
 }
 
-export function Tuitje(props: {
-	style?: CSSProperties;
-	rotation?: number;
-}) {
+export function Tuitje() {
 	return <svg
 		width='36'
 		height='12'
 		viewBox='0 0 36 12'
 		fill='none'
 		xmlns='http://www.w3.org/2000/svg'
-		style={{
-			...props.style,
-		}}
+		className="tuitje posabs"
 	>
 		<path
 			d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
-			fill={props.style?.background as string || 'var(--background)'}
+			fill='var(--background)'
 		/>
 	</svg>;
 }
 
 export function Bubble(props: {
 	children?: ReactNode;
-	style?: CSSProperties;
-	tuitjeStyle?: CSSProperties;
 }) {
-	return <Vierkant
-		style={{
-			position: 'absolute',
-			textAlign: 'center',
-			margin: 0,
-			overflow: 'visible',
-			left: '50%',
-			top: -24,
-			transform: 'translateY(-100%) translateX(-50%)',
-			boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
-			...props.style,
-		}}
-	>
+	return <Vierkant className="bubble posabs center drop-2">
 		{props.children}
-		<Tuitje
-			style={{
-				position: 'absolute',
-				bottom: -12,
-				transform: 'translate(-50%, 0%) rotate(0deg)',
-				...props.tuitjeStyle,
-			}}
-		/>
+		<Tuitje />
 	</Vierkant>;
 }
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>
diff --git a/styles/index.css b/styles/index.css
index 8ba12a6..fcda8e0 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -3,7 +3,6 @@
 }
 
 .loginOrRegisterBox {
-	vertical-align: top;
 	height: calc(var(--squareSize) + 2 * var(--spacing-large));
 	width: 100%;
 	max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
diff --git a/styles/settings.css b/styles/settings.css
new file mode 100644
index 0000000..bcce5b5
--- /dev/null
+++ b/styles/settings.css
@@ -0,0 +1,8 @@
+.section.logout .button {
+	float: unset;
+}
+
+.subsection {
+	margin-top: var(--spacing-large);
+	min-height: 40px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index f1d65e2..b8cd44c 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -19,3 +19,49 @@
 	font-weight: 600;
 }
 
+.button.iconlabel,
+.button.colorpicker {
+	margin-left: var(--spacing-medium);
+}
+
+.button.colorpicker {
+	--color: var(--gray-100);
+	--background: #ff00ff;
+
+	background-color: var(--background);
+	color: var(--color);
+	border-width: 2px;
+	border-style: solid;
+	border-color: var(--color);
+}
+
+.button.iconlabel .label {
+	margin: 3px;
+	margin-left: 8px;
+}
+
+.button.colorpicker .labelwrapper {
+	width: 150px;
+	height: 24px;
+}
+
+.button.colorpicker .labelwrapper .label {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-feature-settings: "tnum", "ss01";
+}
+
+.bubble {
+	margin: 0;
+	overflow: visible;
+	left: 50%;
+	top: -24px;
+	transform: translateY(-100%) translateX(-50%);
+}
+
+.bubble .tuitje {
+	bottom: -12px;
+	transform: translate(-50%, 0%) rotate(0deg);
+}
diff --git a/styles/utility.css b/styles/utility.css
index 783b168..f8954cd 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -37,6 +37,8 @@
 
 .center { text-align: center; }
 
+.floatr { float: right; }
+
 .subtile {
 	color: var(--gray-600);
 	font-style: italic;