fix(landing): dark mode completo en todos los componentes
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:
@@ -99,7 +99,7 @@ export default function App() {
|
||||
</div>
|
||||
</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">
|
||||
<p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Consult (AS) Technology</p>
|
||||
</div>
|
||||
|
||||
@@ -143,7 +143,7 @@ export function CommandPalette() {
|
||||
<button
|
||||
type="button"
|
||||
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} />
|
||||
</button>
|
||||
|
||||
@@ -174,7 +174,7 @@ export function ConfiguracionCuenta() {
|
||||
<p className="mt-2 text-sm text-[#64748B] dark:text-[#94A3B8]">
|
||||
Vínculo Monday actual:{' '}
|
||||
{perfil.mondayUserId === null ? (
|
||||
<span className="text-[#94A3B8]">sin vincular</span>
|
||||
<span className="text-[#94A3B8] dark:text-[#64748B]">sin vincular</span>
|
||||
) : vinculado ? (
|
||||
<span className="text-[#111827] dark:text-[#E2E8F0]">
|
||||
{vinculado.nombre} ({vinculado.email})
|
||||
@@ -192,7 +192,7 @@ export function ConfiguracionCuenta() {
|
||||
<button
|
||||
type="button"
|
||||
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
|
||||
</button>
|
||||
@@ -256,7 +256,7 @@ export function ConfiguracionCuenta() {
|
||||
<button
|
||||
type="button"
|
||||
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
|
||||
</button>
|
||||
|
||||
@@ -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>
|
||||
<ul className="mt-2 space-y-2">
|
||||
{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]">
|
||||
{r.estado || 'Sin estado'}
|
||||
{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="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">
|
||||
<h2 className="text-lg font-semibold text-[#111827] dark:text-[#E2E8F0]">{c['nombre'] ?? nombre}</h2>
|
||||
{c['Estado'] && (
|
||||
@@ -103,7 +103,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
|
||||
type="button"
|
||||
onClick={onCerrar}
|
||||
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>
|
||||
@@ -139,7 +139,7 @@ export function ModalContacto({ contactoId, nombre, onCerrar }: Props) {
|
||||
{detalle.propiedad && (
|
||||
<section aria-label="Propiedad">
|
||||
<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">
|
||||
<Dato etiqueta="Desarrollo" valor={detalle.propiedad.desarrollo} />
|
||||
<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">
|
||||
{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">
|
||||
<p className="text-sm text-[#111827] dark:text-[#E2E8F0]">
|
||||
{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}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
@@ -38,7 +38,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
|
||||
<DarkModeToggle />
|
||||
<span
|
||||
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
|
||||
@@ -52,7 +52,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
|
||||
type="button"
|
||||
onClick={onConfiguraciones}
|
||||
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"
|
||||
>
|
||||
⚙
|
||||
@@ -70,7 +70,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
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-expanded={menuAbierto}
|
||||
>
|
||||
@@ -96,7 +96,7 @@ export function Navbar({ usuario, onConfiguraciones }: Props) {
|
||||
</div>
|
||||
<span
|
||||
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
|
||||
|
||||
@@ -51,7 +51,7 @@ export function VistaContactos({ onVolver }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
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]"
|
||||
>
|
||||
← Volver
|
||||
</button>
|
||||
@@ -69,7 +69,7 @@ export function VistaContactos({ onVolver }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
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
|
||||
</button>
|
||||
@@ -121,7 +121,7 @@ export function VistaContactos({ onVolver }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
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>
|
||||
{contacto.estado && (
|
||||
|
||||
@@ -48,16 +48,16 @@ export function AuditoriaLog() {
|
||||
|
||||
return (
|
||||
<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 */}
|
||||
<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
|
||||
<select
|
||||
value={entidad}
|
||||
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) => (
|
||||
<option key={e} value={e}>
|
||||
@@ -66,12 +66,12 @@ export function AuditoriaLog() {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block text-xs text-[#64748B]">
|
||||
<label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
|
||||
Usuario
|
||||
<select
|
||||
value={usuario}
|
||||
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>
|
||||
{usuariosLista.map((u) => (
|
||||
@@ -81,28 +81,28 @@ export function AuditoriaLog() {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<label className="block text-xs text-[#64748B]">
|
||||
<label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
|
||||
Desde
|
||||
<input
|
||||
type="date"
|
||||
value={fechaDesde}
|
||||
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 className="block text-xs text-[#64748B]">
|
||||
<label className="block text-xs text-[#64748B] dark:text-[#94A3B8]">
|
||||
Hasta
|
||||
<input
|
||||
type="date"
|
||||
value={fechaHasta}
|
||||
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>
|
||||
</div>
|
||||
|
||||
{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}
|
||||
</p>
|
||||
)}
|
||||
@@ -112,15 +112,15 @@ export function AuditoriaLog() {
|
||||
) : (
|
||||
<>
|
||||
{/* 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">
|
||||
<thead>
|
||||
<tr className="border-b border-[#E5E7EB] bg-[#F9FAFB]">
|
||||
<th className="px-3 py-2 font-medium text-[#64748B]">Fecha</th>
|
||||
<th className="px-3 py-2 font-medium text-[#64748B]">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]">Entidad</th>
|
||||
<th className="px-3 py-2 font-medium text-[#64748B]">Detalle</th>
|
||||
<tr className="border-b border-[#E5E7EB] bg-[#F9FAFB] dark:border-[#334155] dark:bg-[#1E293B]">
|
||||
<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] dark:text-[#94A3B8]">Usuario</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] dark:text-[#94A3B8]">Entidad</th>
|
||||
<th className="px-3 py-2 font-medium text-[#64748B] dark:text-[#94A3B8]">Detalle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -132,14 +132,14 @@ export function AuditoriaLog() {
|
||||
</tr>
|
||||
)}
|
||||
{paginados.map((item) => (
|
||||
<tr key={item.id} className="border-b border-[#E5E7EB] last:border-0">
|
||||
<td className="whitespace-nowrap px-3 py-2 text-[#374151]">
|
||||
<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] dark:text-[#CBD5E1]">
|
||||
{new Date(item.createdAt).toLocaleString('es-MX')}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-[#374151]">{item.usuarioId}</td>
|
||||
<td className="px-3 py-2 text-[#374151]">{item.accion}</td>
|
||||
<td className="px-3 py-2 text-[#374151]">{item.entidad}</td>
|
||||
<td className="max-w-[200px] truncate px-3 py-2 text-[#64748B]">{item.detalle ?? '—'}</td>
|
||||
<td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.usuarioId}</td>
|
||||
<td className="px-3 py-2 text-[#374151] dark:text-[#CBD5E1]">{item.accion}</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] dark:text-[#94A3B8]">{item.detalle ?? '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@@ -153,18 +153,18 @@ export function AuditoriaLog() {
|
||||
type="button"
|
||||
disabled={pagina <= 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
|
||||
</button>
|
||||
<span className="text-[#64748B]">
|
||||
<span className="text-[#64748B] dark:text-[#94A3B8]">
|
||||
Página {pagina} de {totalPaginas}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
disabled={pagina >= totalPaginas}
|
||||
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
|
||||
</button>
|
||||
|
||||
@@ -30,7 +30,7 @@ export function ConfigPage({ onVolver }: Props) {
|
||||
<button
|
||||
type="button"
|
||||
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]"
|
||||
>
|
||||
← Volver
|
||||
</button>
|
||||
|
||||
@@ -133,7 +133,7 @@ export function ModoTrabajo() {
|
||||
type="button"
|
||||
onClick={() => void reconectar()}
|
||||
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'}
|
||||
</button>
|
||||
|
||||
@@ -168,7 +168,7 @@ export function RolesPermisos() {
|
||||
type="button"
|
||||
onClick={() => void restaurar()}
|
||||
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
|
||||
</button>
|
||||
@@ -189,12 +189,12 @@ export function RolesPermisos() {
|
||||
<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>
|
||||
{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}
|
||||
</th>
|
||||
))}
|
||||
{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}
|
||||
</th>
|
||||
))}
|
||||
|
||||
@@ -17,7 +17,7 @@ const TTL_OPTIONS = [
|
||||
{ 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 =
|
||||
'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>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#111827]">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-sm font-medium text-[#111827] dark:text-[#E2E8F0]">Mostrar precios en PDF</p>
|
||||
<p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Controla si se muestra el descuento en el PDF del cotizador.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -194,8 +194,8 @@ export function Sistema() {
|
||||
/>
|
||||
</button>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#111827]">Logout automático</p>
|
||||
<p className="text-xs text-[#64748B]">Cerrar sesión automáticamente al recibir 401.</p>
|
||||
<p className="text-sm font-medium text-[#111827] dark:text-[#E2E8F0]">Logout automático</p>
|
||||
<p className="text-xs text-[#64748B] dark:text-[#94A3B8]">Cerrar sesión automáticamente al recibir 401.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -162,7 +162,7 @@ export function Usuarios() {
|
||||
<tbody>
|
||||
{filtrados.length === 0 ? (
|
||||
<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.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
@layer base {
|
||||
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 */
|
||||
|
||||
Reference in New Issue
Block a user