Kordant/tasks/landing-pages-and-admin/07-fix-apple-logo-svg.md

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 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