diff --git a/apps/pwa/src/components/BrandSlot.tsx b/apps/pwa/src/components/BrandSlot.tsx index 5ee2090..2214335 100644 --- a/apps/pwa/src/components/BrandSlot.tsx +++ b/apps/pwa/src/components/BrandSlot.tsx @@ -1,24 +1,20 @@ /** * BrandSlot — Phase 17 seam component for the login page brand area. * - * Phase 19 ships a minimal shippable placeholder: a 48px circle with "FS" + * Phase 19 shipped a minimal shippable placeholder: a 48px circle with "FS" * initials, the app name "FamilySync", and the tagline "Family calendar & lists". * - * Phase 17 replaces the internals of this component (swap the placeholder div for - * an with a real logo) without touching LoginPage's layout. This isolates - * the branding seam — see 19-UI-SPEC.md §Brand Slot section. + * Phase 17 replaces the placeholder div with a decorative logo — the approved + * FamilySync family-house SVG. LoginPage layout is untouched (seam contract honored; + * see 19-UI-SPEC.md §Brand Slot section). * - * CSS custom properties used (all set in tokens.css with placeholder defaults; - * Phase 17 overrides these values): - * --brand-logo-bg — logo circle background (default: var(--color-member-0)) - * --brand-logo-text — initials color (default: #ffffff) - * --brand-logo-size — circle diameter (default: 48px) - * --brand-logo-border-radius — circle shape (default: 50%) + * CSS custom properties used (all set in tokens.css): + * --brand-logo-size — image size (default: 48px) + * --brand-logo-border-radius — image border-radius (0 — SVG draws its own shape) * * Accessibility: *

contains the app name — screen readers read "FamilySync" as the page title. - * The logo circle is aria-hidden (the text is the accessible label). - * No today → no broken image ref → no layout shift when Phase 17 replaces it. + * The logo image is decorative (alt="", aria-hidden="true"). * * Security: all copy is plain-text JSX children — no dangerouslySetInnerHTML (T-05-24). */ @@ -26,28 +22,22 @@ export function BrandSlot() { return (
- {/* Phase 17 replaces this div with */} - + /> {/* App name —

so screen readers identify the page (UI-SPEC §Accessibility) */}