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
CurrencyTransfer header, round 2
Notification bell refresh
Every image is a screenshot of the real dev app, logged in as a client with 24 outstanding actions. Click any screenshot to see it full size.
- Badge: now centred on the bell's shoulder, so 99+ keeps 5px clear of the divider instead of overlapping it by 2px.
- Fonts: every option uses today's typeface, Lato. Only sizes, weights and colours change. See the type check.
- New option A+: option A with text sizes close to today's, 15px titles and 14px messages.
- Tablet and phone: every option rendered at 768px, 600px and 390px.
Badge
A. Pill, current colours
Grows with the count, caps at 99+, and stays clear of the divider.
Tray
A+. Soft chips, today's text size
The same calm rows as A, with text close to today's size. It reads best on phones.
To sign off
Reply to Stevan with your picks and any tweaks, for example Badge A, tray A+
.
Count badge
Today the badge is a fixed 16px circle with a 2px border, which leaves 12px for the digits. Both options switch to a pill that grows with the count and shows 99+ above 99. The pill is centred on the bell's right shoulder, so wide counts grow in both directions. Single digits sit exactly where they do today.
Option
7
24
128
Today
Fixed 16px circle white on amber 2.1:1
A. Pill, current colours Recommended
Grows both ways 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%. Measured in the browser, the gap between the pill's white ring and the divider is 10px at 7, 8px at 24 and 5px at 99+. The first version overlapped the divider by 2px at 99+. The mobile drawer and sidebar approval counters are also white on amber, so A keeps every counter consistent. B is easier to read, and is better done for all counters in its own PR.
Notification tray
The badge counts outstanding actions, and the tray lists those first, so a client with overdue settlements sees a wall of amber. All four options share the fixes below and differ in how each row shows its category.
A+. Soft chips
RecommendedA with today's text size: 15px titles, 14px messages, 380px wide.
- Calm rows, colour only in the icon chip
- Text size close to today's, so it feels familiar
- Rows are a little taller than A, so fewer fit before scrolling
A. Soft chips
The same rows with smaller text: 14px titles, 13px messages.
- The calmest look of all
- Dates line up on the right
- Text is noticeably smaller than today
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
- Smallest text, and long messages stop after two lines
Type check
No option changes the typeface. Chromium reports that every line in today's tray and in every option is drawn in Lato, the web font the app already loads. What changes is size, weight and colour. These crops are shown at true size, not scaled down.
Tablet and phone
Every option at three screen widths, opened the way a person on that device would. Tablets use the bell and get the dropdown. Phones hide the bell, so the tray opens from the menu as a full-screen sheet.
The dropdown fits with room to spare and the caret stays on the bell. One existing problem at this width: the header search box extends under the bell, so clicking the bell's left half focuses search instead of opening the tray. That is PR 3 below.
Below 768px the row component stacks its parts in a column, a layout built for the dashboard cards. In the tray the new styles keep each row full width, so the date stays on the right.
Today's sheet has a pale 60px X, a 24px centred title with a 40px gap above it, and amounts that wrap onto two lines. Every option replaces that with an 18px heading bar and a 44px close button.
Today
A+. Soft chips
RecommendedA. Soft chips
B. Accent rail
C. Compact
What ships after sign-off
PR 1: count badge
- Pill styles in
notification-anchor.component.scss, centred on the bell's shoulder, replacing thetwo-digitsspecial case 99+cap innotification-anchor.component.html- Spec update for the cap
PR 2: tray
- Row and shell styles in
notification-list.component.scssandnotification-item.component.scss, scoped to the tray - Full-width rows below 768px, and the new heading bar and close button on phones
- For A+, A or C, the date moves after the title in
notification-item.component.html - Dashboard activity cards checked for no change
PR 3 (optional): bell on tablets
- Between 768px and about 1050px the header search input extends under the bell and takes its clicks
- Keep the input inside its visible box so the whole bell is clickable
Also spotted, not part of these PRs: the header draws two stacked copies of itself, so the bell fetches its count twice, and the mobile drawer counter is a fixed 24px circle that will overflow at three digits.