From 5e4d9e317ed2283c118ae1e57658e49c6c4c0650 Mon Sep 17 00:00:00 2001
From: Nam Anh Dang <dangnamanh05@gmail.com>
Date: Sat, 13 Apr 2024 19:12:06 -0400
Subject: [PATCH 1/6] Changed the success toast to reflect Lazim's design

---
 .../components/AuthManager/AuthManager.tsx    |  3 +-
 .../ConfirmationToast/ConfirmationToast.tsx   | 29 +++++++--
 .../confirmationtoast.module.css              | 62 ++++++++++++++++---
 .../src/components/UserDetail/UserDetail.tsx  | 14 ++---
 frontend/src/context/toastContext.tsx         | 22 ++++++-
 frontend/src/icons/other/green-check.svg      |  4 ++
 frontend/src/icons/other/index.ts             |  1 +
 7 files changed, 109 insertions(+), 26 deletions(-)
 create mode 100644 frontend/src/icons/other/green-check.svg

diff --git a/frontend/src/components/AuthManager/AuthManager.tsx b/frontend/src/components/AuthManager/AuthManager.tsx
index 75163cde8..5eca89e87 100644
--- a/frontend/src/components/AuthManager/AuthManager.tsx
+++ b/frontend/src/components/AuthManager/AuthManager.tsx
@@ -195,7 +195,7 @@ const AuthManager = () => {
   );
 
   const SiteContent = () => {
-    const { visible, message, toastType } = useToast();
+    const { visible, message, toastType, setVisible } = useToast();
     const localUserType = localStorage.getItem('userType');
     return (
       <>
@@ -204,6 +204,7 @@ const AuthManager = () => {
             <Toast
               message={message}
               toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
+              onClose={() => setVisible(false)}
             />,
             document.body
           )}
diff --git a/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx b/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
index c67775253..590613f5b 100644
--- a/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
+++ b/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
@@ -1,19 +1,38 @@
-import React from 'react';
-import { check, block } from '../../icons/other/index';
+import React, { useState } from 'react';
+import { green_check, block, close } from '../../icons/other';
 import styles from './confirmationtoast.module.css';
 import { ToastStatus } from '../../context/toastContext';
 
 type toastProps = {
   message: string;
   toastType?: ToastStatus;
+  onClose: () => void;
 };
 
-const Toast = ({ message, toastType }: toastProps) => {
+const Toast = ({ message, toastType, onClose }: toastProps) => {
   return typeof toastType === 'undefined' ||
     toastType == ToastStatus.SUCCESS ? (
     <div className={`${styles.toast} ${styles.successToast}`}>
-      <img alt="toast check" src={check} />
-      <p className={styles.toasttext}>{message}</p>
+      <button
+        onClick={() => {
+          onClose();
+        }}
+        className={styles.closeButton}
+      >
+        <img src={close} className={styles.closeImg}></img>
+      </button>
+      <div className={styles.toastContent}>
+        <img alt="toast check" src={green_check} />
+        <p className={styles.toasttext}>{message}</p>
+      </div>
+      <button
+        onClick={() => {
+          onClose();
+        }}
+        className={styles.continueButton}
+      >
+        <p className={styles.continueText}>Continue</p>
+      </button>
     </div>
   ) : (
     <div className={`${styles.toast} ${styles.errorToast}`}>
diff --git a/frontend/src/components/ConfirmationToast/confirmationtoast.module.css b/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
index 9c874ff31..4200e29f4 100644
--- a/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
+++ b/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
@@ -1,28 +1,70 @@
 .toast {
   position: fixed;
-  top: 2rem;
+  top: 50%;
   left: 50%;
-  transform: translate(-50%, 0);
+  transform: translate(-50%, -50%);
   margin: auto;
-  padding: 0.75rem 1rem;
+  width: 38.5rem;
+  height: 25.125rem;
+  padding: 1.5rem 1.5rem;
   box-shadow: 4px 6px 30px 5px rgba(0, 0, 0, 0.15);
-  border-radius: 0.625rem;
-  z-index: 999;
+  border-radius: 1rem;
+  z-index: 1000;
   display: flex;
   align-items: center;
+  flex-direction : column;
+  justify-content: space-between;
+}
+
+.toastContent {
+  margin-bottom : 4rem;
+  display: flex;
+  align-items: center;
+  flex-direction : column
 }
 
 .toasttext {
-  font-size: 1.0625rem;
-  height: 100%;
-  margin-left: 0.625rem;
-  color: white;
+  color: #00C48C;
+  text-align: center;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-top: 1.5rem
 }
 
 .successToast {
-  background-color: #00c48c;
+  background-color: white;
 }
 
 .errorToast {
   background-color: #ff0000;
 }
+
+.continueButton {
+  background-color: #00c48c;
+  border : none;
+  border-radius: 9px;
+  padding : 0.4rem 2.5rem;
+  margin-bottom : 2.5rem
+}
+
+.continueText {
+  color: #FFF;
+  text-align: center;
+  font-size: 0.938rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.closeButton {
+  background-color: white;
+  border : none;
+  align-self: flex-end; 
+  border: none;
+  cursor: pointer;
+  background: none;
+  padding: 0;
+  margin-bottom: 1rem;
+}
diff --git a/frontend/src/components/UserDetail/UserDetail.tsx b/frontend/src/components/UserDetail/UserDetail.tsx
index f84ac2f4b..d3078302b 100644
--- a/frontend/src/components/UserDetail/UserDetail.tsx
+++ b/frontend/src/components/UserDetail/UserDetail.tsx
@@ -77,7 +77,7 @@ const UserDetail = ({
   const { refreshUser } = useContext(AuthContext);
   const [showingToast, setToast] = useState(false);
   const { refreshRiders } = useRiders();
-  const { toastType } = useToast();
+  const { toastType, showToast } = useToast();
   const [confirmationModalisOpen, setConfirmationModalisOpen] = useState(false);
 
   const openConfirmationModal = () => {
@@ -97,14 +97,14 @@ const UserDetail = ({
       });
     }
   };
+  if (isShowing && rider) {
+    showToast(
+      `Rider ${rider.active ? 'activated' : 'deactivated'}.`,
+      toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR
+    );
+  }
   return (
     <div className={cn(styles.userDetail, { [styles.rider]: isRider })}>
-      {isShowing && rider ? (
-        <Toast
-          message={`Rider ${rider.active ? 'activated' : 'deactivated'}.`}
-          toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
-        />
-      ) : null}
       <div className={styles.imgContainer}>
         {photoLink && photoLink !== '' ? (
           <img
diff --git a/frontend/src/context/toastContext.tsx b/frontend/src/context/toastContext.tsx
index 4f1e4061b..105737337 100644
--- a/frontend/src/context/toastContext.tsx
+++ b/frontend/src/context/toastContext.tsx
@@ -12,6 +12,7 @@ type toastStat = {
   message: string;
   showToast: (message: string, currentToastType: ToastStatus) => void;
   toastType: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const initalState: toastStat = {
@@ -19,6 +20,7 @@ const initalState: toastStat = {
   message: '',
   showToast: function () {},
   toastType: false,
+  setVisible: function () {},
 };
 
 const ToastContext = React.createContext(initalState);
@@ -35,14 +37,27 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
   const showToast = (inputMessage: string, currentToastType: ToastStatus) => {
     setMessage(inputMessage);
     setVisible(true);
+
+    if (currentToastType == ToastStatus.ERROR) {
+      setToastType(false);
+      setTimeout(() => {
+        setVisible(false);
+      }, 2000);
+    } else {
+      if (currentToastType == ToastStatus.SUCCESS) {
+        setToastType(true);
+      } else {
+        new Error('Invalid Toast type');
+      }
+    }
     currentToastType == ToastStatus.ERROR
       ? setToastType(false)
       : currentToastType == ToastStatus.SUCCESS
       ? setToastType(true)
       : new Error('Invalid Toast type');
-    setTimeout(() => {
-      setVisible(false);
-    }, 2000);
+    // setTimeout(() => {
+    //   setVisible(false);
+    // }, 2000);
   };
 
   return (
@@ -52,6 +67,7 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
         message,
         showToast,
         toastType,
+        setVisible,
       }}
     >
       {children}
diff --git a/frontend/src/icons/other/green-check.svg b/frontend/src/icons/other/green-check.svg
new file mode 100644
index 000000000..5f5cf8521
--- /dev/null
+++ b/frontend/src/icons/other/green-check.svg
@@ -0,0 +1,4 @@
+<svg width="67" height="67" viewBox="0 0 67 67" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M61.4164 30.9316V33.5C61.4129 39.52 59.4636 45.3776 55.8591 50.1992C52.2546 55.0208 47.188 58.5481 41.415 60.255C35.6421 61.9619 29.472 61.7569 23.8251 59.6707C18.1781 57.5844 13.3568 53.7286 10.0803 48.6784C6.80371 43.6282 5.24742 37.6541 5.64352 31.6472C6.03962 25.6402 8.36688 19.9222 12.2782 15.3459C16.1895 10.7697 21.4754 7.58039 27.3474 6.25369C33.2194 4.92699 39.3629 5.53398 44.8618 7.98412" stroke="#00C48C" stroke-width="5.58333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M61.4167 11.1667L33.5 39.1113L25.125 30.7363" stroke="#00C48C" stroke-width="5.58333" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/frontend/src/icons/other/index.ts b/frontend/src/icons/other/index.ts
index 4dd6607ed..96f8b778f 100644
--- a/frontend/src/icons/other/index.ts
+++ b/frontend/src/icons/other/index.ts
@@ -17,3 +17,4 @@ export { default as chevronLeft } from './chevron-left.svg';
 export { default as block } from './blocked.svg';
 export { default as red_trash } from './red-trash.svg';
 export { default as search_icon } from './search.svg';
+export { default as green_check } from './green-check.svg';

From 4bc96f2424f35b9805756d75b6a5d0ec674b730f Mon Sep 17 00:00:00 2001
From: Nam Anh Dang <dangnamanh05@gmail.com>
Date: Sun, 14 Apr 2024 12:57:47 -0400
Subject: [PATCH 2/6] ran prettier

---
 .../confirmationtoast.module.css              | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ConfirmationToast/confirmationtoast.module.css b/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
index 4200e29f4..5dbd8f444 100644
--- a/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
+++ b/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
@@ -12,25 +12,25 @@
   z-index: 1000;
   display: flex;
   align-items: center;
-  flex-direction : column;
+  flex-direction: column;
   justify-content: space-between;
 }
 
 .toastContent {
-  margin-bottom : 4rem;
+  margin-bottom: 4rem;
   display: flex;
   align-items: center;
-  flex-direction : column
+  flex-direction: column;
 }
 
 .toasttext {
-  color: #00C48C;
+  color: #00c48c;
   text-align: center;
   font-size: 1.75rem;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
-  margin-top: 1.5rem
+  margin-top: 1.5rem;
 }
 
 .successToast {
@@ -43,14 +43,14 @@
 
 .continueButton {
   background-color: #00c48c;
-  border : none;
+  border: none;
   border-radius: 9px;
-  padding : 0.4rem 2.5rem;
-  margin-bottom : 2.5rem
+  padding: 0.4rem 2.5rem;
+  margin-bottom: 2.5rem;
 }
 
 .continueText {
-  color: #FFF;
+  color: #fff;
   text-align: center;
   font-size: 0.938rem;
   font-style: normal;
@@ -60,8 +60,8 @@
 
 .closeButton {
   background-color: white;
-  border : none;
-  align-self: flex-end; 
+  border: none;
+  align-self: flex-end;
   border: none;
   cursor: pointer;
   background: none;

From 384ae89fb589d8051853889767ff523730996959 Mon Sep 17 00:00:00 2001
From: Nam Anh Dang <dangnamanh05@gmail.com>
Date: Fri, 26 Apr 2024 15:01:54 -0400
Subject: [PATCH 3/6] Greyed out background of success modal and made it
 unclickable but still can scroll

---
 frontend/package-lock.json                    | 683 ++++++++++++++++--
 .../components/AuthManager/AuthManager.tsx    |  20 +-
 .../ConfirmationToast/ConfirmationToast.tsx   | 108 ++-
 .../confirmationtoast.module.css              |  11 +-
 frontend/src/context/toastContext.tsx         |  38 +-
 5 files changed, 748 insertions(+), 112 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 89d4ca253..54d7c7f47 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -38,6 +38,7 @@
         "react-router-dom": "^5.3.4",
         "react-router-hash-link": "^2.4.0",
         "react-scripts": "4.0.3",
+        "react-select": "^5.8.0",
         "reactjs-popup": "^2.0.4",
         "typescript": "^4.8.4"
       },
@@ -256,11 +257,11 @@
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz",
-      "integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "dependencies": {
-        "@babel/types": "^7.15.4"
+        "@babel/types": "^7.24.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -363,10 +364,18 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
-      "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1663,11 +1672,11 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1685,6 +1694,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
     "node_modules/@babel/template": {
       "version": "7.15.4",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
@@ -1718,11 +1732,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.15.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
-      "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.9",
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -1762,6 +1777,205 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -1829,6 +2043,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -4168,6 +4404,14 @@
         "@types/react-router-dom": "*"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -10119,6 +10363,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -10373,9 +10622,12 @@
       }
     },
     "node_modules/function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/functional-red-black-tree": {
       "version": "1.0.1",
@@ -10720,6 +10972,17 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -11386,11 +11649,11 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
-      "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "dependencies": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18269,6 +18532,46 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-select/node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
@@ -20323,6 +20626,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -20365,6 +20673,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/svg-parser": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -21425,6 +21744,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -22994,11 +23326,11 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz",
-      "integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==",
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
       "requires": {
-        "@babel/types": "^7.15.4"
+        "@babel/types": "^7.24.0"
       }
     },
     "@babel/helper-module-transforms": {
@@ -23074,10 +23406,15 @@
         "@babel/types": "^7.15.4"
       }
     },
+    "@babel/helper-string-parser": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ=="
+    },
     "@babel/helper-validator-identifier": {
-      "version": "7.14.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
-      "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g=="
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A=="
     },
     "@babel/helper-validator-option": {
       "version": "7.14.5",
@@ -23920,11 +24257,18 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.14.8",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.8.tgz",
-      "integrity": "sha512-twj3L8Og5SaCRCErB4x4ajbvBIVV77CGeFglHpeg5WC5FF8TZzBWXtTJ4MqaD9QszLYTtr+IsaAL2rEUevb+eg==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+          "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+        }
       }
     },
     "@babel/runtime-corejs3": {
@@ -23963,11 +24307,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.15.6",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
-      "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.9",
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -23995,6 +24340,163 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+          "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "cosmiconfig": "^7.0.0",
+            "resolve": "^1.19.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+          "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.2.1",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.10.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "requires": {
+            "@babel/code-frame": "^7.0.0",
+            "error-ex": "^1.3.1",
+            "json-parse-even-better-errors": "^2.3.0",
+            "lines-and-columns": "^1.1.6"
+          }
+        },
+        "resolve": {
+          "version": "1.22.8",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+          "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+          "requires": {
+            "is-core-module": "^2.13.0",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
+    "@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "requires": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "requires": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "requires": {}
+    },
+    "@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "@eslint/eslintrc": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
@@ -24040,6 +24542,28 @@
         }
       }
     },
+    "@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "requires": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
     "@gar/promisify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz",
@@ -25785,6 +26309,14 @@
         "@types/react-router-dom": "*"
       }
     },
+    "@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -30374,6 +30906,11 @@
         }
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
@@ -30562,9 +31099,9 @@
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="
     },
     "functional-red-black-tree": {
       "version": "1.0.1",
@@ -30816,6 +31353,14 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
+    "hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "requires": {
+        "function-bind": "^1.1.2"
+      }
+    },
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -31324,11 +31869,11 @@
       }
     },
     "is-core-module": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.6.0.tgz",
-      "integrity": "sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ==",
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
       "requires": {
-        "has": "^1.0.3"
+        "hasown": "^2.0.0"
       }
     },
     "is-data-descriptor": {
@@ -36588,6 +37133,40 @@
         }
       }
     },
+    "react-select": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.0.tgz",
+      "integrity": "sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==",
+      "requires": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "dependencies": {
+        "memoize-one": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+          "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+        }
+      }
+    },
+    "react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
@@ -38224,6 +38803,11 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -38256,6 +38840,11 @@
         }
       }
     },
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
+    },
     "svg-parser": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
@@ -39073,6 +39662,12 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "requires": {}
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/frontend/src/components/AuthManager/AuthManager.tsx b/frontend/src/components/AuthManager/AuthManager.tsx
index 5eca89e87..1976263c5 100644
--- a/frontend/src/components/AuthManager/AuthManager.tsx
+++ b/frontend/src/components/AuthManager/AuthManager.tsx
@@ -195,19 +195,19 @@ const AuthManager = () => {
   );
 
   const SiteContent = () => {
-    const { visible, message, toastType, setVisible } = useToast();
+    const { visible, message, toastType, hideToast } = useToast();
     const localUserType = localStorage.getItem('userType');
+
     return (
       <>
-        {visible &&
-          createPortal(
-            <Toast
-              message={message}
-              toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
-              onClose={() => setVisible(false)}
-            />,
-            document.body
-          )}
+        {
+          <Toast
+            message={message}
+            toastType={toastType}
+            onClose={hideToast}
+            isOpen={visible}
+          />
+        }
         <AuthContext.Provider value={{ logout, id, user, refreshUser }}>
           <SubscribeWrapper userId={id}>
             <Switch>
diff --git a/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx b/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
index 590613f5b..73de5d7e1 100644
--- a/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
+++ b/frontend/src/components/ConfirmationToast/ConfirmationToast.tsx
@@ -1,44 +1,92 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { green_check, block, close } from '../../icons/other';
 import styles from './confirmationtoast.module.css';
 import { ToastStatus } from '../../context/toastContext';
+import FocusTrap from 'focus-trap-react';
+import { createPortal } from 'react-dom';
 
 type toastProps = {
   message: string;
   toastType?: ToastStatus;
   onClose: () => void;
+  isOpen: boolean;
 };
 
-const Toast = ({ message, toastType, onClose }: toastProps) => {
-  return typeof toastType === 'undefined' ||
-    toastType == ToastStatus.SUCCESS ? (
-    <div className={`${styles.toast} ${styles.successToast}`}>
-      <button
-        onClick={() => {
-          onClose();
-        }}
-        className={styles.closeButton}
-      >
-        <img src={close} className={styles.closeImg}></img>
-      </button>
-      <div className={styles.toastContent}>
-        <img alt="toast check" src={green_check} />
-        <p className={styles.toasttext}>{message}</p>
-      </div>
-      <button
-        onClick={() => {
-          onClose();
-        }}
-        className={styles.continueButton}
-      >
-        <p className={styles.continueText}>Continue</p>
-      </button>
-    </div>
+const Toast = ({ message, toastType, onClose, isOpen }: toastProps) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'initial';
+    }
+  }, [isOpen]);
+  return toastType == ToastStatus.SUCCESS ? (
+    <>
+      {isOpen &&
+        createPortal(
+          <FocusTrap
+            focusTrapOptions={{
+              onDeactivate: onClose,
+              returnFocusOnDeactivate: true,
+            }}
+          >
+            <div className={styles.background}>
+              <div
+                className={`${styles.toast} ${styles.successToast}`}
+                id="bruh"
+              >
+                <button
+                  onClick={() => {
+                    onClose();
+                  }}
+                  className={styles.closeButton}
+                >
+                  <img src={close} className={styles.closeImg}></img>
+                </button>
+                <div className={styles.toastContent}>
+                  <img alt="toast check" src={green_check} />
+                  <p className={styles.toasttext}>{message}</p>
+                </div>
+                <button
+                  onClick={() => {
+                    onClose();
+                  }}
+                  className={styles.continueButton}
+                >
+                  <p className={styles.continueText}>Continue</p>
+                </button>
+              </div>
+            </div>
+          </FocusTrap>,
+          document.body
+        )}
+    </>
   ) : (
-    <div className={`${styles.toast} ${styles.errorToast}`}>
-      <img alt="toast block" src={block} />
-      <p className={styles.toasttext}>{message}</p>
-    </div>
+    <>
+      {isOpen &&
+        createPortal(
+          <FocusTrap
+            focusTrapOptions={{
+              onDeactivate: onClose,
+              returnFocusOnDeactivate: true,
+            }}
+          >
+            <div className={`${styles.toast} ${styles.errorToast}`}>
+              <button onClick={onClose} className={styles.closeButton}>
+                <img src={close} className={styles.closeImg}></img>
+              </button>
+              <div className={styles.toastContent}>
+                <img alt="toast check" src={green_check} />
+                <p className={styles.toasttext}>{message}</p>
+              </div>
+              <button onClick={onClose} className={styles.continueButton}>
+                <p className={styles.continueText}>Continue</p>
+              </button>
+            </div>
+          </FocusTrap>,
+          document.body
+        )}
+    </>
   );
 };
 
diff --git a/frontend/src/components/ConfirmationToast/confirmationtoast.module.css b/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
index 5dbd8f444..3c0608a07 100644
--- a/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
+++ b/frontend/src/components/ConfirmationToast/confirmationtoast.module.css
@@ -1,5 +1,6 @@
 .toast {
   position: fixed;
+  background-color: black;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -15,7 +16,15 @@
   flex-direction: column;
   justify-content: space-between;
 }
-
+.background {
+  position: fixed;
+  background-color: rgba(13, 13, 13, 0.6);
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 1000;
+}
 .toastContent {
   margin-bottom: 4rem;
   display: flex;
diff --git a/frontend/src/context/toastContext.tsx b/frontend/src/context/toastContext.tsx
index 105737337..7ea90e252 100644
--- a/frontend/src/context/toastContext.tsx
+++ b/frontend/src/context/toastContext.tsx
@@ -11,16 +11,16 @@ type toastStat = {
   visible: boolean;
   message: string;
   showToast: (message: string, currentToastType: ToastStatus) => void;
-  toastType: boolean;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  toastType: ToastStatus;
+  hideToast: () => void;
 };
 
 const initalState: toastStat = {
   visible: false,
   message: '',
   showToast: function () {},
-  toastType: false,
-  setVisible: function () {},
+  toastType: ToastStatus.ERROR,
+  hideToast: function () {},
 };
 
 const ToastContext = React.createContext(initalState);
@@ -32,32 +32,16 @@ type ToastProviderProps = {
 
 export const ToastProvider = ({ children }: ToastProviderProps) => {
   const [message, setMessage] = useState<string>('');
-  const [visible, setVisible] = useState(false);
-  const [toastType, setToastType] = useState(true);
+  const [visible, setVisible] = useState<boolean>(false);
+  const [toastType, setToastType] = useState<ToastStatus>(ToastStatus.ERROR);
   const showToast = (inputMessage: string, currentToastType: ToastStatus) => {
     setMessage(inputMessage);
     setVisible(true);
+    setToastType(currentToastType);
+  };
 
-    if (currentToastType == ToastStatus.ERROR) {
-      setToastType(false);
-      setTimeout(() => {
-        setVisible(false);
-      }, 2000);
-    } else {
-      if (currentToastType == ToastStatus.SUCCESS) {
-        setToastType(true);
-      } else {
-        new Error('Invalid Toast type');
-      }
-    }
-    currentToastType == ToastStatus.ERROR
-      ? setToastType(false)
-      : currentToastType == ToastStatus.SUCCESS
-      ? setToastType(true)
-      : new Error('Invalid Toast type');
-    // setTimeout(() => {
-    //   setVisible(false);
-    // }, 2000);
+  const hideToast = () => {
+    setVisible(false);
   };
 
   return (
@@ -67,7 +51,7 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
         message,
         showToast,
         toastType,
-        setVisible,
+        hideToast,
       }}
     >
       {children}

From ebcd5cfd336ee1cf98e6773242d5349629c2d0bf Mon Sep 17 00:00:00 2001
From: Nam Anh <dangnamanh05@gmail.com>
Date: Wed, 2 Oct 2024 15:39:01 -0400
Subject: [PATCH 4/6] got it to compile, encountered a bug where clicking on
 employeee goes back to home, also had a problem with adding a new student,
 internal server error

---
 frontend/package-lock.json                    | 11 ---
 .../components/AuthManager/AuthManager.tsx    | 78 +++++++++----------
 frontend/src/context/toastContext.tsx         | 40 +++++++---
 3 files changed, 63 insertions(+), 66 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 447a7a3d2..b2fdb186a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -16574,12 +16574,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",
@@ -18015,11 +18009,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/stylis": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
-      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/frontend/src/components/AuthManager/AuthManager.tsx b/frontend/src/components/AuthManager/AuthManager.tsx
index 973ca19e9..d3fc3f9d1 100644
--- a/frontend/src/components/AuthManager/AuthManager.tsx
+++ b/frontend/src/components/AuthManager/AuthManager.tsx
@@ -161,7 +161,7 @@ const AuthManager = () => {
     };
   }
 
-  const { visible, message, toastType } = useToast();
+  const { visible, message, toastType, setVisible } = useToast();
 
   if (!signedIn) {
     return (
@@ -200,50 +200,42 @@ const AuthManager = () => {
     );
   }
 
-  const SiteContent = () => {
-    const { visible, message, toastType, hideToast } = useToast();
-    const localUserType = localStorage.getItem('userType');
-
-    return (
-      <>
-        {
+  return (
+    <>
+      {visible &&
+        createPortal(
           <Toast
             message={message}
-            toastType={toastType}
-            onClose={hideToast}
-            isOpen={visible}
-          />
-        }
-        <AuthContext.Provider value={{ logout, id, user, refreshUser }}>
-          <SubscribeWrapper userId={id}>
-            <Switch>
-              {localUserType === 'Admin' ? (
-                <PrivateRoute exact path="/" component={AdminRoutes} />
-              ) : (
-                <PrivateRoute forRider path="/" component={RiderRoutes} />
-              )}
-              <PrivateRoute path="/admin" component={AdminRoutes} />
-              <PrivateRoute forRider path="/rider" component={RiderRoutes} />
-              <Route path="*">
-                <Redirect to="" />
-              </Route>
-            </Switch>
-          </SubscribeWrapper>
-        </AuthContext.Provider>
-      </>
-    );
-  };
-
-  const AuthBarrier = () => (
-    <Switch>
-      <Route exact path="/" component={LoginPage} />
-      <Route path="*">
-        <Redirect to="" />
-      </Route>
-    </Switch>
+            toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
+            onClose={() => setVisible(false)}
+            isOpen = {visible}
+          />,
+          document.body
+        )}
+      <AuthContext.Provider value={{ logout, id, user, refreshUser }}>
+        <SubscribeWrapper userId={id}>
+          <Routes>
+            <Route path="/admin/*" element={<AdminRoutes />} />
+            <Route path="/rider/*" element={<RiderRoutes />} />
+            <Route
+              path="/"
+              element={
+                <Navigate
+                  to={
+                    localStorage.getItem('userType') === 'Admin'
+                      ? '/admin/home'
+                      : '/rider/home'
+                  }
+                  replace
+                />
+              }
+            />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </SubscribeWrapper>
+      </AuthContext.Provider>
+    </>
   );
-
-  return signedIn ? <SiteContent /> : <AuthBarrier />;
 };
 
-export default AuthManager;
+export default AuthManager;
\ No newline at end of file
diff --git a/frontend/src/context/toastContext.tsx b/frontend/src/context/toastContext.tsx
index 7ea90e252..28448d4b4 100644
--- a/frontend/src/context/toastContext.tsx
+++ b/frontend/src/context/toastContext.tsx
@@ -11,16 +11,16 @@ type toastStat = {
   visible: boolean;
   message: string;
   showToast: (message: string, currentToastType: ToastStatus) => void;
-  toastType: ToastStatus;
-  hideToast: () => void;
+  toastType: boolean;
+  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 const initalState: toastStat = {
   visible: false,
   message: '',
   showToast: function () {},
-  toastType: ToastStatus.ERROR,
-  hideToast: function () {},
+  toastType: false,
+  setVisible: function () {},
 };
 
 const ToastContext = React.createContext(initalState);
@@ -32,16 +32,32 @@ type ToastProviderProps = {
 
 export const ToastProvider = ({ children }: ToastProviderProps) => {
   const [message, setMessage] = useState<string>('');
-  const [visible, setVisible] = useState<boolean>(false);
-  const [toastType, setToastType] = useState<ToastStatus>(ToastStatus.ERROR);
+  const [visible, setVisible] = useState(false);
+  const [toastType, setToastType] = useState(true);
   const showToast = (inputMessage: string, currentToastType: ToastStatus) => {
     setMessage(inputMessage);
     setVisible(true);
-    setToastType(currentToastType);
-  };
 
-  const hideToast = () => {
-    setVisible(false);
+    if (currentToastType == ToastStatus.ERROR) {
+      setToastType(false);
+      setTimeout(() => {
+        setVisible(false);
+      }, 2000);
+    } else {
+      if (currentToastType == ToastStatus.SUCCESS) {
+        setToastType(true);
+      } else {
+        new Error('Invalid Toast type');
+      }
+    }
+    currentToastType == ToastStatus.ERROR
+      ? setToastType(false)
+      : currentToastType == ToastStatus.SUCCESS
+      ? setToastType(true)
+      : new Error('Invalid Toast type');
+    // setTimeout(() => {
+    //   setVisible(false);
+    // }, 2000);
   };
 
   return (
@@ -51,10 +67,10 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
         message,
         showToast,
         toastType,
-        hideToast,
+        setVisible,
       }}
     >
       {children}
     </ToastContext.Provider>
   );
-};
+};
\ No newline at end of file

From d1c8ce2ce2840116d90ca9ddc9098955491d305d Mon Sep 17 00:00:00 2001
From: Nam Anh <dangnamanh05@gmail.com>
Date: Wed, 2 Oct 2024 15:59:12 -0400
Subject: [PATCH 5/6] ran prettier

---
 frontend/src/components/AuthManager/AuthManager.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AuthManager/AuthManager.tsx b/frontend/src/components/AuthManager/AuthManager.tsx
index d3fc3f9d1..9f7721b1d 100644
--- a/frontend/src/components/AuthManager/AuthManager.tsx
+++ b/frontend/src/components/AuthManager/AuthManager.tsx
@@ -208,7 +208,7 @@ const AuthManager = () => {
             message={message}
             toastType={toastType ? ToastStatus.SUCCESS : ToastStatus.ERROR}
             onClose={() => setVisible(false)}
-            isOpen = {visible}
+            isOpen={visible}
           />,
           document.body
         )}
@@ -238,4 +238,4 @@ const AuthManager = () => {
   );
 };
 
-export default AuthManager;
\ No newline at end of file
+export default AuthManager;

From dfc092f62284d9bc1bc331e704e08ee9eb719aa7 Mon Sep 17 00:00:00 2001
From: Nam Anh <dangnamanh05@gmail.com>
Date: Wed, 2 Oct 2024 16:16:41 -0400
Subject: [PATCH 6/6] ran prettier

---
 frontend/src/context/toastContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/context/toastContext.tsx b/frontend/src/context/toastContext.tsx
index 28448d4b4..105737337 100644
--- a/frontend/src/context/toastContext.tsx
+++ b/frontend/src/context/toastContext.tsx
@@ -73,4 +73,4 @@ export const ToastProvider = ({ children }: ToastProviderProps) => {
       {children}
     </ToastContext.Provider>
   );
-};
\ No newline at end of file
+};