feat(login): cleanup sso login buttons #256
Conversation
WalkthroughThe changes involve modifications to the user interface of the OAuth login components in the frontend application. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant LoginForm
participant OAuthService
User->>LoginForm: Click "Continue with Google"
LoginForm->>OAuthService: Initiate Google OAuth
OAuthService-->>User: Redirect to Google login
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
packages/frontendmu-nuxt/components/auth/LoginForm.vue (2)
105-108: Consider following Google's brand guidelines for the sign-in buttonWhile the text improvement to "Continue with Google" is great, consider following Google's official brand guidelines for sign-in buttons. The current black background might affect brand recognition.
-class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]" +class="flex w-full items-center justify-center gap-3 rounded-md bg-white hover:bg-gray-50 transition-all duration-300 px-3 py-1.5 text-gray-800 border border-gray-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4285F4]"
113-118: Consider removing or documenting the disabled Discord integrationThe commented-out Discord integration code could be confusing for future developers. Consider either:
- Removing it completely if Discord integration isn't planned
- Adding a TODO comment explaining the plan for Discord integration
- Moving it to a separate feature branch until ready to implement
Also, when implemented, consider using Discord's brand colors instead of black background for better brand recognition.
Would you like me to help create a GitHub issue to track the Discord integration implementation?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
packages/frontendmu-nuxt/components/auth/LoginForm.vue(1 hunks)packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue(1 hunks)
🔇 Additional comments (3)
packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue (1)
33-33: LGTM! Text change improves clarity
The updated button text "Continue with GitHub" is clearer and more descriptive of the action. It also maintains consistency with other OAuth buttons in the application.
packages/frontendmu-nuxt/components/auth/LoginForm.vue (2)
104-104: LGTM! Improved button layout structure
The switch to a vertical flex layout with consistent spacing improves the visual hierarchy and follows modern auth UI patterns.
110-110: Verify consistent styling with GitHub button
Ensure the GitHub button component follows the same styling patterns as other OAuth buttons for consistency.
✅ Verification successful
GitHub button styling is consistent with other OAuth buttons
The verification shows that the GitHub button in LoginWithGithub.vue follows the same styling pattern as other OAuth buttons:
- Uses identical Tailwind classes for layout:
flex w-full items-center justify-center gap-3 - Matches button styling:
rounded-md bg-[#000000] hover:bg-black/50 - Consistent text styling:
text-whiteand padding:px-3 py-1.5 - Similar focus state styling:
focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for the GitHub button component implementation
ast-grep --pattern 'class LoginWithGithub {
$$$
}'
# Check for similar styling classes
rg -A 5 "class=\"flex w-full items-center justify-center gap-3 rounded-md" packages/frontendmu-nuxt/components/auth/
Length of output: 3373
|
thxxx @danshilm |
The buttons to login with Google and GitHub (and also Discord) seemed a bit weirdly sized and positioned.
And they have been like this for a while, so I wanted to clean it up.
Also removed the "connect using" from the section above the button and made the button text clearer.
Before:
After:
Summary by CodeRabbit
New Features
Bug Fixes
Style