Update forms CSS for dark mode.

Review Request #14189 — Created Sept. 26, 2024 and updated

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.
Summary ID
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

Description From Last Updated

Small nit but would it be worth it to do something about the overflow cutoff here? Maybe ellipses or make …

maubinmaubin

Spacing is off by one space

maubinmaubin

Could we use a variable here instead? of 2em?

maubinmaubin
maubin
  1. 
      
  2. Show all issues

    Small nit but would it be worth it to do something about the overflow cutoff here? Maybe ellipses or make the diff scrollable.

    1. I don't think it's really worth spending time on this. I had made my window pretty narrow for the purpose of taking the screenshots, and this UI isn't used very much at all.

    2. Sounds good.

  3. reviewboard/static/rb/css/pages/reviews.less (Diff revision 1)
     
     
     
     
     
    Show all issues

    Spacing is off by one space

  4. Show all issues

    Could we use a variable here instead? of 2em?

  5. 
      
david
Review request changed
Commits:
Summary ID
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
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

Checks run (2 succeeded)

flake8 passed.
JSHint passed.
maubin
  1. 
      
  2.