notification be gone

4 files changed, 93 insertions, 7 deletions

diff --git a/src/components/page.tsx b/src/components/page.tsx
index 37634a3..d8a4a2b 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -26,7 +26,7 @@ export class PageTitle extends Component {
 			marginLeft: 6,
 			marginTop: 32,
 			marginBottom: 64,
-			fontSize: 25
+			fontSize: 25,
 		}}>{this.props.children}</h1>;
 	}
 }
diff --git a/src/components/toast.tsx b/src/components/toast.tsx
new file mode 100644
index 0000000..1d467bd
--- /dev/null
+++ b/src/components/toast.tsx
@@ -0,0 +1,78 @@
+import { CSSProperties, ReactNode, Component } from "react";
+
+import CloseIcon from '@material-ui/icons/Close';
+
+export function ToastArea(props: {
+	style?: CSSProperties
+	children?: ReactNode
+}) {
+	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
+	}}>{props.children}</div>
+}
+
+export class Toast extends Component<{
+	text?: string
+	icon?: ReactNode
+	children?: ReactNode
+	type?: "normal"|"confirmation"|"error"
+	style?: CSSProperties
+}> {
+	state = { render: true }
+
+	close = () => this.setState({ render: false })
+
+	render () {
+		if (!this.state.render) return null;
+		return <div style={{
+			padding: 0,
+			marginBottom: 12,
+			borderRadius: 8,
+			color: "var(--text)",
+			boxShadow: "0 8px 12px -4px #00000033",
+			backgroundColor:
+				this.props.type === "normal" ? "var(--background)" :
+				this.props.type === "confirmation" ? "var(--disk-a)" :
+				this.props.type === "error" ? "var(--disk-b)" : "var(--background)",
+			...this.props.style
+		}}>
+		{
+			this.props.children ?
+			this.props.children :
+			<div style={{ lineHeight: 0 }}>
+				<div style={{
+					fontSize: 0,
+					margin: 16,
+					display: "inline-block",
+					verticalAlign: "top",
+					width: 32, height: 32
+				}}>{this.props.icon}</div>
+				<h2 style={{
+					margin: "20px 0",
+					display: "inline-block",
+					width: "calc(100% - 128px)",
+					verticalAlign: "top",
+					fontSize: 20
+				}}>{this.props.text}</h2>
+				<div style={{
+					padding: 20,
+					display: "inline-block",
+					cursor: "pointer"
+				}} onClick={this.close}>
+					<CloseIcon style={{ fontSize: 24 }}/>
+				</div>
+			</div>
+		}
+		</div>
+	}
+}
+
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index ba6e35b..513fc7a 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -46,7 +46,7 @@ export default function GamePage() {
 					position: "relative",
 					top: "50%",
 					transform: "translateY(-50%)",
-					maxWidth: "calc(100vh - 12px)",
+					maxWidth: "100vh",
 					margin: "0 auto"
 				}}>
 					<VoerBord width={7} height={6}/>
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 27a7271..f298846 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -6,6 +6,7 @@ import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import { Vierkant, Button } from '../components/ui';
 import { AccountAvatar } from '../components/account';
+import { ToastArea, Toast } from '../components/toast';
 
 import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
 import ExtensionIcon from '@material-ui/icons/Extension';
@@ -78,6 +79,10 @@ export default class HomePage extends Component {
 	render () {
 		return <div>
 			<NavBar/>
+			<ToastArea>
+				<Toast text="Gert" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
+				<Toast text="Gert"/>
+			</ToastArea>
 			<CenteredPage width={802}>
 				<PageTitle>4 op een rij</PageTitle>
 				<Vierkant href="/game">
@@ -105,16 +110,19 @@ export default class HomePage extends Component {
 					}}>
 						<span style={{
 							userSelect: "none",
-							marginBottom: 8,
-							display: "inline-block"
+							display: "inline-block",
+							position: "absolute",
+							left: 0, right: 0, top: 0
 						}}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span>
 						<div style={{
 							display: "grid",
 							gridGap: 24,
-							gridTemplateColumns: "1fr 1fr"
+							gridTemplateColumns: "1fr 1fr",
+							position: "absolute",
+							left: 0, right: 0, bottom: 0
 						}}>
-							<Button href="/login" text="Inloggen"/>
 							<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/>
+							<Button href="/login" text="Inloggen"/>
 						</div>
 					</div>
 					<div style={{
@@ -153,7 +161,7 @@ export default class HomePage extends Component {
 						</div>
 					</div>
 				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
+				<Vierkant width="calc(100% - 12px)" style={{ display: this.state.loggedIn ? "block" : "none" }}>
 					<h2>Recente partijen</h2>
 					<table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
 						<tr>