MST-18: Integrate reusable Login component and fix viagogo theme colors

[devin-ai-integration]

MST-18: Integrate reusable Login component from component library

Summary

This PR replaces local login form implementations across three applications (browse-app, vg-browse, my-account-app) with a centralized reusable Login component from @ben-windsurf/component-library. The component is parameterized to support different branding, theme colors, and social login configurations while maintaining existing functionality.

Major Changes:

• Created reusable Login component following SearchBar pattern in component library
• Integrated component into browse-app (StubHub purple theme #684cbc)
• Integrated component into vg-browse (viagogo green theme #70b42c)
• Integrated component into my-account-app with Tailwind CSS compatibility
• Fixed viagogo theme color from purple to correct green
• Removed duplicated white background styling
• Resolved CSS conflicts and centering issues

Technical Approach:

• Resolved React instance conflicts by removing React from component library dependencies
• Used npm pack for tarball installation to avoid linking issues
• Applied component across Create React App and Vite environments
• Maintained brand-specific configurations through props

Review & Testing Checklist for Human

🔴 HIGH PRIORITY - Must verify manually:

• Login functionality works end-to-end in all three applications (browse-app:3001/login, vg-browse:3000/login, my-account-app:5173/login)
• Theme colors are visually correct: StubHub uses purple (#684cbc), viagogo uses green (#70b42c)
• No React errors in browser console when navigating to login pages
• Social login buttons display correctly and match each app's requirements
• Forgot password flows still work (especially browse-app which has different flow than others)

Recommended Test Plan:

1. Start all three applications locally
2. Navigate to /login on each app and verify visual appearance matches brand
3. Test form submission with valid/invalid credentials
4. Click forgot password links and verify correct navigation
5. Check browser console for any React errors or warnings
6. Test social login button visibility (Facebook/Apple for StubHub, etc.)

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TB
    CL["@ben-windsurf/component-library<br/>Login component"]:::major-edit
    
    BA["browse-app<br/>src/Login.js"]:::major-edit
    BAP["browse-app<br/>package.json"]:::minor-edit
    BAC["browse-app<br/>src/App.css"]:::minor-edit
    
    VG["vg-browse<br/>src/Login.js"]:::major-edit
    VGP["vg-browse<br/>package.json"]:::minor-edit
    VGC["vg-browse<br/>src/App.css"]:::minor-edit
    
    MA["my-account-app<br/>Login.tsx"]:::major-edit
    MAP["my-account-app<br/>package.json"]:::minor-edit
    MAC["my-account-app<br/>App.tsx"]:::minor-edit
    MACS["my-account-app<br/>site.css"]:::minor-edit
    
    CL -->|"imports component"| BA
    CL -->|"imports component"| VG    
    CL -->|"imports component"| MA
    
    BAP -->|"dependency"| CL
    VGP -->|"dependency"| CL
    MAP -->|"dependency"| CL
    
    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit
        L3[Context/No Edit]:::context
    end
    
    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• React Instance Conflicts: Resolved by removing React from component library dependencies and using tarball installation method
• Cross-Framework Support: Component works across both Create React App (browse-app, vg-browse) and Vite (my-account-app) environments
• CSS Specificity Issues: my-account-app required Tailwind utility classes to override conflicting styles for proper centering
• Brand Consistency: Critical that viagogo displays green theme (#70b42c) instead of previous purple

Link to Devin run: https://app.devin.ai/sessions/8ff48278395143fd9afd3ed1402e0e17
Requested by: @ben-windsurf

Related PRs:

• Component Library: MST-18: Create reusable Login component in component library component-library#4
• Browse App: MST-18: Integrate reusable Login component from component library browse-app#4
• My Account App: MST-18: Integrate reusable Login component and fix centering my-account-app#7

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring