🐛fix: improve dark mode hover visibility in Related Projects sidebar

[Janhvibabani]

📌 Fixes

Fixes #918

---

📝 Summary of Changes

In dark mode, hovering over project links in the Related Projects sidebar was barely visible. The hover:bg-gray-800 background didn't provide enough contrast, making it hard to see which item was being hovered.

• Separated current/active project into its own rendering block with dedicated styling
• Replaced inline styles with Tailwind classes for proper hover states
• Added blue-tinted hover effects that are visible in both themes:
  • Dark mode: hover:bg-blue-500/20 hover:text-blue-400
  • Light mode: hover:bg-blue-50 hover:text-blue-600

---

Changes Made

• Separated active project styling into dedicated render block
• Replaced hover:bg-gray-800 with hover:bg-blue-500/20 hover:text-blue-400 (dark mode)
• Replaced hover:bg-gray-100 with hover:bg-blue-50 hover:text-blue-600 (light mode)
• Removed inline style logic for non-current projects, using Tailwind classes instead

---

Checklist

Please ensure the following before submitting your PR:

• I have reviewed the project's contribution guidelines.
• I have written unit tests for the changes (if applicable).
• I have updated the documentation (if applicable).
• I have tested the changes locally and ensured they work as expected.
• My code follows the project's coding standards.

---

Screenshots or Logs (if applicable)

---

👀 Reviewer Notes

Add any special notes for the reviewer here

[kubestellar-prow]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign oksaumya for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[netlify]

✅ Deploy Preview for kubestellar-docs ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	c3b4a80
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellar-docs/deploys/697b93eb710f770008d9dec8
😎 Deploy Preview	https://deploy-preview-919--kubestellar-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kubestellar-prow]

Hi @Janhvibabani. Thanks for your PR.

I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[github-actions]

Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request.

Before your PR can be merged, please ensure:

✅ DCO Sign-off - All commits must be signed off with git commit -s to certify the Developer Certificate of Origin

✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), ⚠️ (breaking change)

Getting Started with KubeStellar:

• 📦 Quick Start
• 📖 Documentation
• 🎬 YouTube - Getting Started & Contributing

Contributor Resources:

• 📚 Contributor Handbook
• 🪜 Contributor Ladder
• 🎓 Mentorship Programs (LFX, GSoC)
• 💬 Slack - #kubestellar-dev

---

🌟 Help KubeStellar Grow - We Need Adopters!

Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes:

📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction!

---

A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack!

[Copilot]

Pull request overview

This PR fixes a dark mode hover visibility issue in the Related Projects sidebar where the hover state had insufficient contrast, making it difficult to see which item was being hovered over.

Changes:

• Separated current/active project rendering into a dedicated block with distinct styling
• Replaced dark mode hover state from hover:bg-gray-800 to hover:bg-blue-500/20 hover:text-blue-400 for better visibility
• Replaced light mode hover state from hover:bg-gray-100 to hover:bg-blue-50 hover:text-blue-600 for consistency
• Applied Tailwind classes for non-current project hover states instead of conditional inline styles

Comments suppressed due to low confidence (1)

src/components/docs/RelatedProjects.tsx:190

• There is significant code duplication between the current project render block (lines 158-172) and the non-current project render block (lines 176-190). The only differences are:

1. The styling (which could be handled with conditional classes)
2. The font-medium class on the current project

Consider consolidating these into a single render block with conditional styling to improve maintainability. For example:

return (
  <a
    key={project.title}
    href={projectUrl}
    className={`
      block px-3 text-sm rounded-md transition-colors
      ${bannerActive ? 'py-0.5' : 'py-1.5'}
      ${isCurrentProject 
        ? (isDark 
          ? 'font-medium text-blue-400 bg-blue-500/20' 
          : 'font-medium text-blue-600 bg-blue-50')
        : (isDark 
          ? 'text-gray-200 hover:bg-blue-500/20 hover:text-blue-400' 
          : 'text-gray-700 hover:bg-blue-50 hover:text-blue-600')
      }
    `}
  >
    {project.title}
  </a>
);

This eliminates duplication and makes the code easier to maintain.

          if (isCurrentProject) {
            return (
              <a
                key={project.title}
                href={projectUrl}
                className={`
                  block px-3 text-sm rounded-md transition-colors font-medium
                  ${bannerActive ? 'py-0.5' : 'py-1.5'}
                `}
                style={{
                  color: isDark ? '#60a5fa' : '#2563eb',
                  backgroundColor: isDark ? 'rgba(59, 130, 246, 0.2)' : 'rgba(239, 246, 255, 1)'
                }}
              >
                {project.title}
              </a>
            );
          }

          return (
            <a
              key={project.title}
              href={projectUrl}
              className={`
                block px-3 text-sm rounded-md transition-colors
                ${bannerActive ? 'py-0.5' : 'py-1.5'}
                ${isDark 
                  ? 'text-gray-200 hover:bg-blue-500/20 hover:text-blue-400' 
                  : 'text-gray-700 hover:bg-blue-50 hover:text-blue-600'
                }
              `}
            >
              {project.title}
            </a>
          );

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The PR description states "Removed inline style logic for non-current projects, using Tailwind classes instead," but the current/active project (lines 165-168) still uses inline styles. This is a discrepancy between the PR description and the actual implementation.

Either the PR description should be updated to clarify that inline styles were only removed for non-current projects, or the inline styles should be removed from the current project block as well to fully match the stated changes.

[Copilot]

The current/active project still uses inline styles (lines 166-167), which is inconsistent with the PR description stating "Removed inline style logic for non-current projects, using Tailwind classes instead." For consistency and maintainability, consider converting these inline styles to Tailwind classes as well, using the same pattern applied to non-current projects:

For the current project block, you could use Tailwind classes like:

• Dark mode: text-blue-400 bg-blue-500/20
• Light mode: text-blue-600 bg-blue-50

This would make the styling consistent throughout the component and eliminate the need for inline style attributes.

Suggested change

	`}
	style={{
	color: isDark ? '#60a5fa' : '#2563eb',
	backgroundColor: isDark ? 'rgba(59, 130, 246, 0.2)' : 'rgba(239, 246, 255, 1)'
	}}
	${isDark
	? 'text-blue-400 bg-blue-500/20'
	: 'text-blue-600 bg-blue-50'
	}
	`}