Nurfog/openccb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): mobile nav menus, light-mode contrast for Combobox, AppHeader and globals

Browse Source 
- Studio Navbar: add hamburger button + slide-out sidebar for mobile
- Studio Combobox: replace dark-hardcoded colors with light/dark variants
- Experience AppHeader: fix low-contrast borders/text/icons in light mode;
  mobile sidebar now uses bg-white/bg-gray-900 instead of glass-only
- Experience globals.css: glass-card hover visible in light mode;
  scrollbar thumb visible in light mode (rgba black instead of white)
This commit is contained in:
Juan Enrique Allende Cifuentes
2026-04-09 09:54:38 -04:00
parent 64a9fd6ca2
commit ac3434454b
4 changed files with 187 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/studio/src/components/Combobox.tsx
+11 -9
View File
@@ -45,17 +45,17 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
onClick={() => setIsOpen(!isOpen)}
aria-haspopup="listbox"
aria-expanded={isOpen}
className="flex items-center justify-between w-full bg-black/40 border border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
className="flex items-center justify-between w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/10 rounded-lg px-4 py-2.5 cursor-pointer hover:border-gray-400 dark:hover:border-white/20 transition-all focus:outline-none focus:ring-2 focus:ring-blue-500/50"
>
<span className={selectedOption ? "text-white" : "text-gray-500"}>
<span className={selectedOption ? "text-gray-900 dark:text-white" : "text-gray-400 dark:text-gray-500"}>
{selectedOption ? selectedOption.name : placeholder}
</span>
<ChevronDown size={18} className={`text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
<ChevronDown size={18} className={`text-gray-400 dark:text-gray-500 transition-transform ${isOpen ? "rotate-180" : ""}`} aria-hidden="true" />
</button>
{isOpen && (
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-[#1a1d23] border border-white/10 rounded-lg shadow-2xl overflow-hidden glass-card animate-in fade-in slide-in-from-top-2 duration-200">
<div className="p-2 border-b border-white/5 bg-white/5">
<div className="absolute top-full left-0 right-0 mt-2 z-[110] bg-white dark:bg-[#1a1d23] border border-gray-200 dark:border-white/10 rounded-lg shadow-2xl overflow-hidden animate-in fade-in slide-in-from-top-2 duration-200">
<div className="p-2 border-b border-gray-100 dark:border-white/5 bg-gray-50 dark:bg-white/5">
<div className="relative">
<Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" aria-hidden="true" />
<input
@@ -65,8 +65,8 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
aria-autocomplete="list"
aria-expanded="true"
aria-controls="combobox-options"
className="w-full bg-black/20 border-none rounded-md pl-9 pr-4 py-2 text-sm focus:ring-0 placeholder:text-gray-600"
placeholder="Search..."
className="w-full bg-white dark:bg-black/20 border border-gray-200 dark:border-transparent rounded-md pl-9 pr-4 py-2 text-sm text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500/50"
placeholder="Buscar..."
value={search}
onChange={(e) => setSearch(e.target.value)}
/>
@@ -78,7 +78,7 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
className="max-h-60 overflow-y-auto p-1 custom-scrollbar"
>
{filteredOptions.length === 0 ? (
<div className="px-4 py-3 text-sm text-gray-500 text-center" role="option" aria-disabled="true">No results found</div>
<div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-500 text-center" role="option" aria-disabled="true">Sin resultados</div>
) : (
filteredOptions.map(option => (
<div
@@ -98,7 +98,9 @@ export default function Combobox({ options, value, onChange, placeholder = "Sear
setSearch("");
}
}}
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id ? "bg-blue-600 text-white" : "hover:bg-white/5 text-gray-300"
className={`flex items-center justify-between px-3 py-2 rounded-md cursor-pointer transition-colors outline-none focus:bg-blue-600 focus:text-white ${value === option.id
? "bg-blue-600 text-white"
: "hover:bg-gray-100 dark:hover:bg-white/5 text-gray-700 dark:text-gray-300"
}`}
>
<span className="text-sm font-medium">{option.name}</span>
web/studio/src/components/Navbar.tsx
+136 -3
View File
@@ -4,7 +4,7 @@ import Link from 'next/link';
import { useState } from 'react';
import { useAuth } from '@/context/AuthContext';
import { useTranslation } from '@/context/I18nContext';
import { LayoutDashboard, ShieldCheck, LogOut, Settings, Globe, Library, BookOpen, Sun, Moon, ChevronDown, FileQuestion, Webhook, User } from 'lucide-react';
import { LayoutDashboard, ShieldCheck, LogOut, Settings, Globe, Library, BookOpen, Sun, Moon, ChevronDown, FileQuestion, Webhook, User, Menu, X } from 'lucide-react';
import { useBranding } from '@/context/BrandingContext';
import { useTheme } from '@/context/ThemeContext';
import { getImageUrl } from '@/lib/api';
@@ -19,6 +19,10 @@ const NAV_LINK_ADMIN = "flex items-center gap-2 text-sm font-bold uppercase trac
// Dropdown menu item
const DROPDOWN_ITEM = "flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors";
// Mobile sidebar link
const MOBILE_LINK = "flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-wide transition-colors text-slate-700 dark:text-gray-300 hover:bg-black/5 dark:hover:bg-white/5 hover:text-blue-600 dark:hover:text-blue-400";
const MOBILE_LINK_ADMIN = "flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-bold uppercase tracking-wide transition-colors text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10";
export function Navbar() {
const { t, language, setLanguage } = useTranslation();
const { user, logout } = useAuth();
@@ -27,6 +31,7 @@ export function Navbar() {
const [coursesOpen, setCoursesOpen] = useState(false);
const [settingsOpen, setSettingsOpen] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const platformName = branding?.platform_name || branding?.name || 'Studio';
@@ -55,8 +60,8 @@ export function Navbar() {
)}
</Link>
{/* Primary Navigation */}
<div className="flex items-center gap-6">
{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-6">
<div className="flex items-center gap-5">
{/* Cursos Dropdown */}
@@ -242,7 +247,135 @@ export function Navbar() {
</Link>
)}
</div>
{/* Mobile: Hamburger button */}
<button
onClick={() => setMobileOpen(true)}
className="md:hidden p-2 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 text-slate-600 dark:text-gray-400 transition-colors"
aria-label="Abrir menú"
aria-expanded={mobileOpen}
>
<Menu className="w-5 h-5" />
</button>
</div>
{/* Mobile Sidebar Overlay */}
{mobileOpen && (
<div
className="fixed inset-0 z-[150] md:hidden bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
onClick={() => setMobileOpen(false)}
>
<div
className="absolute right-0 top-0 bottom-0 w-72 bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-white/10 flex flex-col animate-in slide-in-from-right duration-300 shadow-2xl"
role="dialog"
aria-modal="true"
aria-label="Menú de navegación"
onClick={(e) => e.stopPropagation()}
>
{/* Header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100 dark:border-white/10">
<span className="font-black text-xs uppercase tracking-[0.2em] text-gray-500 dark:text-gray-400">Menú</span>
<button
onClick={() => setMobileOpen(false)}
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-white/5 text-gray-500 dark:text-gray-400 transition-colors"
aria-label="Cerrar menú"
>
<X className="w-5 h-5" />
</button>
</div>
{/* Nav links */}
<nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
<p className="px-4 pt-2 pb-1 text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 dark:text-gray-600">Cursos</p>
<Link href="/" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<LayoutDashboard className="w-4 h-4 shrink-0" /> Listar Cursos
</Link>
<Link href="/library/assets" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<Library className="w-4 h-4 shrink-0" /> Librería
</Link>
<Link href="/question-bank" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<FileQuestion className="w-4 h-4 shrink-0" /> Banco de Preguntas
</Link>
<Link href="/test-templates" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<FileQuestion className="w-4 h-4 shrink-0" /> Plantillas de Pruebas
</Link>
<Link href="/course-templates" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<BookOpen className="w-4 h-4 shrink-0" /> Plantillas de Curso
</Link>
{user?.role === 'admin' && (
<>
<div className="my-2 border-t border-gray-100 dark:border-white/10" />
<p className="px-4 pt-2 pb-1 text-[10px] font-black uppercase tracking-[0.15em] text-gray-400 dark:text-gray-600">Administración</p>
{user.organization_id === '00000000-0000-0000-0000-000000000001' && (
<Link href="/admin" className={MOBILE_LINK_ADMIN} onClick={() => setMobileOpen(false)}>
<ShieldCheck className="w-4 h-4 shrink-0" /> Control Global
</Link>
)}
<Link href="/settings/webhooks" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<Webhook className="w-4 h-4 shrink-0" /> Webhooks
</Link>
<Link href="/settings" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<Settings className="w-4 h-4 shrink-0" /> Configuración
</Link>
</>
)}
{user?.role !== 'admin' && (
<>
<div className="my-2 border-t border-gray-100 dark:border-white/10" />
<Link href="/settings" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<Settings className="w-4 h-4 shrink-0" /> Configuración
</Link>
</>
)}
<Link href="/profile" className={MOBILE_LINK} onClick={() => setMobileOpen(false)}>
<User className="w-4 h-4 shrink-0" /> Perfil
</Link>
</nav>
{/* Footer */}
<div className="px-5 py-4 border-t border-gray-100 dark:border-white/10 space-y-3">
{user && (
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-bold text-gray-900 dark:text-white leading-tight">{user.full_name}</p>
<p className="text-xs uppercase tracking-widest font-bold text-gray-400 dark:text-gray-500">{user.role}</p>
</div>
<button
onClick={() => { logout(); setMobileOpen(false); }}
className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-500/10 text-gray-400 hover:text-red-500 transition-colors"
aria-label={t('nav.signOut') || 'Cerrar sesión'}
>
<LogOut className="w-4 h-4" />
</button>
</div>
)}
<div className="flex items-center justify-between">
<button
onClick={toggleTheme}
className="flex items-center gap-2 text-sm font-bold text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors"
>
{theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
{theme === 'dark' ? 'Modo Claro' : 'Modo Oscuro'}
</button>
<div className="flex items-center gap-1.5 text-gray-500">
<Globe className="w-3.5 h-3.5" />
<select
value={language}
onChange={(e) => setLanguage(e.target.value)}
aria-label="Idioma"
className="bg-transparent text-xs font-bold uppercase tracking-widest focus:outline-none cursor-pointer"
>
<option value="en" className="bg-white dark:bg-gray-900">EN</option>
<option value="es" className="bg-white dark:bg-gray-900">ES</option>
<option value="pt" className="bg-white dark:bg-gray-900">PT</option>
</select>
</div>
</div>
</div>
</div>
</div>
)}
</nav>
);
}