PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve readability of badges and pills (#12360)

Browse source 
* Improve readability of badges and pills

Badges will now always use light theme colors so that they become white-on-gray in both themes, and the contrast of pills has been increased so that they use primary action colors as the background.

* Fix tests
This commit is contained in:
Robin 2024-03-21 20:27:13 -04:00 committed by GitHub
parent ea3fff2d2f
commit a0795c7518
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 33 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-bubble-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.6 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-compact-modern-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-layout-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.3 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
playwright/snapshots/timeline/timeline.spec.ts/event-tile-reply-chains-irc-modern-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

4
res/css/views/elements/_Pill.pcss
View file

@ -42,6 +42,10 @@ limitations under the License.
background-color: $pill-hover-bg-color !important; /* To override .markdown-body */ background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
} }
&:active {
background-color: $pill-press-bg-color !important; /* To override .markdown-body */
}
&.mx_UserPill_me:hover { &.mx_UserPill_me:hover {
background-color: var( background-color: var(
--cpd-color-bg-critical-hovered --cpd-color-bg-critical-hovered

5
res/themes/dark/css/_dark.pcss
View file

@ -125,8 +125,9 @@ $roomheader-addroom-fg-color: $primary-content;
/* Rich-text-editor */ /* Rich-text-editor */
/* ******************** */ /* ******************** */
$pill-bg-color: var(--cpd-color-gray-1000); $pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-gray-1100); $pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
/* ******************** */ /* ******************** */
/* Inputs */ /* Inputs */

5
res/themes/legacy-dark/css/_legacy-dark.pcss
View file

@ -28,8 +28,9 @@ $light-fg-color: $header-panel-text-secondary-color;
/* used for focusing form controls */ /* used for focusing form controls */
$focus-bg-color: $room-highlight-color; $focus-bg-color: $room-highlight-color;
$pill-bg-color: var(--cpd-color-gray-1000); $pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-gray-1100); $pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
/* informational plinth */ /* informational plinth */
$info-plinth-bg-color: $header-panel-bg-color; $info-plinth-bg-color: $header-panel-bg-color;

5
res/themes/legacy-light/css/_legacy-light.pcss
View file

@ -123,8 +123,9 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04);
$header-panel-text-primary-color: #91a1c0; $header-panel-text-primary-color: #91a1c0;
$pill-bg-color: var(--cpd-color-gray-1000); $pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-gray-1100); $pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
$topleftmenu-color: #212121; $topleftmenu-color: #212121;
$roomheader-bg-color: $primary-bg-color; $roomheader-bg-color: $primary-bg-color;

1
res/themes/light-custom/css/_custom.pcss
View file

@ -125,6 +125,7 @@ $reaction-row-button-selected-bg-color: var(
$menu-selected-color: var(--menu-selected-color, $menu-selected-color); $menu-selected-color: var(--menu-selected-color, $menu-selected-color);
$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color); $pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color); $pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
$pill-press-bg-color: var(--other-user-pill-bg-color, $pill-press-bg-color);
$icon-button-color: var(--icon-button-color, $icon-button-color); $icon-button-color: var(--icon-button-color, $icon-button-color);
$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color); $strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color);

5
res/themes/light/css/_light.pcss
View file

@ -159,8 +159,9 @@ $roomheader-addroom-fg-color: #5c6470;
/* Rich-text-editor */ /* Rich-text-editor */
/* ******************** */ /* ******************** */
$pill-bg-color: var(--cpd-color-gray-1000); $pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-gray-1100); $pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
$rte-bg-color: #e9e9e9; $rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04); $rte-code-bg-color: rgba(0, 0, 0, 0.04);
/* ******************** */ /* ******************** */

18
src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
View file

@ -81,16 +81,18 @@ export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props,
: "badge_3char"; : "badge_3char";
const classes = classNames({ const classes = classNames({
mx_NotificationBadge: true, "mx_NotificationBadge": true,
mx_NotificationBadge_visible: isEmptyBadge || knocked ? true : hasUnreadCount, "mx_NotificationBadge_visible": isEmptyBadge || knocked ? true : hasUnreadCount,
mx_NotificationBadge_level_notification: level == NotificationLevel.Notification, "mx_NotificationBadge_level_notification": level == NotificationLevel.Notification,
mx_NotificationBadge_level_highlight: level >= NotificationLevel.Highlight, "mx_NotificationBadge_level_highlight": level >= NotificationLevel.Highlight,
mx_NotificationBadge_knocked: knocked, "mx_NotificationBadge_knocked": knocked,
// Exactly one of mx_NotificationBadge_dot, mx_NotificationBadge_2char, mx_NotificationBadge_3char // Exactly one of mx_NotificationBadge_dot, mx_NotificationBadge_2char, mx_NotificationBadge_3char
mx_NotificationBadge_dot: badgeType === "dot", "mx_NotificationBadge_dot": badgeType === "dot",
mx_NotificationBadge_2char: badgeType === "badge_2char", "mx_NotificationBadge_2char": badgeType === "badge_2char",
mx_NotificationBadge_3char: badgeType === "badge_3char", "mx_NotificationBadge_3char": badgeType === "badge_3char",
// Badges with text should always use light colors
"cpd-theme-light": badgeType !== "dot",
}); });
if (props.onClick) { if (props.onClick) {

4
test/components/structures/__snapshots__/RoomStatusBar-test.tsx.snap
View file

@ -12,7 +12,7 @@ exports[`RoomStatusBar <RoomStatusBar /> unsent messages should render warning w
class="mx_RoomStatusBar_unsentBadge" class="mx_RoomStatusBar_unsentBadge"
> >
<div <div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char" class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
> >
<span <span
class="mx_NotificationBadge_count" class="mx_NotificationBadge_count"
@ -81,7 +81,7 @@ exports[`RoomStatusBar <RoomStatusBar /> unsent messages should render warning w
class="mx_RoomStatusBar_unsentBadge" class="mx_RoomStatusBar_unsentBadge"
> >
<div <div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char" class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
> >
<span <span
class="mx_NotificationBadge_count" class="mx_NotificationBadge_count"

2
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -215,7 +215,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_RoomStatusBar_unsentBadge" class="mx_RoomStatusBar_unsentBadge"
> >
<div <div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char" class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
> >
<span <span
class="mx_NotificationBadge_count" class="mx_NotificationBadge_count"

4
test/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
View file

@ -480,7 +480,7 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<span> <span>
Show a badge Show a badge
<div <div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char" class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
> >
<span <span
class="mx_NotificationBadge_count" class="mx_NotificationBadge_count"
@ -1190,7 +1190,7 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<span> <span>
Show a badge Show a badge
<div <div
class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char" class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
> >
<span <span
class="mx_NotificationBadge_count" class="mx_NotificationBadge_count"

2
test/components/views/spaces/__snapshots__/SpaceTreeLevel-test.tsx.snap
View file

@ -26,7 +26,7 @@ exports[`SpaceButton metaspace should render notificationState if one is provide
class="mx_SpacePanel_badgeContainer" class="mx_SpacePanel_badgeContainer"
> >
<div <div
class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char" class="mx_AccessibleButton mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_notification mx_NotificationBadge_2char cpd-theme-light"
role="button" role="button"
tabindex="-1" tabindex="-1"
> >