🚸 Make errors red

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
+apt-get install libmysqlclient-dev
- poetry install
+poetry install
- poetry shell
+poetry shell
- python manage.py migrate
+python manage.py migrate
- python manage.py runserver
+python manage.py runserver
 
- # in another terminal
+# in another terminal
- cd frontend
+cd frontend
- npm install
+npm install
- npm start
+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

frontend/src/components/Toast.module.css

@@ -1,5 +1,5 @@
 .toast {
   position: absolute;
-  right: 32px;
   bottom: 32px;
-}
+  left: 32px;
+}

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;

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);

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 (