gh-otoshek-claude-code-toolkit/skills/react-allauth/references/styling-guide.md

React-Allauth Components Requiring Styling

Overview

This file lists all authentication components that require styling. These components are functional but use minimal styling from the django-allauth example repository. Apply consistent design using a styling skill (e.g., apply-shadcn).

Components Requiring Styling

Account Files (15 files)

1. frontend/src/user_management/account/Login.jsx
2. frontend/src/user_management/account/RequestLoginCode.jsx
3. frontend/src/user_management/account/ConfirmLoginCode.jsx
4. frontend/src/user_management/account/Logout.jsx
5. frontend/src/user_management/account/Signup.jsx
6. frontend/src/user_management/account/ChangeEmail.jsx
7. frontend/src/user_management/account/VerifyEmail.jsx
8. frontend/src/user_management/account/VerifyEmailByCode.jsx
9. frontend/src/user_management/account/VerificationEmailSent.jsx
10. frontend/src/user_management/account/RequestPasswordReset.jsx
11. frontend/src/user_management/account/ConfirmPasswordResetCode.jsx
12. frontend/src/user_management/account/ChangePassword.jsx
13. frontend/src/user_management/account/ResetPassword.jsx
14. frontend/src/user_management/account/Reauthenticate.jsx

Social Account Files (3 files)

1. frontend/src/user_management/socialaccount/ProviderSignup.jsx
2. frontend/src/user_management/socialaccount/ProviderCallback.jsx
3. frontend/src/user_management/socialaccount/ManageProviders.jsx

MFA Files (15 files)

1. frontend/src/user_management/mfa/MFAOverview.jsx
2. frontend/src/user_management/mfa/ActivateTOTP.jsx
3. frontend/src/user_management/mfa/DeactivateTOTP.jsx
4. frontend/src/user_management/mfa/AuthenticateTOTP.jsx
5. frontend/src/user_management/mfa/ReauthenticateTOTP.jsx
6. frontend/src/user_management/mfa/RecoveryCodes.jsx
7. frontend/src/user_management/mfa/GenerateRecoveryCodes.jsx
8. frontend/src/user_management/mfa/AuthenticateRecoveryCodes.jsx
9. frontend/src/user_management/mfa/ReauthenticateRecoveryCodes.jsx
10. frontend/src/user_management/mfa/AddWebAuthn.jsx
11. frontend/src/user_management/mfa/ListWebAuthn.jsx
12. frontend/src/user_management/mfa/AuthenticateWebAuthn.jsx
13. frontend/src/user_management/mfa/ReauthenticateWebAuthn.jsx
14. frontend/src/user_management/mfa/SignupByPasskey.jsx
15. frontend/src/user_management/mfa/CreateSignupPasskey.jsx
16. frontend/src/user_management/mfa/Trust.jsx

Component Files (2 files)

1. frontend/src/user_management/components/Button.jsx
2. frontend/src/user_management/mfa/WebAuthnLoginButton.jsx

Total: 35 files requiring styling

Button Component Duplication Issue

Two Button.jsx files exist in the project:

1. frontend/src/components/ui/button.jsx - shadcn/ui Button component with full styling variants
2. frontend/src/user_management/components/Button.jsx - Wrapper component that uses shadcn/ui Button

Recommended approach: Keep both files as they serve different purposes:

• frontend/src/components/ui/button.jsx - Core shadcn/ui component with styling system
• frontend/src/user_management/components/Button.jsx - Wrapper that ensures authentication components use consistent button styling

Notes

• All components use React Router for navigation
• Components expect shadcn/ui components to be available via @/components/ui/ imports
• The authentication context (AuthContextProvider) must wrap all components
• Components use the allauth API client from user_management/lib/allauth.jsx