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

Add dark mode styling to modals and form elements

Browse Source 
- Add global CSS overrides for input, select, textarea in dark mode
- Update MetersModal with dark mode classes
- Update ConcentratorsModal with dark mode classes
- Update ProjectsPage modal with dark mode classes
- Update RolesPage modal with dark mode classes
- Update ConfirmModal with dark mode styling
- Update ProfileModal with dark mode styling
- All form labels, inputs, selects, and buttons now properly styled

Dark mode elements:
- Modal backgrounds: zinc-900 with zinc-700 border
- Inputs/selects: zinc-800 background, zinc-700 border
- Labels: zinc-400 text color
- Cancel buttons: zinc-800 hover background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Exteban08
2026-02-03 12:01:08 +00:00
parent 0142ba740f
commit 3087af11e1
7 changed files with 113 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/layout/common/ConfirmModal.tsx
View File

@@ -56,22 +56,22 @@ export default function ConfirmModal({
<div
ref={panelRef}
tabIndex={-1}
className="rounded-2xl bg-white border border-slate-200 shadow-xl overflow-hidden outline-none"
className="rounded-2xl bg-white dark:bg-zinc-900 border border-slate-200 dark:border-zinc-700 shadow-xl overflow-hidden outline-none"
>
<div className="px-6 py-4 border-b border-slate-200">
<div className="text-base font-semibold text-slate-900">{title}</div>
<div className="px-6 py-4 border-b border-slate-200 dark:border-zinc-700">
<div className="text-base font-semibold text-slate-900 dark:text-white">{title}</div>
</div>
<div className="px-6 py-5">
<p className="text-sm text-slate-700">{message}</p>
<p className="text-sm text-slate-700 dark:text-zinc-300">{message}</p>
</div>
<div className="px-6 py-4 border-t border-slate-200 flex justify-end gap-3">
<div className="px-6 py-4 border-t border-slate-200 dark:border-zinc-700 flex justify-end gap-3">
<button
type="button"
onClick={onClose}
disabled={loading}
className="rounded-xl px-4 py-2 text-sm font-medium border border-slate-200 bg-white text-slate-700 hover:bg-slate-100 transition disabled:opacity-60"
className="rounded-xl px-4 py-2 text-sm font-medium border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-slate-700 dark:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-700 transition disabled:opacity-60"
>
{cancelText}
</button>

36
src/components/layout/common/ProfileModal.tsx
View File

@@ -150,10 +150,10 @@ export default function ProfileModal({
{/* Modal */}
<div className="relative mx-auto mt-16 w-[min(860px,calc(100vw-32px))]">
<div className="rounded-2xl bg-white shadow-xl border border-slate-200 overflow-hidden">
<div className="rounded-2xl bg-white dark:bg-zinc-900 shadow-xl border border-slate-200 dark:border-zinc-700 overflow-hidden">
{/* Header */}
<div className="px-6 py-4 border-b border-slate-200">
<div className="text-base font-semibold text-slate-900">
<div className="px-6 py-4 border-b border-slate-200 dark:border-zinc-700">
<div className="text-base font-semibold text-slate-900 dark:text-white">
Editar perfil
</div>
</div>
@@ -162,9 +162,9 @@ export default function ProfileModal({
<div className="p-6">
<div className="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-6">
{/* LEFT: Avatar */}
<div className="rounded-2xl border border-slate-200 bg-slate-50 p-5">
<div className="rounded-2xl border border-slate-200 dark:border-zinc-700 bg-slate-50 dark:bg-zinc-800 p-5">
<div className="flex flex-col items-center text-center">
<div className="w-28 h-28 rounded-2xl bg-white border border-slate-200 overflow-hidden flex items-center justify-center">
<div className="w-28 h-28 rounded-2xl bg-white dark:bg-zinc-700 border border-slate-200 dark:border-zinc-600 overflow-hidden flex items-center justify-center">
{computedAvatarSrc ? (
<img
src={computedAvatarSrc}
@@ -172,17 +172,17 @@ export default function ProfileModal({
className="w-full h-full object-cover"
/>
) : (
<div className="w-full h-full flex items-center justify-center text-slate-700 font-semibold text-2xl">
<div className="w-full h-full flex items-center justify-center text-slate-700 dark:text-zinc-200 font-semibold text-2xl">
{initials}
</div>
)}
</div>
<div className="mt-4">
<div className="text-sm font-semibold text-slate-900 truncate max-w-[220px]">
<div className="text-sm font-semibold text-slate-900 dark:text-white truncate max-w-[220px]">
{name || "Usuario"}
</div>
<div className="text-xs text-slate-500 truncate max-w-[220px]">
<div className="text-xs text-slate-500 dark:text-zinc-400 truncate max-w-[220px]">
{email || "correo@ejemplo.gob.mx"}
</div>
</div>
@@ -193,8 +193,8 @@ export default function ProfileModal({
disabled={!onUploadAvatar}
className={[
"mt-4 w-full rounded-xl px-4 py-2 text-sm font-medium",
"border border-slate-200 bg-white text-slate-700",
"hover:bg-slate-100 transition",
"border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-slate-700 dark:text-zinc-300",
"hover:bg-slate-100 dark:hover:bg-zinc-700 transition",
!onUploadAvatar ? "opacity-50 cursor-not-allowed" : "",
].join(" ")}
>
@@ -212,8 +212,8 @@ export default function ProfileModal({
</div>
{/* RIGHT: Form */}
<div className="rounded-2xl border border-slate-200 p-5">
<div className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
<div className="rounded-2xl border border-slate-200 dark:border-zinc-700 p-5">
<div className="text-xs font-semibold text-slate-500 dark:text-zinc-400 uppercase tracking-wide">
correo electrónico
</div>
@@ -222,7 +222,7 @@ export default function ProfileModal({
<input
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 outline-none focus:ring-2 focus:ring-slate-200"
className="w-full rounded-xl border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm text-slate-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-slate-200"
placeholder="Nombre del usuario"
/>
</Field>
@@ -231,7 +231,7 @@ export default function ProfileModal({
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 outline-none focus:ring-2 focus:ring-slate-200"
className="w-full rounded-xl border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm text-slate-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-slate-200"
placeholder="correo@organismo.gob.mx"
/>
</Field>
@@ -240,7 +240,7 @@ export default function ProfileModal({
<input
value={organismName}
onChange={(e) => setOrganismName(e.target.value)}
className="w-full rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm text-slate-900 outline-none focus:ring-2 focus:ring-slate-200"
className="w-full rounded-xl border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm text-slate-900 dark:text-zinc-100 outline-none focus:ring-2 focus:ring-slate-200"
placeholder="Organismo operador"
/>
</Field>
@@ -250,11 +250,11 @@ export default function ProfileModal({
</div>
{/* Footer */}
<div className="px-6 py-4 border-t border-slate-200 flex items-center justify-end gap-3">
<div className="px-6 py-4 border-t border-slate-200 dark:border-zinc-700 flex items-center justify-end gap-3">
<button
type="button"
onClick={onClose}
className="rounded-xl px-4 py-2 text-sm font-medium border border-slate-200 bg-white text-slate-700 hover:bg-slate-100 transition"
className="rounded-xl px-4 py-2 text-sm font-medium border border-slate-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-slate-700 dark:text-zinc-300 hover:bg-slate-100 dark:hover:bg-zinc-700 transition"
disabled={loading}
>
Cancelar
@@ -283,7 +283,7 @@ export default function ProfileModal({
function Field({ label, children }: { label: string; children: React.ReactNode }) {
return (
<div className="grid grid-cols-[90px_1fr] items-center gap-3">
<div className="text-sm font-medium text-slate-700">{label}</div>
<div className="text-sm font-medium text-slate-700 dark:text-zinc-300">{label}</div>
{children}
</div>
);

33
src/index.css
View File

@@ -117,3 +117,36 @@ body:where(.dark *) {
.dark [style*="backgroundColor: rgb(255, 255, 255)"] {
background-color: #18181b !important; /* zinc-900 */
}
/* Dark mode form elements - global overrides */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
background-color: #27272a !important; /* zinc-800 */
border-color: #3f3f46 !important; /* zinc-700 */
color: #fafafa !important; /* zinc-50 */
}
.dark input::placeholder,
.dark textarea::placeholder {
color: #71717a !important; /* zinc-500 */
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
border-color: #3b82f6 !important; /* blue-500 */
outline: none;
}
.dark select option {
background-color: #27272a; /* zinc-800 */
color: #fafafa; /* zinc-50 */
}
/* Dark mode for modals */
.dark .modal-content,
.dark [class*="bg-white"][class*="rounded-xl"][class*="p-6"] {
background-color: #18181b !important; /* zinc-900 */
border: 1px solid #3f3f46 !important; /* zinc-700 */
}

18
src/pages/RolesPage.tsx
View File

@@ -281,18 +281,18 @@ export default function RolesPage() {
{/* ADD/EDIT MODAL */}
{showModal && (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-white rounded-xl p-6 w-96 space-y-4 shadow-xl">
<h2 className="text-lg font-semibold text-gray-900">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-700 rounded-xl p-6 w-96 space-y-4 shadow-xl">
<h2 className="text-lg font-semibold text-gray-900 dark:text-white">
{editingId ? "Edit Role" : "Add New Role"}
</h2>
<div className="space-y-3">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1">
Name <span className="text-red-500">*</span>
</label>
<input
className="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
placeholder="e.g., ADMIN, USER, MANAGER"
value={form.name}
onChange={e => setForm({...form, name: e.target.value})}
@@ -301,11 +301,11 @@ export default function RolesPage() {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-1">
Description
</label>
<textarea
className="w-full border border-gray-300 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
className="w-full border border-gray-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
placeholder="Describe the role's purpose..."
rows={3}
value={form.description}
@@ -315,8 +315,8 @@ export default function RolesPage() {
</div>
{/* Note about permissions */}
<div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
<p className="text-xs text-blue-800">
<div className="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
<p className="text-xs text-blue-800 dark:text-blue-300">
<strong>Note:</strong> Permissions can be configured after creating the role.
</p>
</div>
@@ -331,7 +331,7 @@ export default function RolesPage() {
setError(null);
}}
disabled={loading}
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition disabled:opacity-50"
className="px-4 py-2 text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded-lg transition disabled:opacity-50"
>
Cancel
</button>

26
src/pages/concentrators/ConcentratorsModal.tsx
View File

@@ -43,17 +43,17 @@ export default function ConcentratorsModal({
return (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-white rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
<h2 className="text-lg font-semibold">{title}</h2>
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-700 rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
<h2 className="text-lg font-semibold dark:text-white">{title}</h2>
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
<h3 className="text-sm font-semibold text-gray-700 dark:text-zinc-200 border-b dark:border-zinc-700 pb-2">
Información del Concentrador
</h3>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Serial *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Serial *</label>
<input
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors["serialNumber"] ? "border-red-500" : ""
@@ -72,7 +72,7 @@ export default function ConcentratorsModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Nombre *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Nombre *</label>
<input
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors["name"] ? "border-red-500" : ""
@@ -90,7 +90,7 @@ export default function ConcentratorsModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Proyecto *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Proyecto *</label>
<select
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors["projectId"] ? "border-red-500" : ""
@@ -118,7 +118,7 @@ export default function ConcentratorsModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Ubicación</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Ubicación</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Ubicación del concentrador (opcional)"
@@ -129,7 +129,7 @@ export default function ConcentratorsModal({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Tipo *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Tipo *</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.type ?? "LORA"}
@@ -142,7 +142,7 @@ export default function ConcentratorsModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Estado</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Estado</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.status ?? "ACTIVE"}
@@ -157,7 +157,7 @@ export default function ConcentratorsModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Dirección IP</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Dirección IP</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="192.168.1.100"
@@ -167,7 +167,7 @@ export default function ConcentratorsModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Versión de Firmware</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Versión de Firmware</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="v1.0.0"
@@ -177,8 +177,8 @@ export default function ConcentratorsModal({
</div>
</div>
<div className="flex justify-end gap-2 pt-3 border-t">
<button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
<div className="flex justify-end gap-2 pt-3 border-t dark:border-zinc-700">
<button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 dark:text-zinc-300">
Cancelar
</button>
<button

48
src/pages/meters/MetersModal.tsx
View File

@@ -49,18 +49,18 @@ export default function MetersModal({
return (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-white rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
<h2 className="text-lg font-semibold">{title}</h2>
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-700 rounded-xl p-6 w-[500px] max-h-[90vh] overflow-y-auto space-y-4">
<h2 className="text-lg font-semibold dark:text-white">{title}</h2>
{/* FORM */}
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
<h3 className="text-sm font-semibold text-gray-700 dark:text-zinc-200 border-b dark:border-zinc-700 pb-2">
Información del Medidor
</h3>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Serial *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Serial *</label>
<input
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors["serialNumber"] ? "border-red-500" : ""
@@ -79,7 +79,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Meter ID</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Meter ID</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ID del medidor (opcional)"
@@ -90,7 +90,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Nombre *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Nombre *</label>
<input
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors["name"] ? "border-red-500" : ""
@@ -107,7 +107,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Concentrador *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Concentrador *</label>
<select
className={`w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
errors["concentratorId"] ? "border-red-500" : ""
@@ -135,7 +135,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Ubicación</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Ubicación</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Ubicación del medidor (opcional)"
@@ -146,7 +146,7 @@ export default function MetersModal({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Tipo</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Tipo</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.type ?? "LORA"}
@@ -159,7 +159,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Estado</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Estado</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.status ?? "ACTIVE"}
@@ -175,7 +175,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Fecha de Instalación</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Fecha de Instalación</label>
<input
type="date"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
@@ -192,13 +192,13 @@ export default function MetersModal({
{isPruebaProject && (
<div className="space-y-3">
<h3 className="text-sm font-semibold text-gray-700 border-b pb-2">
<h3 className="text-sm font-semibold text-gray-700 dark:text-zinc-200 border-b dark:border-zinc-700 pb-2">
Información Técnica (Proyecto PRUEBA)
</h3>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Protocol</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Protocol</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: LoRaWAN"
@@ -208,7 +208,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Voltage (V)</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Voltage (V)</label>
<input
type="number"
step="0.01"
@@ -222,7 +222,7 @@ export default function MetersModal({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Signal (dBm)</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Signal (dBm)</label>
<input
type="number"
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
@@ -233,7 +233,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Current Flow</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Current Flow</label>
<input
type="number"
step="0.0001"
@@ -247,7 +247,7 @@ export default function MetersModal({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Total Flow Reverse</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Total Flow Reverse</label>
<input
type="number"
step="0.0001"
@@ -259,7 +259,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Leakage Status</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Leakage Status</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.leakageStatus ?? ""}
@@ -276,7 +276,7 @@ export default function MetersModal({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Burst Status</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Burst Status</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.burstStatus ?? ""}
@@ -291,7 +291,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Manufacturer</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Manufacturer</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="ej: Kamstrup"
@@ -303,7 +303,7 @@ export default function MetersModal({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-sm text-gray-600 mb-1">Latitude</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Latitude</label>
<input
type="number"
step="0.00000001"
@@ -315,7 +315,7 @@ export default function MetersModal({
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Longitude</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Longitude</label>
<input
type="number"
step="0.00000001"
@@ -330,8 +330,8 @@ export default function MetersModal({
)}
{/* ACTIONS */}
<div className="flex justify-end gap-2 pt-3 border-t">
<button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100">
<div className="flex justify-end gap-2 pt-3 border-t dark:border-zinc-700">
<button onClick={onClose} className="px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 dark:text-zinc-300">
Cancelar
</button>
<button

20
src/pages/projects/ProjectsPage.tsx
View File

@@ -291,13 +291,13 @@ export default function ProjectsPage() {
{/* MODAL */}
{showModal && (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-white rounded-xl p-6 w-[450px] space-y-4">
<h2 className="text-lg font-semibold">
<div className="bg-white dark:bg-zinc-900 dark:border dark:border-zinc-700 rounded-xl p-6 w-[450px] space-y-4">
<h2 className="text-lg font-semibold dark:text-white">
{editingId ? "Editar Proyecto" : "Agregar Proyecto"}
</h2>
<div>
<label className="block text-sm text-gray-600 mb-1">Nombre *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Nombre *</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Nombre del proyecto"
@@ -307,7 +307,7 @@ export default function ProjectsPage() {
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Area *</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Area *</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Nombre del area"
@@ -317,7 +317,7 @@ export default function ProjectsPage() {
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Descripción</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Descripción</label>
<textarea
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Descripción del proyecto (opcional)"
@@ -328,7 +328,7 @@ export default function ProjectsPage() {
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Ubicación</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Ubicación</label>
<input
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Ubicación (opcional)"
@@ -338,7 +338,7 @@ export default function ProjectsPage() {
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Tipo de Toma</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Tipo de Toma</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.meterTypeId ?? ""}
@@ -359,7 +359,7 @@ export default function ProjectsPage() {
</div>
<div>
<label className="block text-sm text-gray-600 mb-1">Estado</label>
<label className="block text-sm text-gray-600 dark:text-zinc-400 mb-1">Estado</label>
<select
className="w-full border px-3 py-2 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
value={form.status ?? "ACTIVE"}
@@ -371,10 +371,10 @@ export default function ProjectsPage() {
</select>
</div>
<div className="flex justify-end gap-2 pt-3 border-t">
<div className="flex justify-end gap-2 pt-3 border-t dark:border-zinc-700">
<button
onClick={() => setShowModal(false)}
className="px-4 py-2 rounded hover:bg-gray-100"
className="px-4 py-2 rounded hover:bg-gray-100 dark:hover:bg-zinc-800 dark:text-zinc-300"
>
Cancelar
</button>