Visual redesign: modern, sleek look and feel across all pages
Elazar, 2026-10-08 CLI: 'UI is horrible, research online for modern sleek look and feel and apply'. This is a visual-design pass, NOT a token/contrast pass - the semantic token layer and the light/dark themes landed earlier the same day (globals.css, 0 WCAG failures) and are not the complaint. What is actually weak: every page is an unstyled wall of table rows with no visual hierarchy, no spacing rhythm, no card/elevation treatment, no typographic scale, default-weight headings, and dense untruncated email columns; /participantes paginates 50 of 3071 with a bare 'Siguiente'; /certificados is 160 identical rows with a plain 'Marcar enviado' per row. Research current dashboard/table design practice before writing CSS. All user-facing strings stay Spanish. Keep using semantic tokens - do not reintroduce raw palette classes or dark: variants, both of which were deliberately removed. Pages: / participantes participantes/[id] certificados kpis configuracion ingest admin/usuarios.
Activity
-
parent=#4528
-
Shipped in ddfbdfa. New: src/components/app-shell.tsx (sidebar nav, role-filtered, active item via a 'current' prop so no client JS) and src/components/ui.tsx (PageHeader/Section/Card/StatCard/Badge/TableFrame/Pagination/EmptyState, 12-14-16-20-24-30 type scale). All 8 pages restyled: sticky table heads, right-aligned tabular numbers, truncated emails with title, tier badges, row hover, real pagination (1-50 de 3071), empty states, certificados grouped by tier, KPI stat cards, Zoom unique-viewers column surfaced. Dates now render in Spanish via src/lib/format.ts, which splits the ISO string rather than building a Date (new Date('YYYY-MM-DD') is UTC midnight and would show the previous day in Argentina). Token layer kept: semantic tokens only, no dark: variants, no raw palette. Light --fg-subtle darkened #67727f -> #616c79 because it measured 4.38:1 on the new --row-hover and 4.40:1 on --surface-muted; it now clears 4.5:1 on every light surface.
-
completed
-
Two follow-up commits after the note above. b35b330: TableFrame got max-h-[70dvh] overflow-auto - the sticky thead never moved because an overflow-x-auto wrapper also computes overflow-y:auto and so becomes the sticky scroll container, but with no height cap it never scrolls; also border-separate border-spacing-0 with the row divider on the td, since in collapse mode the head border does not travel with the stuck head. Same commit corrected the ingest copy: "nada se escribe en la base hasta el ultimo paso" was false, createIngestDraft inserts into public.ingest_drafts at preview; it now says the webinar and its attendance are not recorded until the last step, and the file hint warns against renaming Zoom column headers instead of claiming the file must be unedited. c16ef6f: the sign-in header stacks below sm so the wordmark does not wrap on a 390px phone. Console: a Failed-to-construct-URL exception seen during verification is NOT an app bug. Next router does new URL(canonicalUrl, window.location.href) in a useMemo; my phone-width probe rendered the page in an about:srcdoc iframe, which is not a valid URL base. Five clean page loads with console tracking armed produce zero messages. Coverage: admin role only, editor and viewer shell views never rendered. No write control was clicked - Marcar enviado, Guardar configuracion and the ingest commit are all untested (WEBCERTI-7). Phone width and the signed-out page were measured in a same-origin iframe, not a real window resize: the WM ignored every resize_window call.