Logout Button is styled weird

[mooreds]

Logout Button is styled weird

Description

It looks like a normal button, rather than being styled like the other buttons.

See https://github.com/FusionAuth/fusionauth-react-sdk/blob/main/src/styles/button.module.scss#L20

Would be better if it were styled like logout and registration buttons.

Community guidelines

All issues filed in this repository must abide by the FusionAuth community guidelines.

Additional context

Add any other context about the problem here.

[attilah]

@mooreds what we found out is that in the react example app, fusionauth styles are loaded after login page styles, but it is not the case for the account page, so CSS order is different (account page is correct).

Login page:

Account page:

So this is causing an issue when you try to use the components from this SDK and try to override some styles.

Also the logout button has a different class name, but login and register buttons share the same.

[mooreds]

Thanks! We'll circle around and fix this.

[JakeLo123]

Here is a PR consolidate the button styles (so all buttons use the same class name) 👉 #67
...

and regarding @attilah's comment:

in the react example app, fusionauth styles are loaded after login page styles, but it is not the case for the account page, so CSS order is different (account page is correct).

So this is causing an issue when you try to use the components from this SDK and try to override some styles.

I see this too. Looks like it's due to the loading order of the modules. You can observe this with the following steps:

• Start the app
• Rename LoginPage.module.scss (for example hello.module.scss).
• View the browser and observe the consuming app css has greater specificity than the SDK css after the dev server has hot-reloaded the module alone. If you refresh the page, all the modules are loaded back in the original order.

The SDK can’t exactly control how it’s bundled into a consuming application to prevent this.

If we wanted to make the components more resilient to this, one way would be to remove styles/button.module.scss and have the developer import a stylesheet from the SDK into the file where the component is used. Would look something like:

import styles from './Login.module.scss'
import '@fusionauth/react-sdk/buttonStyles'

// the first import will have greater specificity
...

<FusionAuthLoginButton className={styles.myButtonStyle} />

The downside of this: it creates a breaking change, and it requires the developer to know that the order of import statements affects the css specificity -- some linters/formatter configs automatically alphabetize import statements, which would cause an issue. A less fun DX overall.

All that being said, if someone encountered this issue, I would recommend that they use the SDK's functions programmatically with their own buttons styled how they want.