feat: add signin button styles

[ndom91]

Changes

• Changed default provider button styling
• Added provider svgs and brand colors

Todos

• Improve default darkmode black button styling

Preview:

Notes

• If you're involved with any of these projects and we've used your brand colors wrong or anything like that - we encourage you to reach out here and we'll be happy to fix it!
• Some providers really do provide some strict rules around what they'd like the btn to look like. Here are Google's, for example - developers.google.com/identity/branding-guidelines#incorrect

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
next-auth	⬜️ Ignored (Inspect)		Nov 15, 2022 at 4:39PM (UTC)

[balazsorban44]

Keep in mind that colors are dictated by the theme, but otherwise this is useful feedback and we will discuss it! Thanks!

[Exerra]

I like @Gawdfrey's mockup more as it is more in line with the modern design of Supabase Auth & Auth0.
My suggestions for the redesign are:

• Make the background a grey-ish colour and remove the border from the login box (will make it look cleaner & for dark mode probably reverse? background is black and the login box is grey-ish)
• Put the logo inside the login box & make it smaller (sorta like @Gawdfrey's suggestion, but even smaller)
• Use theme colour for the login button (idk about dark mode)
• 30px rounding
• Smaller provider icons
• Grey border instead of shadow for the provider buttons

[Gawdfrey]

I made some alterations according to some of the suggestions @Exerra had.
The button background color is controlled by the theme and the button text is controlled by the button text field.

[ndom91]

I made some alterations according to some of the suggestions @Exerra had. The button background color is controlled by the theme and the button text is controlled by the button text field.

I like the mockups a lot in general, however, are you allergic to the standard login button layout? i.e. Left aligned button and center aligned text in the remaining space? 😂 </sarcasm>

[Gawdfrey]

I like the mockups a lot in general, however, are you allergic to the standard login button layout? i.e. Left aligned button and center aligned text in the remaining space? 😂 </sarcasm>

Hehe, did not know that I was allergic of that until today!
I looked at some examples and I have to agree that it certainly looks much better.

[ndom91]

I like the mockups a lot in general, however, are you allergic to the standard login button layout? i.e. Left aligned button and center aligned text in the remaining space? joy </sarcasm>

Hehe, did not know that I was allergic of that until today! I looked at some examples and I have to agree that it certainly looks much better.

Haha so this is still a bit off imo, you have the text left-aligned to a certain point.

I'd be curious to see your mockup with something like this - where the text is center aligned within the remaining space after taking the image into account.

Basically you can make the container flex, with two children - the img and the span with the text. Then you can set the parent to justify-content: flex-start which will push all of it to the left. Then set the span to flex-grow: 1 which will cause it to take up the rest of the space dynamically. Finally, in that span you can set text-align: center. That should do the trick

[Gawdfrey]

Basically you can make the container flex, with two children - the img and the span with the text. Then you can set the parent to justify-content: flex-start which will push all of it to the left. Then set the span to flex-grow: 1 which will cause it to take up the rest of the space dynamically. Finally, in that span you can set text-align: center. That should do the trick

Aah, my bad I misunderstood. Thought you were talking about the "Sign in" button..

[ndom91]

Aah, my bad I misunderstood. Thought you were talking about the "Sign in" button..

Beautiful! 😂

[Exerra]

My horrible photoshop skills aside, I feel like making the background a grey colour really helps draw the focus to the login box (+ with no border looks nice and modern 👀).

But that is all I could nitpick from @Gawdfrey's design without going into the accursed realm of designing for dark mode 🥴

[Gawdfrey]

I took the liberty to implement these design suggestions in code as well, with @Exerra latest sketch in mind. I am not allowed to create a pull request, how could I submit the code for review? Fork the repo?

[ndom91]

I took the liberty to implement these design suggestions in code as well, with @Exerra latest sketch in mind. I am not allowed to create a pull request, how could I submit the code for review? Fork the repo?

Yeah so thats generally how it works, you make a fork, make your changes there then create a PR from the fork into the main one 👍

[Gawdfrey]

I added a new PR with the aforementioned designs here.

[raulmarindev]

I like the new design. Thank you all for the work you do in this amazing library.

[ndom91]

Last update to this PR, add darkmode button border back

[ndom91]

I'd recommend move forward with this button logo + provider styling PR here. And then follow up shortly thereafter with another more general pages styling refresh, for example with gawdfrey's PR.

[github-actions]

🎉 Experimental release published 📦️ on npm!

pnpm add next-auth@0.0.0-pr.5802.b9d39079

yarn add next-auth@0.0.0-pr.5802.b9d39079

npm i next-auth@0.0.0-pr.5802.b9d39079

[balazsorban44]

This looks good to me!

[adrianbienias]

I think a little visual bug was introduced by this PR.

"Sign in" isn't vertically centered.