consultoria-as/FRASA-CAS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(landing): dark mode completo en todos los componentes

Browse Source 
14 archivos corregidos:
- Body: dark:bg-[#0F172A] dark:text-[#E2E8F0]
- Navbar: badges, botones, hamburger
- ConfiguracionCuenta: botones, textos
- VistaContactos: botones, filas hover
- ModalContacto: borders, secciones, badges, items
- ConfigPage: botones
- ModoTrabajo: botón reconexión
- RolesPermisos: botones, headers tabla
- Usuarios: empty state
- Sistema: labels, toggles
- AuditoriaLog: todo (tabla, filtros, paginación)
- CommandPalette: botón cerrar

28 tests landing verdes.
This commit is contained in:
Consult AS Technology
2026-09-07 06:57:12 +00:00
parent 8b65f903d3
commit 7d19e0da38
13 changed files with 56 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/landing/src/App.tsx
View File

@@ -99,7 +99,7 @@ export default function App() {
</div> </div>
</main> </main>
<footer className="mt-16 border-t border-[#E5E7EB] dark:border-[#1E293B] dark:border-[#1E293B]"> <footer className="mt-16 border-t border-[#E5E7EB] dark:border-[#1E293B]">
<div className="mx-auto max-w-[1280px] px-6 py-8"> <div className="mx-auto max-w-[1280px] px-6 py-8">
<p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Consult (AS) Technology</p> <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Consult (AS) Technology</p>
</div> </div>

2
apps/landing/src/components/CommandPalette.tsx
View File

@@ -143,7 +143,7 @@ export function CommandPalette() {
<button <button
type="button" type="button"
onClick={() => setAbierto(false)} onClick={() => setAbierto(false)}
className="rounded-md p-1 text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-[#64748B]" className="rounded-md p-1 text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-[#64748B] dark:hover:bg-[#334155] dark:hover:text-[#CBD5E1]"
> >
<X size={16} /> <X size={16} />
</button> </button>

6
apps/landing/src/components/ConfiguracionCuenta.tsx
View File

@@ -174,7 +174,7 @@ export function ConfiguracionCuenta() {
<p className="mt-2 text-sm text-[#64748B] dark:text-[#94A3B8]"> <p className="mt-2 text-sm text-[#64748B] dark:text-[#94A3B8]">
Vínculo Monday actual:{' '} Vínculo Monday actual:{' '}
{perfil.mondayUserId === null ? ( {perfil.mondayUserId === null ? (
<span className="text-[#94A3B8]">sin vincular</span> <span className="text-[#94A3B8] dark:text-[#64748B]">sin vincular</span>
) : vinculado ? ( ) : vinculado ? (
<span className="text-[#111827] dark:text-[#E2E8F0]"> <span className="text-[#111827] dark:text-[#E2E8F0]">
{vinculado.nombre} ({vinculado.email}) {vinculado.nombre} ({vinculado.email})
@@ -192,7 +192,7 @@ export function ConfiguracionCuenta() {
<button <button
type="button" type="button"
onClick={cargarUsuarios} onClick={cargarUsuarios}
className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]" className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
> >
Reintentar Reintentar
</button> </button>
@@ -256,7 +256,7 @@ export function ConfiguracionCuenta() {
<button <button
type="button" type="button"
onClick={cerrarSesion} onClick={cerrarSesion}
className="mt-8 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]" className="mt-8 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2.5 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
> >
Cerrar sesión Cerrar sesión
</button> </button>

12
apps/landing/src/components/ModalContacto.tsx
View File

@@ -32,7 +32,7 @@ function ListaRelaciones({ titulo, items }: { titulo: string; items: RelacionCrm
<p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{titulo}</p> <p className="text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">{titulo}</p>
<ul className="mt-2 space-y-2"> <ul className="mt-2 space-y-2">
{items.map((r) => ( {items.map((r) => (
<li key={r.id} className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-[#E5E7EB] px-3 py-2"> <li key={r.id} className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-[#E5E7EB] px-3 py-2 dark:border-[#334155]">
<span className="text-sm text-[#111827] dark:text-[#E2E8F0]"> <span className="text-sm text-[#111827] dark:text-[#E2E8F0]">
{r.estado || 'Sin estado'} {r.estado || 'Sin estado'}
{r.detalle ? <span className="ml-2 text-xs text-[#64748B] dark:text-[#94A3B8]">{r.detalle}</span> : null} {r.detalle ? <span className="ml-2 text-xs text-[#64748B] dark:text-[#94A3B8]">{r.detalle}</span> : null}
@@ -92,7 +92,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
}} }}
> >
<div className="w-full max-w-2xl rounded-2xl border border-[#E5E7EB] bg-white shadow dark:border-[#1E293B] dark:bg-[#1E293B] -xl"> <div className="w-full max-w-2xl rounded-2xl border border-[#E5E7EB] bg-white shadow dark:border-[#1E293B] dark:bg-[#1E293B] -xl">
<div className="flex items-center justify-between border-b border-[#E5E7EB] px-6 py-4"> <div className="flex items-center justify-between border-b border-[#E5E7EB] dark:border-[#334155] px-6 py-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<h2 className="text-lg font-semibold text-[#111827] dark:text-[#E2E8F0]">{c['nombre'] ?? nombre}</h2> <h2 className="text-lg font-semibold text-[#111827] dark:text-[#E2E8F0]">{c['nombre'] ?? nombre}</h2>
{c['Estado'] && ( {c['Estado'] && (
@@ -103,7 +103,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
type="button" type="button"
onClick={onCerrar} onClick={onCerrar}
aria-label="Cerrar" aria-label="Cerrar"
className="rounded-lg px-2 py-1.5 text-sm text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F9FAFB] hover:text-[#111827] dark:text-[#E2E8F0]" className="rounded-lg px-2 py-1.5 text-sm text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F9FAFB] hover:text-[#111827] dark:hover:bg-[#334155] dark:hover:text-[#E2E8F0]"
> >
✕ ✕
</button> </button>
@@ -139,7 +139,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
{detalle.propiedad && ( {detalle.propiedad && (
<section aria-label="Propiedad"> <section aria-label="Propiedad">
<p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Propiedad</p> <p className="mb-3 text-xs font-semibold uppercase tracking-wider text-[#64748B] dark:text-[#94A3B8]">Propiedad</p>
<div className="rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] p-4"> <div className="rounded-xl border border-[#E5E7EB] bg-[#F8FAFC] p-4 dark:border-[#334155] dark:bg-[#0F172A]">
<div className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3"> <div className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-3">
<Dato etiqueta="Desarrollo" valor={detalle.propiedad.desarrollo} /> <Dato etiqueta="Desarrollo" valor={detalle.propiedad.desarrollo} />
<Dato etiqueta="Unidad" valor={detalle.propiedad.unidadCodigo} /> <Dato etiqueta="Unidad" valor={detalle.propiedad.unidadCodigo} />
@@ -167,11 +167,11 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
) : ( ) : (
<ul className="max-h-64 space-y-2 overflow-y-auto"> <ul className="max-h-64 space-y-2 overflow-y-auto">
{detalle.historial.map((h, i) => ( {detalle.historial.map((h, i) => (
<li key={i} className="flex items-baseline justify-between gap-3 rounded-lg border border-[#E5E7EB] px-3 py-2"> <li key={i} className="flex items-baseline justify-between gap-3 rounded-lg border border-[#E5E7EB] px-3 py-2 dark:border-[#334155]">
<div className="min-w-0"> <div className="min-w-0">
<p className="text-sm text-[#111827] dark:text-[#E2E8F0]"> <p className="text-sm text-[#111827] dark:text-[#E2E8F0]">
{h.detalle} {h.detalle}
<span className="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600"> <span className="ml-2 rounded-full bg-gray-100 px-2 py-0.5 text-[10px] font-medium text-gray-600 dark:bg-[#334155] dark:text-[#94A3B8]">
{h.fuente} {h.fuente}
</span> </span>
</p> </p>

8
apps/landing/src/components/Navbar.tsx
View File

@@ -38,7 +38,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
<DarkModeToggle /> <DarkModeToggle />
<span <span
className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${ className={`hidden items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium sm:inline-flex ${
conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:text-[#94A3B8]' conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:bg-[#1E293B] dark:text-[#94A3B8]'
}`} }`}
> >
<span <span
@@ -52,7 +52,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
type="button" type="button"
onClick={onConfiguraciones} onClick={onConfiguraciones}
title="Configuraciones" title="Configuraciones"
className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] hover:text-accent" className="flex h-8 w-8 items-center justify-center rounded-lg text-[#64748B] dark:text-[#94A3B8] transition-colors hover:bg-[#F1F5F9] dark:hover:bg-[#334155] hover:text-accent"
aria-label="Abrir configuraciones" aria-label="Abrir configuraciones"
> >
⚙ ⚙
@@ -70,7 +70,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
<button <button
type="button" type="button"
onClick={() => setMenuAbierto((v) => !v)} onClick={() => setMenuAbierto((v) => !v)}
className="flex h-8 w-8 items-center justify-center rounded-lg text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F1F5F9] md:hidden" className="flex h-8 w-8 items-center justify-center rounded-lg text-[#4B5563] dark:text-[#CBD5E1] transition-colors hover:bg-[#F1F5F9] dark:hover:bg-[#334155] md:hidden"
aria-label={menuAbierto ? 'Cerrar menú' : 'Abrir menú'} aria-label={menuAbierto ? 'Cerrar menú' : 'Abrir menú'}
aria-expanded={menuAbierto} aria-expanded={menuAbierto}
> >
@@ -96,7 +96,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
</div> </div>
<span <span
className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium w-fit ${ className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium w-fit ${
conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:text-[#94A3B8]' conSesion ? 'bg-green-50 text-green-700' : 'bg-[#F1F5F9] text-[#64748B] dark:bg-[#1E293B] dark:text-[#94A3B8]'
}`} }`}
> >
<span <span

6
apps/landing/src/components/VistaContactos.tsx
View File

@@ -51,7 +51,7 @@ export function VistaContactos({ onVolver }: Props) {
<button <button
type="button" type="button"
onClick={onVolver} onClick={onVolver}
className="rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]" className="rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
> >
&larr; Volver &larr; Volver
</button> </button>
@@ -69,7 +69,7 @@ export function VistaContactos({ onVolver }: Props) {
<button <button
type="button" type="button"
onClick={cargar} onClick={cargar}
className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]" className="mt-3 rounded-lg border border-[#D1D5DB] bg-white px-4 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0] py-2 text-sm font-medium text-[#374151] dark:text-[#CBD5E1] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:hover:bg-[#334155]"
> >
Reintentar Reintentar
</button> </button>
@@ -121,7 +121,7 @@ export function VistaContactos({ onVolver }: Props) {
<button <button
type="button" type="button"
onClick={() => setSeleccionado(contacto)} onClick={() => setSeleccionado(contacto)}
className="flex w-full flex-wrap items-center gap-x-4 gap-y-1 px-6 py-4 text-left transition-colors duration-100 hover:bg-[#F8FAFC] dark:bg-[#0F172A]" className="flex w-full flex-wrap items-center gap-x-4 gap-y-1 px-6 py-4 text-left transition-colors duration-100 hover:bg-[#F8FAFC] dark:bg-[#0F172A] dark:hover:bg-[#1E293B]"
> >
<span className="text-sm font-semibold text-[#111827] dark:text-[#E2E8F0]">{contacto.nombre}</span> <span className="text-sm font-semibold text-[#111827] dark:text-[#E2E8F0]">{contacto.nombre}</span>
{contacto.estado && ( {contacto.estado && (

52
apps/landing/src/components/config/AuditoriaLog.tsx
View File

@@ -48,16 +48,16 @@ export function AuditoriaLog() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<h2 className="text-sm font-semibold text-[#111827]">Registro de auditoría</h2> <h2 className="text-sm font-semibold text-[#111827] dark:text-[#E2E8F0]">Registro de auditoría</h2>
{/* Filtros */} {/* Filtros */}
<div className="flex flex-wrap items-end gap-3"> <div className="flex flex-wrap items-end gap-3">
<label className="block text-xs text-[#64748B]"> <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
Entidad Entidad
<select <select
value={entidad} value={entidad}
onChange={(e) => setEntidad(e.target.value)} onChange={(e) => setEntidad(e.target.value)}
className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs" className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
> >
{ENTIDADES.map((e) => ( {ENTIDADES.map((e) => (
<option key={e} value={e}> <option key={e} value={e}>
@@ -66,12 +66,12 @@ export function AuditoriaLog() {
))} ))}
</select> </select>
</label> </label>
<label className="block text-xs text-[#64748B]"> <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
Usuario Usuario
<select <select
value={usuario} value={usuario}
onChange={(e) => setUsuario(e.target.value)} onChange={(e) => setUsuario(e.target.value)}
className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs" className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
> >
<option value="">Todos</option> <option value="">Todos</option>
{usuariosLista.map((u) => ( {usuariosLista.map((u) => (
@@ -81,28 +81,28 @@ export function AuditoriaLog() {
))} ))}
</select> </select>
</label> </label>
<label className="block text-xs text-[#64748B]"> <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
Desde Desde
<input <input
type="date" type="date"
value={fechaDesde} value={fechaDesde}
onChange={(e) => setFechaDesde(e.target.value)} onChange={(e) => setFechaDesde(e.target.value)}
className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs" className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
/> />
</label> </label>
<label className="block text-xs text-[#64748B]"> <label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
Hasta Hasta
<input <input
type="date" type="date"
value={fechaHasta} value={fechaHasta}
onChange={(e) => setFechaHasta(e.target.value)} onChange={(e) => setFechaHasta(e.target.value)}
className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs" className="ml-2 rounded-lg border border-[#D1D5DB] bg-white px-2 py-1.5 text-xs dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#E2E8F0]"
/> />
</label> </label>
</div> </div>
{error && ( {error && (
<p role="alert" className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700"> <p role="alert" className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300">
{error} {error}
</p> </p>
)} )}
@@ -112,15 +112,15 @@ export function AuditoriaLog() {
) : ( ) : (
<> <>
{/* Tabla */} {/* Tabla */}
<div className="overflow-x-auto rounded-xl border border-[#E5E7EB]"> <div className="overflow-x-auto rounded-xl border border-[#E5E7EB] dark:border-[#334155]">
<table className="w-full text-left text-xs"> <table className="w-full text-left text-xs">
<thead> <thead>
<tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]"> <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#1E293B]">
<th className="px-3 py-2 font-medium text-[#64748B]">Fecha</th> <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Fecha</th>
<th className="px-3 py-2 font-medium text-[#64748B]">Usuario</th> <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Usuario</th>
<th className="px-3 py-2 font-medium text-[#64748B]">Acción</th> <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Acción</th>
<th className="px-3 py-2 font-medium text-[#64748B]">Entidad</th> <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Entidad</th>
<th className="px-3 py-2 font-medium text-[#64748B]">Detalle</th> <th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Detalle</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@@ -132,14 +132,14 @@ export function AuditoriaLog() {
</tr> </tr>
)} )}
{paginados.map((item) => ( {paginados.map((item) => (
<tr key={item.id} className="border-b border-[#E5E7EB] last:border-0"> <tr key={item.id} className="border-b border-[#E5E7EB] dark:border-[#334155] last:border-0">
<td className="whitespace-nowrap px-3 py-2 text-[#374151]"> <td className="whitespace-nowrap px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">
{new Date(item.createdAt).toLocaleString('es-MX')} {new Date(item.createdAt).toLocaleString('es-MX')}
</td> </td>
<td className="px-3 py-2 text-[#374151]">{item.usuarioId}</td> <td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.usuarioId}</td>
<td className="px-3 py-2 text-[#374151]">{item.accion}</td> <td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.accion}</td>
<td className="px-3 py-2 text-[#374151]">{item.entidad}</td> <td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.entidad}</td>
<td className="max-w-[200px] truncate px-3 py-2 text-[#64748B]">{item.detalle ?? '—'}</td> <td className="max-w-[200px] truncate px-3 py-2 text-[#64748B] dark:text-[#94A3B8]">{item.detalle ?? '—'}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
@@ -153,18 +153,18 @@ export function AuditoriaLog() {
type="button" type="button"
disabled={pagina <= 1} disabled={pagina <= 1}
onClick={() => setPagina((p) => p - 1)} onClick={() => setPagina((p) => p - 1)}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50" className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
> >
Anterior Anterior
</button> </button>
<span className="text-[#64748B]"> <span className="text-[#64748B] dark:text-[#94A3B8]">
Página {pagina} de {totalPaginas} Página {pagina} de {totalPaginas}
</span> </span>
<button <button
type="button" type="button"
disabled={pagina >= totalPaginas} disabled={pagina >= totalPaginas}
onClick={() => setPagina((p) => p + 1)} onClick={() => setPagina((p) => p + 1)}
className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50" className="rounded-lg border border-[#D1D5DB] bg-white px-3 py-1.5 text-xs font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50 dark:border-[#334155] dark:bg-[#0F172A] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
> >
Siguiente Siguiente
</button> </button>

2
apps/landing/src/components/config/ConfigPage.tsx
View File

@@ -30,7 +30,7 @@ export function ConfigPage({ onVolver }: Props) {
<button <button
type="button" type="button"
onClick={onVolver} onClick={onVolver}
className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]" className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
> >
&larr; Volver &larr; Volver
</button> </button>

2
apps/landing/src/components/config/ModoTrabajo.tsx
View File

@@ -133,7 +133,7 @@ export function ModoTrabajo() {
type="button" type="button"
onClick={() => void reconectar()} onClick={() => void reconectar()}
disabled={guardando} disabled={guardando}
className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]" className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
> >
{guardando ? 'Procesando…' : 'Forzar reconexión'} {guardando ? 'Procesando…' : 'Forzar reconexión'}
</button> </button>

6
apps/landing/src/components/config/RolesPermisos.tsx
View File

@@ -168,7 +168,7 @@ export function RolesPermisos() {
type="button" type="button"
onClick={() => void restaurar()} onClick={() => void restaurar()}
disabled={guardando} disabled={guardando}
className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1]" className="rounded-lg border border-[#D1D5DB] bg-white px-4 py-2 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB] disabled:opacity-50 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#CBD5E1] dark:hover:bg-[#334155]"
> >
Restaurar valores por defecto Restaurar valores por defecto
</button> </button>
@@ -189,12 +189,12 @@ export function RolesPermisos() {
<tr className="border-b border-[#E5E7EB] bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#1E293B]"> <tr className="border-b border-[#E5E7EB] bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#1E293B]">
<th className="px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">Rol</th> <th className="px-4 py-3 font-medium text-[#111827] dark:text-[#E2E8F0]">Rol</th>
{MODULOS_DISPONIBLES.map((m) => ( {MODULOS_DISPONIBLES.map((m) => (
<th key={m} className="px-3 py-3 text-center text-xs font-medium text-[#64748B]"> <th key={m} className="px-3 py-3 text-center text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
{MODULO_LABELS[m] ?? m} {MODULO_LABELS[m] ?? m}
</th> </th>
))} ))}
{ACCIONES_DISPONIBLES.map((a) => ( {ACCIONES_DISPONIBLES.map((a) => (
<th key={a} className="px-3 py-3 text-center text-xs font-medium text-[#64748B]"> <th key={a} className="px-3 py-3 text-center text-xs font-medium text-[#64748B] dark:text-[#94A3B8]">
{ACCION_LABELS[a] ?? a} {ACCION_LABELS[a] ?? a}
</th> </th>
))} ))}

10
apps/landing/src/components/config/Sistema.tsx
View File

@@ -17,7 +17,7 @@ const TTL_OPTIONS = [
{ value: '1440', label: '24 horas' }, { value: '1440', label: '24 horas' },
] ]
const labelEstilo = 'block text-xs font-medium text-[#4B5563]' const labelEstilo = 'block text-xs font-medium text-[#4B5563] dark:text-[#CBD5E1]'
const inputEstilo = const inputEstilo =
'mt-2 w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm text-[#111827] transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0]' 'mt-2 w-full rounded-lg border border-[#D1D5DB] bg-white px-3 py-2.5 text-sm text-[#111827] transition-colors focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20 dark:bg-[#0F172A] dark:border-[#334155] dark:text-[#E2E8F0]'
@@ -168,8 +168,8 @@ export function Sistema() {
/> />
</button> </button>
<div> <div>
<p className="text-sm font-medium text-[#111827]">Mostrar precios en PDF</p> <p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">Mostrar precios en PDF</p>
<p className="text-xs text-[#64748B]">Controla si se muestra el descuento en el PDF del cotizador.</p> <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Controla si se muestra el descuento en el PDF del cotizador.</p>
</div> </div>
</div> </div>
@@ -194,8 +194,8 @@ export function Sistema() {
/> />
</button> </button>
<div> <div>
<p className="text-sm font-medium text-[#111827]">Logout automático</p> <p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">Logout automático</p>
<p className="text-xs text-[#64748B]">Cerrar sesión automáticamente al recibir 401.</p> <p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Cerrar sesión automáticamente al recibir 401.</p>
</div> </div>
</div> </div>
</div> </div>

2
apps/landing/src/components/config/Usuarios.tsx
View File

@@ -162,7 +162,7 @@ export function Usuarios() {
<tbody> <tbody>
{filtrados.length === 0 ? ( {filtrados.length === 0 ? (
<tr> <tr>
<td colSpan={5} className="px-4 py-6 text-center text-sm text-[#64748B]"> <td colSpan={5} className="px-4 py-6 text-center text-sm text-[#64748B] dark:text-[#94A3B8]">
No se encontraron usuarios. No se encontraron usuarios.
</td> </td>
</tr> </tr>

2
apps/landing/src/index.css
View File

@@ -10,7 +10,7 @@
@layer base { @layer base {
body { body {
@apply bg-[#F8FAFC] text-[#111827] antialiased; @apply bg-[#F8FAFC] text-[#111827] antialiased dark:bg-[#0F172A] dark:text-[#E2E8F0];
} }
/* Foco visible accesible: anillo azul en elementos interactivos */ /* Foco visible accesible: anillo azul en elementos interactivos */