Clearer Notifications: Richer Empty State and Better Contrast
Clearer Notifications: Richer Empty State and Better Contrast
Release: v0.1.296
Overview
The notification slide-over panel has received two focused improvements: a richer empty state that explains what the notifications system does, and a contrast fix for the end-of-feed message that brings it in line with WCAG AA accessibility standards.
Enriched empty state
When a user has no notifications — most commonly right after signing up — the panel now provides real context about what kinds of events will surface here.
Previously, the empty state showed only a Bell icon and the line "You're all caught up". While accurate, it offered no signal about what the panel is for.
Now, the empty state includes a short list of examples beneath the heading:
You'll be notified when:
- A tenant responds to a deduction claim
- A deposit protection deadline is approaching
- A negotiation message arrives
This removes ambiguity for new users and sets correct expectations from first login.
Notification preferences link
A Notification preferences shortcut has been added to the panel header. Clicking it takes users directly to Settings → Reminders, where they can control which events trigger notifications and how they are delivered.
This reduces friction for users who want to customise their notification experience without hunting through the full settings menu.
End-of-feed contrast fix
At the bottom of the notification feed, once all pages have been loaded via infinite scroll, the panel displays an "All notifications loaded" message.
This message was previously styled with text-muted-foreground/50 — a 50% opacity modifier applied on top of an already subdued colour token. The resulting text could fall below the 4.5:1 contrast ratio required by WCAG AA for normal-sized text.
The /50 opacity has been removed. The message now renders at full text-muted-foreground strength, meeting accessibility contrast requirements across all supported colour schemes.
Affected component
src/components/notification-slide-over.tsx