fix: restore AA contrast on download button hover states

[AmrendraTheCoder]

Addressed Issues:

Fixes #3

Screenshots/Recordings:

The defect is a colour-contrast ratio, so measured numbers are more precise than a screenshot. Measured with the WCAG 2.1 relative-luminance formula against the running dev server:

mode	hover background	hover text	before	after	AA needs
light	#1f2937 (gray-800)	accent-foreground #020817 → white #ffffff	1.36:1	14.68:1	4.5:1
dark	#e5e7eb (gray-200)	accent-foreground #ffffff → black #000000	1.24:1	16.96:1	4.5:1

Reproducible in DevTools on the running site:

const b = [...document.querySelectorAll('button')].find(x => /Download for Windows/.test(x.textContent));
/hover:text-accent-foreground/.test(b.className);
// main: true on Windows and Linux, false on Mac
// this branch: false on all three

Additional Notes:

Root cause, and why only two of the three buttons. All three download buttons in src/Pages/pictopy-landing.tsx share an identical className, but Windows and Linux additionally pass variant="outline". That variant contributes hover:text-accent-foreground. The inline className overrides the hover background (hover:bg-gray-800, dark:hover:bg-gray-200) but never declares a hover:text-*, so tailwind-merge has nothing to override the variant with and keeps accent-foreground as the hover text colour.

The result is the label being drawn in near-background colour on hover. 1.36:1 and 1.24:1 are closer to invisible than merely low. The Mac button uses the default variant and keeps its white/black label, which is exactly why the report names only Windows and Linux.

The fix. Declare the hover text colour explicitly so it overrides the variant and matches the resting state:

hover:text-white dark:hover:text-black

Applied to all three buttons so their class lists stay identical. Mac is behaviourally unchanged (it was already white-on-dark), but keeping the three in sync avoids the next person reintroducing the same divergence.

Verification. npm run build passes. npm run lint reports the same 2 errors and 3 warnings as main, all in Home1.tsx, input.tsx and theme-provider.tsx, none in the file I touched. No visual change to the resting state.

Deliberately out of scope. variant="outline" now contributes nothing to these buttons: the inline classes override its background, its border and its hover text. Removing it would be the deeper cleanup and would make all three buttons consistent, but that is a wider change than this issue asks for and I would rather a maintainer make that call. Happy to follow up in a separate PR.

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and I will share a link to this PR with the project maintainers there
• I have read the Contributing Guidelines

AI Usage

Per AOSSIE's AI Usage Policy: I used Claude (Opus) to help trace the tailwind-merge precedence behaviour and draft the fix. I measured the contrast ratios myself against the running site, before and after, and verified that hover:text-accent-foreground is no longer present on any of the three buttons.

Summary by CodeRabbit

• Style
  • Improved download button hover colors for better visibility in both light and dark modes across Mac, Windows, and Linux options.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b9f2b87c-42b6-476c-b754-7da7d0296f66

📥 Commits

Reviewing files that changed from the base of the PR and between 1496367 and bc1fab6.

📒 Files selected for processing (1)

• src/Pages/pictopy-landing.tsx

---

Walkthrough

The Mac, Windows, and Linux download buttons now define explicit hover text colors for light and dark modes. No functional behavior changed.

Changes

Download button hover contrast

Layer / File(s)	Summary
Explicit hover colors src/Pages/pictopy-landing.tsx	The Mac, Windows, and Linux download buttons now use white hover text in light mode and black hover text in dark mode.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Merge Risk: ⚪ Minimal · up to bc1fa

This localized change restores accessible hover-text contrast on the affected download buttons without changing resting-state behavior; no actionable merge-blocking risk remains after normal checks and review.

Suggested labels: Typescript Lang

Poem

A rabbit hopped past buttons bright,
White in day and black at night.
Three downloads now show colors clear,
With tidy hover states far and near.
“Hop reviewed!” the rabbit cheers.

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes add explicit hover text colors that meet the linked issue's WCAG AA contrast requirement for the download buttons.
Out of Scope Changes check	✅ Passed	All changes are limited to download button hover color classes and directly support the linked accessibility objective.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: restoring WCAG AA contrast for download button hover states.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[gitcordapp]

Link your account with Gitcord

Thanks for opening this PR, @AmrendraTheCoder!

To receive Discord notifications and contributor tracking for this organization:

1. Join Discord: https://discord.gg/hjUhu33uAn
2. In Discord, run /link AmrendraTheCoder
3. Paste the verification code into your GitHub bio (or a public gist)
4. Click Verify in Discord (or run /verify-link AmrendraTheCoder)

Once linked, Gitcord can notify you about reviews, merges, and more.

— Posted by Gitcord