Begin dark mode for review UIs and improve the Image Review UI.
Review Request #13885 — Created May 21, 2024 and submitted — Latest diff uploaded
The base classes for review UIs have been updated to support dark mode.
On light mode, things look essentially as they did before, while on dark
mode we now adopt the review request background color and correct text
colors. Some old legacy decisions (like a very-subtly-different special
tab color) have been removed in the process.The Image Review UI specifically has had a number of updates to the way
the UI is structured:
-
We now use
Ink.MenuLabel
for the zoom menu. -
Instead of float and absolute-position hacks for the header area, we
now use CSS grid to position things the way we want, keeping captions
properly centered in the process. -
The image modes now use the
rb-c-tabs
component, instead of
reinventing their own design. This fits in better with the rest of the
UI. -
The diff mode tabs bar has been positioned in the header area, instead
of below it. It also no longer has its own background color. -
The content area now has a minimum height, large enough to display the
zoom menu (which was being clipped for small images). -
The image is now vertically-centered within the content area, instead
of aligned to the top.
This isn't the big refactor of the review UI CSS structure that we've
wanted to do, but gets us closer to it, and allows us to remove some
really crufty code and workarounds that we had before.
We'll likely rewrite much of this for Review Board 8, when we revisit
the review UI architecture.
Unit tests pass.
Tested image review UIs in light and dark mode for:
- Single-revision image file attachments
- Multi-revision image file attachments
- Diffed image file attachments
- Single-revision images in the diff viewer
- Diffed images in the diff viewer