From 8f617aca82dff945cfd0456011b42b51da9d64cf Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sat, 19 Oct 2024 17:48:29 +0100
Subject: [PATCH] fix mini hover on player

---
 .../website/src/components/player/player-info.tsx   | 13 +++++++++++--
 projects/website/src/components/ranking/mini.tsx    |  4 ++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/projects/website/src/components/player/player-info.tsx b/projects/website/src/components/player/player-info.tsx
index 44f7df3..1b5dc77 100644
--- a/projects/website/src/components/player/player-info.tsx
+++ b/projects/website/src/components/player/player-info.tsx
@@ -5,6 +5,7 @@ import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-sabe
 import ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token";
 import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
+import { clsx } from "clsx";
 
 type TablePlayerProps = {
   /**
@@ -21,9 +22,14 @@ type TablePlayerProps = {
    * Hide the country flag
    */
   hideCountryFlag?: boolean;
+
+  /**
+   * Whether to apply hover brightness
+   */
+  hoverBrightness?: boolean;
 };
 
-export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: TablePlayerProps) {
+export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag, hoverBrightness = true }: TablePlayerProps) {
   return (
     <div className="flex gap-2 items-center">
       <Avatar className="w-[24px] h-[24px] pointer-events-none">
@@ -33,7 +39,10 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
         />
       </Avatar>
       {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
-      <Link className="transform-gpu transition-all hover:brightness-[66%]" href={`/player/${player.id}`}>
+      <Link
+        className={clsx(hoverBrightness ? "transform-gpu transition-all hover:brightness-[66%]" : "")}
+        href={`/player/${player.id}`}
+      >
         <p
           className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
           style={{
diff --git a/projects/website/src/components/ranking/mini.tsx b/projects/website/src/components/ranking/mini.tsx
index 264ed20..88c50a8 100644
--- a/projects/website/src/components/ranking/mini.tsx
+++ b/projects/website/src/components/ranking/mini.tsx
@@ -97,11 +97,11 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             <Link
               key={index}
               href={`/player/${playerRanking.id}`}
-              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-[66%] first:rounded-t last:rounded-b"
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">
-                <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag />
+                <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag hoverBrightness={false} />
               </div>
               <div className="inline-flex min-w-[11.5em] gap-2 items-center">
                 <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>