Session 14: Africa checkout, Tank01 NBA/MLB wiring, WNBA+MLB odds proxies, OAuth icons, loading skeletons (1330 tests)

web/src/app/signup/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useAuth } from '@/contexts/AuthContext';
 import { trackSignup } from '@/lib/analytics';
 import Wordmark from '@/components/Wordmark';
+import { GoogleIcon, AppleIcon, XIcon } from '@/components/OAuthIcons';
 
 function SignupInner() {
   const router = useRouter();
@@ -83,16 +84,35 @@ function SignupInner() {
           5 free reads every month. Your first read is fully unlocked. No credit card.
         </p>
 
+        {/* Session 14 — OAuth buttons with provider icons. Same
+            ProviderButton helper as /login (inlined here to avoid a
+            new shared module for two callsites). */}
         <div style={{ display: 'grid', gap: 8, marginBottom: 16 }}>
-          <button onClick={() => handleOAuth('google')} disabled={busy} className="btn-ghost" style={{ width: '100%', padding: 12 }}>
-            Continue with Google
-          </button>
-          <button onClick={() => handleOAuth('apple')} disabled={busy} className="btn-ghost" style={{ width: '100%', padding: 12 }}>
-            Continue with Apple
-          </button>
-          <button onClick={() => handleOAuth('twitter')} disabled={busy} className="btn-ghost" style={{ width: '100%', padding: 12 }}>
-            Continue with X
-          </button>
+          {(['google', 'apple', 'twitter'] as const).map((provider) => {
+            const Icon = provider === 'google' ? GoogleIcon : provider === 'apple' ? AppleIcon : XIcon;
+            const label = provider === 'google' ? 'Google' : provider === 'apple' ? 'Apple' : 'X';
+            return (
+              <button
+                key={provider}
+                onClick={() => handleOAuth(provider)}
+                disabled={busy}
+                aria-label={`Continue with ${label}`}
+                className="btn-ghost"
+                style={{
+                  width: '100%',
+                  padding: 12,
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 10,
+                }}
+                data-provider={provider}
+              >
+                <Icon />
+                <span>Continue with {label}</span>
+              </button>
+            );
+          })}
         </div>
 
         <div style={dividerStyle}>