Summary

Add dark mode support for the issue summary table.

Review Request #13745 — Created April 17, 2024 and submitted April 20, 2024, 9:01 p.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

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 use var(--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.

Testing Done

Tested on light and dark modes on both desktop and mobile views.

Commits

Summary	ID
Add dark mode support for the issue summary table. 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 use `var(--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.	ef46f940c0f94aff1e4cedbeb197a5c0c49b0439

Summary

Add dark mode support for the issue summary table.

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 use `var(--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.

ef46f940c0f94aff1e4cedbeb197a5c0c49b0439

Files

Issues

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	April 19, 2024, 1:29 a.m.

flake8 passed.

JSHint passed.

Dark mode (Revision 1)

The issue has been resolved. Show all issues

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?

david April 18, 2024, 10:43 a.m.

I agree. Same text color as open issues seems better.

chipx86 April 18, 2024, 12:28 p.m.

Yeah, I went back and forth on that. I based it on the background we’ve been using for issues. I’ll change it.

Change Summary:

Changed the verifying text color on dark mode to be the same yellow as open issues.

Commits:

	Summary	ID
	Add dark mode support for the issue summary table. 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 use `var(--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.	6b665a9304e6ffce9853f796b59af35f2cda1559
	Add dark mode support for the issue summary table. 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 use `var(--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.	ac7b416f662d9c483ce4ac7b329c421d5b430c86

Diff:

Revision 2 (+130 -40)

Show changes

	reviewboard/static/rb/css/ui/tabs.less
	reviewboard/static/rb/css/ui/review-request/issue-summary-table.less
	reviewboard/static/rb/css/ui/review-request/fields/tabular.less

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
	Add dark mode support for the issue summary table. 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 use `var(--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.	ac7b416f662d9c483ce4ac7b329c421d5b430c86
	Add dark mode support for the issue summary table. 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 use `var(--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.	ef46f940c0f94aff1e4cedbeb197a5c0c49b0439

Diff:

Revision 3 (+134 -74)

Show changes

	reviewboard/static/rb/css/ui/tabs.less
	reviewboard/static/rb/css/ui/review-request/issue-summary-table.less
	reviewboard/static/rb/css/ui/review-request/fields/tabular.less

Added Files:

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status: Closed (submitted)

Change Summary:

Pushed to release-7.x (fcfc1b5)