Today
Every action row is cream with amber text.
- Amber titles on cream are hard to read
- 16px text wraps most amounts onto a second line
- Each category uses a different treatment: amber fill, green fill, blue titles
CurrencyTransfer header
Notification bell refresh
Two small PRs for Deyan: make the count badge fit two and three digits, and calm the tray down. Every image is a screenshot of the real dev app, logged in as a client with 24 outstanding actions. Click any tray to see it full size.
Badge
A. Pill, current colours
Fits any count, caps at 99+, and matches the other counters in the app.
Tray
A. Soft chips
The cleanest of the three. Category colour moves into a small icon chip, so 24 overdue items no longer turn the whole tray amber.
To sign off
Reply to Stevan with your picks and any tweaks, for example Badge A, tray B, keep the date above the title
.
Count badge
Today the badge is a fixed 16px circle with a 2px border, which leaves 12px for the digits. Anything above 9 spills out, and three digits are unreadable. Both options switch to a pill that grows with the count and shows 99+ above 99.
Option
7
24
128
Today
Fixed 16px circle white on amber 2.1:1
A. Pill, current colours Recommended
Grows with the count white on amber 2.1:1
128 shows as 99+
B. Pill, navy digits
Same pill, darker text navy on amber 6.2:1
128 shows as 99+Shown at 150%. The mobile drawer and sidebar approval counters are also white on amber, so A keeps every counter consistent. B is easier to read. If you prefer it, it is better done for all counters in its own PR.
Notification tray
The badge counts outstanding actions, and the tray lists those first. A client with overdue settlements sees a wall of amber: cream rows, amber titles, a heavy amber rail and 16px text throughout. All three options share the fixes below and differ in how each row shows its category.
A. Soft chips
RecommendedCategory colour sits in a tinted icon chip. Date on the right.
- Calmest: colour only in a 36px chip
- Dates line up on the right, easy to scan
- The biggest visual change of the three
B. Accent rail
Closest to today: thin rail on action rows, date above the title.
- Smallest change for existing clients
- Rows that need action stand out most
- A long list of actions still shows a column of amber rails
C. Compact
Small inline icons, tighter rows, date on the right.
- Lightest look, no chips or rails
- About 15% more rows before scrolling
- Smaller text, and long messages stop after two lines
What ships after sign-off
PR 1: count badge
- Pill styles in
notification-anchor.component.scss, replacing thetwo-digitsspecial case 99+cap innotification-anchor.component.html- Spec update for the cap
PR 2: tray
- Tray styles in
notification-list.component.scssandnotification-item.component.scss, scoped to the tray - For A or C, the date moves after the title in
notification-item.component.html - Dashboard activity cards checked for no change
Spotted along the way, not part of these PRs: the header draws two stacked copies of the bell and both fetch the count, and the mobile drawer counter is a fixed 24px circle that will overflow at three digits too.