Update `LoginButton` / `LogoutButton` style

[Wauplin]

Would be nice to update the style of LoginButton and LogoutButton 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 :grimacing: (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).

import gradio as gr

CSS = """
@media (prefers-color-scheme: light) {
  #oauth-button {
    background: #000000;
    color: #FFFFFF;
  }
}

@media (prefers-color-scheme: dark) {
  #oauth-button {
    background: #FFFFFF;
    color: #000000;
  }
}

#oauth-button {
    border-radius: 50vh;
    height: 50px;
    min-width: max-content;
}
"""

with gr.Blocks(css=CSS) as demo:
    gr.Markdown("# Within `gr.Row`")
    with gr.Row():
        gr.LoginButton(elem_id="oauth-button")
        gr.LogoutButton(elem_id="oauth-button")

    gr.Markdown("# Outside `gr.Row`")
    gr.LoginButton(elem_id="oauth-button")
    gr.LogoutButton(elem_id="oauth-button")

demo.launch()

Which looks like this:

and

cc @julien-c

[hannahblair]

Sounds good, we should definitely align the styling here!

[Wauplin]

As suggested by @apolinario on slack (private link), we should also add this styling to the gr.DuplicateButton so that HF buttons are branded the same way.

[julien-c]

AFAIK buttons cannot be simple images

but maybe that's the simplest way to do this no? allow SVG buttons in gr.Button?

[Wauplin]

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 "Sign in with HF" to "Signed in as Wauplin" and disable the button (greyed).

[abidlabs]

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?

[Wauplin]

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.

[abidlabs]

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 _type to the gr.Button() that is set by gr.LoginButton / gr.Logoutbutton and that overrides the css styles like what @Wauplin has suggested. @hannahblair do you want to take this?

[Ifeanyi55]

Personally, I would prefer that the buttons style change according to theme as asked by @abidlabs . I feel that will add some flair to gradio apps and give the developer different style options. But if implementing that will be hard, then we can do it in the way suggested by @Wauplin

[Wauplin]

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 :pray:

[pngwn]

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.