[UI/UX Design] Design the In-App Activity feed layout and item states

[thlpkee20-wq]

Description

This is a UI/UX design task to design an In-App Activity feed showing a chronological history of account events (payouts distributed, offerings updated, blacklist actions). This is distinct from transient notifications and gives users a durable, scannable timeline.

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 (routing), src/index.css
• Activity items must group by date and convey type with icon + text, not color alone

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/in-app-activity-feed
• Implement changes
  • Design the timeline/feed layout with date grouping and item anatomy
  • Design type-specific item treatments (payout, offering, blacklist)
  • Design empty, loading, and "load more"/pagination states
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • empty feed, long lists, mobile layout, keyboard navigation, screen-reader order, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: in-app activity feed layout

Guidelines

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