-
Notifications
You must be signed in to change notification settings - Fork 2.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update LoginButton
/ LogoutButton
style
#5628
Comments
Sounds good, we should definitely align the styling here! |
As suggested by @apolinario on slack (private link), we should also add this styling to the |
but maybe that's the simplest way to do this no? allow SVG buttons in gr.Button? |
The advantage of CSS is that we can update the text content when the user is logged in from |
Question -- do we want the buttons to look the same across different themes? Or should we stylize the buttons based on the theme like we do with regular buttons? |
I would say "we want the buttons to look the same across different themes" (for branding) but I'm not very well aware of all the aspects of theming. |
As it relates to the buttons, the themes set the border radius of the buttons as well as the colors in light and dark mode. It seems like here, both are fixed so we wouldn't want them to adjust based on the theme. In that case, maybe we can add an internal parameter |
Friendly ping on this issue. Is there any decision on the direction to take? Having a coherent style for login/logout buttons would be very nice 🙏 |
The downside to SVG as the whole thing is not only text customisation but i18n. I'll have a play shortly and see what it feels like with the brand styling. I do have some reservations due to the border radius differences. |
Closed via #9254 |
Would be nice to update the style of
LoginButton
andLogoutButton
to match the official HF badge for those (see badges).AFAIK buttons cannot be simple images so let's use some CSS to have the same layout. I have made some experiments and I'm able to reproduce it in a local demo. It would be nice to have those directly included in Gradio instead of relying on custom CSS. @abidlabs I can open a PR to implement this but I'd need a bit of context on how CSS works in Gradio 😬 (I'm no CSS/Svelte expert btw, I just googled it ^^).
Here is the custom CSS I'm currently using. I use the buttons both in a gr.Row and outside of a gr.Row as it changes the default width of the buttons (which we should fix in this issue).
Which looks like this:
and
cc @julien-c
The text was updated successfully, but these errors were encountered: