# 07. Fix Apple Logo SVG In Social Auth Buttons

meta:
  id: landing-pages-and-admin-07
  feature: landing-pages-and-admin
  priority: P3
  depends_on: []
  tags: [bugfix, ui, svg, auth]

objective:
- Fix the Apple logo SVG in `SocialAuthButtons.tsx` which renders incorrectly. Replace the malformed SVG path with Apple's official logo path that renders properly in both light and dark modes.

deliverables:
- Updated `/web/src/components/auth/SocialAuthButtons.tsx` with correct Apple logo SVG
- SVG renders correctly at all sizes (h-5 w-5)
- SVG displays properly in both light and dark themes

steps:
- Locate the Apple SVG in `SocialAuthButtons.tsx` (lines 39-41):
  ```svg
  <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.05 20.28c-.98.95-2.05.88..." />
  </svg>
  ```
- Identify the issue: the current path data appears to be malformed or from an incorrect icon set
- Replace with Apple's official logo SVG path:
  - Use the standard Apple logo path from Heroicons or similar reputable source
  - Ensure `viewBox="0 0 24 24"` matches
  - Ensure `fill="currentColor"` for theme compatibility
- Test rendering in both light and dark modes
- Verify the SVG displays correctly on both `/login` and `/signup` pages

tests:
- Visual: Apple logo renders as recognizable Apple logo shape
- Visual: Logo displays correctly in light mode (white button, dark logo)
- Visual: Logo displays correctly in dark mode (dark button, light logo)
- Integration: Login page renders without SVG errors
- Integration: Signup page renders without SVG errors

acceptance_criteria:
- Apple logo SVG renders as a recognizable Apple logo on both login and signup pages
- Logo scales correctly at h-5 w-5 size
- Logo color adapts to theme (via `currentColor`)
- No SVG rendering errors in browser console
- Logo is centered properly within the button

validation:
- `cd /Users/mike/Code/Kordant/web && pnpm dev` then navigate to `/login` and `/signup`
- Verify Apple logo renders correctly on both pages
- Toggle dark/light theme and verify logo displays correctly in both
- Check browser console for any SVG-related warnings or errors
- Inspect element to verify SVG path data is valid

notes:
- Current Apple SVG path: `M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0c-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.6 5.98.52 7.13-.62 1.28-1.4 2.55-2.57 3.08Zm-3.12-15.2c.03-1.14.44-2.23 1.07-3.03.82-.98 2.11-1.63 3.32-1.59.06 1.24-.4 2.45-1.12 3.3-.77.9-1.98 1.52-3.27 1.32Z`
- This path appears to be a leaf/plant shape, not the Apple logo
- Recommended replacement: use official Apple logo from Heroicons outline or solid set
- Apple logo path (Heroicons outline style): `M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11`
- Keep the same `viewBox="0 0 24 24"` and `fill="currentColor"` attributes
- The Google logo SVG above it appears correct — only the Apple logo needs fixing