fix(styles): improve hover visibility for right-sidebar links in dark & light mode (#7894)

[Mohit5Upadhyay]

Description

This PR improves the hover state styling for links in the site's right sidebar.

Previously, the color difference between normal and hover states was too subtle, especially in dark mode, making it difficult for users to see when a link was being hovered. This created a poor user experience and reduced accessibility.

Validation

Current Situation

current-right-sidebar.mp4

Expected Situation

right-sidebar-hover-resolve.mp4

Related Issues

Fixes #7894

Check List

• [✅] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [✅] I have run pnpm format to ensure the code follows the style guide.
• [✅] I have run pnpm test to check if all tests are passing.
• [✅] I have run pnpm build to check if the website builds without errors.
• [✅] I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jul 4, 2025 1:29pm

[Copilot]

Pull Request Overview

This PR enhances hover styling for links in the right-sidebar MetaBar by adding smooth transitions and stronger color contrast in both light and dark modes.

• Introduce transition-colors and duration-200 for link hover transitions.
• Change hover text color from text-neutral-800/dark:text-neutral-200 to text-neutral-700/dark:text-neutral-600.
• Extend the same base and hover styles to nested list item links (li > a).

Comments suppressed due to low confidence (2)

packages/ui-components/Containers/MetaBar/index.module.css:54

• [nitpick] Consider adding a visual regression or unit test to cover the new hover transition and color changes, ensuring these styles remain consistent in future updates.

        transition-colors

packages/ui-components/Containers/MetaBar/index.module.css:59

• Please verify that text-neutral-700 on a white background meets WCAG AA contrast guidelines; you may need a darker shade to ensure sufficient hover visibility for all users.

        @apply text-neutral-700

[avivkeller]

I really don't think 20 lines of code need to change for this, can't we simply update the 1-2 lines that do the previous hover with better contrast?

[Mohit5Upadhyay]

Hi @avivkeller,
Thanks for your feedback—it makes sense to keep the change minimal. I’ve updated the code so that the hover styles are simplified to:

&:hover {
  @apply text-green-600
    dark:text-green-400
    underline;
}

• This improves contrast in both light and dark modes without extra code changes.
• Before I commit and push this update, does this solution look good to you?

Changes Made on Hover Style:

updated-hover-right.mp4

[AugustinMauroy]

can we use shade of grey instead of green ? green is too contrasted

[avivkeller]

I'm okay with either, but @Mohit5Upadhyay remember to git push your changes, both here and in your other PR

[Mohit5Upadhyay]

Hi @avivkeller and @AugustinMauroy ,
Thanks for the feedback!

I’ve updated the hover color to greyish shade instead of green:

&:hover {
  @apply text-neutral-700
    dark:text-neutral-500;
}

This provides a subtle yet visible contrast in both light and dark modes and avoids the green, which was too strong, as per your suggestion.

After Change:

grayish-hover-right-sidebar.mp4

• I’ve pushed the changes. Let me know if you’d like any further tweaks!

Thanks again for the guidance!

[Mohit5Upadhyay]

Thanks for pointing out the unrelated changes. I’ve reverted those and kept only the hover functionality.

Pushed the changes. Let me know if this looks good!

[ovflowd]

LGTM

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.43%. Comparing base (6ce9ac9) to head (f55092f).
Report is 25 commits behind head on main.

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7935      +/-   ##
==========================================
+ Coverage   75.42%   75.43%   +0.01%     
==========================================
  Files          96       96              
  Lines        8354     8354              
  Branches      219      219              
==========================================
+ Hits         6301     6302       +1     
+ Misses       2051     2050       -1     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.