Prepara versao dev 1.0

front-end-dash.aggios.app/components/ThemeToggle.tsx

@@ -1,20 +1,35 @@
 'use client';
 
-import { useTheme } from '@/contexts/ThemeContext';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+import { MoonIcon, SunIcon } from '@heroicons/react/24/outline';
 
 export default function ThemeToggle() {
-    const { toggleTheme } = useTheme();
+    const { resolvedTheme, setTheme } = useTheme();
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+
+    if (!mounted) {
+        return <div className="w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-800" />;
+    }
+
+    const isDark = resolvedTheme === 'dark';
 
     return (
         <button
-            onClick={toggleTheme}
-            className="p-2 rounded-lg bg-gradient-to-r from-primary/10 to-secondary/10 hover:from-primary/20 hover:to-secondary/20 transition-all duration-300 border border-primary/20 hover:border-primary/40"
-            aria-label="Alternar tema"
+            type="button"
+            onClick={() => setTheme(isDark ? 'light' : 'dark')}
+            className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+            aria-label={isDark ? 'Ativar tema claro' : 'Ativar tema escuro'}
+            title={isDark ? 'Alterar para modo claro' : 'Alterar para modo escuro'}
         >
-            {typeof window !== 'undefined' && document.documentElement.classList.contains('dark') ? (
-                <i className="ri-sun-line text-lg gradient-text font-bold" />
+            {isDark ? (
+                <SunIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
             ) : (
-                <i className="ri-moon-line text-lg gradient-text font-bold" />
+                <MoonIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
             )}
         </button>
     );