[BUG]: Badge hover state changes background color incorrectly in High-Contrast them

[insanekrishnna]

Bug Description

In the Profile section, the Badge card has inconsistent hover behavior across themes.

When hovering over a badge, the badge icon gets a slight visual enhancement in the Light and Dark themes without changing the card's background color. However, in the High-Contrast theme, hovering over the badge changes the entire badge card background to yellow while the foreground text remains white.

This creates poor visual contrast and makes the badge text difficult to read.

Steps to Reproduce

Sign in to the application.
Navigate to the Profile section.
Scroll down to the Badges section.
Locate the Novice badge.
Hover over the badge.
Repeat the same steps in Light, Dark, and High-Contrast themes.

Logs and Screenshots

badge-issue.mp4

Actual behavior

Light theme
Badge background remains unchanged on hover.
Badge icon gets a slight visual enhancement.

Dark theme
Badge background remains unchanged on hover.
Badge icon gets a slight visual enhancement.

High-Contrast theme
Badge background changes to yellow on hover.
Foreground text remains white.
The white text on the yellow background has poor visibility and contrast.
This behavior is inconsistent with the Light and Dark themes.

Expected behavior
The High-Contrast theme should follow the same hover behavior as the other themes.

On hover:

The badge card background should not change to yellow.
The badge text should remain white.
The blue badge icon can have the same subtle hover enhancement used in the other themes.
The existing High-Contrast background should remain unchanged.
Hover styling should maintain clear text and icon visibility.

Environment Details

No response

Impact

Medium - Feature works but has issues

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates