Jason Woltje
a5ed260fbd
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
46 lines
1.1 KiB
Markdown
46 lines
1.1 KiB
Markdown
# MS15-FE-006: MosaicLogo and MosaicSpinner Components
|
|
|
|
## Task
|
|
|
|
Create Mosaic logo icon component and spinner wrapper for use as the site-wide loading indicator.
|
|
|
|
## Files to Create
|
|
|
|
1. `apps/web/src/components/ui/MosaicLogo.tsx` — 5-element logo icon
|
|
2. `apps/web/src/components/ui/MosaicSpinner.tsx` — spinner wrapper
|
|
|
|
## Files to Modify
|
|
|
|
1. `apps/web/src/app/(authenticated)/layout.tsx` — replace loading spinner (isLoading block only)
|
|
|
|
## Design
|
|
|
|
- 4 corner squares: blue (TL), purple (TR), teal (BR), amber (BL)
|
|
- 1 center circle: pink
|
|
- CSS vars: --ms-blue-500, --ms-purple-500, --ms-teal-500, --ms-amber-500, --ms-pink-500
|
|
- Animation: linear 360deg rotation
|
|
|
|
## Props
|
|
|
|
### MosaicLogo
|
|
|
|
- size?: number (default 36)
|
|
- spinning?: boolean (default false)
|
|
- spinDuration?: number (default 20) seconds
|
|
- className?: string
|
|
|
|
### MosaicSpinner
|
|
|
|
- Wraps MosaicLogo with spinning=true
|
|
- label?: string — optional text label below
|
|
- fullPage?: boolean — center on screen
|
|
|
|
## Status
|
|
|
|
- [x] Scratchpad created
|
|
- [ ] MosaicLogo.tsx created
|
|
- [ ] MosaicSpinner.tsx created
|
|
- [ ] layout.tsx updated
|
|
- [ ] Lint clean
|
|
- [ ] Committed and pushed
|