Soften issue bar visuals and update to better convey state in dark mode.

Review Request #13819 — Created May 2, 2024 and submitted

Information

Review Board
release-7.x

Reviewers

The new dark mode for the issue bar moved to yellow buttons and an icon
to convey state, but in practice this didn't do enough to convey state.
Skimming a list of comments, it wasn't immediately clear which comments
were open and which were closed.

We now use a border around the issue bar when open. This is fairly
unobtrusive, but still stands out visually from closed banners, which
have no border and blend in more with the background.

The text color now updates to indicate the status. New design tokens
have been added for accented text colors, used in both the issue bar and
issue summary table.

The buttons have also been updated. When the issue is open, they are
yellow, but when closed, they're grey. This augments the border and
helps with a quick visual on the status.

The banner has also been given a subtly-softer border radius, reducing
the boxy look just a bit.

Tested all the issue states in light and dark modes.

Summary ID
Soften issue bar visuals and update to better convey state in dark mode.
The new dark mode for the issue bar moved to yellow buttons and an icon to convey state, but in practice this didn't do enough to convey state. Skimming a list of comments, it wasn't immediately clear which comments were open and which were closed. We now use a border around the issue bar when open. This is fairly unobtrusive, but still stands out visually from closed banners, which have no border and blend in more with the background. The text color now updates to indicate the status. New design tokens have been added for accented text colors, used in both the issue bar and issue summary table. The buttons have also been updated. When the issue is open, they are yellow, but when closed, they're grey. This augments the border and helps with a quick visual on the status. The banner has also been given a subtly-softer border radius, reducing the boxy look just a bit.
1036e97f6ddf31054698494888c015602357b971

chipx86
maubin
  1. Looks good.

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