Skip to content

Fix paused subscription status badge visibility in dark mode #59

Open

Description

@fsousac

Description

The Paused status badge displayed in the Active Subscriptions section has poor visual contrast in dark mode.

The badge text blends into the background, making it difficult to identify the subscription status and creating an inconsistent experience compared to the other status badges.

Current Behavior

  • The Paused badge has insufficient contrast.
  • The text is difficult to read in dark mode.
  • The badge styling is inconsistent with the other status indicators.

Expected Behavior

  • The Paused badge should be clearly visible in both light and dark themes.
  • The badge should use colors that meet accessibility contrast recommendations.
  • The visual style should remain consistent with the application's design system.

Suggested Improvements

  • Increase the contrast between the badge background and text.
  • Use a dedicated neutral or warning color palette for the paused state.
  • Ensure consistent spacing, typography and border styling with the other status badges.

Acceptance Criteria

  • The Paused badge is fully readable in dark mode.
  • The badge is also visually correct in light mode.
  • Colors meet accessibility contrast recommendations.
  • The badge styling is consistent with the other subscription status badges.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingux

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions