ui: refine category badge opacity in transaction list
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
🎯 What needs to be done
In src/features/finance/components/transaction-list.tsx, refine the category badge background opacity tokens in COLOR_MAP from bg-*-400/10 to bg-*-400/15 for enhanced contrast against deep obsidian card backgrounds.
Why this matters
Slightly higher badge background opacity enhances readability for category tags (e.g. Income, Food, Housing, Utilities) across light/dark ambient lighting.
📍 Where to work
src/features/finance/components/transaction-list.tsx (lines 48–57)
🧭 Implementation guidance
- Open
src/features/finance/components/transaction-list.tsx. - Locate the
COLOR_MAPobject near line 48. - Update the
bgproperty in each color record to use/15instead of/10. - Do not modify any logic or other components.
✅ Acceptance criteria
-
COLOR_MAPbackground opacity tokens updated to/15. - ESLint and TypeScript checks 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/finance/components/transaction-list.tsx and inspect the COLOR_MAP object around lines 48–57. Update each category badge background token from /10 to /15 without changing other logic or components, then run the ESLint and TypeScript checks; done means all COLOR_MAP backgrounds use /15 and both checks pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 95/100