From c19c6dd6312edf6244cba5cc698b963dcf961050 Mon Sep 17 00:00:00 2001
From: steam_bell_92 <anujck45@gmail.com>
Date: Tue, 22 Sep 2026 18:35:37 +0530
Subject: [PATCH 1/2] tweaks on hover of leaderboard badges

---
 .../dashboard/LeaderBoard/leaderboard.css     | 28 +++++++++++--------
 .../dashboard/LeaderBoard/leaderboard.tsx     |  5 +++-
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/components/dashboard/LeaderBoard/leaderboard.css b/src/components/dashboard/LeaderBoard/leaderboard.css
index cda682f3..fb3af1f7 100644
--- a/src/components/dashboard/LeaderBoard/leaderboard.css
+++ b/src/components/dashboard/LeaderBoard/leaderboard.css
@@ -327,7 +327,7 @@
 .sidebar-badge-icon {
   width: 36px;
   height: 36px;
-  border-radius: 50%;
+  object-fit: contain;
   transition: transform 0.15s ease;
 }
 
@@ -344,23 +344,29 @@
   color: #f9fafb;
   font-size: 11px;
   font-weight: 600;
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
   white-space: nowrap;
-  padding: 6px 10px;
-  border-radius: 6px;
+  clip-path: polygon(
+    25% 0,
+    75% 0,
+    100% 50%,
+    75% 100%,
+    25% 100%,
+    0 50%
+  );
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.15s ease, transform 0.15s ease;
   z-index: 10;
 }
 
-.sidebar-badge-tooltip::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border: 5px solid transparent;
-  border-top-color: #111827;
+.sidebar-badge-tooltip img {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
 }
 
 .sidebar-badge-item:hover .sidebar-badge-tooltip,
diff --git a/src/components/dashboard/LeaderBoard/leaderboard.tsx b/src/components/dashboard/LeaderBoard/leaderboard.tsx
index e301d49b..89071557 100644
--- a/src/components/dashboard/LeaderBoard/leaderboard.tsx
+++ b/src/components/dashboard/LeaderBoard/leaderboard.tsx
@@ -941,7 +941,10 @@ export default function LeaderBoard(): JSX.Element {
                       alt={badgeName}
                       className="sidebar-badge-icon"
                     />
-                    <span className="sidebar-badge-tooltip">{badgeName}</span>
+                    <span className="sidebar-badge-tooltip" aria-hidden="true">
+                      <img src={badge} alt="" />
+                      <span>{badgeName}</span>
+                    </span>
                   </button>
                 );
               })}

From 7ab4aa096aa6d86220c70e891dccdbcc4ab2bf99 Mon Sep 17 00:00:00 2001
From: Anuj Kulkarni <anujck45@gmail.com>
Date: Wed, 23 Sep 2026 10:21:46 +0530
Subject: [PATCH 2/2] Fix CSS selector for sidebar badge tooltip image

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/components/dashboard/LeaderBoard/leaderboard.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dashboard/LeaderBoard/leaderboard.css b/src/components/dashboard/LeaderBoard/leaderboard.css
index fb3af1f7..eebdee56 100644
--- a/src/components/dashboard/LeaderBoard/leaderboard.css
+++ b/src/components/dashboard/LeaderBoard/leaderboard.css
@@ -363,7 +363,7 @@
   z-index: 10;
 }
 
-.sidebar-badge-tooltip img {
+.sidebar-badge-tooltip > img {
   width: 42px;
   height: 42px;
   object-fit: contain;