Skip to content

Refactor UI design #70

Closed
Closed

Description

@CherryClairette

📋 Description

The initial UI content is not aligned with the UI choices that the team has agreed on. The app still uses the early dark-teal "glass" look (gradient background, white text), while the agreed designs (landing page, signup, zone detail) use a cream background, navy text and primary buttons, teal calls to action, orange for the Vigilance score, and white rounded cards with soft shadows.

Scope: bring the two existing screens (landing, dashboard placeholder, auth page will later be replaced by Firebase service) and the shared styles in line with the designs, and define the design tokens that upcoming features (map, zone detail, dashboard) will reuse. No new features, no behaviour changes.

✅ Acceptance Criteria

  • Design tokens (colors, radii, shadows, font) are defined once as CSS variables and exposed in the Tailwind config, with no hard-coded colors in the screens listed below
  • Global page background, text color and typography match the designs (cream background, navy text)
  • Landing page matches design/landing_page.png, and the hero text is readable against its background (contrast meets WCAG AA)
  • Dashboard placeholder uses the new tokens and the card style, so VS-10 can build on it
  • Reusable primitives needed by the next tickets exist: card, pill button (primary / CTA), chip, score badge
  • Old glass-specific classes that are no longer used are removed from src/index.css
  • Existing tests still pass, with updates only where accessible text changed; the Playwright smoke test passes
  • No visual regression on mobile widths (320–768px)
  • Coverage is maintained or improved, and lint, prettier and tsc pass
  • The Tailwind vs hand-written CSS decision is recorded in docs/architecture-decisions.md, and the Notion doc is updated

🔗 Prerequisite Issues

This should be done with priority as this will block the following dev
Blocks: VS-07 (map core), VS-14 (zone detail panel), VS-10 (dashboard).
Blocked by: the API layer PR (#17) merged into dev.

Metadata

Metadata

Labels

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions