diff --git a/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md b/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md index f0e2ce3..8b5d374 100644 --- a/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md +++ b/.beans/nuzlocke-tracker-dpw7--modernize-website-design-and-look-and-feel.md @@ -91,7 +91,7 @@ Self-host **Geist** (or Inter/JetBrains Mono pairing): - [x] Update all page-level backgrounds and containers - [x] Update modal styles (EncounterModal, StatusChangeModal, etc.) - [x] Update badge/indicator styles (TypeBadge, RuleBadges, EncounterMethodBadge) -- [ ] Add dark/light mode toggle to nav +- [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) diff --git a/frontend/index.html b/frontend/index.html index b63df98..aa2b45e 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -17,6 +17,15 @@ +
diff --git a/frontend/src/components/ConditionBadge.tsx b/frontend/src/components/ConditionBadge.tsx index 039ba4c..133b43e 100644 --- a/frontend/src/components/ConditionBadge.tsx +++ b/frontend/src/components/ConditionBadge.tsx @@ -1,8 +1,20 @@ const CONDITION_CONFIG: Record = { - 'Mega Evolution': { label: 'Mega', color: 'bg-fuchsia-900/40 text-fuchsia-300' }, - Gigantamax: { label: 'G-Max', color: 'bg-red-900/40 text-red-300' }, - Dynamax: { label: 'D-Max', color: 'bg-rose-900/40 text-rose-300' }, - Terastallize: { label: 'Tera', color: 'bg-teal-900/40 text-teal-300' }, + 'Mega Evolution': { + label: 'Mega', + color: 'bg-fuchsia-900/40 text-fuchsia-300 light:bg-fuchsia-100 light:text-fuchsia-700', + }, + Gigantamax: { + label: 'G-Max', + color: 'bg-red-900/40 text-red-300 light:bg-red-100 light:text-red-700', + }, + Dynamax: { + label: 'D-Max', + color: 'bg-rose-900/40 text-rose-300 light:bg-rose-100 light:text-rose-700', + }, + Terastallize: { + label: 'Tera', + color: 'bg-teal-900/40 text-teal-300 light:bg-teal-100 light:text-teal-700', + }, } export function ConditionBadge({ diff --git a/frontend/src/components/EncounterMethodBadge.tsx b/frontend/src/components/EncounterMethodBadge.tsx index 5513d3d..df6a7fe 100644 --- a/frontend/src/components/EncounterMethodBadge.tsx +++ b/frontend/src/components/EncounterMethodBadge.tsx @@ -1,17 +1,56 @@ export const METHOD_CONFIG: Record = { - starter: { label: 'Starter', color: 'bg-yellow-900/40 text-yellow-300' }, - gift: { label: 'Gift', color: 'bg-pink-900/40 text-pink-300' }, - fossil: { label: 'Fossil', color: 'bg-amber-900/40 text-amber-300' }, - trade: { label: 'Trade', color: 'bg-emerald-900/40 text-emerald-300' }, - walk: { label: 'Grass', color: 'bg-green-900/40 text-green-300' }, - headbutt: { label: 'Headbutt', color: 'bg-lime-900/40 text-lime-300' }, - surf: { label: 'Surfing', color: 'bg-blue-900/40 text-blue-300' }, - 'rock-smash': { label: 'Rock Smash', color: 'bg-orange-900/40 text-orange-300' }, - 'old-rod': { label: 'Old Rod', color: 'bg-cyan-900/40 text-cyan-300' }, - 'good-rod': { label: 'Good Rod', color: 'bg-sky-900/40 text-sky-300' }, - 'super-rod': { label: 'Super Rod', color: 'bg-indigo-900/40 text-indigo-300' }, - horde: { label: 'Horde', color: 'bg-rose-900/40 text-rose-300' }, - sos: { label: 'SOS', color: 'bg-violet-900/40 text-violet-300' }, + starter: { + label: 'Starter', + color: 'bg-yellow-900/40 text-yellow-300 light:bg-yellow-100 light:text-yellow-800', + }, + gift: { + label: 'Gift', + color: 'bg-pink-900/40 text-pink-300 light:bg-pink-100 light:text-pink-700', + }, + fossil: { + label: 'Fossil', + color: 'bg-amber-900/40 text-amber-300 light:bg-amber-100 light:text-amber-800', + }, + trade: { + label: 'Trade', + color: 'bg-emerald-900/40 text-emerald-300 light:bg-emerald-100 light:text-emerald-700', + }, + walk: { + label: 'Grass', + color: 'bg-green-900/40 text-green-300 light:bg-green-100 light:text-green-700', + }, + headbutt: { + label: 'Headbutt', + color: 'bg-lime-900/40 text-lime-300 light:bg-lime-100 light:text-lime-800', + }, + surf: { + label: 'Surfing', + color: 'bg-blue-900/40 text-blue-300 light:bg-blue-100 light:text-blue-700', + }, + 'rock-smash': { + label: 'Rock Smash', + color: 'bg-orange-900/40 text-orange-300 light:bg-orange-100 light:text-orange-800', + }, + 'old-rod': { + label: 'Old Rod', + color: 'bg-cyan-900/40 text-cyan-300 light:bg-cyan-100 light:text-cyan-700', + }, + 'good-rod': { + label: 'Good Rod', + color: 'bg-sky-900/40 text-sky-300 light:bg-sky-100 light:text-sky-700', + }, + 'super-rod': { + label: 'Super Rod', + color: 'bg-indigo-900/40 text-indigo-300 light:bg-indigo-100 light:text-indigo-700', + }, + horde: { + label: 'Horde', + color: 'bg-rose-900/40 text-rose-300 light:bg-rose-100 light:text-rose-700', + }, + sos: { + label: 'SOS', + color: 'bg-violet-900/40 text-violet-300 light:bg-violet-100 light:text-violet-700', + }, } /** Display order for encounter method groups */ diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 764e479..920ed40 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,5 +1,6 @@ import { useState } from 'react' import { Link, Outlet, useLocation } from 'react-router-dom' +import { useTheme } from '../hooks/useTheme' const navLinks = [ { to: '/runs/new', label: 'New Run' }, @@ -37,6 +38,39 @@ function NavLink({ ) } +function ThemeToggle() { + const { theme, toggle } = useTheme() + + return ( + + ) +} + export function Layout() { const [menuOpen, setMenuOpen] = useState(false) const location = useLocation() @@ -68,9 +102,11 @@ export function Layout() { {link.label} ))} + {/* Mobile hamburger */} -
+
+