[UI/UX Design] Design system-wide Banner / alert component for persistent messages

[thlpkee20-wq]

Description

This is a UI/UX design task to design a persistent Banner/alert component for page-level messages (maintenance notices, verification reminders, blacklist policy warnings). This differs from transient toasts and from the inline form-error banner already used in Login.tsx.

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/Login.tsx (existing inline alert style), src/index.css
• Define dismissible vs non-dismissible variants and severity styling

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/banner-component
• Implement changes
  • Design banner severity variants (info, warning, error, success) with icon + text
  • Design dismissible and sticky/page-top placements
  • Differentiate banner styling from toasts and inline field errors
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • dismiss interaction, long copy wrapping, mobile full-width, screen-reader role, contrast
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: banner alert component variants

Guidelines

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