diff --git a/src/components/dashboard/LeaderBoard/leaderboard.css b/src/components/dashboard/LeaderBoard/leaderboard.css index cda682f3..eebdee56 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" /> - {badgeName} + ); })}