Summary

Add dark mode for infoboxes.

Review Request #13824 — Created May 4, 2024 and submitted May 9, 2024, 5:58 a.m.

Information

Owner

chipx86

Repository

Review Board

Branch

release-7.x

Bugs

Depends On

Reviewers

Groups

reviewboard

People

Description

Infoboxes now work in dark mode, using a typical dark grey background
and a light grey contrasting outline.

This applies to all the variations of infoboxes. That involved fixing
fade-out gradients on the review request and bug infoboxes, and the Ship
It bar and issue status bar on the review request infoboxes.

The Ship It and issue status areas don't use the same visual flair as on
light mode, instead relegating the responsibility to the icon prefixes
(of which there can be multiple for a given review request anyway).

Testing Done

Tested all the infoboxes with all visual states in light and dark modes.

Commits

Summary	ID
Add dark mode for infoboxes. Infoboxes now work in dark mode, using a typical dark grey background and a light grey contrasting outline. This applies to all the variations of infoboxes. That involved fixing fade-out gradients on the review request and bug infoboxes, and the Ship It bar and issue status bar on the review request infoboxes. The Ship It and issue status areas don't use the same visual flair as on light mode, instead relegating the responsibility to the icon prefixes (of which there can be multiple for a given review request anyway).	343450bec2726a9b8a0143fdb0ded372339bc070

Summary

Add dark mode for infoboxes.

Infoboxes now work in dark mode, using a typical dark grey background and a light grey contrasting outline. This applies to all the variations of infoboxes. That involved fixing fade-out gradients on the review request and bug infoboxes, and the Ship It bar and issue status bar on the review request infoboxes. The Ship It and issue status areas don't use the same visual flair as on light mode, instead relegating the responsibility to the icon prefixes (of which there can be multiple for a given review request anyway).

343450bec2726a9b8a0143fdb0ded372339bc070

Files

Issues

Description	From	Last Updated
I feel like this needs to be some kind of green to match the green of light mode. If this …	david	May 8, 2024, 4:58 a.m.

flake8 passed.

JSHint passed.

Review request infobox with Ship It (dark mode) (Revision 1)

The issue has been resolved. Show all issues

I feel like this needs to be some kind of green to match the green of light mode. If this popped up I think it would be a miracle if I noticed that there were ship-its, whereas it's extremely prominent in light mode.

chipx86 May 5, 2024, 1:02 a.m.

Yeah it's not great, but I want to leave it as-is right now. I went back and forth on options and didn't settle on anything I was happy with. Even tried changing the text to say "Ship Its" and such, but then it became a problem to do that for issues, where the labels started to wrap the box in edge cases.

david May 5, 2024, 4:18 p.m.

OK, as long as we have this tracked somewhere.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Change Summary:

Updated to include a background color for the summary bar when there's Ship its.

Not 100% thrilled with the look, but it at least doesn't regress the ability to communicate via colors.

Commits:

	Summary	ID
	Add dark mode for infoboxes. Infoboxes now work in dark mode, using a typical dark grey background and a light grey contrasting outline. This applies to all the variations of infoboxes. That involved fixing fade-out gradients on the review request and bug infoboxes, and the Ship It bar and issue status bar on the review request infoboxes. The Ship It and issue status areas don't use the same visual flair as on light mode, instead relegating the responsibility to the icon prefixes (of which there can be multiple for a given review request anyway).	02660636f8ea7526a4586c12abd5967b6660a693
	Add dark mode for infoboxes. Infoboxes now work in dark mode, using a typical dark grey background and a light grey contrasting outline. This applies to all the variations of infoboxes. That involved fixing fade-out gradients on the review request and bug infoboxes, and the Ship It bar and issue status bar on the review request infoboxes. The Ship It and issue status areas don't use the same visual flair as on light mode, instead relegating the responsibility to the icon prefixes (of which there can be multiple for a given review request anyway).	343450bec2726a9b8a0143fdb0ded372339bc070

Diff:

Revision 2 (+80 -28)

Show changes

reviewboard/static/rb/css/ui/infoboxes.less

Added Files:

Checks run (2 succeeded)

flake8 passed.

JSHint passed.

Ship it!

```
Ship It!
```

Ship it!

```
Ship It!
```

Status:: Completed
Change Summary:: Pushed to release-7.x (45f9248)