fix: change popup style - replace alert with toast (#18)

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;

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);
     }