replace modals with a centralized component

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