Skip to content

fix: improve sidebar button visibility and hover effects in both ligh… - #1516

Open
tharunika-19 wants to merge 1 commit into
reframe-oss:mainfrom
tharunika-19:fix/sidebar-visibility-hover-effects
Open

tharunika-19 wants to merge 1 commit into
reframe-oss:mainfrom
tharunika-19:fix/sidebar-visibility-hover-effects

Conversation

@tharunika-19

@tharunika-19 tharunika-19 commented Jun 3, 2026

Copy link
Copy Markdown

Description

Improves the visibility of the right sidebar format/preset buttons in both light and dark mode.
Previously, inactive buttons had very low contrast borders and backgrounds that blended into
the sidebar, making them hard to distinguish.

Changes made:

  • Replaced var(--border) and var(--surface) CSS variables with theme-aware Tailwind classes
  • Added dark: prefix classes so borders and backgrounds work correctly in both light and dark mode
  • Inactive buttons now have clearly visible borders and backgrounds in both themes

Related Issue

Fixes #1513

Type of Contribution

  • Bug fix
  • New feature
  • Documentation update
  • Refactor
  • GSSoC contribution

Participant Info

  • GitHub username: tharunika-19
  • Contribution level (Beginner/Intermediate/Advanced): Beginner

Screen shots

image

Checklist

  • I have read the contribution guidelines
  • My changes follow the project structure
  • I have tested my changes in Chrome, Firefox, and Safari
  • bun run lint passes (no ESLint errors)
  • bunx tsc --noEmit passes (no TypeScript errors)
  • New interactive elements have aria-label / accessible names
  • No console.log statements left in
  • This PR is related to a valid issue
  • Screen recording attached above (required for UI/feature/design changes)

@vercel

vercel Bot commented Jun 3, 2026

Copy link
Copy Markdown

@tharunika-19 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

👋 Thanks for your PR, @tharunika-19!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions github-actions Bot added gssoc'26 GirlScript Summer of Code 2026 level:beginner Beginner level - 20 pts type:bug Bug fix type:design UI/UX design type:docs Documentation type:feature New feature type:refactor Code refactor labels Jun 3, 2026
@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown
Contributor

✅ PR Format Check Passed — @tharunika-19

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

@tharunika-19

Copy link
Copy Markdown
Author

Hi @magic-peach , could you please approve the workflows so the build check can run? The PR format check has passed and the changes are ready for review. Happy to make any adjustments if needed! 😊

@magic-peach magic-peach added the status:awaiting-review Clean PR waiting on a maintainer, not the author label Aug 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

gssoc'26 GirlScript Summer of Code 2026 level:beginner Beginner level - 20 pts status:awaiting-review Clean PR waiting on a maintainer, not the author type:bug Bug fix type:design UI/UX design type:docs Documentation type:feature New feature type:refactor Code refactor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants