Skip to content

applets/notifications: Improve header text contrast

The app name in the header has poor text contrast because it is 40% transparent and sits on a gray background. It is also using a semantically incorrect UI component (DescriptiveLabel) which was meant for de-emphasized subtitles, not titles. The correct component for that is a Heading, so let's use that.

Because this means that we will hve two identically-sized headings in close proximity, we need to distinguish the text for the notification title without making it huge, which is overkill for a notification. To accomplish this, this MR uses the Heading's "Primary" type which was made for this purpose.

Before After
Before After

cc @teams/usability @teams/vdg

Merge request reports

Loading