From 31396f6b4f1271cb646947111661d9bb59ca951f Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 21 Apr 2021 10:22:50 +0200
Subject: toasts without inline css

---
 components/gameSettings.tsx |  2 +-
 components/toast.tsx        | 75 +++++++--------------------------------------
 pages/_app.tsx              |  1 +
 styles/toast.css            | 66 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 79 insertions(+), 65 deletions(-)
 create mode 100644 styles/toast.css

diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index 13462be..e2c60e6 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -147,7 +147,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
 					Timer gebruiken voor bijde spelers
 				</span>
 			</GameSettingsSection>
-			{true && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
+			{false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
 				<div className='sidebyside'>
 					<GameRule title='+2' description='Extra kolommen' />
 					<GameRule title='+4' description='Extra kolommen' />
diff --git a/components/toast.tsx b/components/toast.tsx
index 97e17e6..3a72ae1 100644
--- a/components/toast.tsx
+++ b/components/toast.tsx
@@ -1,26 +1,14 @@
-import { createContext, CSSProperties, ReactNode, useState } from 'react';
+import { createContext, ReactNode, useState } from 'react';
 
 import CloseIcon from '@material-ui/icons/Close';
 
 function ToastArea(props: {
-	style?: CSSProperties;
 	children?: ReactNode;
 	rerender?: boolean;
 }) {
 	return <div
 		id='ToastArea'
-		style={{
-			position: 'fixed',
-			whiteSpace: 'nowrap',
-			bottom: 12,
-			left: '50%',
-			transform: 'translateX(-50%)',
-			zIndex: 1,
-			maxWidth: 600,
-			width: 'calc(100% - 48px - 48px)',
-			margin: '0 24px',
-			...props.style,
-		}}
+		className='posfix abscenterh'
 	>
 		{props.children}
 	</div>;
@@ -32,71 +20,30 @@ function Toast(props: {
 	icon?: ReactNode;
 	children?: ReactNode;
 	type?: 'normal' | 'confirmation' | 'error';
-	style?: CSSProperties;
 }) {
 	var [visible, setVisibility] = useState(true);
 
 	setTimeout(() => setVisibility(false), 10e3);
 
-	return visible && <div
-		style={{
-			padding: 0,
-			marginBottom: 12,
-			borderRadius: 6,
-			boxShadow: '0 8px 12px -4px #00000033',
-			color: props.type === 'confirmation' ? 'var(--background)' : 'var(--text)',
-			backgroundColor: props.type === 'normal'
-				? 'var(--background)'
-				: props.type === 'confirmation'
-				? 'var(--disk-b)'
-				: props.type === 'error'
-				? 'var(--disk-a)'
-				: 'var(--background)',
-			...props.style,
-		}}
-	>
+	return visible && <div className={'round-t drop-1 toast ' + props.type}>
 		{props.children
 			|| <div
-				style={{
-					lineHeight: 0,
-					padding: 12,
-					minHeight: props.description ? 36 : 24,
-					position: 'relative',
-				}}
+				className={'inner pad-m posrel '
+					+ (props.description ? 'hasDescription' : '') + ' '
+					+ (props.icon ? 'hasIcon' : '')}
 			>
-				<div
-					style={{
-						position: 'absolute',
-						left: 12,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					}}
-				>
+				<div className='icon posabs abscenterv'>
 					{props.icon}
 				</div>
-				<div
-					style={{
-						userSelect: 'none',
-						position: 'absolute',
-						left: props.icon ? 48 : 12,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					}}
-				>
-					<h2 style={{ fontSize: 16 }}>{props.text}</h2>
+				<div className='content nosel posabs abscenterv'>
+					<h2>{props.text}</h2>
 					<p>{props.description}</p>
 				</div>
 				<div
-					style={{
-						cursor: 'pointer',
-						position: 'absolute',
-						right: 12,
-						top: '50%',
-						transform: 'translateY(-50%)',
-					}}
+					className='closeIcon posabs abscenterv'
 					onClick={() => setVisibility(false)}
 				>
-					<CloseIcon style={{ fontSize: 24 }} />
+					<CloseIcon />
 				</div>
 			</div>}
 	</div>;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 317b389..c1347e8 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -10,6 +10,7 @@ import '../styles/global.css';
 import '../styles/navbar.css';
 import '../styles/notifications.css';
 import '../styles/recentGames.css';
+import '../styles/toast.css';
 import '../styles/ui.css';
 import '../styles/utility.css';
 
diff --git a/styles/toast.css b/styles/toast.css
new file mode 100644
index 0000000..2ecbcfb
--- /dev/null
+++ b/styles/toast.css
@@ -0,0 +1,66 @@
+.toast.error {
+	background-color: var(--error);
+}
+.toast.confirmation {
+	background-color: var(--confirm);
+}
+.toast.normal {
+	background-color: var(--gray-700);
+}
+
+.toast.confirmation,
+.toast.error {
+	color: var(--gray-900);
+}
+
+html.dark .toast.confirmation,
+html.dark .toast.error {
+	background-color: var(--gray-700);
+	color: var(--foreground);
+}
+html.dark .toast.error {
+	box-shadow: inset 0 0 0 2px var(--error);
+}
+html.dark .toast.confirmation {
+	box-shadow: inset 0 0 0 2px var(--confirm);
+}
+
+.toast {
+	margin-bottom: var(--spacing-medium);
+}
+
+#ToastArea {
+	white-space: nowrap;
+	bottom: var(--spacing-medium);
+	z-index: 1;
+	max-width: 600px;
+	width: calc(100% - 2 * 48px);
+	margin: 0 var(--spacing-large);
+}
+
+.toast .inner {
+	line-height: 0;
+	min-height: 24px;
+}
+
+.toast .inner.hasDescription {
+	min-height: 36px;
+}
+
+.toast .inner .icon,
+.toast .inner .content {
+	left: var(--spacing-medium);
+}
+
+.toast .inner.hasIcon .content {
+	left: calc(36px + var(--spacing-medium));
+}
+
+.toast .inner .content h2 {
+	font-size: 1rem;
+}
+
+.toast .inner .closeIcon {
+	right: var(--spacing-medium);
+	cursor: pointer;
+}
-- 
cgit v1.2.3