Julian Tabel
a381633413
Implement theme switching via sun/moon toggle in nav bar. Dark
remains the default; light mode overrides surface, text, border,
accent, and status color tokens. Preference persists in localStorage
and falls back to prefers-color-scheme. An inline script in
index.html prevents flash of wrong theme on load.
Define a Tailwind v4 @custom-variant for light mode and update all
badge components (encounter method, rule, condition) to use
light:bg-{color}-100 / light:text-{color}-700 for readable contrast
on light surfaces.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
127 lines
5.6 KiB
Markdown
127 lines
5.6 KiB
Markdown
---
|
|
# nuzlocke-tracker-dpw7
|
|
title: Modernize website design and look-and-feel
|
|
status: in-progress
|
|
type: feature
|
|
priority: normal
|
|
created_at: 2026-02-17T19:16:39Z
|
|
updated_at: 2026-02-17T21:04:45Z
|
|
---
|
|
|
|
Overhaul the UI to a dark-first, techy aesthetic with a cohesive brand identity derived from the ANT steel ant logo.
|
|
|
|
## Design direction
|
|
|
|
**Dark & techy** — dark-first surfaces, subtle glow/accent effects, code-editor-influenced aesthetic. Think GitHub dark, Discord, or Linear dark mode. Light mode becomes the secondary theme.
|
|
|
|
## 1. Brand palette + Tailwind theme
|
|
|
|
Define custom Tailwind v4 theme tokens in `index.css` using `@theme`:
|
|
|
|
- **Surfaces:** dark navy/charcoal base (`#0f1117`, `#161b22`, `#1c2128`) with layered elevation (darker = further back, lighter = elevated)
|
|
- **Accent:** steel blue from the logo (`#395E73`, `#7EB0CE`) as the primary interactive color
|
|
- **Text:** off-white primary (`#e6edf3`), muted gray secondary (`#7d8590`)
|
|
- **Status colors:** keep green/red/blue semantics but shift to darker, more saturated variants that work on dark surfaces
|
|
- **Borders:** subtle (`rgba(255,255,255,0.08)`) instead of gray-200/700
|
|
|
|
Replace ad-hoc Tailwind color classes throughout all components with theme tokens.
|
|
|
|
## 2. Typography
|
|
|
|
Self-host **Geist** (or Inter/JetBrains Mono pairing):
|
|
|
|
- Geist Sans for UI text (headings, labels, body)
|
|
- Geist Mono for data-heavy elements (stats numbers, encounter rates, levels)
|
|
- Set up via `@font-face` in `index.css`, configure in Tailwind `@theme`
|
|
- Establish clear size/weight hierarchy: page titles (2xl bold), section headers (lg semibold), body (sm regular), labels (xs medium)
|
|
|
|
## 3. Navigation redesign
|
|
|
|
- Add the ant SVG logo mark next to "ANT" in the nav
|
|
- Active route indicator (accent-colored underline or background highlight)
|
|
- Subtle bottom border glow or gradient accent line
|
|
- Slightly translucent/backdrop-blur nav background for depth
|
|
- Better mobile menu transitions (slide or fade instead of instant toggle)
|
|
|
|
## 4. Home page hero
|
|
|
|
- Full-width dark gradient hero section with the ant logo as a subtle watermark/background element
|
|
- Tagline with stronger typography hierarchy
|
|
- Stats summary (total runs, completion rate) as glowing stat pills if the user has data
|
|
- CTA button with accent glow/gradient
|
|
|
|
## 5. Cards & surfaces
|
|
|
|
- Dark elevated cards (`bg-[#161b22]`) with subtle border (`border-white/[0.06]`)
|
|
- Hover state: slight border brightness increase + subtle shadow glow in accent color
|
|
- Active/selected states with accent border
|
|
- Pokemon cards: dark backgrounds make sprites pop better, accent ring on hover
|
|
- Stat cards: accent-colored left border or top gradient
|
|
- Modals: dark overlay with backdrop-blur, card-style modal surface
|
|
|
|
## 6. Status indicators & badges
|
|
|
|
- Status badges: more vibrant on dark backgrounds (alive=emerald glow, dead=red glow, caught=blue)
|
|
- Type badges: use the established Pokemon type colors but tuned for dark surfaces
|
|
- Encounter method badges: same treatment
|
|
- Pulse animation on active run indicators
|
|
|
|
## 7. Micro-interactions
|
|
|
|
- Smooth transitions on all interactive elements (`transition-all duration-150`)
|
|
- Hover lift on cards (`hover:-translate-y-0.5`)
|
|
- Button press feedback (`active:scale-[0.98]`)
|
|
- Loading spinners in accent color
|
|
- Skeleton loading states for data-heavy pages
|
|
|
|
## 8. Dark/light mode
|
|
|
|
- Dark is the default and primary design target
|
|
- Light mode: invert surfaces to white/gray-50, keep accent colors, adjust contrast
|
|
- Toggle in nav (sun/moon icon)
|
|
- Persist preference in localStorage, respect `prefers-color-scheme`
|
|
|
|
## Checklist
|
|
|
|
- [x] Define Tailwind v4 `@theme` tokens (colors, fonts, spacing) in `index.css`
|
|
- [x] Self-host Geist font family, configure in theme
|
|
- [x] Redesign nav bar (logo mark, active states, backdrop blur, dark surface)
|
|
- [x] Redesign home page hero section
|
|
- [x] Update card/surface styles globally (Layout, PokemonCard, StatCard, GameCard)
|
|
- [x] Update all page-level backgrounds and containers
|
|
- [x] Update modal styles (EncounterModal, StatusChangeModal, etc.)
|
|
- [x] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge)
|
|
- [x] Add dark/light mode toggle to nav
|
|
- [x] Polish hover states and transitions across all interactive elements
|
|
- [ ] Add automated Playwright accessibility and mobile layout tests
|
|
- [ ] Verify accessibility (contrast ratios, focus indicators)
|
|
- [ ] Verify mobile layout and touch targets
|
|
|
|
## Automated verification approach
|
|
|
|
Add a Playwright test suite that covers both accessibility and mobile layout:
|
|
|
|
### Accessibility (axe-core + Playwright)
|
|
- Install `@axe-core/playwright` as a dev dependency
|
|
- Write a test that visits each major page and runs axe-core
|
|
- Pages to cover: Home, RunList, RunDashboard, RunEncounters, Stats, NewRun, GenlockeList, GenlockeDetail, NewGenlocke, admin pages
|
|
- Check for: color contrast (WCAG AA), missing ARIA labels, heading hierarchy, focus indicators, form label associations
|
|
- Run as part of CI
|
|
|
|
### Mobile layout (Playwright viewports)
|
|
- Test each major page at 3 viewport sizes: mobile (375x667), tablet (768x1024), desktop (1280x800)
|
|
- Assert no horizontal overflow (`document.documentElement.scrollWidth <= window.innerWidth`)
|
|
- Assert touch targets are at least 44x44px (axe-core `target-size` rule)
|
|
- Screenshot each page at each viewport for visual review
|
|
|
|
### Implementation
|
|
- Add test file: `frontend/e2e/accessibility.spec.ts`
|
|
- Add Playwright config if not present
|
|
- Add `test:a11y` script to `package.json`
|
|
|
|
## Constraints
|
|
|
|
- Tailwind-only (no additional CSS frameworks or component libraries)
|
|
- Self-hosted fonts only (no Google Fonts CDN)
|
|
- Maintain accessibility (WCAG AA contrast ratios, visible focus indicators)
|
|
- No performance regression (fonts loaded with `font-display: swap`, no layout shift) |