Jason Woltje
e615fa80a5
All checks were successful
ci/woodpecker/push/web Pipeline was successful
- Add MosaicLogo component with 5-element Mosaic brand icon (4 corner squares + center circle), using CSS custom properties for theme-aware colors and optional rotation animation - Add MosaicSpinner wrapper that enables spinning and supports optional label and full-page overlay modes - Replace generic CSS spinner in authenticated layout loading state with MosaicSpinner for consistent brand identity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1.1 KiB
1.1 KiB
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
apps/web/src/components/ui/MosaicLogo.tsx— 5-element logo iconapps/web/src/components/ui/MosaicSpinner.tsx— spinner wrapper
Files to Modify
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
- Scratchpad created
- MosaicLogo.tsx created
- MosaicSpinner.tsx created
- layout.tsx updated
- Lint clean
- Committed and pushed