updated toastify design

frontend/src/main.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
-import { ToastContainer } from "react-toastify";
+import { ToastContainer, Flip } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "./utils/queryClient";
@@ -18,11 +18,11 @@ createRoot(document.getElementById("root")!).render(
         newestOnTop
         closeOnClick
         rtl={false}
-        pauseOnFocusLoss={false}
+        pauseOnFocusLoss
         draggable
         pauseOnHover
         theme="colored"
-        style={{ zIndex: 9999 }}
+        transition={Flip}
       />
     </QueryClientProvider>
   </StrictMode>

frontend/src/utils/toastify.ts

@@ -1,17 +1,18 @@
-import { toast, type ToastOptions } from "react-toastify";
+import { toast, Flip, type ToastOptions } from "react-toastify";
 
 export type ToastType = "success" | "error" | "info" | "warning";
 
 export const myToast = (message: string, msgType: ToastType) => {
   let config: ToastOptions = {
     position: "top-right",
-    autoClose: 5000,
+    autoClose: 3000,
     hideProgressBar: false,
     closeOnClick: true,
     pauseOnHover: true,
     draggable: true,
     progress: undefined,
-    theme: "light",
+    theme: "colored",
+    transition: Flip,
   };
   toast[msgType](message, config);
 };