ui: add subtle icon glow in streak summary card
Open
Beginner friendly
Nobody has claimed this yet.
area:habits
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
- 39m
- Merged PRs (30d)
- 39
Description
🎯 What needs to be done
In src/features/habits/components/streak-summary-card.tsx, add a subtle amber shadow/glow to the Top Streak Flame icon badge container.
Why this matters
Visual feedback on top active streaks provides celebratory visual polish without distracting from focused daily execution.
📍 Where to work
src/features/habits/components/streak-summary-card.tsx
🧭 Implementation guidance
- Open
src/features/habits/components/streak-summary-card.tsx. - Locate the Top Streak card icon container
div(around line 55). - Add
shadow-sm shadow-amber-500/20to the class list. - Save and verify formatting.
✅ Acceptance criteria
- Top Streak icon badge container includes
shadow-sm shadow-amber-500/20. - No layout shift or unintended styling changes.
🧪 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/habits/components/streak-summary-card.tsx and locate the Top Streak icon container div around line 55. Add the specified amber shadow classes, then verify formatting and confirm the icon badge has no layout shift or other unintended styling changes.
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
- 94/100