[UI/UX Design] Design the Notifications center and bell/badge interaction

[thlpkee20-wq]

Description

This is a UI/UX design task to design a Notifications center with a header bell, unread badge, and a dropdown/panel listing notifications (payout received, report due, blacklist change). No notification UI exists today. Design the interaction, item layout, and read/unread states.

Requirements and context

• Must be accessible (WCAG 2.1 AA), responsive, and documented in the design system
• Should be consistent with existing patterns and easy to review
• Relevant code: src/App.tsx (global chrome/header), src/index.css
• Bell trigger and panel must be fully keyboard operable with an accessible unread count

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/notifications-center
• Implement changes
  • Design the bell trigger, unread badge, and panel/dropdown layout
  • Design notification item anatomy (icon, title, time, read/unread indicator)
  • Design "mark all as read" and per-item actions
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • empty state, many items with scroll, mobile full-screen panel, keyboard open/close, badge contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: notifications center and bell interaction

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours