[BUG] [GSSoC'26] : NativeShareButton uses hardcoded Tailwind colors instead of CSS theme variables

[mallya-m]

Bug Description

NativeShareButton.tsx uses hardcoded Tailwind color classes instead
of the CSS variable theme system used throughout the rest of the codebase.
This breaks dark mode consistency and visual cohesion.

Location

File: src/components/NativeShareButton.tsx

className={`... bg-blue-600 hover:bg-blue-700 
focus:ring-blue-500 focus:ring-offset-gray-900 ...`}

Why This Is a Bug

Every other interactive component in this codebase uses CSS variables
for theming — for example:

• bg-[var(--accent)] instead of bg-blue-600
• hover:bg-[var(--accent-hover)] instead of hover:bg-blue-700
• border-[var(--border)] instead of hardcoded colors

NativeShareButton is the only component using raw Tailwind color
classes. This means:

1. The button does not respond to theme changes (light/dark mode)
2. The blue color clashes with the rest of the UI which uses no blue
3. focus:ring-offset-gray-900 hardcodes a dark background assumption

Expected Behavior

The button should use CSS variables consistent with the rest of the UI:

• bg-[var(--accent)] for background
• hover:bg-[var(--accent-hover)] for hover state
• focus:ring-[var(--accent)] for focus ring
• Remove focus:ring-offset-gray-900

Actual Behavior

The share button renders with a hardcoded blue color that does not
match the app theme and does not adapt to light or dark mode.

Browser and OS Info

• OS: Windows 11
• Browser: Chrome
• Version: Latest

I would like to work on this under GSSoC'26.

/assign

GitHub: github.com/mallya-m

[github-actions]

👋 Thanks for opening an issue, @mallya-m!

Our maintainers will review this shortly 🚀

Before you start working

• 📖 Read the CONTRIBUTING.md guide
• 💬 Wait for a maintainer to assign you the issue before starting work
• 🔍 Search for existing issues to avoid duplicates

For GSSoC'26 contributors

If you're contributing under GirlScript Summer of Code 2026, please mention it in your comment when requesting assignment:

"I'd like to work on this — contributing under GSSoC'26"

Architecture notes

Reframe is a static Next.js app with output: "export". Key points:

• All video processing uses FFmpeg.wasm (client-side, no server)
• headers() in next.config.ts won't work — use vercel.json instead
• not-found.tsx requires public/404.html + vercel.json routes config

Happy contributing! ⭐ Star the repo if you find it useful!

[mallya-m]

/assign

[github-actions]

Hey @mallya-m, this issue has been assigned to you! 🎉 Please make progress within 5 days or it will be automatically unassigned due to inactivity.

[mallya-m]

Hi @magic-peach! I'd like to work on this under GSSoC'26.

I've identified the exact lines in NativeShareButton.tsx — replacing
bg-blue-600, hover:bg-blue-700, focus:ring-blue-500, and
focus:ring-offset-gray-900 with the CSS variables used across the
rest of the codebase (var(--accent), var(--accent-hover) etc).
Will submit a clean PR shortly.

/assign

GitHub: github.com/mallya-m

[github-actions]

Hey @mallya-m, this issue is already assigned to @mallya-m. Please pick another issue or wait for it to become available. You can browse open unassigned issues here: https://github.com/magic-peach/reframe/issues?q=is%3Aissue+is%3Aopen+no%3Aassignee

[github-actions]

Hey @mallya-m, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰

[mallya-m]

Hey @mallya-m, just a friendly reminder that this issue has had no activity for 2 days. Please leave an update or let us know if you need help! ⏰

Working on this — will submit PR shortly.

[github-actions]

Hey @mallya-m, final warning! ⚠️ This issue has had no activity for 4 days and will be automatically unassigned in 24 hours if there is no update.

[github-actions]

This issue has been unassigned from @mallya-m due to 5 days of inactivity and is open for anyone to pick up — comment /assign to claim it!