feat(web): MS15 Phase 1 — Design System & App Shell (#451)
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>
This commit was merged in pull request #451.
This commit is contained in:
2026-02-22 20:57:06 +00:00
committed by jason.woltje
parent 9b5c15ca56
commit a5ed260fbd
15 changed files with 2451 additions and 313 deletions

View File

@@ -0,0 +1,45 @@
# 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