[UI/UX Design] Design a notification preferences page with granular categories #369

Description

Notifications are all-or-nothing today. Design a notification preferences page with per-category toggles (payment, dunning, admin, product), delivery channel, and mute schedule.

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/pages/Settings.tsx
• Group into required vs optional with sensible defaults

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/notification-preferences
• Implement changes
  • Design a grouped table with row per category and channel columns
  • Add a mute-schedule affordance with time-range picker
  • Include microcopy for "cannot be disabled" system messages
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • All-off state, RTL columns, screen-reader table headers
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: notification preferences page

Guidelines

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