Soften issue bar visuals and update to better convey state in dark mode.
Review Request #13819 — Created May 2, 2024 and submitted
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 |
---|---|
1036e97f6ddf31054698494888c015602357b971 |
- Change Summary:
-
Added text accent colors to indicate status, and re-tested all modes and statuses.
- Description:
-
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. - Commits:
-
Summary ID 3ade32a819deca0fb90f74de18fe5c892a94b424 1036e97f6ddf31054698494888c015602357b971 - Diff:
-
Revision 2 (+92 -24)
- Added Files: