From d8bda9866cffba753cd618ead64f07b6d341a3fc Mon Sep 17 00:00:00 2001
From: adi-codeartist001 <adityasri654@gmail.com>
Date: Tue, 26 May 2026 11:31:57 +0530
Subject: [PATCH] fix: change popup style - replace alert with toast (#18)

---
 src/components/ui/Toast.jsx | 25 +++++++++++++++++++++++++
 src/pages/Profile.jsx       |  7 ++++---
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ui/Toast.jsx

diff --git a/src/components/ui/Toast.jsx b/src/components/ui/Toast.jsx
new file mode 100644
index 0000000..06b4129
--- /dev/null
+++ b/src/components/ui/Toast.jsx
@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+
+const Toast = ({ message, type = "success", onClose }) => {
+  useEffect(() => {
+    const timer = setTimeout(onClose, 3000);
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return (
+    <div
+      className={`fixed bottom-6 left-1/2 -translate-x-1/2 z-50 flex items-center gap-3 px-5 py-3 rounded-xl shadow-lg text-sm font-semibold backdrop-blur-sm border transition-all
+        ${type === "success"
+          ? "bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400"
+          : "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400"
+        }`}
+      role="status"
+      aria-live="polite"
+    >
+      <span>{type === "success" ? "✅" : "❌"}</span>
+      {message}
+    </div>
+  );
+};
+
+export default Toast;
\ No newline at end of file
diff --git a/src/pages/Profile.jsx b/src/pages/Profile.jsx
index c207c17..d561df9 100644
--- a/src/pages/Profile.jsx
+++ b/src/pages/Profile.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import Toast from "../components/ui/Toast";
 import LottiePlayer from "../components/ui/LottiePlayer";
 import {
   MapPin,
@@ -26,7 +27,7 @@ export const Profile = () => {
   const { userData, user, setUserData } = useAuth();
   const [copied, setCopied] = useState(false);
   const [rank, setRank] = useState("Loading...");
-  
+  const [toast, setToast] = useState(null);
   // Social links edit states
   const [editingSocial, setEditingSocial] = useState(null);
   const [editValue, setEditValue] = useState("");
@@ -138,10 +139,10 @@ export const Profile = () => {
       setEditingSocial(null);
       setEditValue("");
       
-      alert(`${type.charAt(0).toUpperCase() + type.slice(1)} updated successfully!`);
+      setToast({ message: `${type.charAt(0).toUpperCase() + type.slice(1)} updated successfully!`, type: "success" });
     } catch (err) {
       console.error("Error updating social link:", err);
-      alert(`Failed to update ${type}. Please try again.`);
+      setToast({ message: `Failed to update ${type}. Please try again.`, type: "error" });
     } finally {
       setUpdating(false);
     }