[UI/UX Design] Design a SubscriptionCard quick-view popover

[thlpkee20-wq]

Description

Users clicking into a SubscriptionCard load the whole detail page even for a quick check. Design a hover/focus quick-view popover with key facts (next charge, status, plan) and a "View details" jump.

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/components/SubscriptionCard.tsx
• Popover opens on click (mobile) and hover-with-delay (desktop)

Suggested execution

• Fork the repo and create a branch
• git checkout -b uiux/subscription-card-quickview
• Implement changes
  • Design popover with three key facts and a jump-CTA
  • Add keyboard Space/Enter to open on focus
  • Include reduced-motion fade-in fallback
• Validate accessibility and responsive assumptions

Test and commit

• Run checks
  • npm run lint and component/visual tests
• Cover edge cases
  • Edge-of-viewport, RTL popover, screen-reader open state
• Include screenshots/before-after and accessibility (axe) notes

Example commit message

design: SubscriptionCard quick-view popover

Guidelines

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