Add frontend pages imporvements

frontend/src/components/ui/ThemeToggle/ThemeToggle.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { clsx } from 'clsx';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { Button } from '../Button';
-import { Sun, Moon, Computer } from 'lucide-react';
+import { Sun, Moon } from 'lucide-react';
 
 export interface ThemeToggleProps {
   className?: string;
@@ -29,7 +29,7 @@ export interface ThemeToggleProps {
  * 
  * Features:
  * - Multiple display variants (button, dropdown, switch)
- * - Support for light/dark/system themes
+ * - Support for light/dark themes
  * - Configurable size and labels
  * - Accessible keyboard navigation
  * - Click outside to close dropdown
@@ -47,10 +47,11 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = ({
   const themes = [
     { key: 'light' as const, label: 'Claro', icon: Sun },
     { key: 'dark' as const, label: 'Oscuro', icon: Moon },
-    { key: 'auto' as const, label: 'Sistema', icon: Computer },
   ];
 
-  const currentTheme = themes.find(t => t.key === theme) || themes[0];
+  // If theme is 'auto', use the resolved theme for display
+  const displayTheme = theme === 'auto' ? resolvedTheme : theme;
+  const currentTheme = themes.find(t => t.key === displayTheme) || themes[0];
   const CurrentIcon = currentTheme.icon;
 
   // Size mappings
@@ -93,20 +94,18 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = ({
     return () => document.removeEventListener('click', handleClickOutside);
   }, [isDropdownOpen]);
 
-  // Cycle through themes for button variant
+  // Toggle between light and dark for button variant
   const handleButtonToggle = () => {
-    const currentIndex = themes.findIndex(t => t.key === theme);
-    const nextIndex = (currentIndex + 1) % themes.length;
-    setTheme(themes[nextIndex].key);
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
   };
 
   // Handle theme selection
-  const handleThemeSelect = (themeKey: 'light' | 'dark' | 'auto') => {
+  const handleThemeSelect = (themeKey: 'light' | 'dark') => {
     setTheme(themeKey);
     setIsDropdownOpen(false);
   };
 
-  // Button variant - cycles through themes
+  // Button variant - toggles between light and dark
   if (variant === 'button') {
     return (
       <Button
@@ -209,14 +208,14 @@ export const ThemeToggle: React.FC<ThemeToggleProps> = ({
                 'w-full px-4 py-2 text-left text-sm flex items-center gap-3',
                 'hover:bg-[var(--bg-secondary)] transition-colors',
                 'focus:bg-[var(--bg-secondary)] focus:outline-none',
-                theme === key && 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
+                displayTheme === key && 'bg-[var(--bg-secondary)] text-[var(--color-primary)]'
               )}
               role="menuitem"
               aria-label={`Cambiar a tema ${label.toLowerCase()}`}
             >
               <Icon className="w-4 h-4" />
               {label}
-              {theme === key && (
+              {displayTheme === key && (
                 <div className="ml-auto w-2 h-2 bg-[var(--color-primary)] rounded-full" />
               )}
             </button>