Create toast provider

frontend/styles/globals.css

@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* TODO Temporary use until NextUI's Toast is released. */
+.Toastify__toast-body {
+  font-family: 'systems-ui';
+}

frontend/utils/ToastProvider.tsx

@@ -12,7 +12,11 @@ const ToastContext = createContext<ToastContextType>(defaultContext);
 
 const ToastProvider = ({ children }: ToastProps) => {
   const showToast = (text: string, mode: string) => {
+    if (mode === 'error') {
+      toast.error(text);
+    } else {
       toast(text, { theme: 'light' });
+    }
   };
 
   const toastContext = {
@@ -21,7 +25,7 @@ const ToastProvider = ({ children }: ToastProps) => {
 
   return (
     <ToastContext.Provider value={toastContext}>
-      <ToastContainer hideProgressBar={true} />
+      <ToastContainer position="bottom-right" hideProgressBar={true} theme="colored" />
       {children}
     </ToastContext.Provider>
   );

frontend/utils/TokenProvider.tsx

@@ -111,12 +111,12 @@ const TokenProvider = ({ toastMessages, locale, children }: TokenProps) => {
       }
       if (isPrivatePath(pathname) && !isSignedIn()) {
         if (tokenExists()) {
-          toastContext.showToast(toastMessages.needSignedIn, 'default');
+          toastContext.showToast(toastMessages.needSignedIn, 'error');
           router.push(`/account/signin`, { locale: locale });
           return;
         }
         if (isTokenValid()) {
-          toastContext.showToast(toastMessages.sessionExpired, 'default');
+          toastContext.showToast(toastMessages.sessionExpired, 'error');
           router.push(`/account/signin`, { locale: locale });
           return;
         }