Skip to content

Comments

🐛 Fix: related projects hover appears dark in light mode#1195

Open
btwshivam wants to merge 1 commit intomainfrom
fix/related-projects-hover-dark-light-mode
Open

🐛 Fix: related projects hover appears dark in light mode#1195
btwshivam wants to merge 1 commit intomainfrom
fix/related-projects-hover-dark-light-mode

Conversation

@btwshivam
Copy link
Collaborator

@btwshivam btwshivam commented Feb 22, 2026 •
edited
Loading

Replaced Tailwind dark:hover:bg-gray-800 class on project links with explicit React hover state (onMouseEnter/onMouseLeave). Background colors are now determined programmatically based on the resolved theme, preventing Tailwind dark: variants from bleeding into light mode when the html.dark class is still present during hydration.

Also tracks hovered item by project title key to correctly apply and reset hover styles without relying on CSS class selectors.

📌 Fixes

Fixes #1193

📝 Summary of Changes

  • Short description of what was changed
  • Include links to related issues/discussions if any

Changes Made

  • Updated ...
  • Refactored ...
  • Fixed ...
  • Added tests for ...

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.

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Add any special notes for the reviewer here

@btwshivam
fix: related projects hover appears dark in light mode (#1193)
cdc83fe 
Replaced Tailwind dark:hover:bg-gray-800 class on project links with
explicit React hover state (onMouseEnter/onMouseLeave). Background
colors are now determined programmatically based on the resolved theme,
preventing Tailwind dark: variants from bleeding into light mode when
the html.dark class is still present during hydration.

Also tracks hovered item by project title key to correctly apply and
reset hover styles without relying on CSS class selectors.

Signed-off-by: btwshivam <shivam200446@gmail.com>
Copilot AI review requested due to automatic review settings February 22, 2026 20:42
@kubestellar-prow kubestellar-prow bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Feb 22, 2026
@kubestellar-prow
Copy link

kubestellar-prow bot commented Feb 22, 2026

[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 kproche 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:

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

@netlify
Copy link

netlify bot commented Feb 22, 2026 •
edited
Loading

✅ Deploy Preview for kubestellar-docs ready!

Name Link
🔨 Latest commit cdc83fe
🔍 Latest deploy log https://app.netlify.com/projects/kubestellar-docs/deploys/699b6a515f2d260008602c56
😎 Deploy Preview https://deploy-preview-1195--kubestellar-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@github-actions
Copy link
Contributor

github-actions bot commented Feb 22, 2026

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:

Contributor Resources:

🌟 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!

@kubestellar-prow kubestellar-prow bot added the size/M Denotes a PR that changes 30-99 lines, ignoring generated files. label Feb 22, 2026
Copilot AI reviewed Feb 22, 2026
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes a visual bug where hover effects on related project links appeared with dark mode styling in light mode due to Tailwind's dark: variants being applied during hydration before the theme was fully resolved. The fix replaces CSS-based hover styling with React state management and programmatic background color determination based on the resolved theme.

Changes:

  • Replaced Tailwind dark:hover:bg-gray-800 class with React state-based hover tracking
  • Added programmatic background color determination based on isDark theme state
  • Implemented onMouseEnter/onMouseLeave handlers to manage hover state explicitly

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

clubanderson
clubanderson reviewed Feb 22, 2026
View reviewed changes
Copy link
Contributor

@clubanderson clubanderson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1194 🐛 Fix: dark mode switch button appears dark in light mode btwshivam
1190 🐛 Fix: resolve hydration mismatch in RelatedProjects links oksaumya

@btwshivam
Copy link
Collaborator Author

btwshivam commented Feb 22, 2026 •
edited
Loading

1194 🐛 Fix: dark mode switch button appears dark in light mode btwshivam 1190 🐛 Fix: resolve hydration mismatch in RelatedProjects links oksaumya

oh yep updated

This was referenced Feb 24, 2026
Merged
Merged
clubanderson
clubanderson approved these changes Feb 24, 2026
View reviewed changes
Copy link
Contributor

@clubanderson clubanderson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review

The hover fix works — using React state with onMouseEnter/onMouseLeave prevents the Tailwind dark:hover: class from applying incorrectly during hydration.

Notes:

  • Unrelated reformatting of Moon/Sun className template literals and isProduction indentation adds noise to the diff.
  • This PR conflicts with #1190 (both modify RelatedProjects.tsx). Merge #1190 first, then rebase this one.
  • Same broader concern as #1194: replacing CSS hover with JS hover state works but is less idiomatic. A theme initialization script that sets html.dark before paint would be the root-cause fix, allowing Tailwind dark: classes to work reliably.

/lgtm

@kubestellar-prow kubestellar-prow bot added the lgtm Indicates that a PR is ready to be merged. label Feb 24, 2026
@kubestellar-prow
Copy link

kubestellar-prow bot commented Feb 24, 2026

LGTM label has been added.

DetailsGit tree hash: 10351d76ef23baa5cf813b33b673a63bb3fe4b06

@clubanderson
Copy link
Contributor

clubanderson commented Feb 24, 2026

@copilot This PR now has merge conflicts because #1190 was merged first (both modify RelatedProjects.tsx). Please:

  1. Rebase this branch onto main to pick up the changes from 🐛 Fix: resolve hydration mismatch in RelatedProjects links #1190
  2. When resolving conflicts in RelatedProjects.tsx, keep the isProduction state-based approach from 🐛 Fix: resolve hydration mismatch in RelatedProjects links #1190 (it moved the hostname check into useState + useEffect) — do NOT revert back to the render-time typeof window check
  3. Remove the unrelated reformatting changes (Moon/Sun className line breaks, isProduction indentation) — only keep the hover state fix (hoveredProject state, onMouseEnter/onMouseLeave, bgColor logic)
  4. Push the rebased branch

Copilot AI mentioned this pull request Feb 24, 2026
Closed
7 tasks
Copy link
Contributor

Copilot AI commented Feb 24, 2026

@clubanderson I've opened a new pull request, #1202, to work on those changes. Once the pull request is ready, I'll request review from you.

@kubestellar-prow kubestellar-prow bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Feb 24, 2026
@kubestellar-prow
Copy link

kubestellar-prow bot commented Feb 24, 2026

PR needs rebase.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@clubanderson clubanderson clubanderson approved these changes

Assignees

@clubanderson clubanderson

Labels

dco-signoff: yes Indicates the PR's author has signed the DCO. frontend lgtm Indicates that a PR is ready to be merged. needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. size/M Denotes a PR that changes 30-99 lines, ignoring generated files. typescript

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Related Project Hover looks dark in light mode

3 participants

@btwshivam @clubanderson