[MST-19] Update to use shared Login component from component-library

[devin-ai-integration]

[MST-19] Add reusable Login component with configurable theming

Summary

Created a reusable Login component that consolidates login forms from browse-app, vg-browse, and my-account-app into the component-library. The component supports configurable branding (logos, theme colors, brand names) and social sign-in options while maintaining existing design patterns.

Key Features:

• Configurable props: logo, brandName, themeColor, socialLogins, showEmailCode, etc.
• CSS theming system using custom properties (--theme-color, --brand-color)
• Support for Facebook, Apple, and Google social login options
• Form validation and error handling
• Responsive design with proper container styling

Critical Fix: Ensured themeColor prop applies to ALL CTAs/buttons (not just checkboxes) by updating CSS inheritance rules and button hover states.

Review & Testing Checklist for Human

• Visual verification in all 3 apps: Test that login forms render correctly with proper branding and theme colors (StubHub purple #684cbc, viagogo green #70b42c)
• Theming consistency: Verify that themeColor prop applies to ALL buttons/CTAs including sign-in button, email code button, and checkbox accent color
• Container layout: Confirm login forms are properly centered and contained (especially in my-account-app which had flexbox issues)
• Social login functionality: Test that social login buttons render with correct icons and trigger proper callbacks
• Form validation and submission: Verify email/password validation works and form submission integrates properly with existing authentication flows

Recommended Test Plan:

1. Run all 3 consuming apps locally and navigate to login pages
2. Test form validation (empty fields, invalid inputs)
3. Test social login button functionality
4. Verify theme colors match brand requirements across all elements
5. Test responsive behavior on different screen sizes

---

Diagram

%%{ init : { "theme" : "default" }}%%
flowchart TD
    CL["component-library<br/>src/components/Login/"]:::major-edit
    CLI["Login.js<br/>(new component)"]:::major-edit
    CLCSS["Login.css<br/>(theming system)"]:::major-edit
    CLI["src/index.js<br/>(exports)"]:::minor-edit
    
    BA["browse-app<br/>src/Login.js"]:::major-edit
    VG["vg-browse<br/>src/Login.js"]:::major-edit
    MA["my-account-app<br/>src/components/Login.tsx"]:::major-edit
    
    MACSS["my-account-app<br/>src/main.tsx<br/>(CSS import)"]:::minor-edit
    SITE["my-account-app<br/>src/styles/site.css<br/>(removed conflicts)"]:::minor-edit
    
    CL --> CLI
    CL --> CLCSS
    CL --> CLI
    
    CLI --> BA
    CLI --> VG  
    CLI --> MA
    
    CLCSS --> BA
    CLCSS --> VG
    CLCSS --> MA
    
    MACSS --> MA
    SITE --> MA
    
    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

• CSS Import Issue: my-account-app (Vite) required explicit CSS import in main.tsx, unlike Create React App which handles this automatically
• Container Conflicts: Removed conflicting .login-container CSS rules in my-account-app's site.css that were overriding component-library styles
• Theme Color Priority: Updated CSS to ensure --theme-color custom property applies to all interactive elements, not just checkboxes
• Testing Completed: All three consuming applications tested locally with proper theming and functionality verified

Session Details:

• Requested by: ben.lehrburger@windsurf.com (@ben-windsurf)
• Session URL: https://app.devin.ai/sessions/96f8c3258b5642dd8aa7acf0a8e6b0d8
• JIRA Ticket: MST-19

[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