TheVicky1 / TheVicky1/Pact_OS

ui: enhance hover elevation and gold border on active focus card

Open Beginner friendly
#26 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area:focus beginner friendly community contributions-welcome difficulty:beginner difficulty:easy enhancement good first issue help wanted time:<15m type:ui up-for-grabs
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

  1. Open src/features/dashboard/components/active-focus-card.tsx.
  2. Locate the root container div or GlassCard.
  3. Add hover:border-gold/30 hover:shadow-[0_0_20px_rgba(212,175,55,0.08)] transition-all duration-200 to the class list.
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.