feat(web): UI polish across header / hero / pipeline / stats#68
Merged
feat(web): UI polish across header / hero / pipeline / stats#68
Conversation
…, halo stats Visual polish across the platform shell. No logic, behaviour or i18n changes — only Tailwind classes, CSS tokens and JSX layout. Header - Sticky with backdrop-blur, h-16 (was thin py-3) - Logo: monogram "P" in blue→indigo→violet gradient tile + status dot + "Functional Annotation" sub-tagline - Removed pipe separators between nav groups; rebuilt as pills with active underline bar; dropdown popovers add a section header and bullet indicators Home / showcase - Hero: gradient text 5xl-7xl, ambient blur blobs, pill badge with the PROTEA acronym expansion and a pulsing dot - Best-overall spotlight: Fmax 6xl in gradient, MFO/BPO/CCO tiles in blue / violet / emerald (was uniform gray) - Pipeline cards w-32 h-28 with squared icon badge + SVG arrow connectors (was w-28 h-20 with bare letters) - Stats: colored gradient halos behind 4xl numbers - CTAs: rounded-xl py-3 px-7 font-semibold Other components - FloatingJobsWidget: gradient pill, lift on hover, gradient progress bar - Breadcrumbs: text-sm, slate chevrons, bold active label (was nearly-invisible text-xs gray-400) - LanguageSwitcher: 🌐 icon, h-9 height aligned with header siblings - ResetDbButton / SupportButton: harmonised h-9 + tighter typography globals.css - Bug fix: body font-family no longer forces Arial over Geist - Design tokens (background, surface, border, primary, shadows) - Subtle scrollbar, focus ring, prefers-reduced-motion - Helpers: protea-card, protea-gradient-text, protea-grid-bg
5 tasks
github-actions Bot
pushed a commit
that referenced
this pull request
May 8, 2026
…adoption (#79) ## Why The platform shell polish (#68) introduced **slate-** on the header / home / nav, but every other page kept **gray-**. Same session, two neutral palettes side by side. This PR retires that drift in one sweep, plus two adjacent density / loading-state cleanups identified in the UX audit. ## What ### 1. Palette unification — gray → slate - Single sed sweep across **24 page and component files** (641 occurrences of `gray-{50…900}` → `slate-{50…900}`). - Semantic colors (red / blue / emerald / amber / violet) untouched. - No tone shift in the visible result; uniform now across the whole app. ### 2. Density bump in body cells - `text-xs` (12px) is hostile for tabular numbers in the data-heavy pages. Selective bump to `text-[13px]` inside `<td>` cells and body paragraphs in `/scoring`, `/annotations`, `/reranker`, `/evaluation`, `/jobs/[id]`, `/proteins/[accession]`. - Labels, chips, badges, and `tracking-*` uppercase section headers stay at `text-xs` — intentional hierarchy. ### 3. Skeleton adoption - The repo ships `components/Skeleton.tsx` but pages were rolling their own `bg-gray-100 rounded animate-pulse`. - Migrated the most visible loading screen (`/benchmark`) to use `<Skeleton />`. - Other ad-hoc pulse patterns inside card grids are wrapper-level pulses, not inner skeletons — left intact for a follow-up that designs proper skeleton card variants. ## Test plan - [x] `next build` green; 18 routes - [x] Backend untouched — no changes outside `apps/web/` - [ ] Visual: open a previously-gray page (e.g. `/jobs`, `/embeddings`, `/scoring`) — color rhymes with the polished header now - [ ] Body text in `/scoring`, `/annotations`, `/reranker` reads cleaner; chip/label sizes unchanged - [ ] `/benchmark` loading state uses the canonical `<Skeleton/>` look (compare to fast initial paint) ## Notes - Worktree `protea-coherencia-visual`, fully isolated. Sister PR (#TBA) for benchmark heatmap small-multiples is in flight from `protea-benchmark-heatmap`, no overlap.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Visual polish across the Next.js platform shell. No logic, behaviour or i18n changes — only Tailwind classes, CSS tokens and JSX layout. 9 files, +464/-195.
Most visible deltas
h-16withbackdrop-blur; logo monogram "P" in blue→indigo→violet gradient tile + status dot + "Functional Annotation" sub-tagline; pipe separators removed; nav rebuilt as pills with active underline bar; dropdown popovers gain section headers + bullet indicators.6xlin gradient (was4xlplain black); MFO / BPO / CCO tiles in blue / violet / emerald (were uniform gray).w-32 h-28with squared icon badge + SVG arrow connectors (werew-28 h-20with bare letters).4xlnumbers.text-sm+ chevrons + bold active label (were near-invisibletext-xs gray-400).h-9and tighter typography.globals.cssfont-familyno longer forces Arial over the Geist next/font variable.prefers-reduced-motion.protea-card,protea-gradient-text,protea-grid-bg.Test plan
npm run buildclean (verified locally — 18 routes compile, no TS errors)poetry run ruff check protea apps/webclean (verified locally)/(hero, spotlight, pipeline, stats) — desktop ≥ lg/mobile — hamburger menu opens, dropdowns fold per-group/jobs/<id>or/proteins/<acc>)/admin/reset-db/benchmark,/proteins,/jobs(those pages were untouched but live under the new layout)