Skip to content

Fixed navbar hover contrast issue #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SiddhiMohite20 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fixed navbar hover contrast issue #235

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb94e12
Fixed navbar hover contrast issue
SiddhiMohite20 May 14, 2026
4387fc9
Updated navbar hover style for consistency
SiddhiMohite20 May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const Navbar: React.FC = () => {
{/* Logo Section */}
<Link
to="/"
className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
className="text-2xl font-bold hover:text-blue-500 cursor-pointer flex items-center"
>
<img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
GitHub Tracker
Expand All @@ -30,25 +30,25 @@ const Navbar: React.FC = () => {
<div className="hidden md:flex space-x-6">
<Link
to="/"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Home
</Link>
<Link
to="/track"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="text-lg font-medium text-black hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 14, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

Critical: Explicit text-black breaks dark mode visibility.

The Tracker link specifies text-black without a dark mode variant. This will override the parent's dark:text-white class, rendering the link invisible (or extremely low contrast) in dark mode.

🐛 Proposed fix 
-            className="text-lg font-medium text-black  hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
+            className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"

Remove the explicit text-black to allow the parent's text-black dark:text-white to apply correctly. Also fixes the double space.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="text-lg font-medium text-black hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Navbar.tsx` at line 39, The Tracker link's className in the
Navbar component includes an explicit "text-black" which overrides dark mode;
remove "text-black" (and the extra space) from the className string on the
Tracker link so the parent's "dark:text-white" can take effect, leaving the
other utility classes (hover:text-blue-600, transition-all, px-2, py-1, border
border-transparent, hover:border-blue-400, rounded) intact.

>
Tracker
</Link>
Comment on lines 31 to 42
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 14, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Inconsistent hover styling between Home and Tracker links.

The Home link uses hover:text-blue-300 while the Tracker link uses hover:text-blue-600. This inconsistency creates a confusing visual experience where similar navigation items behave differently on hover.

♻️ Proposed fix for consistent styling 
           <Link
             to="/"
-            className="text-lg font-medium hover:text-blue-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
+            className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
           >
             Home
           </Link>
           <Link
             to="/track"
-            className="text-lg font-medium text-black  hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
+            className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
           >
             Tracker
           </Link>

This unifies both links to use hover:text-blue-600 and hover:border-blue-400, and removes the problematic explicit text-black.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Link
to="/"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="text-lg font-medium hover:text-blue-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Home
</Link>
<Link
to="/track"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="text-lg font-medium text-black hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
>
Tracker
</Link>
<Link
to="/"
className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
>
Home
</Link>
<Link
to="/track"
className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-blue-400 rounded"
>
Tracker
</Link>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Navbar.tsx` around lines 31 - 42, The Home and Tracker Link
elements in Navbar.tsx have inconsistent hover styles (Home uses
hover:text-blue-300; Tracker uses hover:text-blue-600 and hover:border-blue-400)
and the Tracker also forces text-black; update the Link for "/" (Home) to match
the Tracker hover behavior by using hover:text-blue-600 and
hover:border-blue-400 and remove the explicit text-black from the Link for
"/track" so both links share the same hover/font behavior; locate the Link
elements with to="/" and to="/track" in the Navbar component and make these
style changes.

<Link
to="/contributors"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Contributors
</Link>
<Link
to="/login"
className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
>
Login
</Link>
Expand Down Expand Up @@ -91,35 +91,35 @@ const Navbar: React.FC = () => {
<div className="space-y-4 px-6 py-4">
<Link
to="/"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="block text-lg font-medium hover:text-blue-600 transition-all px-2 py-1 border border-transparent hover:border-black rounded"
onClick={() => setIsOpen(false)}
>
Home
</Link>
<Link
to="/about"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="block text-lg font-medium hover:text-blue-00 transition-all px-2 py-1 border border-transparent hover:border-black rounded"
onClick={() => setIsOpen(false)}
>
About
</Link>
<Link
to="/contact"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="block text-lg font-medium hover:text-blue-500 transition-all px-2 py-1 border border-transparent hover:border-black rounded"
onClick={() => setIsOpen(false)}
>
Contact
</Link>
<Link
to="/contributors"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="block text-lg font-medium hover:text-blue-500 transition-all px-2 py-1 border border-transparent hover:border-black rounded"
onClick={() => setIsOpen(false)}
>
Contributors
</Link>
<Link
to="/login"
className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
className="block text-lg font-medium hover:text-blue-500 transition-all px-2 py-1 border border-transparent hover:border-black rounded"
onClick={() => setIsOpen(false)}
>
Login
Expand Down