ui: enhance hover elevation and gold border on active focus card
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 48m
- Merged PRs (30d)
- 41
Description
🎯 What needs to be done
Add smooth hover elevation and a subtle gold border accent (hover:border-gold/30 transition-all duration-200) to the active focus session card on the dashboard overview.
Why this matters
The focus card is a primary interactive gateway on the dashboard. Polishing its hover state provides immediate visual feedback aligned with PACT's luxury aesthetic.
📍 Where to work
src/features/dashboard/components/active-focus-card.tsx
🧭 Implementation guidance
- Open
src/features/dashboard/components/active-focus-card.tsx. - Locate the root container
divorGlassCard. - Add
hover:border-gold/30 hover:shadow-[0_0_20px_rgba(212,175,55,0.08)] transition-all duration-200to the class list. - Verify that visual styling matches
docs/DESIGN_SYSTEM.md.
✅ Acceptance criteria
- Active focus card responds with a subtle gold glow on desktop hover.
- No layout shift occurs during hover.
- TypeScript check and lint pass.
🧪 Verification
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open src/features/dashboard/components/active-focus-card.tsx and inspect the root div or GlassCard. Compare the intended styling with docs/DESIGN_SYSTEM.md, then verify the card has a smooth desktop hover glow without layout shift. Run the TypeScript check and lint to confirm the change is clean.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 92/100