Redesigned Login Page: external auth buttons not prominent enough with password login disabled

🎨 Figma work file

We've recently applied the new sign-in page on our self-hosted instance. We do not use password login, so the only visible buttons are those of external auth providers. The password login on the other hand features a prominent, blue, full-width button, which draws the user to it. (external auth buttons were also full-width before, aligned with the login button).

Some early feedback is that the login buttons for external providers aren't really that clear.

The page has changed and now the buttons are so small that I first didn't notice them. This was better before. Please make them more eye-catchy again.

After some more discussion, it turns out this might be more of an accessibility topic:

It looked so empty to me, I thought it was some issue with displaying the HTML / CSS design, that's why I ended in hijacking this post here (sorry for that).

I need clear borders or intensive colors to notice the important things directly. Has been a struggle in known tools such as Outlook when they reduced the colors on the icons (anything before 365 had much better UI design).

Of course, I might get used to the new page when I remember the position. So I might also get used to the new design, now that I know that I don't need to look on the right side of the page.

Perhaps relevant here - I'd say this is related to Redesigned Login Page: Adjust Design for Longer... (#378004 - closed), because with the new login page we currently have the sign in text above the login buttons themselves, which makes them a little less prominent still.

---

Example comparison of our self-hosted vs GitLab.com with password login:

no password login	with password login

Proposal

1. Disconnect sign-in text from being linked to the password state and to always appear. (if no text is entered, the content container won't display.)
2. Move the sign-in text container to appear below the SSO options. The SSO options should appear under the avatar/URL(name).

desktop	mobile
desktop - no pw	mobile - no pw

Desktop - no PW - one SSO	Mobile - no PW - one SSO

/cc @hsutor @emilybauman

/cc @bufferoverflow @ercan.ucan