Update forms CSS for dark mode.

Review Request #14189 — Created Sept. 26, 2024 and submitted — Latest diff uploaded

Information

Review Board
release-7.1.x

Reviewers

This change updates our main forms CSS definitions to use Ink-defined
colors and spacing throughout. This includes several vaguely
interrelated pieces:

  • Fixed up colors throughout, removing hard-coded color codes and
    #rb-ns-ui.colors variables in favor of Ink CSS variables.
  • Moved old LESS-based variables into clearly-denoted legacy sections.
  • Updated field help text to use an ink-provided icon and flexbox-based
    layout, fixing up some ugly spacing and alignment.
  • Fixed an issue where opening the inline editor for draft comment
    replies caused the text to jump horizontally (we apparently had a rule
    for the horizontal margins get mistakenly deleted?).
  • Fixed up some existing definitions of CSS variables to use correct
    type prefixes.
  • Went through a variety of forms in the admin UI and verified
    appearance of form fields and fieldsets (both expanded and collapsed).
  • Verified appearance and functionality of textarea/CodeMirror editors
    in review request fields, reviews, and replies.
  • Verified that opening the editor for all inline editable
    textarea/CodeMirror fields did not cause any visual jumps.
  • Verified the appearance of <input> and <textarea> elements in other
    parts of the UI, including review request fields and reviews.

Diff Revision 2

This is not the most recent revision of the diff. The latest diff is revision 3. See what's changed.

orig
1
2
3

Commits

First Last Summary ID Author
Update forms CSS for dark mode.
This change updates our main forms CSS definitions to use Ink-defined colors and spacing throughout. This includes several vaguely interrelated pieces: - Fixed up colors throughout, removing hard-coded color codes and #rb-ns-ui.colors variables in favor of Ink CSS variables. - Moved old LESS-based variables into clearly-denoted legacy sections. - Updated field help text to use an ink-provided icon and flexbox-based layout, fixing up some ugly spacing and alignment. - Fixed an issue where opening the inline editor for draft comment replies caused the text to jump horizontally (we apparently had a rule for the horizontal margins get mistakenly deleted?). - Fixed up some existing definitions of CSS variables to use correct type prefixes. Testing Done: - Went through a variety of forms in the admin UI and verified appearance of form fields and fieldsets (both expanded and collapsed). - Verified appearance and functionality of textarea/CodeMirror editors in review request fields, reviews, and replies. - Verified that opening the editor for all inline editable textarea/CodeMirror fields did not cause any visual jumps. - Verified the appearance of <input> and <textarea> elements in other parts of the UI, including review request fields and reviews.
6f0261a4617719713c34293d082870d2c1b70a2e David Trowbridge
reviewboard/static/rb/css/defs.less
reviewboard/static/rb/css/pages/base.less
reviewboard/static/rb/css/pages/review-request.less
reviewboard/static/rb/css/pages/reviews.less
reviewboard/static/rb/css/pages/admin/change-form.less
reviewboard/static/rb/css/ui/forms.less
reviewboard/static/rb/css/ui/markdown.less
reviewboard/static/rb/css/ui/text-editor.less
reviewboard/static/rb/css/ui/review-request/review-request-changed-fields.less
reviewboard/static/rb/css/ui/review-request/review-request-changed-value.less
reviewboard/static/rb/css/ui/review-request/fields/tabular.less
reviewboard/templates/admin/includes/field.html
reviewboard/templates/forms/field.html
Loading...