ui: standardize empty state layout in goals view
Open
Beginner friendly
Nobody has claimed this yet.
area:goals
beginner friendly
bug
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
Standardize vertical padding, icon container styling, and CTA button alignment in the zero-goals empty state within goals-view.tsx.
Why this matters
Consistent empty states across all modules (Tasks, Goals, Projects, Habits) create a cohesive first-impression experience for new users.
📍 Where to work
src/features/goals/components/goals-view.tsx- Reference
src/features/tasks/components/tasks-view.tsxfor standard empty-state layout tokens.
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
Start by comparing the zero-goals empty state in src/features/goals/components/goals-view.tsx with the reference layout in src/features/tasks/components/tasks-view.tsx. Align the vertical padding, icon container styling, and CTA button alignment with the standard empty-state layout tokens. Done means the Goals empty state matches the Tasks reference and remains visually consistent.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100