fix: resolve contrast ratio issue in download buttons

[mi-vaishnavi]

Fixes #3

Problem

Windows and Linux download buttons were not meeting contrast ratio requirements on hover.

Root Cause

variant="outline" was applying internal hover/background styles from the Button component, which conflicted with the custom Tailwind classes. This resulted in inconsistent hover backgrounds and reduced contrast.

Fix

Removed variant="outline" to ensure all three buttons use the same styling and maintain consistent hover contrast.

Result

All download buttons now use consistent styling.

Summary by CodeRabbit

Release Notes

• Style
  • Updated the visual appearance of the Windows and Linux download buttons on the landing page to display with a solid style instead of an outlined style.

[coderabbitai]

Walkthrough

Removed the variant="outline" prop from Windows and Linux download buttons on the landing page component. This styling change updates the button appearance to improve hover state contrast ratio compliance with WCAG AA accessibility standards.

Changes

Cohort / File(s)	Summary
Download Buttons Styling src/Pages/pictopy-landing.tsx	Removed variant="outline" prop from Windows and Linux download buttons to enhance hover state contrast ratio and meet WCAG AA standards.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

Typescript Lang

Poem

🐰 A button's charm lies not in outline thin,
But solid form where contrast wins,
For eyes of all to clearly see,
Accessibility sets spirits free! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: resolve contrast ratio issue in download buttons' directly describes the main change: removing the variant="outline" prop to fix contrast ratio issues in download buttons.
Linked Issues check	✅ Passed	The PR successfully addresses issue #3 by removing the variant="outline" prop that was causing contrast ratio failures, ensuring download buttons maintain 4.5:1 contrast ratio as required by WCAG 2.1 AA standards.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the contrast ratio issue in download buttons as specified in issue #3; no unrelated modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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 and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/Pages/pictopy-landing.tsx (2)

1-1: ⚠️ Potential issue | 🔴 Critical

Missing "use client" directive required for client-side hooks.

This component uses useState and useEffect hooks which require client-side rendering in Next.js. The "use client" directive must be added at the top of the file.

🔧 Proposed fix

+"use client";
+
 import { FC, useState, useEffect } from "react";

As per coding guidelines: NextJS: Ensure that "use client" is being used for files using client-side features.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Pages/pictopy-landing.tsx` at line 1, This file is missing the Next.js
client directive required for hooks: add the literal string "use client" as the
very first line of the file (before any imports) so that the component using
useState and useEffect is rendered client-side; ensure the directive is the
first token in src/Pages/pictopy-landing.tsx (above the import { FC, useState,
useEffect } line) so the component (the landing FC) can use hooks without server
rendering errors.

---

135-145: 🧹 Nitpick | 🔵 Trivial

User-facing strings should be externalized for i18n.

Multiple hardcoded strings exist throughout this component (e.g., "Loading latest releases...", "Download for Mac", "Organize your photos effortlessly..."). Per coding guidelines, user-visible strings should be externalized to resource files for internationalization support.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/Pages/pictopy-landing.tsx` around lines 135 - 145, The component has
hardcoded user strings in the PictopyLanding React component (e.g., the
paragraph "Organize your photos effortlessly...", the loading message "Loading
latest releases...", and button labels like "Download for Mac"); replace these
literals with i18n resource lookups (e.g.,
useTranslation()/t('landing.organizePhotos'), t('landing.loadingReleases'),
t('download.mac')) and add corresponding keys to the locale resource files, then
import and use the i18n hook at the top of src/Pages/pictopy-landing.tsx so all
user-facing text is rendered via t('...') instead of hardcoded strings.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@src/Pages/pictopy-landing.tsx`:
- Line 1: This file is missing the Next.js client directive required for hooks:
add the literal string "use client" as the very first line of the file (before
any imports) so that the component using useState and useEffect is rendered
client-side; ensure the directive is the first token in
src/Pages/pictopy-landing.tsx (above the import { FC, useState, useEffect }
line) so the component (the landing FC) can use hooks without server rendering
errors.
- Around line 135-145: The component has hardcoded user strings in the
PictopyLanding React component (e.g., the paragraph "Organize your photos
effortlessly...", the loading message "Loading latest releases...", and button
labels like "Download for Mac"); replace these literals with i18n resource
lookups (e.g., useTranslation()/t('landing.organizePhotos'),
t('landing.loadingReleases'), t('download.mac')) and add corresponding keys to
the locale resource files, then import and use the i18n hook at the top of
src/Pages/pictopy-landing.tsx so all user-facing text is rendered via t('...')
instead of hardcoded strings.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

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

📒 Files selected for processing (1)

• src/Pages/pictopy-landing.tsx