Summary

Update forms CSS for dark mode.

Review Request #14189 — Created Sept. 26, 2024 and updated Oct. 15, 2024, 2:02 p.m.

Information

Owner

david

Repository

Review Board

Branch

release-7.1.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

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.

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.	9af51bcd747157b008630caa10a578090be9e158

Summary

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.

9af51bcd747157b008630caa10a578090be9e158

Files

Issues

Description	From	Last Updated
Small nit but would it be worth it to do something about the overflow cutoff here? Maybe ellipses or make …	maubin	Oct. 1, 2024, 9:55 a.m.
Spacing is off by one space	maubin	Oct. 1, 2024, 9:44 a.m.
Could we use a variable here instead? of 2em?	maubin	Oct. 1, 2024, 9:54 a.m.
For styles that are for a component, you'll want to include the component's selector in the list in order to …	chipx86	Oct. 15, 2024, 8:08 a.m.
Same here, where it makes sense.	chipx86	Oct. 15, 2024, 8:09 a.m.

flake8 passed.

JSHint passed.

DiffSet admin, light mode (old) (Revision 1)

The issue has been dropped. 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.

david Oct. 1, 2024, 10:03 a.m.

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.

maubin Oct. 1, 2024, 11:26 a.m.
```
Sounds good.
```

reviewboard/static/rb/css/pages/reviews.less (Diff revision 1)
The issue has been resolved. Show all issues
```
Spacing is off by one space
```
reviewboard/static/rb/css/ui/text-editor.less (Diff revision 1)
The issue has been resolved. Show all issues
```
Could we use a variable here instead? of 2em?
```

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

Diff:

Revision 2 (+456 -382)

Show changes

	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
	5 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

reviewboard/static/rb/css/pages/admin/change-form.less (Diff revision 2)

The issue has been resolved. Show all issues

For styles that are for a component, you'll want to include the component's selector in the list in order to ensure that any changes to a parent that impact the styles will be reflected in the component's scope:

:root,
.rb-c-admin-form-inline-group {
  ...
}

reviewboard/static/rb/css/ui/forms.less (Diff revision 2)
The issue has been resolved. Show all issues
```
Same here, where it makes sense.
```

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.	6f0261a4617719713c34293d082870d2c1b70a2e
	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.	9af51bcd747157b008630caa10a578090be9e158

Diff:

Revision 3 (+468 -382)

Show changes

	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
	5 more

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```