Improve styling for all authentication-related form pages.

Review Request #14349 — Created Feb. 17, 2025 and submitted

Information

Review Board
release-7.1.x

Reviewers

Our auth-related pages that include forms (such as the login page,
registration, Forget Password, and others) try to achieve a clean visual
style where the fields are centered and the labels are to the left of
the fields. This was done using some fixed widths and some margin
offsets, and didn't always translate well when additional content was
injected onto a page.

This change redoes the styling to get rid of the hacks and instead
utilize flexbox and CSS grid to get our balanced look without
hard-coding much of anything, and without needing much in the way of
style overrides specific to new content on the page. This makes these
pages easier to maintain and extend, which is important for some
in-progress work.

These also achieve a better mobile look, with fields providing more
space for entry on smaller screens without compromising layout or
introducing unwanted padding.

In the process, a regression in error styling has been fixed (it was
lacking a color hint) and buttons have been updated to use Ink.

The styling all applies to the somewhat legacy auth-* CSS classes, to
maintain compatibility. Rebuilding these for a CSS Component scheme is
out of scope, and best suited for a future version of Ink.

Tested the login page with/without SSO and a captcha.

Tested the registration page.

Tested the SSO login flow and account linking.

Tested the Forget Password flow.

Tested with in-progress code building upon these forms.

All tests were conducted with desktop and mobile modes at various
widths and wrap levels.

Summary ID
Improve styling for all authentication-related form pages.
Our auth-related pages that include forms (such as the login page, registration, Forget Password, and others) try to achieve a clean visual style where the fields are centered and the labels are to the left of the fields. This was done using some fixed widths and some margin offsets, and didn't always translate well when additional content was injected onto a page. This change redoes the styling to get rid of the hacks and instead utilize flexbox and CSS grid to get our balanced look without hard-coding much of anything, and without needing much in the way of style overrides specific to new content on the page. This makes these pages easier to maintain and extend, which is important for some in-progress work. These also achieve a better mobile look, with fields providing more space for entry on smaller screens without compromising layout or introducing unwanted padding. In the process, a regression in error styling has been fixed (it was lacking a color hint) and buttons have been updated to use Ink. The styling all applies to the somewhat legacy `auth-*` CSS classes, to maintain compatibility. Rebuilding these for a CSS Component scheme is out of scope, and best suited for a future version of Ink.
720d97f475b2e35ff5711d02fd556d6483a1b2cf
david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.1.x (68fecc6)
Loading...