flake8
passed.
JSHint
passed.
Add dark mode support for the issue summary table.
Review Request #13745 — Created April 17, 2024 and submitted
This updates the issue summary table to display properly for both light
and dark modes. Light mode looks as it normally did (for the most part,
which I'll cover in a minute), using background colors to indicate the
status of issues. Dark mode changes the appearance a bit to use text
colors for identifying status rather than using background colors.The table's styles come from a (currently in-progress) set of styles
from Ink for data tables. This mostly looks the same in light mode,
except that table headers now usevar(--ink-p-header-bg), which gives
it a darker brown appearance in our case. This ends up being a nicer fit
for the review request box.Tabs have had some changes as well. The bulky tab display always looked
a bit out of place here. We now adopt the style we use on
reviewboard.org's docs pages, where there's a thick border below the
tab, and no background or overall tab border. At least, that's the case
on light mode, where the colors nicely stand out. On dark mode, we do
introduce a subtle tab background as well.In time, Ink will get a full data table component and a full tabs
component, and we'll probably switch to those then.
Tested on light and dark modes on both desktop and mobile views.
| Summary | ID |
|---|---|
| ef46f940c0f94aff1e4cedbeb197a5c0c49b0439 |
| Description | From | Last Updated |
|---|---|---|
|
I'm not sure if I like the dark yellow colour used for the issues that require verification. It looks like … |
 maubin
|
-
-
I'm not sure if I like the dark yellow colour used for the issues that require verification. It looks like a greyed out version of a normal issue, making it seem like there's no further actions needed for the issue like a dropped issue. I'm not sure what a good alternative is though, maybe just the same font as a normal issue?
- Change Summary:
-
Changed the verifying text color on dark mode to be the same yellow as open issues.
- Commits:
-
Summary ID 6b665a9304e6ffce9853f796b59af35f2cda1559 ac7b416f662d9c483ce4ac7b329c421d5b430c86
Checks run (2 succeeded)
flake8
passed.
JSHint
passed.
- Change Summary:
-
- Made use of CSS variables instead of a mixin for controlling colors, helping with reuse of colors and better state management.
- Fixed styling for the "No issues" text. It's now just the standard text color on the standard background for the table.
- Commits:
-
Summary ID ac7b416f662d9c483ce4ac7b329c421d5b430c86 ef46f940c0f94aff1e4cedbeb197a5c0c49b0439 - Diff:
-
Revision 3 (+134 -74)
- Added Files:
Checks run (2 succeeded)
flake8
passed.
JSHint
passed.
