imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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

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