new toast design in code

6 files changed, 85 insertions, 44 deletions

diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx
index 0a243e1..b427941 100644
--- a/components/notificationsArea.tsx
+++ b/components/notificationsArea.tsx
@@ -25,7 +25,9 @@ export function NotificationsArea(props: {
 
 	useEffect(() => {
 		if(messages > previousMessages) {
-			toast("Je hebt nieuwe meldingen!", "confirmation", <NotificationsActiveOutlinedIcon style={{ fontSize: 32 }}/>);
+			toast({ message: "Je hebt nieuwe meldingen!",
+				type: "confirmation",
+				icon: <NotificationsActiveOutlinedIcon/>});
 		}
 
 		setPreviousMessages(messages);
diff --git a/components/toast.tsx b/components/toast.tsx
index d774c96..91e67f7 100644
--- a/components/toast.tsx
+++ b/components/toast.tsx
@@ -23,6 +23,7 @@ function ToastArea(props: {
 
 function Toast(props: {
 	text?: string
+	description?: string
 	icon?: ReactNode
 	children?: ReactNode
 	type?: "normal"|"confirmation"|"error"
@@ -35,7 +36,7 @@ function Toast(props: {
 	return visible && <div style={{
 		padding: 0,
 		marginBottom: 12,
-		borderRadius: 8,
+		borderRadius: 6,
 		boxShadow: "0 8px 12px -4px #00000033",
 		color:
 			props.type === "confirmation" ? "var(--background)" : "var(--text)",
@@ -47,43 +48,61 @@ function Toast(props: {
 	}}>
 		{
 			props.children ||
-			<div style={{ lineHeight: 0 }}>
+			<div style={{
+				lineHeight: 0,
+				padding: 12,
+				minHeight: props.description ? 36 : 24,
+				position: "relative"
+			}}>
 				<div style={{
-					fontSize: 0,
-					margin: 16,
-					display: "inline-block",
-					verticalAlign: "top",
-					width: 32, height: 32
+					position: "absolute",
+					left: 12,
+					top: "50%",
+					transform: "translateY(-50%)"
 				}}>{props.icon}</div>
-				<h2 style={{
-					margin: "20px 0",
-					display: "inline-block",
-					width: "calc(100% - 128px)",
-					verticalAlign: "top",
-					fontSize: 20,
-					userSelect: "none"
-				}}>{props.text}</h2>
 				<div style={{
-					padding: 20,
-					display: "inline-block",
-					cursor: "pointer"
+					userSelect: "none",
+					position: "absolute",
+					left: props.icon ? 48 : 12,
+					top: "50%",
+					transform: "translateY(-50%)"
+				}}>
+					<h2 style={{ fontSize: 16 }}>{props.text}</h2>
+					<p>{props.description}</p>
+				</div>
+				<div style={{
+					cursor: "pointer",
+					position: "absolute",
+					right: 12,
+					top: "50%",
+					transform: "translateY(-50%)"
 				}} onClick={() => setVisibility(false)}>
-					<CloseIcon/>
+					<CloseIcon style={{ fontSize: 24 }}/>
 				</div>
 			</div>
 		}
 	</div>
 }
 
-export type toastType = (message: string, type: "confirmation"|"normal"|"error", icon?: ReactNode ) => void;
+export type toastSettings = {
+	message: string,
+	description?: string,
+	type: "confirmation"|"normal"|"error",
+	icon?: ReactNode
+}
+export type toastType = (settings: toastSettings) => void;
 export var ToastContext = createContext<{ toast?: toastType }>({});
 var toasts: Array<JSX.Element> = [];
 
 export function ToastContextWrapper(props: { children?: ReactNode }) {
 	var [dummyState, rerender] = useState(false);
 
-	return <ToastContext.Provider value={{ toast: (message, type, icon? ) => {
-		toasts.push(<Toast type={type} text={message} icon={icon}/>);
+	return <ToastContext.Provider value={{ toast: options => {
+		toasts.push(<Toast
+					type={options.type}
+					text={options.message}
+					description={options.description}
+					icon={options.icon}/>);
 		rerender(!dummyState);
 	} }}>
 		{ props.children }
diff --git a/pages/game.tsx b/pages/game.tsx
index f03933f..e44a7d9 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -61,7 +61,9 @@ function VoerGame(props: {
 		});
 
 		props.io.on("resign", () => {
-			props.toast("Het potje is opgegeven", "normal", <FlagOutlinedIcon style={{ fontSize: 32 }}/>);
+			props.toast({ message: "Het potje is opgegeven",
+						type: "normal",
+						icon: <FlagOutlinedIcon/>});
 		});
 
 		setIoListeners(true);
diff --git a/pages/login.tsx b/pages/login.tsx
index e33883f..abfca04 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -20,7 +20,9 @@ function submitLogin(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
 
 	if ( !formData.email ||
 		 !formData.password ) {
-		toast("Vul alsjeblieft alle velden in!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Vul alsjeblieft alle velden in!",
+			  type: "error",
+			  icon: <ReportProblemOutlinedIcon/>});
 		return;
 	}
 
@@ -33,10 +35,14 @@ function submitLogin(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
 	.then(() => window.location.pathname = "/")
 	.catch(error => {
 		if (error.response.status === 401) {
-			toast("Verkeerde gebruikersnaam of wachtwoord!", "error", <VpnKeyIcon style={{ fontSize: 32 }}/>);
+			toast({ message: "Verkeerde gebruikersnaam of wachtwoord!",
+				  type: "error",
+				  icon: <VpnKeyIcon/>});
 			return;
 		}
-		toast("Er is iets fout gegaan", "error", <ErrorOutlineIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Er is iets fout gegaan",
+			  type: "error",
+			  icon: <ErrorOutlineIcon/>});
 	});
 }
 
diff --git a/pages/register.tsx b/pages/register.tsx
index b6db605..5c0e37b 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -22,7 +22,9 @@ function submitRegister(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
 	if ( !formData.username ||
 	   	 !formData.email ||
 		 !formData.password ) {
-		toast("Vul alsjeblieft alle velden in!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Vul alsjeblieft alle velden in!",
+			  type: "error",
+			  icon: <ReportProblemOutlinedIcon/>});
 		return;
 	}
 
@@ -38,18 +40,26 @@ function submitRegister(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
 	 */
 
 	if ( formData.username.length < 3 || formData.username.length > 35 ) {
-		toast("Je gebruikersnaam moet tussen de 3 en 35 letters zijn!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Ongeldige gebruikersnaam",
+			  description: "Je gebruikersnaam moet tussen de 3 en 35 letters zijn",
+			  type: "error",
+			  icon: <ReportProblemOutlinedIcon/>});
 		return;
 	}
 
 	if ( !validateEmail(formData.email) ) {
-		toast("Vul alsjeblieft een geldig email-adres in!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Ongeldig email-adres",
+			  type: "error",
+			  icon: <ReportProblemOutlinedIcon/>});
 		return;
 	}
 
 	//TODO: wachtwoord max 72 tekens ivm bcrypt
 	if ( !formData.password.match(passwordRegex) ) {
-		toast("Je wachtwoord moet een hoofdletter, kleine letter en een getal bevatten!", "error", <ReportProblemOutlinedIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Ongeldig wachtwoord",
+			  description: "Je wachtwoord moet een hoofdletter, kleine letter en een getal bevatten",
+			  type: "error",
+			  icon: <ReportProblemOutlinedIcon/>});
 		return;
 	}
 	
@@ -65,7 +75,9 @@ function submitRegister(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
 		window.location.pathname = "/";
 	})
 	.catch(error => {
-		toast("Er is iets fout gegaan", "error", <ErrorOutlineIcon style={{ fontSize: 32 }}/>);
+		toast({ message: "Er is iets fout gegaan",
+			  type: "error",
+			  icon: <ErrorOutlineIcon/>});
 		console.log(error);
 	});
 }
diff --git a/pages/user.tsx b/pages/user.tsx
index dbad76e..ce870af 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -203,13 +203,13 @@ export default function AccountPage() {
 											"endpoint": "/api/social/unblock",
 											"action": `${user.username} gedeblokkeerd`,
 											"relation": "none",
-											"icon": <Icon size="32px" path={mdiAccountCancelOutline}/>,
+											"icon": <Icon size={1} path={mdiAccountCancelOutline}/>,
 										}
 									}[relation] || {
 										"endpoint": "/api/social/block",
 										"action": `${user.username} geblokkeerd`,
 										"relation": "blocked",
-										"icon": <Icon size="32px" path={mdiAccountCancelOutline}/>,
+										"icon": <Icon size={1} path={mdiAccountCancelOutline}/>,
 									}
 
 									axios.request({
@@ -219,9 +219,9 @@ export default function AccountPage() {
 										data: { "id": user?.id }
 									})
 									.then(() => {
-										toast(nextRelation.action,
-											  "confirmation",
-											  nextRelation.icon);
+										toast({ message: nextRelation.action,
+											type: "confirmation",
+											icon: nextRelation.icon });
 										setRelation(nextRelation.relation);
 									});
 								}}/>
@@ -245,25 +245,25 @@ export default function AccountPage() {
 											"endpoint": "/api/social/remove",
 											"action": `${user.username} succesvol verwijderd als vriend`,
 											"relation": "none",
-											"icon": <Icon size="32px" path={mdiAccountMinusOutline}/>,
+											"icon": <Icon size={1} path={mdiAccountMinusOutline}/>,
 										},
 										"outgoing": {
 											"endpoint": "/api/social/remove",
 											"action": `Vriendschapsverzoek naar ${user.username} geannuleerd`,
 											"relation": "none",
-											"icon": <Icon size="32px" path={mdiAccountMinusOutline}/>,
+											"icon": <Icon size={1} path={mdiAccountMinusOutline}/>,
 										},
 										"incoming": {
 											"endpoint": "/api/social/accept",
 											"action": `Vriendschapsverzoek van ${user.username} geaccepteerd`,
 											"relation": "friends",
-											"icon": <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>,
+											"icon": <PersonAddOutlinedIcon/>,
 										},
 									}[relation] || {
 										"endpoint": "/api/social/request",
 										"action": `Vriendschapsverzoek gestuurd naar ${user.username}`,
 										"relation": "outgoing",
-										"icon": <PersonAddOutlinedIcon style={{ fontSize: 32 }}/>,
+										"icon": <PersonAddOutlinedIcon/>,
 									}
 
 									axios.request({
@@ -273,9 +273,9 @@ export default function AccountPage() {
 										data: { "id": user?.id }
 									})
 									.then(() => {
-										toast(nextRelation.action,
-											  "confirmation",
-											  nextRelation.icon);
+										toast({ message: nextRelation.action,
+											type: "confirmation",
+											icon: nextRelation.icon });
 										setRelation(nextRelation.relation);
 									});
 								}}/>