added toastify

src/App.tsx

@@ -1,17 +1,30 @@
 import { BrowserRouter } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import "./toast.css";
 import { AuthProvider } from "./context/AuthContext";
 import { ThemeProvider } from "./context/ThemeContext";
 import AppRoutes from "./routes";
 
 const App = () => {
   return (
+    <BrowserRouter>
       <AuthProvider>
         <ThemeProvider>
-        <BrowserRouter>
           <AppRoutes />
-        </BrowserRouter>
+          <ToastContainer
+            position="top-right"
+            autoClose={3000}
+            hideProgressBar={false}
+            newestOnTop
+            closeOnClick
+            pauseOnHover
+            draggable
+            closeButton={true}
+          />
         </ThemeProvider>
       </AuthProvider>
+    </BrowserRouter>
   );
 };
 

src/toast.css

@@ -0,0 +1,55 @@
+/* Toast container */
+.Toastify__toast-container {
+  padding: 16px;
+}
+
+/* Toast base */
+.Toastify__toast {
+  border-radius: 12px;
+  padding: 14px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  background: #0f172a;
+  color: #e5e7eb;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Success */
+.Toastify__toast--success {
+  border-left: 4px solid #22c55e;
+}
+
+/* Error */
+.Toastify__toast--error {
+  border-left: 4px solid #ef4444;
+}
+
+/* Info */
+.Toastify__toast--info {
+  border-left: 4px solid #3b82f6;
+}
+
+/* Warning */
+.Toastify__toast--warning {
+  border-left: 4px solid #f59e0b;
+}
+
+/* Progress bar */
+.Toastify__progress-bar {
+  height: 3px;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+/* Close Button */
+.Toastify__close-button {
+  color: #94a3b8;
+  opacity: 0.7;
+  align-self: flex-start;
+  margin-top: 2px;
+}
+
+.Toastify__close-button:hover {
+  color: #e5e7eb;
+  opacity: 1;
+}