From 319938d57b8cd225de1dd3f63433f6561f92311e Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 20 Apr 2021 15:00:46 +0200
Subject: new game dialog not broken anyore

---
 components/page.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'components/page.tsx')

diff --git a/components/page.tsx b/components/page.tsx
index 506e2db..b8e3dac 100644
--- a/components/page.tsx
+++ b/components/page.tsx
@@ -1,12 +1,11 @@
 import { Component, CSSProperties, ReactNode } from 'react';
 
-interface CenteredPageProps {
+export function CenteredPage(props: {
 	width?: number;
 	children?: ReactNode;
 	style?: CSSProperties;
-}
-
-export function CenteredPage(props: CenteredPageProps) {
+	className?: string;
+}) {
 	return <div
 		className='CenteredPageOuter'
 		style={{
@@ -15,7 +14,7 @@ export function CenteredPage(props: CenteredPageProps) {
 		}}
 	>
 		<div
-			className='CenteredPageInner'
+			className={'CenteredPageInner ' + props.className}
 			style={{
 				margin: '0 6px',
 				lineHeight: 0,
-- 
cgit v1.2.3


From 93f24011f9613b7785b37dc4b0c963d9be22ba30 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 09:17:48 +0200
Subject: more components without inline css

---
 components/gameBar.tsx           |  53 +++++---------------
 components/notificationsArea.tsx | 103 ++++++---------------------------------
 components/page.tsx              |  27 ++--------
 components/recentGames.tsx       |  34 +++----------
 components/ui.tsx                |  19 ++------
 pages/_app.tsx                   |   2 +
 styles/game.css                  |  18 ++++++-
 styles/global.css                |   3 ++
 styles/notifications.css         |  51 +++++++++++++++++++
 styles/recentGames.css           |  21 ++++++++
 styles/ui.css                    |  19 ++++++++
 styles/utility.css               |   1 +
 12 files changed, 155 insertions(+), 196 deletions(-)
 create mode 100644 styles/notifications.css
 create mode 100644 styles/recentGames.css

(limited to 'components/page.tsx')

diff --git a/components/gameBar.tsx b/components/gameBar.tsx
index a3479d5..9a7ca59 100644
--- a/components/gameBar.tsx
+++ b/components/gameBar.tsx
@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Bubble, Vierkant } from './ui';
+import { ReactNode } from 'react';
+import { Vierkant } from './ui';
 
 import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
 import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
@@ -9,21 +9,17 @@ import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
 function GameBarModule(props: {
 	children?: ReactNode;
 	onclick?: () => void;
+	className?: string;
 }) {
 	return <Vierkant
-		className={'gameBarButton bg-700 pad-m round-t valigntop ' + (props.onclick ? 'cpointer' : '')}
+		className={'gameBarButton bg-700 pad-m round-t valigntop ' + props.className + ' '
+			+ (props.onclick ? 'cpointer' : '')}
 		onclick={props.onclick}
 	>
 		{props.children}
 	</Vierkant>;
 }
 
-var GameBarSpacer = () => <div style={{ width: 8, display: 'inline-block' }}></div>;
-
-var GameBarAlignStyle: CSSProperties = {
-	display: 'inline-block',
-};
-
 export function GameBar(props: {
 	turn: boolean;
 	player1: boolean;
@@ -32,7 +28,7 @@ export function GameBar(props: {
 }) {
 	return <Vierkant className='gameBar bg-800 w100m2m pad-s'>
 		<div>
-			<div style={{ ...GameBarAlignStyle, float: 'left' }}>
+			<div className='floatl dispinbl'>
 				{props.active && <div
 					className={'move dispinbl ' + (props.turn ? 'move-a' : 'move-b')}
 				/>}
@@ -44,49 +40,22 @@ export function GameBar(props: {
 						: 'Tegenstander'}
 				</h2>
 			</div>
-			<div
-				style={{
-					...GameBarAlignStyle,
-					position: 'absolute',
-					top: '50%',
-					left: '50%',
-					transform: 'translate(-50%, -50%)',
-				}}
-			>
-				<span
-					style={{
-						color: 'var(--text)',
-						fontSize: 20,
-						opacity: .75 - .75,
-					}}
-				>
-					0-0
-				</span>
+			<div className='score winning dispnone subtile posabs abscenter'>
+				<span>0-0</span>
 			</div>
-			<div style={{ ...GameBarAlignStyle, float: 'right' }}>
+			<div className='buttons floatr dispinbl'>
 				<GameBarModule>
 					<SettingsRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
-				<GameBarModule>
-					<span
-						style={{
-							margin: '0 4px',
-							fontSize: 20,
-						}}
-					>
-						00:00
-					</span>
+				<GameBarModule className='timer nosel'>
+					<span>00:00</span>
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule onclick={props.resignFunction}>
 					<ExitToAppRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule>
 					<NavigateBeforeRoundedIcon />
 				</GameBarModule>
-				<GameBarSpacer />
 				<GameBarModule>
 					<NavigateNextRoundedIcon />
 				</GameBarModule>
diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx
index 9573b72..8ee554a 100644
--- a/components/notificationsArea.tsx
+++ b/components/notificationsArea.tsx
@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { CSSProperties, ReactNode, useContext, useEffect, useState } from 'react';
+import { ReactNode, useContext, useEffect, useState } from 'react';
 
 import { gameInfo, userInfo } from '../api/api';
 import { AccountAvatar } from './account';
@@ -35,52 +35,14 @@ export function NotificationsArea(props: {
 		setPreviousMessages(messages);
 	});
 
-	return props.visible && <Bubble
-		style={{
-			left: 48 + 12,
-			top: 92,
-			transform: 'translateY(-100%)',
-			textAlign: 'left',
-			width: 400,
-			height: 450,
-		}}
-		tuitjeStyle={{
-			left: 12,
-			bottom: 86,
-			transform: 'translate(-100%, 100%) rotate(90deg)',
-		}}
-	>
-		<h2 style={{ marginBottom: 24 }}>Meldingen</h2>
-		<div
-			style={{
-				overflowY: 'scroll',
-				whiteSpace: 'normal',
-				height: 450 - 24 * 4,
-				borderRadius: 6,
-			}}
-		>
+	return props.visible && <Bubble className='notificationsArea bg-700 pad-l'>
+		<h2 className='title'>Meldingen</h2>
+		<div className='inner round-t'>
 			{props.gameInvites?.map(game => <GameInvite hide={props.rerender} game={game} />)}
 			{props.friendRequests?.map(user => <FriendRequest hide={props.rerender} user={user} />)}
 			{messages == 0
-				&& <div
-					style={{
-						position: 'absolute',
-						left: 0,
-						right: 0,
-						bottom: 0,
-						top: 0,
-					}}
-				>
-					<h1
-						style={{
-							position: 'absolute',
-							top: '50%',
-							left: '50%',
-							whiteSpace: 'nowrap',
-							transform: 'translate(-50%, -50%)',
-							opacity: .7,
-						}}
-					>
+				&& <div className='noMsgsWrapper posabs a0'>
+					<h1 className='posabs abscenter subtile'>
 						Geen meldingen
 					</h1>
 				</div>}
@@ -88,48 +50,24 @@ export function NotificationsArea(props: {
 	</Bubble>;
 }
 
-var FriendRequestButtonStyle: CSSProperties = {
-	borderRadius: 6,
-	display: 'inline-block',
-	marginLeft: 0,
-	textAlign: 'center',
-};
-
 function Acceptable(props: {
 	children?: ReactNode;
 	onAccept?: () => void;
 	onDeny?: () => void;
 }) {
-	return <Vierkant
-		style={{
-			borderRadius: 8,
-			background: 'var(--background-alt)',
-			margin: 0,
-			padding: 12,
-			width: '100%',
-			marginBottom: 12,
-		}}
-	>
-		<div style={{ position: 'relative' }}>
+	return <Vierkant className='acceptable bg-800 round-t pad-m fullwidth'>
+		<div className='posrel'>
 			{props.children}
-			<div
-				style={{
-					display: 'grid',
-					gridTemplateColumns: '1fr, 1fr',
-					gridGap: 12,
-					marginTop: 12,
-					gridAutoFlow: 'column',
-				}}
-			>
+			<div className='sidebyside buttons'>
 				<IconLabelButton
+					className='accept'
 					onclick={props.onAccept}
-					style={FriendRequestButtonStyle}
 					icon={<DoneIcon />}
 					text='Accepteren'
 				/>
 				<IconLabelButton
+					className='deny'
 					onclick={props.onDeny}
-					style={FriendRequestButtonStyle}
 					icon={<CloseIcon />}
 					text='Verwijderen'
 				/>
@@ -171,14 +109,8 @@ function FriendRequest(props: {
 	>
 		<a href={'/user?id=' + props.user.id}>
 			<AccountAvatar size={48} id={props.user.id} />
-			<div
-				style={{
-					display: 'inline-block',
-					verticalAlign: 'top',
-					marginLeft: 6,
-				}}
-			>
-				<i style={{ display: 'block' }}>Vriendschapsverzoek</i>
+			<div className='userInfo dispinbl valigntop'>
+				<i className='dispbl'>Vriendschapsverzoek</i>
 				<b>{props.user.username}</b>
 			</div>
 		</a>
@@ -191,13 +123,8 @@ function GameInvite(props: {
 }) {
 	return <Acceptable>
 		<a>
-			<div
-				style={{
-					display: 'inline-block',
-					verticalAlign: 'top',
-				}}
-			>
-				<i style={{ display: 'block' }}>Partijuitnodiging</i>
+			<div className='userInfo dispinbl valigntop'>
+				<i className='dispbl'>Partijuitnodiging</i>
 				<p>
 					<b>
 						<a href={'/user?id=' + props.game.opponent?.id}>{props.game.opponent?.username}</a>
diff --git a/components/page.tsx b/components/page.tsx
index b8e3dac..b8e8770 100644
--- a/components/page.tsx
+++ b/components/page.tsx
@@ -1,26 +1,15 @@
-import { Component, CSSProperties, ReactNode } from 'react';
+import { Component, ReactNode } from 'react';
 
 export function CenteredPage(props: {
 	width?: number;
 	children?: ReactNode;
-	style?: CSSProperties;
 	className?: string;
 }) {
 	return <div
 		className='CenteredPageOuter'
-		style={{
-			maxWidth: props.width,
-			margin: '0 auto',
-		}}
+		style={{ maxWidth: props.width }}
 	>
-		<div
-			className={'CenteredPageInner ' + props.className}
-			style={{
-				margin: '0 6px',
-				lineHeight: 0,
-				...props.style,
-			}}
-		>
+		<div className={'CenteredPageInner ' + props.className}>
 			{props.children}
 		</div>
 	</div>;
@@ -28,15 +17,7 @@ export function CenteredPage(props: {
 
 export class PageTitle extends Component {
 	render() {
-		return <h1
-			style={{
-				color: 'var(--text-alt)',
-				marginLeft: 6,
-				marginTop: 32,
-				marginBottom: 64,
-				fontSize: 25,
-			}}
-		>
+		return <h1 className='pageTitle'>
 			{this.props.children}
 		</h1>;
 	}
diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index d619eeb..6683e20 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -1,18 +1,7 @@
 import friendlyTime from 'friendly-time';
-import { CSSProperties } from 'react';
 
 import { gameInfo } from '../api/api';
 
-var LeftAlignedTableColumn: CSSProperties = {
-	textAlign: 'left',
-	paddingLeft: 16,
-};
-
-var RightAlignedTableColumn: CSSProperties = {
-	textAlign: 'right',
-	paddingRight: 16,
-};
-
 function GameOutcome(props: { game: gameInfo; }) {
 	var gameStatus = (() => {
 		return {
@@ -42,10 +31,10 @@ function GameOutcome(props: { game: gameInfo; }) {
 }
 
 export default function RecentGames(props: { games?: Array<gameInfo>; }) {
-	return <div>
+	return <div className='recentGames'>
 		<h2>Recente partijen</h2>
 		{props.games?.length > 0
-			? <table width='100%' style={{ marginTop: '16px', textAlign: 'center' }}>
+			? <table width='100%' className='recentGames center'>
 				<tbody>
 					<tr>
 						<th style={{ width: '50%' }}>Tegenstander</th>
@@ -55,19 +44,14 @@ export default function RecentGames(props: { games?: Array<gameInfo>; }) {
 					</tr>
 					{props.games?.map(game =>
 						<tr key={game.id}>
-							<td style={LeftAlignedTableColumn}>
-								<a
-									href={'/user?id=' + game.opponent?.id}
-									style={{
-										fontWeight: 500,
-									}}
-								>
+							<td className='leftAlignedColumn'>
+								<a href={'/user?id=' + game.opponent?.id}>
 									{game.opponent?.username}
 								</a>
 							</td>
 							<GameOutcome game={game} />
 							<td>{Math.max(0, game.moves.length - 1)}</td>
-							<td style={RightAlignedTableColumn}>
+							<td className='rightAlignedColumn'>
 								{(() => {
 									var timeCreated = new Date(game.created);
 									return friendlyTime(timeCreated);
@@ -77,13 +61,7 @@ export default function RecentGames(props: { games?: Array<gameInfo>; }) {
 					)}
 				</tbody>
 			</table>
-			: <h1
-				style={{
-					textAlign: 'center',
-					opacity: .6,
-					margin: '32px 64px',
-				}}
-			>
+			: <h1 className='nogames center subtile'>
 				Deze gebruiker heeft nog geen partijen gespeeld
 			</h1>}
 	</div>;
diff --git a/components/ui.tsx b/components/ui.tsx
index 11914c8..7474240 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -70,7 +70,6 @@ export function IconLabelButton(props: {
 
 export function Input(props: {
 	label?: string;
-	style?: CSSProperties;
 	type?: string;
 	id?: string;
 	min?: number;
@@ -109,7 +108,6 @@ export function SearchBar(props: { label?: string; }) {
 
 export function CheckBox(props: {
 	state?: boolean;
-	style?: CSSProperties;
 	id?: string;
 	onclick?: (state: boolean) => void;
 }) {
@@ -130,12 +128,7 @@ export function CheckBox(props: {
 	return <div
 		onClick={toggle}
 		id={props.id}
-		className={on ? 'on' : 'off'}
-		style={{
-			...props.style,
-			display: 'inline-block',
-			cursor: 'pointer',
-		}}
+		className={'checkbox dispinbl ' + (on ? 'on' : 'off')}
 	>
 		{on
 			? <CheckBoxIcon />
@@ -168,17 +161,15 @@ export function Tuitje() {
 		xmlns='http://www.w3.org/2000/svg'
 		className='tuitje posabs'
 	>
-		<path
-			d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
-			fill='var(--background)'
-		/>
+		<path d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z' />
 	</svg>;
 }
 
 export function Bubble(props: {
 	children?: ReactNode;
+	className?: string;
 }) {
-	return <Vierkant className='bubble posabs center drop-2'>
+	return <Vierkant className={'bubble posabs center drop-2 ' + props.className}>
 		{props.children}
 		<Tuitje />
 	</Vierkant>;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 31bc0e7..317b389 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,6 +8,8 @@ import '../styles/disk.css';
 import '../styles/footer.css';
 import '../styles/global.css';
 import '../styles/navbar.css';
+import '../styles/notifications.css';
+import '../styles/recentGames.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
 
diff --git a/styles/game.css b/styles/game.css
index 2c1eb94..d482f9b 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -35,7 +35,10 @@
 	margin: 3px;
 }
 
-.gameBar .gameBarButton { margin: 0; }
+.gameBar .gameBarButton {
+	margin: 0;
+	margin-left: var(--spacing-small);
+}
 
 .gameBar .move {
 	width: 32px;
@@ -48,6 +51,19 @@
 .gameBar .move.move-a { background-color: var(--error); }
 .gameBar .move.move-b { background-color: var(--confirm); }
 
+.gameBar .timer span {
+	margin: 0 4px;
+	font-size: 20px;
+}
+
+.gameBar .score {
+	font-size: 20px;
+	z-index: 1;
+}
+
+.gameBar .score.winning { color: var(--disk-a-alt); }
+.gameBar .score.losing { color: var(--disk-b-alt); }
+
 .voerGame {
 	max-width: 100vh;
 	margin: 0 auto;
diff --git a/styles/global.css b/styles/global.css
index 541dd76..79aa026 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -39,6 +39,9 @@ html, body {
 	padding: 0;
 }
 
+/* section font size */
+h1 { font-size: 25px; }
+
 /* subsection font size */
 h2 { font-size: 20px; }
 
diff --git a/styles/notifications.css b/styles/notifications.css
new file mode 100644
index 0000000..ec47836
--- /dev/null
+++ b/styles/notifications.css
@@ -0,0 +1,51 @@
+.notificationsArea {
+	left: calc(48px + var(--spacing-medium));
+	top: 92px;
+	transform: translateY(-100%);
+	text-align: left;
+	width: 400px;
+	height: 450px;
+}
+
+.notificationsArea .tuitje {
+	left: var(--spacing-medium);
+	bottom: 86px;
+	transform: translate(-100%, 100%) rotate(90deg);
+	fill: var(--gray-700);
+}
+
+.notificationsArea .title {
+	margin-bottom: var(--spacing-large);
+}
+
+.notificationsArea .inner {
+	overflow-y: scroll;
+	white-space: normal;
+	height: calc(450px - 4 * var(--spacing-large));
+}
+
+.notificationsArea .acceptable {
+	margin: 0;
+	margin-bottom: var(--spacing-medium);
+}
+
+.notificationsArea .acceptable:last-child {
+	margin-bottom: 0;
+}
+
+.notificationsArea .buttons .button {
+	margin: 0;
+}
+
+.notificationsArea .buttons {
+	margin-top: var(--spacing-medium);
+}
+
+.notificationsArea .noMsgsWrapper h1 {
+	white-space: nowrap;
+	user-select: none;
+}
+
+.notificationsArea .acceptable .userInfo {
+	margin-left: var(--spacing-small);
+}
diff --git a/styles/recentGames.css b/styles/recentGames.css
new file mode 100644
index 0000000..c7150aa
--- /dev/null
+++ b/styles/recentGames.css
@@ -0,0 +1,21 @@
+table .leftAlignedColumn {
+	text-align: left;
+	padding-left: var(--spacing-medium);
+}
+
+table .rightAlignedColumn {
+	text-align: right;
+	padding-left: var(--spacing-medium);
+}
+
+table.recentGames {
+	margin-top: var(--spacing-medium);
+}
+
+table.recentGames a {
+	font-weight: 500;
+}
+
+div.recentGames .nogames {
+	margin: 32px 64px;
+}
diff --git a/styles/ui.css b/styles/ui.css
index 6dbc388..cb95b36 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -89,3 +89,22 @@ html.dark .dialogbox { background-color: var(--gray-700); }
 	box-sizing: border-box;
 }
 
+.checkbox {
+	cursor: pointer;
+}
+
+.CenteredPageOuter {
+	margin: 0 auto;
+}
+
+.CenteredPageInner {
+	margin: 0 var(--spacing-small);
+	line-height: 0;
+}
+
+.pageTitle {
+	margin-left: var(--spacing-small);
+	margin-top: 32px;
+	margin-bottom: 64px;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 0ff6b10..cc358e6 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -49,6 +49,7 @@
 .center { text-align: center; }
 
 .floatr { float: right; }
+.floatl { float: left; }
 
 .w100m2m { width: calc(100% - var(--spacing-medium)); }
 
-- 
cgit v1.2.3