Screen Annotations — CON-111 Notification Center
Screen ID: CON-111
Flow: Home → Notifications
Previous: CON-030 Home (via bell icon)
Next: CON-112 Notification Permission
Header: White header with back arrow, centred "Notifications" title, and "Mark All Read" text action on the right. Tapping "Mark All Read" removes the unread state from all notifications.
Filter Tabs: Three pill-shaped filter tabs — "All" (active, primary background), "Orders", and "Promotions". Each filters the notification list by category. Active tab uses primary colour with white text.
Notification Items: Five notifications in a vertical list. Each shows an emoji icon in a circular container, title (bold), message text (secondary colour, truncated at 2 lines), and relative timestamp. Items are tappable and navigate to the relevant screen (order tracking, order detail, or promotion).
Unread State: Unread notifications have a light blue (#F0F7FF) background and a blue dot indicator (8px circle) positioned on the left edge. First two notifications demonstrate the unread state.
Read State: Read notifications have a plain white background with no indicator. The last three notifications demonstrate the read state.
Empty State: Hidden by default (display: none). Shows a bell icon, "No notifications yet" heading, and explanatory text. Would be shown when the notification list is empty.
Currency Format: South African Rand formatted as "R 412.50" with space after R. Used in the payment notification.
Bottom Navigation: 4 tabs — Home (active), Discover, My Shop, Profile. Active tab set via data-active-nav="home" on body.