search

supabase-community / auth-ui

Pre-built Auth UI for React
https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
MIT License
486 stars 120 forks source link

Sign in button background color not displayed correctly #160

Open lkoehl opened 1 year ago

lkoehl commented 1 year ago

Bug report

Describe the bug

The sign in button from the login form doesn't always show the correct background color. You can take a look at #106 where I provided screenshots of the example project.

To Reproduce

Check the codesandbox for a MWE. Remove line 6 in App.tsx and compare the background color of the sign in button.

If you also check App.module.css you can see, that it is an empty file.

Expected behavior

The background color of the login button remains consistent.

silentworks commented 1 year ago

But line 6 is your app code. This is a very confusing example of the issue as the variable on line 6 isn't being used anywhere, this is not an Auth UI issue, this is an application code issue. If you remove line 28 - 41 you will see the default theme.

lkoehl commented 1 year ago

@silentworks I don't fully understand the problem. I can see it being an application issue as well as an Auth UI issue. As you said, that line 6 is not used anywhere, it should not affect the code. But it does affect it, even the default theme! I removed lines 28 - 41 and uncommented/commented line 6 again, and the default theme view changes (see screenshots). Since I don't fully understand the implementation of the UI library, I can't pinpoint the problem. But the custom app code is a fix for a bug reported in #106. Without line 6, the sign in button isn't styled correctly. This leads me to believe that it is an Auth UI issue.

Without the fix in line 6 (note that the background color is not applied properly) removed2

With line 6 (default theme) working2

silentworks commented 1 year ago

@lkoehl ah I see what you mean, I've changed this back to a bug and will investigate it further to try and find what's going wrong here. It looks like something is leaking into the css variables and how they work from the app code.

SandersTDavid commented 10 months ago

I encountered this issue while using a custom theme and hex colors for the brand and brandAccent. However, I resolved it by switching to the rgb() format, and the button background filled in with my custom color as expected.