From 40b3cb119ff8509e372ce96533968edf8415f7af Mon Sep 17 00:00:00 2001
From: Nikolai R Kristiansen <nikolaik@gmail.com>
Date: Mon, 15 Nov 2021 23:29:14 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Make=20errors=20red?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                   | 20 ++++++++++----------
 frontend/src/components/Toast.module.css    |  4 ++--
 frontend/src/components/Toast.tsx           |  5 +++--
 frontend/src/components/ToastProvider.tsx   | 12 +++++++++---
 frontend/src/features/register/Register.tsx |  4 ++--
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index aaf5f74..56f0e2d 100644
--- a/README.md
+++ b/README.md
@@ -2,17 +2,17 @@
 Before starting, make sure you have a working python and nodejs setup with pyenv and nvm.
 
 ```bash
- apt-get install libmysqlclient-dev
- poetry install
- poetry shell
- python manage.py migrate
- python manage.py runserver
+apt-get install libmysqlclient-dev
+poetry install
+poetry shell
+python manage.py migrate
+python manage.py runserver
 
- # in another terminal
- cd frontend
- npm install
- npm start
- ```
+# in another terminal
+cd frontend
+npm install
+npm start
+```
 
 ## References:
  - We use JS code generation to work with queries/mutations in our graphql API: https://github.com/dotansimha/graphql-typed-document-node
diff --git a/frontend/src/components/Toast.module.css b/frontend/src/components/Toast.module.css
index 5db83ab..6ced53c 100644
--- a/frontend/src/components/Toast.module.css
+++ b/frontend/src/components/Toast.module.css
@@ -1,5 +1,5 @@
 .toast {
   position: absolute;
-  right: 32px;
   bottom: 32px;
-}
+  left: 32px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 6e0276c..c9b827e 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -7,9 +7,10 @@ import { useToast } from "./ToastProvider";
 
 export const Toast: React.FC = () => {
   const ref = useRef<HTMLInputElement>(null);
-  const { visible, showToast, message } = useToast();
+  const { visible, showToast, message, background } = useToast();
 
-  const classes = clsx("toast align-items-center text-white bg-primary border-0", styles.toast);
+  const backgroundColor = `bg-${background}`;
+  const classes = clsx("toast align-items-center text-white bg-primary border-0", backgroundColor, styles.toast);
 
   useEffect(() => {
     if (!ref.current) return;
diff --git a/frontend/src/components/ToastProvider.tsx b/frontend/src/components/ToastProvider.tsx
index 08ff6b2..d846a96 100644
--- a/frontend/src/components/ToastProvider.tsx
+++ b/frontend/src/components/ToastProvider.tsx
@@ -3,8 +3,9 @@ import React, { ReactNode, useContext, useState } from "react";
 interface ToastProps {
   visible: boolean;
   message: string;
-  showToast: (message: string) => void;
+  showToast: (message: string, background?: string) => void;
   hide: () => void;
+  background: string;
 }
 
 const defaultState = {
@@ -14,6 +15,7 @@ const defaultState = {
   showToast: () => {},
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   hide: () => {},
+  background: "primary",
 };
 
 const ToastContext = React.createContext<ToastProps>(defaultState);
@@ -24,9 +26,11 @@ type ToastProviderProps = {
 export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
   const [visible, setVisible] = useState(defaultState.visible);
   const [message, setMessage] = useState("");
+  const [background, setBackground] = useState("");
 
-  const showToast = (newMessage: string) => {
+  const showToast = (newMessage: string, background = "primary") => {
     setMessage(newMessage);
+    setBackground(background);
     if (!visible) {
       setVisible(true);
       setTimeout(() => {
@@ -39,7 +43,9 @@ export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
     setVisible(true);
     setMessage("");
   };
-  return <ToastContext.Provider value={{ visible, showToast, message, hide }}>{children}</ToastContext.Provider>;
+  return (
+    <ToastContext.Provider value={{ visible, showToast, message, hide, background }}>{children}</ToastContext.Provider>
+  );
 };
 
 export const useToast = (): ToastProps => useContext(ToastContext);
diff --git a/frontend/src/features/register/Register.tsx b/frontend/src/features/register/Register.tsx
index 3e96053..5c95b1e 100644
--- a/frontend/src/features/register/Register.tsx
+++ b/frontend/src/features/register/Register.tsx
@@ -78,12 +78,12 @@ export const Register: React.FC = () => {
     }
 
     if (createOrderResponse?.__typename === "FormErrors") {
-      showToast(createOrderResponse.message);
+      showToast(createOrderResponse.message, "danger");
       return;
     }
 
     if (createOrderResponse?.__typename === "InsufficientFunds") {
-      showToast(`${createOrderResponse.message} Du mangler ${createOrderResponse.amountLacking},-`);
+      showToast(`${createOrderResponse.message} Du mangler ${createOrderResponse.amountLacking},-`, "danger");
     }
   };
   return (