From 1ca65e26705e8fdc23b104132d3960a858479295 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Thu, 12 Mar 2026 18:03:04 +0800
Subject: [PATCH] replace modals with a centralized component

---
 src/components/CreateWorkspaceModal.tsx | 306 ++++++++++++------------
 src/components/Modal.tsx                |  67 ++++++
 src/components/Navbar.tsx               |  31 ++-
 src/pages/Profile.tsx                   | 190 ++++++++-------
 4 files changed, 335 insertions(+), 259 deletions(-)
 create mode 100644 src/components/Modal.tsx

diff --git a/src/components/CreateWorkspaceModal.tsx b/src/components/CreateWorkspaceModal.tsx
index 15111d4..8d9017c 100644
--- a/src/components/CreateWorkspaceModal.tsx
+++ b/src/components/CreateWorkspaceModal.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from "react";
-import { X, Search, Trash2, UserPlus, Loader2, AlertCircle } from "lucide-react";
+import { Search, Trash2, UserPlus, Loader2, AlertCircle } from "lucide-react";
 import { searchUserByExactMobile, type SearchedUser } from "../api/users";
-// Adjust the import path for your useLanguage hook if necessary
 import { useTranslation } from "../hooks/useTranslation";
+import { Modal } from "./Modal";
 
 export interface WorkspaceMemberInput extends SearchedUser {
   role: "admin" | "member";
@@ -87,156 +87,13 @@ export const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 backdrop-blur-sm transition-opacity" dir={isFa ? "rtl" : "ltr"}>
-      <div className="w-full max-w-lg bg-white dark:bg-slate-900 rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
-        
-        <div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800">
-          <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100">
-            {t.workspace?.createNew || "Create New Workspace"}
-          </h2>
-          <button
-            type="button"
-            onClick={onClose}
-            className="p-1.5 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-5 space-y-5">
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
-              {t.workspace?.nameLabel || "Workspace Name"} <span className="text-red-500">*</span>
-            </label>
-            <input
-              type="text"
-              required
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
-              placeholder={t.workspace?.namePlaceholder || "e.g. Design Team"}
-            />
-          </div>
-
-          <div className="space-y-1.5">
-            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
-              {t.workspace?.descriptionLabel || "Description"}
-            </label>
-            <textarea
-              value={description}
-              onChange={(e) => setDescription(e.target.value)}
-              rows={2}
-              className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
-              placeholder={t.workspace?.descriptionPlaceholder || "What is this workspace for?"}
-            />
-          </div>
-
-          <div className="space-y-3 pt-4 border-t border-slate-200 dark:border-slate-800">
-            <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
-              {t.workspace?.inviteMembers || "Invite Members (Exact Mobile Number)"}
-            </label>
-            
-            <div className="relative">
-              <div className={`absolute inset-y-0 ${isFa ? "right-0 pr-3" : "left-0 pl-3"} flex items-center pointer-events-none`}>
-                {isSearching ? (
-                  <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />
-                ) : (
-                  <Search className="w-4 h-4 text-slate-400" />
-                )}
-              </div>
-              <input
-                type="text"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                placeholder={t.workspace?.searchMemberPlaceholder || "e.g. 09123456789 or +989123456789"}
-                className={`w-full ${isFa ? "pr-9 pl-3" : "pl-9 pr-3"} py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-800/50 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}
-                dir="ltr"
-              />
-            </div>
-
-            {/* Error State */}
-            {searchError && (
-              <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
-                <AlertCircle className="w-4 h-4" />
-                {t.workspace?.userNotFound || "No user found with this exact number."}
-              </div>
-            )}
-
-            {/* Success State - Single Result */}
-            {searchResult && (
-              <div className="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
-                {searchResult.profile_picture ? (
-                  <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
-                ) : (
-                  <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
-                    {searchResult.first_name?.[0] || "U"}
-                  </div>
-                )}
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
-                    {searchResult.first_name} {searchResult.last_name}
-                  </p>
-                  <p className="text-xs text-slate-500 dark:text-slate-400 truncate" dir="ltr">
-                    {searchResult.mobile}
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  onClick={handleAddMember}
-                  disabled={members.some(m => m.id === searchResult.id)}
-                  className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-400 text-white text-sm font-medium rounded-md transition-colors flex items-center gap-1.5"
-                >
-                  <UserPlus className="w-4 h-4" />
-                  {members.some(m => m.id === searchResult.id) 
-                    ? (t.workspace?.userAlreadyAdded || "Added") 
-                    : (t.workspace?.addMember || "Add")}
-                </button>
-              </div>
-            )}
-
-            {/* Added Members List */}
-            {members.length > 0 && (
-              <div className="space-y-2 mt-4 pt-4 border-t border-slate-100 dark:border-slate-800">
-                <h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">
-                  {t.workspace?.selectedMembers || "Selected Members"}
-                </h4>
-                {members.map((member) => (
-                  <div key={member.id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50">
-                    {member.profile_picture ? (
-                      <img src={member.profile_picture} alt={member.first_name} className="w-8 h-8 rounded-full object-cover" />
-                    ) : (
-                      <div className="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-300 font-medium text-sm">
-                        {member.first_name?.[0] || "U"}
-                      </div>
-                    )}
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
-                        {member.first_name} {member.last_name}
-                      </p>
-                    </div>
-                    <select
-                      value={member.role}
-                      onChange={(e) => handleRoleChange(member.id, e.target.value as "admin" | "member")}
-                      className="px-2 py-1.5 border border-slate-300 dark:border-slate-700 rounded-md bg-white dark:bg-slate-900 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
-                    >
-                      <option value="member">{t.workspace?.roleMember || "Member"}</option>
-                      <option value="admin">{t.workspace?.roleAdmin || "Admin"}</option>
-                    </select>
-                    <button
-                      type="button"
-                      onClick={() => handleRemoveMember(member.id)}
-                      className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-md transition-colors"
-                    >
-                      <Trash2 className="w-4 h-4" />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        </form>
-
-        <div className="p-4 border-t border-slate-200 dark:border-slate-800 flex justify-end gap-3 bg-slate-50 dark:bg-slate-800/50">
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t.workspace?.createNew || "Create New Workspace"}
+      isFa={isFa}
+      footer={
+        <>
           <button
             type="button"
             onClick={onClose}
@@ -252,13 +109,144 @@ export const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
             className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2"
           >
             {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
-            {isLoading 
-              ? (t.workspace?.creating || "Creating...") 
-              : (t.workspace?.submit || "Create Workspace")}
+            {isLoading ? (t.workspace?.creating || "Creating...") : (t.workspace?.submit || "Create")}
           </button>
+        </>
+      }
+    >
+      <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto p-5 space-y-5">
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.workspace?.nameLabel || "Workspace Name"} <span className="text-red-500">*</span>
+          </label>
+          <input
+            type="text"
+            required
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            placeholder={t.workspace?.namePlaceholder || "e.g. Design Team"}
+          />
         </div>
 
-      </div>
-    </div>
-  );
-};
+        <div className="space-y-1.5">
+          <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.workspace?.descriptionLabel || "Description"}
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            rows={2}
+            className="w-full px-3 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
+            placeholder={t.workspace?.descriptionPlaceholder || "What is this workspace for?"}
+          />
+        </div>
+
+        <div className="space-y-3 pt-4 border-t border-slate-200 dark:border-slate-800">
+          <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+            {t.workspace?.inviteMembers || "Invite Members (Exact Mobile Number)"}
+          </label>
+          
+          <div className="relative">
+            <div className={`absolute inset-y-0 ${isFa ? "right-0 pr-3" : "left-0 pl-3"} flex items-center pointer-events-none`}>
+              {isSearching ? (
+                <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />
+              ) : (
+                <Search className="w-4 h-4 text-slate-400" />
+              )}
+            </div>
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder={t.workspace?.searchMemberPlaceholder || "e.g. 09123456789 or +989123456789"}
+              className={`w-full ${isFa ? "pr-9 pl-3" : "pl-9 pr-3"} py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-slate-50 dark:bg-slate-800/50 text-slate-900 dark:text-slate-100 focus:outline-none focus:ring-2 focus:ring-blue-500`}
+              dir="ltr"
+            />
+          </div>
+
+          {/* Error State */}
+          {searchError && (
+            <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
+              <AlertCircle className="w-4 h-4" />
+              {t.workspace?.userNotFound || "No user found with this exact number."}
+            </div>
+          )}
+
+          {/* Success State - Single Result */}
+          {searchResult && (
+            <div className="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
+              {searchResult.profile_picture ? (
+                <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
+              ) : (
+                <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
+                  {searchResult.first_name?.[0] || "U"}
+                </div>
+              )}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
+                  {searchResult.first_name} {searchResult.last_name}
+                </p>
+                <p className="text-xs text-slate-500 dark:text-slate-400 truncate" dir="ltr">
+                  {searchResult.mobile}
+                </p>
+              </div>
+              <button
+                type="button"
+                onClick={handleAddMember}
+                disabled={members.some(m => m.id === searchResult.id)}
+                className="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:bg-slate-400 text-white text-sm font-medium rounded-md transition-colors flex items-center gap-1.5"
+              >
+                <UserPlus className="w-4 h-4" />
+                {members.some(m => m.id === searchResult.id) 
+                  ? (t.workspace?.userAlreadyAdded || "Added") 
+                  : (t.workspace?.addMember || "Add")}
+              </button>
+            </div>
+          )}
+
+          {/* Added Members List */}
+          {members.length > 0 && (
+            <div className="space-y-2 mt-4 pt-4 border-t border-slate-100 dark:border-slate-800">
+              <h4 className="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">
+                {t.workspace?.selectedMembers || "Selected Members"}
+              </h4>
+              {members.map((member) => (
+                <div key={member.id} className="flex items-center gap-3 p-2 rounded-lg bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-700/50">
+                  {member.profile_picture ? (
+                    <img src={member.profile_picture} alt={member.first_name} className="w-8 h-8 rounded-full object-cover" />
+                  ) : (
+                    <div className="w-8 h-8 rounded-full bg-slate-200 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-300 font-medium text-sm">
+                      {member.first_name?.[0] || "U"}
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
+                      {member.first_name} {member.last_name}
+                    </p>
+                  </div>
+                  <select
+                    value={member.role}
+                    onChange={(e) => handleRoleChange(member.id, e.target.value as "admin" | "member")}
+                    className="px-2 py-1.5 border border-slate-300 dark:border-slate-700 rounded-md bg-white dark:bg-slate-900 text-sm text-slate-700 dark:text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer"
+                  >
+                    <option value="member">{t.workspace?.roleMember || "Member"}</option>
+                    <option value="admin">{t.workspace?.roleAdmin || "Admin"}</option>
+                  </select>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveMember(member.id)}
+                    className="p-1.5 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-md transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </form>
+
+    </Modal>
+);
+}
\ No newline at end of file
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..6dc5a0f
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { X } from "lucide-react";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  maxWidth?: string;
+  isFa?: boolean;
+}
+
+export const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  maxWidth = "max-w-lg",
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div 
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      onClick={onClose}
+    >
+      <div 
+        className={`bg-white dark:bg-slate-900 rounded-2xl shadow-xl w-full ${maxWidth} overflow-hidden`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800 shrink-0">
+          <h2 className="text-lg font-semibold text-slate-800 dark:text-slate-100">
+            {title}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-1.5 rounded-md text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-5">{children}</div>
+
+        {footer && (
+          <div className="p-4 border-t border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-800/50 shrink-0 flex justify-end gap-3">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 5f442b6..24f9a3f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -15,12 +15,21 @@ export function Navbar() {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [user, setUser] = useState<any>(null)
   const dropdownRef = useRef<HTMLDivElement>(null)
+  const isFa = lang === 'fa';
   
-  const [isDarkMode, setIsDarkMode] = useState(() => 
-    document.documentElement.classList.contains('dark')
-  )
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme) return savedTheme === 'dark';
+    return document.documentElement.classList.contains('dark');
+  });
 
-  const isFa = lang === 'fa'
+  useEffect(() => {
+    if (isDarkMode) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [isDarkMode]);
 
   useEffect(() => {
     const fetchUser = async () => {
@@ -67,10 +76,10 @@ export function Navbar() {
   }
 
   const toggleTheme = () => {
-    const isDark = document.documentElement.classList.toggle('dark')
-    setIsDarkMode(isDark)
-    localStorage.setItem('theme', isDark ? 'dark' : 'light')
-  }
+    const newThemeState = !isDarkMode;
+    setIsDarkMode(newThemeState);
+    localStorage.setItem('theme', newThemeState ? 'dark' : 'light');
+  };
 
   const toggleLanguage = () => {
     const newLang = isFa ? 'en' : 'fa'
@@ -84,13 +93,13 @@ export function Navbar() {
 
   return (
     <>
-      <header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-6 py-4 flex items-center justify-between transition-colors">
+      <header className="border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-8 py-6 flex items-center justify-between transition-colors">
         <div 
           className="flex items-center gap-2 cursor-pointer" 
           onClick={() => navigate("/")}
         >
           <span className="relative z-20 flex items-center gap-2 font-bold text-xl tracking-tight text-slate-900 dark:text-slate-50">
-            <Command className="h-6 w-6" />
+            <Command className="h-7 w-7" />
             Qlockify
           </span>
         </div>
@@ -101,7 +110,7 @@ export function Navbar() {
             <div className="relative" ref={dropdownRef}>
               <button
                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                className="w-10 h-10 rounded-full overflow-hidden border-2 border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 transition-all focus:outline-none"
+                className="w-12 h-12 rounded-full overflow-hidden border-2 border-slate-200 dark:border-slate-700 hover:border-blue-500 dark:hover:border-blue-500 transition-all focus:outline-none"
               >
                 {user.profile_picture ? (
                   <img 
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index f68c6d7..896923a 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -11,6 +11,7 @@ import { Button } from "../components/ui/button"
 import { Camera, Edit2, Trash2, User as UserIcon, UploadCloud } from "lucide-react"
 import JalaliDatePicker from "../components/ui/JalaliDatePicker"
 import { toast } from "sonner"
+import { Modal } from "../components/Modal"
 
 export interface UserProfile {
   id?: string;
@@ -261,18 +262,33 @@ export default function Profile() {
 
         {/* Edit Profile Modal */}
         {isEditModalOpen && (
-          <div 
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
-            onClick={() => !isSaving && setIsEditModalOpen(false)}
+          <Modal
+            isOpen={isEditModalOpen}
+            isFa={isFa}
+            onClose={() => setIsEditModalOpen(false)}
+            title={t.profile?.title || "Edit Profile"}
+            maxWidth="max-w-lg"
+            footer={
+              <>
+                <button
+                  type="button"
+                  onClick={() => setIsEditModalOpen(false)}
+                  className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-lg"
+                >
+                  {t.cancel || "Cancel"}
+                </button>
+                <button
+                  onClick={handleSaveProfile}
+                  disabled={isSaving}
+                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg disabled:opacity-50"
+                >
+                  {isSaving ? "Saving..." : t.profile?.save || "Save"}
+                </button>
+              </>
+            }
           >
-            <div 
-              className="w-full max-w-lg rounded-xl bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800"
-              onClick={(e) => e.stopPropagation()}
-            >
-              <h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
-                {t.profile?.editInfo || 'Edit Profile'}
-              </h2>
-              
+            <div className="space-y-4">
+             
               <div className="space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                   <div>
@@ -323,98 +339,94 @@ export default function Profile() {
                   />
                 </div>
               </div>
-
-              <div className="mt-6 flex justify-end gap-3">
-                <Button variant="outline" onClick={() => setIsEditModalOpen(false)} disabled={isSaving}>
-                  {t.profile?.cancel || t.cancel || 'Cancel'}
-                </Button>
-                <Button onClick={handleSaveProfile} disabled={isSaving}>
-                  {isSaving ? '...' : (t.profile?.save || 'Save')}
-                </Button>
-              </div>
             </div>
-          </div>
+          </Modal>
         )}
 
         {/* Profile Picture Modal */}
+        
         {isPicModalOpen && (
-          <div 
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm px-4"
-            onClick={() => !isSaving && setIsPicModalOpen(false)}
-          >
-            <div 
-              className="w-full max-w-sm rounded-xl bg-white p-6 shadow-lg dark:bg-slate-900 border dark:border-slate-800"
-              onClick={(e) => e.stopPropagation()}
+        <Modal
+          isOpen={isPicModalOpen}
+          onClose={() => !isSaving && setIsPicModalOpen(false)}
+          title={t.profile?.changePicture || 'Profile Picture'}
+          maxWidth="max-w-sm"
+          footer={
+            <Button 
+              variant="outline" 
+              onClick={() => setIsPicModalOpen(false)} 
+              disabled={isSaving}
             >
-              <h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
-                {t.profile?.changePicture || 'Profile Picture'}
-              </h2>
+              {t.profile?.cancel || t.cancel || 'Cancel'}
+            </Button>
+          }
+        >
+          <div className="space-y-4">
+            {/* Drag and Drop Zone */}
+            <div 
+              onDragEnter={handleDrag}
+              onDragLeave={handleDrag}
+              onDragOver={handleDrag}
+              onDrop={handleDrop}
+              onClick={() => fileInputRef.current?.click()}
+              className={`relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-xl cursor-pointer transition-colors ${
+                dragActive 
+                  ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" 
+                  : "border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80"
+              }`}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+              />
               
-              <div className="space-y-4">
-                
-                {/* Drag and Drop Zone */}
-                <div 
-                  onDragEnter={handleDrag}
-                  onDragLeave={handleDrag}
-                  onDragOver={handleDrag}
-                  onDrop={handleDrop}
-                  onClick={() => fileInputRef.current?.click()}
-                  className={`relative flex flex-col items-center justify-center w-full h-48 border-2 border-dashed rounded-xl cursor-pointer transition-colors ${
-                    dragActive 
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" 
-                      : "border-slate-300 dark:border-slate-700 bg-slate-50 dark:bg-slate-800 hover:bg-slate-100 dark:hover:bg-slate-800/80"
-                  }`}
-                >
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/*"
-                    className="hidden"
-                    onChange={(e) => setSelectedFile(e.target.files?.[0] || null)}
+              {selectedFile ? (
+                <div className="absolute inset-0 p-2">
+                  <img 
+                    src={URL.createObjectURL(selectedFile)} 
+                    alt="Preview" 
+                    className="w-full h-full object-contain rounded-lg" 
                   />
-                  
-                  {selectedFile ? (
-                    <div className="absolute inset-0 p-2">
-                      <img 
-                        src={URL.createObjectURL(selectedFile)} 
-                        alt="Preview" 
-                        className="w-full h-full object-contain rounded-lg" 
-                      />
-                    </div>
-                  ) : (
-                    <div className="flex flex-col items-center text-center p-4">
-                      <UploadCloud className="h-10 w-10 text-slate-400 mb-2" />
-                      <p className="text-sm font-medium text-slate-700 dark:text-slate-300">
-                        { t.profile?.imageInput }
-                      </p>
-                      <p className="text-xs text-slate-500 mt-1">
-                        SVG, PNG, JPG (MAX. 800x400px)
-                      </p>
-                    </div>
-                  )}
                 </div>
-
-                <div className="flex flex-col gap-2 mt-4">
-                  <Button onClick={handlePictureUpload} disabled={!selectedFile || isSaving} className="w-full">
-                    {t.profile?.upload || 'Upload'}
-                  </Button>
-                  
-                  {user.profile_picture && (
-                    <Button variant="destructive" onClick={handleDeletePicture} disabled={isSaving} className="w-full flex items-center justify-center gap-2">
-                      <Trash2 className="h-4 w-4" />
-                      {t.profile?.remove || "Remove"}
-                    </Button>
-                  )}
+              ) : (
+                <div className="flex flex-col items-center text-center p-4">
+                  <UploadCloud className="h-10 w-10 text-slate-400 mb-2" />
+                  <p className="text-sm font-medium text-slate-700 dark:text-slate-300">
+                    { t.profile?.imageInput }
+                  </p>
+                  <p className="text-xs text-slate-500 mt-1">
+                    SVG, PNG, JPG (MAX. 800x400px)
+                  </p>
                 </div>
-              </div>
+              )}
+            </div>
 
-              <div className="mt-6 flex justify-end">
-                <Button variant="outline" onClick={() => setIsPicModalOpen(false)} disabled={isSaving}>
-                  {t.profile?.cancel || t.cancel || 'Cancel'}
+            <div className="flex flex-col gap-2 mt-4">
+              <Button 
+                onClick={handlePictureUpload} 
+                disabled={!selectedFile || isSaving} 
+                className="w-full"
+              >
+                {t.profile?.upload || 'Upload'}
+              </Button>
+              
+              {user?.profile_picture && (
+                <Button 
+                  variant="destructive" 
+                  onClick={handleDeletePicture} 
+                  disabled={isSaving} 
+                  className="w-full flex items-center justify-center gap-2"
+                >
+                  <Trash2 className="h-4 w-4" />
+                  {t.profile?.remove || "Remove"}
                 </Button>
-              </div>
+              )}
             </div>
           </div>
+        </Modal>
         )}
 
       </div>