[UI] Standardize Hover Elevation and Gold Border on Streak Summary Card
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
Target File
src/features/habits/components/streak-summary-card.tsx
Estimated Time
5-10 minutes
Difficulty
Level 1 (Beginner)
Why This Matters
Consistency across obsidian glassmorphic card containers improves visual cohesion across OS workspaces.
Current Behavior
streak-summary-card.tsx renders static border styles without subtle hover elevation or gold border glow.
Requested Change
Add transition-all duration-200 hover:border-[#d4af37]/30 hover:shadow-lg to the primary card container.
Acceptance Criteria
- Card container smoothly transitions border opacity on hover.
- npm run lint passes without warnings.
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 primary card container. Add the requested hover transition, border opacity, and elevation classes, then run npm run lint. Done means the card transitions smoothly on hover and lint passes without warnings.
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
- 90/100