[UI] Enhance Streak Summary Highlight Glow on Habit Card
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
- Labels:
good first issue,ui,difficulty:beginner,area:dashboard - Target File:
src/features/habits/components/streak-summary-card.tsx - Estimated Time: 10–15 minutes
- Difficulty: Level 2 (Beginner)
Why This Matters
Active streaks represent personal discipline momentum. Adding a subtle hover glow effect to the highest-streak milestone card provides rewarding tactile feedback.
Current Behavior
The metric card in src/features/habits/components/streak-summary-card.tsx has static border styling.
Requested Change
Add a subtle transition class to the streak summary metric card:
transition-all duration-200 hover:border-amber-500/30 hover:shadow-[0_0_15px_rgba(212,175,55,0.05)]
Acceptance Criteria
- Hover styling added to the card container in
src/features/habits/components/streak-summary-card.tsx. - Uses PACT Gold RGB values (
212, 175, 55).
Verification
npm run lint
npx tsc --noEmit
Contributor Notes
Single file Tailwind CSS addition.
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/habits/components/streak-summary-card.tsx and locate the streak summary metric card container with its existing border styling. Add the specified transition, amber hover border, and PACT Gold shadow classes, then run npm run lint and npx tsc --noEmit; done means the card has the requested hover glow and both checks pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 95/100