Add dark mode and interaction improvements for the comment dialog.

Review Request #13767 — Created April 22, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

The comment dialog now supports light and dark modes, covering both the
standard comment editing UI and the Other Comments sidebar. A couple of
improvements to the UI have been made in the process, namely proper
centering of the issue/Markdown-related checkboxes and work on the issue
bar to ensure a more compact, vertical view.

A fix was also made to help avoid losing the comment dialog. It used to
be that using the scroll wheel on the text area or another part of the
comment dialog could result in scrolling the page far away from the
comment dialog. Now these events are caught, preventing that from
happening.

There's also one small color tweak. The dark mode variant of
-rb-p-draft-bg is now just a bit lighter, helping the dialog stand
out from the rest of the UI. This also brightens the Unified Draft
Banner, which also helps that stand out as well. This helps elevate
these interactive elements above the content.

Tested on light and dark modes.

Summary ID
Add dark mode and interaction improvements for the comment dialog.
The comment dialog now supports light and dark modes, covering both the standard comment editing UI and the Other Comments sidebar. A couple of improvements to the UI have been made in the process, namely proper centering of the issue/Markdown-related checkboxes and work on the issue bar to ensure a more compact, vertical view. A fix was also made to help avoid losing the comment dialog. It used to be that using the scroll wheel on the text area or another part of the comment dialog could result in scrolling the page far away from the comment dialog. Now these events are caught, preventing that from happening. There's also one small color tweak. The dark mode variant of ``-rb-p-draft-bg`` is now just a bit lighter, helping the dialog stand out from the rest of the UI. This also brightens the Unified Draft Banner, which also helps that stand out as well. This helps elevate these interactive elements above the content.
e7c6e3786f6cec82c873c94836b6dc289ee3e3c1

david
  1. Ship It!
  2. 
      
maubin
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed
Change Summary:
Pushed to release-7.x (574adcd)