Skip to content

feat(market-card): add prefers-contrast: more support with explicit border+text overrides (Closes #772) - #866

Open
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/marketcard-contrast-772
Open

feat(market-card): add prefers-contrast: more support with explicit border+text overrides (Closes #772)#866
waterWang wants to merge 1 commit into
Predictify-org:mainfrom
waterWang:feat/marketcard-contrast-772

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds prefers-contrast: more (OS-level High Contrast mode) support to the MarketCard component with explicit border and text overrides.

Changes

  • app/styles/themes/market-card-contrast.css (new): A @media (prefers-contrast: more) block that applies:
    • Solid 2px white border on the card
    • Higher-contrast text colors (gray-100/200/300 instead of white/70/60)
    • Explicit green-400/red-400 for odds values
    • Stronger probability bar background
    • Visible border on following indicator
    • Disabled backdrop-blur (which can reduce contrast)
  • app/components/MarketCard.tsx: Added market-card CSS class and imported the contrast CSS file.
  • app/components/__tests__/MarketCard.contrast.test.tsx (new): 3 tests verifying the market-card class is applied correctly.

Testing

npx jest MarketCard.contrast --no-cache
# PASS — 3 tests

Closes #772

@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@waterWang is attempting to deploy a commit to the Jagadeesh B's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add high-contrast mode overrides for MarketCard [b#038]

1 participant