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.

Changes between revision 1 and 2

orig
1
2
3

Commits

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.
5ee31d03637a2ca742256463c022370985466fa2 David Trowbridge
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/pages/reviews.less
reviewboard/static/rb/css/ui/text-editor.less
Loading...