fix(pages): cleanup oauth provider branded buttons

[ndom91]

☕️ Reasoning

• Cleanup default /signin page provider btns, using dynamic colors to make themes work in more cases

Before:

Notice that the bottom few providers (WorkOS, Twitter, Twitch) all do have logos, just they're invisible because they're the same color as the brand color, which is being used as the button background color atm.

After:

So this cleans up a good bit:

• First of all, removes unnecessary logoDark, textDark variables (were only being used by 1 provider each). Also not a user-facing API, so shouldn't be "breaking", right?
• Background colors are just white / default dark colors in light/dark mode. And then we can use the bg/brandColor provider style option (which most providers have set, I've filled in a few more) and it automatically sets the hover color to that a low opacity version of the brand color with color-mix. color-mix is in the mdn "baseline 2023" feature set, meaning all browsers do support it now 🙏

If yall are cool with this, I can clean up the rest of the providers style objects here before merging this 👍

After with Hover Brand Colors

🧢 Checklist

• Documentation
• Tests
• Ready to be merged

🎫 Affected issues

📌 Resources

• Security guidelines
• Contributing guidelines
• Code of conduct
• Contributing to Open Source

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
auth-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 14, 2024 3:53pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-auth-docs	⬜️ Ignored (Inspect)	Visit Preview		Apr 14, 2024 3:53pm

[codecov]

Codecov Report

Attention: Patch coverage is 35.29412% with 33 lines in your changes are missing coverage. Please review.

Project coverage is 39.76%. Comparing base (98266d0) to head (3c4cc9c).
Report is 71 commits behind head on main.

❗ Current head 3c4cc9c differs from pull request most recent head c631fb1. Consider uploading reports for the commit c631fb1 to get more accurate results

Files	Patch %	Lines
packages/core/src/providers/oauth.ts	0.00%	9 Missing ⚠️
packages/core/src/providers/boxyhq-saml.ts	0.00%	3 Missing ⚠️
packages/core/src/providers/cognito.ts	0.00%	3 Missing ⚠️
packages/core/src/providers/coinbase.ts	0.00%	3 Missing ⚠️
packages/core/src/providers/google.ts	0.00%	3 Missing ⚠️
packages/core/src/providers/netlify.ts	0.00%	3 Missing ⚠️
packages/core/src/providers/pinterest.ts	0.00%	3 Missing ⚠️
packages/core/src/providers/dropbox.ts	0.00%	1 Missing ⚠️
packages/core/src/providers/keycloak.ts	0.00%	1 Missing ⚠️
packages/core/src/providers/passage.ts	0.00%	1 Missing ⚠️
... and 3 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #10542      +/-   ##
==========================================
+ Coverage   38.53%   39.76%   +1.23%     
==========================================
  Files         171      172       +1     
  Lines       27080    27635     +555     
  Branches     1117     1171      +54     
==========================================
+ Hits        10435    10989     +554     
- Misses      16645    16646       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ubbe-xyz]

Looking good 🙌🏽

Two small suggestions:

We can make the white box a bit wider to take advantage of the space on the page, and like that the Azure button won't have 2 lines of text (which looks slightly odd) ?

For providers where we don't display an icon, we could display a default icon? 🤔 , maybe the login one from phospor?

[ndom91]

@ubbe-xyz that's the "before", the "after" is a bit below in the description above - the all white / dark btns with the brand color only appearing on hover.

Also the Azure button.. yeah it is a bit weird. I actually overwrote the name in an application of mine because as you also pointed out, its a bit too long 😅 Maybe we do that here too 🤔

Also a part of the problem with the existing one, was your last comment - those providers actually do have icons, its just their icons are just their brand color so they're totally invisible against a background of the same color 😂 All providers should have a logo imo, we recently shipped a little patch which just looks up the provider logo on our docs page /img/providers/[providerId].svg if its not explicitly specified, because we have all providers there at least.

[ubbe-xyz]

Looking good! We can merge and iterate later 🙌🏽