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

Improve dark mode with Zinc color palette

Browse Source 
- Change from gray to zinc colors for a neutral cool aesthetic
- Use zinc-950 for main background, zinc-900 for cards
- Add subtle borders to cards in dark mode for better separation
- Update all components: Home, TopMenu, connector pages
- More elegant and minimalist dark mode appearance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Exteban08
2026-02-03 11:51:03 +00:00
parent 9b8d6c4e45
commit c741b697d9
9 changed files with 217 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/pages/Home.tsx
View File

@@ -395,7 +395,7 @@ export default function Home({
<h1 className="text-3xl font-bold text-gray-800 dark:text-white">
Sistema de Tomas de Agua
</h1>
<p className="text-gray-600 dark:text-gray-300 mt-2">
<p className="text-gray-600 dark:text-zinc-300 mt-2">
Monitorea, administra y controla tus operaciones en un solo lugar.
</p>
</div>
@@ -412,42 +412,42 @@ export default function Home({
{/* Cards de Secciones */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<div
className="bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 dark:hover:bg-gray-700 transition cursor-pointer"
className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 dark:hover:bg-zinc-800 transition cursor-pointer"
onClick={() => setPage("meters")}
>
<Cpu size={40} className="text-blue-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Tomas</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Tomas</span>
</div>
<div
className="bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-red-50 dark:hover:bg-gray-700 transition cursor-pointer"
className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-red-50 dark:hover:bg-zinc-800 transition cursor-pointer"
onClick={() => setPage("auditoria")}
>
<Bell size={40} className="text-red-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Alertas</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Alertas</span>
</div>
<div className="cursor-pointer bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 dark:hover:bg-gray-700 transition"
<div className="cursor-pointer bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 dark:hover:bg-zinc-800 transition"
onClick={() => setPage("projects")}
>
<Settings size={40} className="text-yellow-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Proyectos</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Proyectos</span>
</div>
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 dark:hover:bg-gray-700 transition">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6 flex flex-col items-center justify-center gap-2 hover:bg-green-50 dark:hover:bg-zinc-800 transition">
<BarChart3 size={40} className="text-green-600" />
<span className="font-semibold text-gray-700 dark:text-gray-200">Reportes</span>
<span className="font-semibold text-gray-700 dark:text-zinc-200">Reportes</span>
</div>
</div>
{isAdmin && (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-4">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-4">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
<div>
<p className="text-sm text-gray-500 dark:text-gray-400">Organismos Operadores</p>
<p className="text-xs text-gray-400 dark:text-gray-500">
<p className="text-sm text-gray-500 dark:text-zinc-400">Organismos Operadores</p>
<p className="text-xs text-gray-400 dark:text-zinc-500">
Seleccionado:{" "}
<span className="font-semibold dark:text-gray-300">
<span className="font-semibold dark:text-zinc-300">
{selectedOrganism === "Todos"
? "Todos"
: organismsData.find(o => o.id === selectedOrganism)?.name || "Ninguno"}
@@ -476,21 +476,21 @@ export default function Home({
/>
{/* Panel */}
<div className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-gray-800 rounded-xl shadow-2xl flex flex-col">
<div className="relative w-full max-w-2xl max-h-[90vh] bg-white dark:bg-zinc-900 rounded-xl shadow-2xl flex flex-col">
{/* Header */}
<div className="p-5 border-b dark:border-gray-700 flex items-start justify-between gap-3">
<div className="p-5 border-b dark:border-zinc-800 flex items-start justify-between gap-3">
<div>
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
Organismos Operadores
</h3>
<p className="text-sm text-gray-500 dark:text-gray-400">
<p className="text-sm text-gray-500 dark:text-zinc-400">
Selecciona un organismo para filtrar la información del dashboard
</p>
</div>
<button
type="button"
className="rounded-lg px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 dark:text-gray-300"
className="rounded-lg px-3 py-2 text-sm border border-gray-300 dark:border-zinc-700 hover:bg-gray-50 dark:hover:bg-zinc-800 dark:text-zinc-300"
onClick={() => {
setShowOrganisms(false);
setOrganismQuery("");
@@ -501,12 +501,12 @@ export default function Home({
</div>
{/* Search */}
<div className="p-5 border-b dark:border-gray-700">
<div className="p-5 border-b dark:border-zinc-800">
<input
value={organismQuery}
onChange={(e) => setOrganismQuery(e.target.value)}
placeholder="Buscar organismo…"
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-500 dark:placeholder-gray-400"
className="w-full rounded-lg border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-200 dark:focus:ring-blue-500 dark:placeholder-gray-400"
/>
</div>
@@ -523,7 +523,7 @@ export default function Home({
"rounded-xl border p-4 transition",
selectedOrganism === "Todos"
? "border-blue-600 bg-blue-50/40 dark:bg-blue-900/20"
: "border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600",
: "border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700",
].join(" ")}
>
<div className="flex items-start justify-between gap-3">
@@ -531,7 +531,7 @@ export default function Home({
<p className="text-sm font-semibold text-gray-800 dark:text-white">
Todos los Organismos
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">Ver todos los datos del sistema</p>
<p className="text-xs text-gray-500 dark:text-zinc-400">Ver todos los datos del sistema</p>
</div>
<span className="text-xs font-semibold px-2 py-1 rounded-full bg-blue-100 text-blue-700">
@@ -569,7 +569,7 @@ export default function Home({
"rounded-xl border p-4 transition",
active
? "border-blue-600 bg-blue-50/40 dark:bg-blue-900/20"
: "border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600",
: "border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-700",
].join(" ")}
>
<div className="flex items-start justify-between gap-3">
@@ -577,7 +577,7 @@ export default function Home({
<p className="text-sm font-semibold text-gray-800 dark:text-white">
{o.name}
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{o.region}</p>
<p className="text-xs text-gray-500 dark:text-zinc-400">{o.region}</p>
</div>
<span
@@ -594,36 +594,36 @@ export default function Home({
<div className="mt-3 space-y-2 text-xs">
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Rol</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Rol</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.contact}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Email</span>
<span className="font-medium text-gray-800 dark:text-gray-200 truncate max-w-[200px]">
<span className="text-gray-500 dark:text-zinc-400">Email</span>
<span className="font-medium text-gray-800 dark:text-zinc-200 truncate max-w-[200px]">
{o.region}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Proyectos</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Proyectos</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.projects}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Medidores</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Medidores</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.meters}
</span>
</div>
<div className="flex justify-between gap-2">
<span className="text-gray-500 dark:text-gray-400">Último acceso</span>
<span className="font-medium text-gray-800 dark:text-gray-200">
<span className="text-gray-500 dark:text-zinc-400">Último acceso</span>
<span className="font-medium text-gray-800 dark:text-zinc-200">
{o.lastSync}
</span>
</div>
@@ -654,14 +654,14 @@ export default function Home({
)}
{!loadingUsers && filteredOrganisms.length === 0 && (
<div className="text-sm text-gray-500 dark:text-gray-400 text-center py-10">
<div className="text-sm text-gray-500 dark:text-zinc-400 text-center py-10">
No se encontraron organismos.
</div>
)}
</div>
{/* Footer */}
<div className="p-5 border-t dark:border-gray-700 text-xs text-gray-500 dark:text-gray-400">
<div className="p-5 border-t dark:border-zinc-800 text-xs text-gray-500 dark:text-zinc-400">
Mostrando {filteredOrganisms.length} organismo{filteredOrganisms.length !== 1 ? 's' : ''} de {users.length} total{users.length !== 1 ? 'es' : ''}
</div>
</div>
@@ -672,7 +672,7 @@ export default function Home({
</div>
{/* Gráfica */}
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6">
<div className="flex items-center justify-between gap-4 mb-4">
<h2 className="text-lg font-semibold dark:text-white">
Numero de Medidores por Proyecto
@@ -684,20 +684,20 @@ export default function Home({
{chartData.length === 0 && selectedOrganism !== "Todos" ? (
<div className="h-60 flex flex-col items-center justify-center">
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">
<p className="text-sm text-gray-500 dark:text-zinc-400 mb-2">
{selectedUserProjectName
? "Este organismo no tiene medidores registrados"
: "Este organismo no tiene un proyecto asignado"}
</p>
{selectedUserProjectName && (
<p className="text-xs text-gray-400 dark:text-gray-500">
Proyecto asignado: <span className="font-semibold dark:text-gray-300">{selectedUserProjectName}</span>
<p className="text-xs text-gray-400 dark:text-zinc-500">
Proyecto asignado: <span className="font-semibold dark:text-zinc-300">{selectedUserProjectName}</span>
</p>
)}
</div>
) : chartData.length === 0 ? (
<div className="h-60 flex items-center justify-center">
<p className="text-sm text-gray-500 dark:text-gray-400">No hay datos disponibles</p>
<p className="text-sm text-gray-500 dark:text-zinc-400">No hay datos disponibles</p>
</div>
) : (
<>
@@ -718,14 +718,14 @@ export default function Home({
</div>
{selectedOrganism !== "Todos" && selectedUserProjectName && (
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-zinc-800">
<div className="flex items-center justify-between text-sm">
<div>
<span className="text-gray-500 dark:text-gray-400">Proyecto del organismo:</span>
<span className="text-gray-500 dark:text-zinc-400">Proyecto del organismo:</span>
<span className="ml-2 font-semibold text-gray-800 dark:text-white">{selectedUserProjectName}</span>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400">Total de medidores:</span>
<span className="text-gray-500 dark:text-zinc-400">Total de medidores:</span>
<span className="ml-2 font-semibold text-blue-600">{filteredMeters.length}</span>
</div>
</div>
@@ -736,7 +736,7 @@ export default function Home({
</div>
{!isOperator && (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6">
<h2 className="text-lg font-semibold mb-4 dark:text-white">Historial Reciente de Auditoria</h2>
{loadingAuditLogs ? (
<div className="flex items-center justify-center py-8">
@@ -747,12 +747,12 @@ export default function Home({
No hay registros de auditoría disponibles
</p>
) : (
<ul className="divide-y divide-gray-200 dark:divide-gray-700 max-h-60 overflow-y-auto">
<ul className="divide-y divide-gray-200 dark:divide-zinc-800 max-h-60 overflow-y-auto">
{history.map((h, i) => (
<li key={i} className="py-2 flex items-start gap-3">
<span className="text-gray-400 mt-1">•</span>
<div className="flex-1">
<p className="text-sm text-gray-700 dark:text-gray-300">
<p className="text-sm text-gray-700 dark:text-zinc-300">
<span className="font-semibold">{h.user}</span> {h.action}{" "}
<span className="font-medium">{h.target}</span>
</p>
@@ -766,7 +766,7 @@ export default function Home({
)}
{!isOperator && (
<div className="bg-white dark:bg-gray-800 rounded-xl shadow p-6">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-800 rounded-xl shadow p-6">
<h2 className="text-lg font-semibold mb-4 dark:text-white">Ultimas Alertas</h2>
{loadingNotifications ? (
<div className="flex items-center justify-center py-8">
@@ -777,11 +777,11 @@ export default function Home({
No hay alertas disponibles
</p>
) : (
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
<ul className="divide-y divide-gray-200 dark:divide-zinc-800">
{alerts.map((a, i) => (
<li key={i} className="py-2 flex justify-between items-start">
<div className="flex-1">
<span className="text-sm text-gray-700 dark:text-gray-300">
<span className="text-sm text-gray-700 dark:text-zinc-300">
<span className="font-semibold">{a.company}</span> - {a.type}
</span>
</div>