[UI Bug] Right sidebar has poor visibility and missing hover effects on format buttons

[tharunika-19]

Bug Report

Description

The right sidebar (Resize & Aspect Ratio section) has two related UI/UX issues that hurt usability:

1. Poor visibility – The sidebar content (format buttons, labels, section headers) lacks sufficient contrast and appears visually unclear, making it hard to read at a glance.
2. No hover effects – The aspect ratio/format buttons (Reels, TikTok, Short, YouTube, Twitter/X, 9:16, 4:5, 1:1, etc.) have no hover state, so users get no visual feedback when they move their cursor over them.

Steps to Reproduce

1. Open https://reframe-lilac.vercel.app/
2. Look at the right sidebar -- Resize & Aspect Ratio section
3. Observe the low-contrast text and button labels
4. Hover over any format button (e.g. Reels, TikTok, 9:16) -- no visual change occurs

Expected Behavior

• Sidebar content should be clearly legible with sufficient contrast
• Format buttons should have a visible hover state (e.g. border highlight, background change, or scale effect) to provide user feedback

Screenshots

Environment

• Browser: Chrome
• OS: Windows 11

Suggested Fix

• Increase text/icon contrast in the sidebar using a lighter foreground color or higher opacity
• Add CSS hover styles to format buttons (e.g. border-color change, subtle background highlight, or transform: scale(1.05))

Labels

bug ui good first issue

[github-actions]

👋 Thanks for opening an issue, @tharunika-19!

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!

[tharunika-19]

I'd love to be assigned this issue. I've already identified the root cause and have a fix in mind:

• Increase contrast/opacity on sidebar text and labels
• Add hover states to the format buttons (border highlight + subtle background change)

I'll clone the repo, run it locally, and submit a PR with the fix.

Can you please assign this to me?

[tharunika-19]

/ASSIGN/GSSOC2026

[github-actions]

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

[github-actions]

Hey @tharunika-19, 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! ⏰

[tharunika-19]

Thanks for the reminder! I've investigated the issue and documented the proposed solution. I'm currently working on the fix and will update this issue with progress shortly.