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

style: reskin NovaSpark en las 7 apps

Browse Source 
Del look editorial (verde #1B4332, esquinas a 0, botones en mayusculas)
al sistema NovaSpark: primario azul #2563EB, detalle naranja #F97316,
fondo #F8FAFC con tarjetas blancas rounded-xl + shadow-sm, chips
rounded-full semanticos, focus ring azul, transiciones 100-200ms.
Incluye headers de tabla en los PDFs (cotizador y estado de cuenta).
This commit is contained in:
Consult AS Technology
2026-09-03 02:35:34 +00:00
parent 89fcd1c579
commit 599dce2629
78 changed files with 842 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
apps/alta-clientes/src/pages/FirmaRemotaPage.tsx
View File

@@ -82,10 +82,10 @@ export default function FirmaRemotaPage() {
if (errorCarga) {
return (
<div className="min-h-screen bg-white text-neutral-900">
<div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
<main className="mx-auto max-w-xl px-4 py-24 text-center">
<span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
<p role="alert" className="mt-8 border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700">
<span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
<p role="alert" className="mt-8 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
{errorCarga}
</p>
</main>
@@ -95,29 +95,29 @@ export default function FirmaRemotaPage() {
if (!cliente) {
return (
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-[#F8FAFC]">
<main className="mx-auto max-w-xl px-4 py-24">
<p className="text-sm text-neutral-500">Cargando…</p>
<p className="text-sm text-[#64748B]">Cargando…</p>
</main>
</div>
)
}
return (
<div className="min-h-screen bg-white text-neutral-900">
<header className="border-b border-neutral-200 px-4 py-6">
<div className="min-h-screen bg-[#F8FAFC] text-[#111827]">
<header className="border-b border-[#E5E7EB] bg-white px-4 py-6">
<div className="mx-auto flex max-w-xl items-baseline gap-3">
<span className="text-sm font-bold uppercase tracking-widest">FRASA</span>
<h1 className="text-2xl font-light tracking-wide">Expediente digital</h1>
<span className="text-sm font-bold tracking-widest text-[#111827]">FRASA<span className="text-[#F97316]">.</span></span>
<h1 className="text-2xl font-semibold text-[#111827]">Expediente digital</h1>
</div>
</header>
<main className="mx-auto max-w-xl space-y-12 px-4 py-12">
<section>
<h2 className="text-lg font-light">
Hola, <span className="font-medium">{cliente.nombre}</span>
<h2 className="text-lg font-semibold text-[#111827]">
Hola, <span className="font-semibold">{cliente.nombre}</span>
</h2>
<p className="mt-2 text-sm font-light text-neutral-500">
<p className="mt-2 text-sm text-[#64748B]">
Proyecto {cliente.proyecto}
{cliente.unidad ? ` · Unidad ${cliente.unidad}` : ''}. Firma y sube los documentos de tu
expediente desde aquí.
@@ -125,11 +125,11 @@ export default function FirmaRemotaPage() {
</section>
<section aria-labelledby="firma-titulo">
<h3 id="firma-titulo" className="text-xs font-bold uppercase tracking-widest text-neutral-500">
<h3 id="firma-titulo" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
Tu firma
</h3>
{firmaOk ? (
<p role="status" className="mt-4 border border-accent bg-white px-4 py-3 text-xs font-bold uppercase tracking-widest text-accent">
<p role="status" className="mt-4 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm font-medium text-green-700">
Firma registrada correctamente
</p>
) : (
@@ -140,7 +140,7 @@ export default function FirmaRemotaPage() {
type="button"
disabled={enviandoFirma}
onClick={() => void enviarFirma()}
className="mt-4 bg-accent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-white transition-colors duration-150 hover:bg-neutral-900 disabled:opacity-40"
className="mt-4 rounded-lg bg-accent px-5 py-2.5 text-sm font-medium text-white shadow-sm transition-all duration-100 ease-out hover:bg-accent-hover disabled:opacity-40"
>
{enviandoFirma ? 'Enviando…' : 'Enviar firma'}
</button>
@@ -149,22 +149,22 @@ export default function FirmaRemotaPage() {
</section>
<section aria-labelledby="docs-titulo">
<h3 id="docs-titulo" className="text-xs font-bold uppercase tracking-widest text-neutral-500">
<h3 id="docs-titulo" className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">
Tus documentos
</h3>
<ul className="mt-4 space-y-4">
{SLOTS_DOCUMENTOS.map(({ slot, etiqueta }) => {
const subido = cliente.documentos.find((d) => d.tipo === slot)
return (
<li key={slot} className="border border-neutral-200 bg-white px-4 py-3">
<p className="text-xs font-bold uppercase tracking-widest text-neutral-500">{etiqueta}</p>
<li key={slot} className="rounded-xl border border-[#E5E7EB] bg-white px-4 py-3 shadow-sm">
<p className="text-xs font-semibold uppercase tracking-wider text-[#64748B]">{etiqueta}</p>
{subido ? (
<p role="status" className="mt-2 text-sm text-neutral-900">
<p role="status" className="mt-2 text-sm text-[#111827]">
✓ {subido.nombreArchivo}
</p>
) : (
<div className="mt-2">
<label className="inline-block cursor-pointer border border-neutral-900 bg-transparent px-5 py-2.5 text-xs font-bold uppercase tracking-widest text-neutral-900 transition-colors duration-150 hover:bg-neutral-900 hover:text-white">
<label className="inline-block cursor-pointer rounded-lg border border-[#D1D5DB] bg-white px-5 py-2.5 text-sm font-medium text-[#374151] shadow-sm transition-all duration-100 ease-out hover:bg-[#F9FAFB]">
{subiendoSlot === slot ? 'Subiendo…' : 'Seleccionar archivo'}
<input
type="file"
@@ -178,7 +178,7 @@ export default function FirmaRemotaPage() {
}}
/>
</label>
<p className="mt-2 text-xs font-light text-neutral-500">PDF/JPG/PNG · máx 10 MB</p>
<p className="mt-2 text-xs text-[#64748B]">PDF/JPG/PNG · máx 10 MB</p>
</div>
)}
{erroresDoc[slot] && (