Update Toast component to use custom container and improve styling

frontend/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 // import { setOpenApiBase } from 'api/configOpenApi';
 import Router from './routes';
 import { TokenContext } from 'api';
-import { Toaster } from 'react-hot-toast';
+import { ToastContainer } from 'components/toasts';
 
 function App() {
   const [accessToken, setAccessToken] = useState<string>('');
@@ -16,7 +16,7 @@ function App() {
   return (
     <TokenContext.Provider value={{ accessToken, setAccessToken, refreshToken, setRefreshToken }}>
       <Router />
-			<Toaster position="bottom-right" />
+      <ToastContainer />
     </TokenContext.Provider>
   );
 }

frontend/src/components/toasts/Toast/index.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import { MdInfoOutline } from 'react-icons/md';
+
+interface ToastProps {
+  id?: string;
+  message: string;
+  type?: 'info' | 'success' | 'error';
+  duration?: number;
+}
+
+const Toast = ({ id, message, type = 'info', duration = 4000 }: ToastProps) => {
+  const [progress, setProgress] = useState(100);
+  const intervalRef = useRef<number | null>(null);
+  const color = type == 'info' ? 'bg-radial-ultra-light' : type == 'success' ? 'bg-green-600' : 'bg-red-600';
+  const progressColor =
+    type == 'info' ? 'bg-gray-200' : type == 'success' ? 'bg-green-200' : 'bg-red-200';
+
+  const startProgress = () => {
+    if (!intervalRef.current) {
+      intervalRef.current = window.setInterval(() => {
+        setProgress(prev => Math.max(prev - 100 / (duration / 10), 0));
+      }, 10);
+    }
+  };
+
+  const stopProgress = () => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    startProgress();
+    return stopProgress;
+  }, []);
+
+  return (
+    <div
+      onMouseEnter={stopProgress}
+      onMouseLeave={startProgress}
+      className="w-80 rounded flex-col justify-start items-start inline-flex">
+      <div className={`self-stretch h-1 rounded-t ${color}`}>
+        <div style={{ width: `${progress}%` }} className={`h-1 ${progressColor} `}></div>
+      </div>
+      <div
+        className={`w-full py-2 px-3 shadow justify-center items-center gap-2 inline-flex rounded-b ${color}`}>
+        <div className="w-4 h-4 relative">
+          <MdInfoOutline className="text-white" />
+        </div>
+        <div className="grow shrink basis-0 flex-col justify-start items-start gap-1 inline-flex">
+          <p className="self-stretch text-white text-sm w-full">{message}</p>
+        </div>
+        <button
+          className="text-center text-neutral-300 hover:text-neutral-200 text-sm"
+          onClick={() => toast.remove(id)}>
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;

frontend/src/components/toasts/index.ts

@@ -0,0 +1,2 @@
+export {default as ToastContainer } from './ToastContainer';
+export {default as Toast } from './Toast';

frontend/src/features/projects/components/CreateProjectModal.tsx

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from '@headlessui/react';
 import EmphasisButton from 'components/buttons/EmphasisButton';
 import { TextInput } from 'components/inputs';
-import Toast from 'components/Toast';
+import Toast from 'components/toasts/Toast';
 import { Fragment } from 'react';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
@@ -21,7 +21,8 @@ export const CreateProjectModal = ({ isOpen, onClose }: CreateProjectModalProps)
 
   const onSubmit = () => {
     close();
-    toast.custom(t => <Toast customMessage="Project created successfully" toast={t} />);
+    toast.success("Project created successfully");
+    //toast.custom(t => <Toast customMessage="Project created successfully" toast={t} />);
   };
 
   const { formik } = useCreateProject({ onSubmit: onSubmit });

frontend/src/features/projects/pages/ProjectSettings.tsx

@@ -8,7 +8,7 @@ import { useProjectsStore } from 'features/projects/stores/useProjectsStore';
 import { MdAdd } from 'react-icons/md';
 import useSettings from '../hooks/useProjectSettings';
 import toast from 'react-hot-toast';
-import Toast from 'components/Toast';
+import Toast from 'components/toasts/Toast';
 
 const headers = [
   { propertyName: 'email', displayName: 'Email' },
@@ -101,9 +101,7 @@ const Settings = () => {
                     className="self-start"
                     onClick={async () =>
                       await deleteProject(selectedProject.data.id?.toString() ?? '', () =>
-                        toast.custom(t => (
-                          <Toast toast={t} customMessage="Project deleted successfully" />
-                        )),
+                        toast.success('Project deleted successfully'),
                       )
                     }
                   />