kwila/market
1
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: UI polish and improvements #61

Merged
addison merged 19 commits from exe-dev-bot/market:ui-polish into main 2026-01-10 14:38:40 -05:00
Conversation 0 Commits 19 Files changed 36 +491 -387
exe-dev-bot commented 2026-01-10 13:12:59 -05:00
Contributor
Copy link

Summary

Completes remaining UI & Polish tasks from spec 000-mvp, plus two new improvements.

Changes

Error Handling

  • Add ErrorBoundary component wrapping key page components
  • Add src/lib/errors.ts with user-friendly error message utilities
  • Standardize error colors to use theme error tokens

Loading States

  • Add Spinner component with size variants
  • Add LoadingOverlay component for page-level loading
  • Add loading prop to Button that shows spinner alongside text
  • Update all forms to use the new loading prop

Form Validation

  • Add FormField component for consistent label/error/hint styling
  • Fix inconsistent error text colors (was using hardcoded red)

Branding

  • Improve logo with rounded corners and larger text (less margin)
  • Regenerate favicon and icon with matching style

Terminology

  • Rename "Items" to "Listings" throughout the UI for better intuitiveness
  • Context-aware empty states (distinguishes "no listings yet" vs "no matches for filters")

Checklist

  • All checks pass (just check)
  • Spec 000-mvp.md updated with completed tasks
## Summary Completes remaining UI & Polish tasks from spec 000-mvp, plus two new improvements. ## Changes ### Error Handling - Add `ErrorBoundary` component wrapping key page components - Add `src/lib/errors.ts` with user-friendly error message utilities - Standardize error colors to use theme `error` tokens ### Loading States - Add `Spinner` component with size variants - Add `LoadingOverlay` component for page-level loading - Add `loading` prop to `Button` that shows spinner alongside text - Update all forms to use the new loading prop ### Form Validation - Add `FormField` component for consistent label/error/hint styling - Fix inconsistent error text colors (was using hardcoded red) ### Branding - Improve logo with rounded corners and larger text (less margin) - Regenerate favicon and icon with matching style ### Terminology - Rename "Items" to "Listings" throughout the UI for better intuitiveness - Context-aware empty states (distinguishes "no listings yet" vs "no matches for filters") ## Checklist - [x] All checks pass (`just check`) - [x] Spec 000-mvp.md updated with completed tasks
- Add ErrorBoundary React component with fallback UI
- Wrap InviteManagerPage, ProfileEditorPage, and ItemFormPage with ErrorBoundary
- Display user-friendly error message with option to refresh
- Include expandable error details for debugging

Co-authored-by: Shelley <shelley@exe.dev>
- Add Spinner component with size variants
- Add LoadingOverlay component for page-level loading
- Add loading prop to Button component with spinner integration
- Update all forms to use loading prop instead of text-based loading states
- Buttons now show spinner alongside text when loading

Co-authored-by: Shelley <shelley@exe.dev>
- Add errors.ts utility with ERROR_MESSAGES constants
- Add getErrorMessage() for converting unknown errors to user-friendly text
- Add handleApiError() for consistent API error handling
- Update ContactInfoForm, DeleteItemButton, ItemForm, InviteManager to use error utilities

Co-authored-by: Shelley <shelley@exe.dev>
- Add FormField component for consistent label, error, and hint styling
- Update LoginForm to use FormField component
- Fix OTPForm error color to use theme error color (text-error-200)

Co-authored-by: Shelley <shelley@exe.dev>
- Add rounded corners to logo, favicon, and icon
- Increase text size for less margin around text
- Regenerate all PNG assets

Co-authored-by: Shelley <shelley@exe.dev>
refactor: use 'Listings' instead of 'Items' in UI
Some checks failed
ci.yml / refactor: use 'Listings' instead of 'Items' in UI (pull_request) Failing after 0s
Details
a36bfba634 
Improve user intuitiveness by using 'Listings' terminology:
- Update page titles and breadcrumbs
- Update button labels and form titles
- Update empty state messages
- Update confirmation dialogs and success messages

Co-authored-by: Shelley <shelley@exe.dev>
chore: remove unused logo.png and logo.html
Some checks failed
ci.yml / chore: remove unused logo.png and logo.html (pull_request) Failing after 0s
Details
c9c3a81d9c 
Only favicon.png (browser tab) and icon.png (apple-touch-icon) are used.

Co-authored-by: Shelley <shelley@exe.dev>
fix: address code review feedback
Some checks failed
ci.yml / fix: address code review feedback (pull_request) Failing after 0s
Details
1cc348c38d 
- Use Button component in ErrorBoundary instead of raw HTML button
- Remove unused LoadingOverlay component
- Fix remaining 'item' -> 'listing' terminology in UI text
- Simplify React import in ErrorBoundary

Co-authored-by: Shelley <shelley@exe.dev>
refactor: use FormField component in more forms
Some checks failed
ci.yml / refactor: use FormField component in more forms (pull_request) Failing after 0s
Details
aa8485bbbf 
- ContactInfoForm: contact type, value, visibility fields
- OnboardingWizard: invite code, display name fields
- ItemForm: title, description, price, visibility fields

Co-authored-by: Shelley <shelley@exe.dev>
refactor: simplify OTP input to single field
Some checks failed
ci.yml / refactor: simplify OTP input to single field (pull_request) Failing after 0s
Details
56012fdd88 
Replace 6-digit grid with simple input field:
- Fixes copy/paste issues on some browsers
- Uses autoComplete='one-time-code' for better mobile autofill
- Uses FormField component for consistency
- Removes complex state management for individual digits

Co-authored-by: Shelley <shelley@exe.dev>
fix: reduce favicon font size to prevent clipping
Some checks failed
ci.yml / fix: reduce favicon font size to prevent clipping (pull_request) Failing after 0s
Details
54bcfe73c1 
The trailing leg of 'm' was touching the edge at 48px.
Reduced to 40px with tighter letter-spacing for proper padding.

Co-authored-by: Shelley <shelley@exe.dev>
fix: add rounded corners to favicon and icon PNGs
Some checks failed
ci.yml / fix: add rounded corners to favicon and icon PNGs (pull_request) Failing after 0s
Details
5e70b5ddfb 
Use transparent body with rounded container div so the
PNG exports with actual rounded corners, not just CSS styling.

Co-authored-by: Shelley <shelley@exe.dev>
style: increase icon font size to 270px
Some checks failed
ci.yml / style: increase icon font size to 270px (pull_request) Failing after 0s
Details
2ce0420198 
Co-authored-by: Shelley <shelley@exe.dev>
fix: regenerate corrupted favicon.png
Some checks failed
ci.yml / fix: regenerate corrupted favicon.png (pull_request) Failing after 0s
Details
bfbf67eef6 
Co-authored-by: Shelley <shelley@exe.dev>
style: simplify listings count label
Some checks failed
ci.yml / style: simplify listings count label (pull_request) Failing after 0s
Details
65710507bc 
Co-authored-by: Shelley <shelley@exe.dev>
refactor: rename 'Item Type' to 'Listing Type'
Some checks failed
ci.yml / refactor: rename 'Item Type' to 'Listing Type' (pull_request) Failing after 0s
Details
65e544d639 
Co-authored-by: Shelley <shelley@exe.dev>
refactor: fix remaining 'item' -> 'listing' in UI text
Some checks failed
ci.yml / refactor: fix remaining 'item' -> 'listing' in UI text (pull_request) Failing after 0s
Details
0f8c3db302 
- 'Show archived items' -> 'Show archived listings'
- 'Previously sold items' -> 'Previously sold listings'

Co-authored-by: Shelley <shelley@exe.dev>
refactor: change search placeholder to 'Search listings...'
Some checks failed
ci.yml / refactor: change search placeholder to 'Search listings...' (pull_request) Failing after 0s
Details
8d6e09aedf 
Co-authored-by: Shelley <shelley@exe.dev>
fix: generate PNGs with transparent backgrounds
Some checks failed
ci.yml / fix: generate PNGs with transparent backgrounds (pull_request) Failing after 0s
Details
ci.yml / feat: UI polish and improvements (#61) (pull_request) Failing after 0s
Details
5c5e9b1aa6 
Add omitBackground=true to html2png API calls so the
rounded corners have actual transparency instead of white.

Co-authored-by: Shelley <shelley@exe.dev>
addison deleted branch ui-polish 2026-01-10 14:38:40 -05:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
kwila/market!61
No description provided.