From 7e75158824c869ba1d30944f7bb97b28d16683b2 Mon Sep 17 00:00:00 2001
From: Rounak Agarwal <agarwalrounak2005@gmail.com>
Date: Wed, 16 Sep 2026 18:09:29 +0530
Subject: [PATCH] fix: theme-aware Novice badge icon + readable badge hover
 across themes (#500)

---
 frontend/src/Pages/Profile.tsx            | 4 ++--
 frontend/src/components/BadgeUnlocked.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Pages/Profile.tsx b/frontend/src/Pages/Profile.tsx
index 4599c312..b1694edf 100644
--- a/frontend/src/Pages/Profile.tsx
+++ b/frontend/src/Pages/Profile.tsx
@@ -859,7 +859,7 @@ const Profile: React.FC = () => {
             <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
               {profile.badges.map((badge, index) => {
                 const badgeIcons: Record<string, React.ReactNode> = {
-                  Novice: <FaAward className="w-6 h-6 text-blue-500" />,
+                  Novice: <FaAward className="w-6 h-6 text-primary" />,
                   Streak5: <FaMedal className="w-6 h-6 text-yellow-500" />,
                   FactMaster: <FaTrophy className="w-6 h-6 text-purple-500" />,
                   FirstWin: <FaTrophy className="w-6 h-6 text-green-500" />,
@@ -877,7 +877,7 @@ const Profile: React.FC = () => {
                 return (
                   <div
                     key={index}
-                    className="flex flex-col items-center justify-center p-3 bg-muted rounded-lg border border-border hover:bg-accent transition-colors cursor-pointer group"
+                    className="flex flex-col items-center justify-center p-3 bg-muted rounded-lg border border-border hover:border-primary hover:shadow-md transition-all cursor-pointer group"
                     title={badgeDescription}
                   >
                     <div className="mb-1 group-hover:scale-110 transition-transform">{badgeIcon}</div>
diff --git a/frontend/src/components/BadgeUnlocked.tsx b/frontend/src/components/BadgeUnlocked.tsx
index d74ed703..27caf9b6 100644
--- a/frontend/src/components/BadgeUnlocked.tsx
+++ b/frontend/src/components/BadgeUnlocked.tsx
@@ -11,7 +11,7 @@ interface BadgeUnlockedProps {
 }
 
 const badgeIcons: Record<string, React.ReactNode> = {
-  Novice: <FaAward className="w-16 h-16 text-blue-500" />,
+  Novice: <FaAward className="w-16 h-16 text-primary" />,
   Streak5: <FaMedal className="w-16 h-16 text-yellow-500" />,
   FactMaster: <FaTrophy className="w-16 h-16 text-purple-500" />,
   FirstWin: <FaTrophy className="w-16 h-16 text-green-500" />,