From caf5f01a0917f231f91a3a7004ce163c3879f3de Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sat, 19 Oct 2024 13:13:36 +0100
Subject: [PATCH] make diff buttons look nicer

---
 .../src/components/leaderboard/leaderboard-scores.tsx  | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/projects/website/src/components/leaderboard/leaderboard-scores.tsx b/projects/website/src/components/leaderboard/leaderboard-scores.tsx
index 2ad5424..c0d365d 100644
--- a/projects/website/src/components/leaderboard/leaderboard-scores.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-scores.tsx
@@ -10,7 +10,7 @@ import LeaderboardScore from "./leaderboard-score";
 import { scoreAnimation } from "@/components/score/score-animation";
 import { Button } from "@/components/ui/button";
 import { clsx } from "clsx";
-import { getDifficultyFromRawDifficulty } from "@/common/song-utils";
+import { getDifficulty, getDifficultyFromRawDifficulty } from "@/common/song-utils";
 import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
 import ScoreSaberScore from "@ssr/common/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
@@ -169,13 +169,19 @@ export default function LeaderboardScores({
               return null;
             }
 
+            const isSelected = leaderboardId === selectedLeaderboardId;
             return (
               <Button
                 key={difficultyRaw}
-                variant={leaderboardId === selectedLeaderboardId ? "default" : "outline"}
+                variant={isSelected ? "default" : "outline"}
                 onClick={() => {
                   handleLeaderboardChange(leaderboardId);
                 }}
+                className={`border ${isSelected ? "bg-primary/5 font-bold" : ""}`}
+                style={{
+                  color: getDifficultyFromRawDifficulty(difficultyRaw).color,
+                  borderColor: getDifficultyFromRawDifficulty(difficultyRaw).color,
+                }}
               >
                 {difficulty.name}
               </Button>