add role colors

projects/website/src/components/player/player-header.tsx

@@ -13,6 +13,7 @@ import Link from "next/link";
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import AddFriend from "@/components/friend/add-friend";
 import PlayerSteamProfile from "@/components/player/player-steam-profile";
+import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
 
 /**
  * Renders the change for a stat.
@@ -176,7 +177,14 @@ export default function PlayerHeader({ player }: Props) {
         <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
           <div>
             <div className="flex gap-2 items-center justify-center lg:justify-start">
-              <p className="font-bold text-2xl">{player.name}</p>
+              <p
+                className="font-bold text-2xl"
+                style={{
+                  color: getScoreSaberRole(player)?.color,
+                }}
+              >
+                {player.name}
+              </p>
               <div className="absolute lg:relative top-0 left-0 flex flex-col lg:flex-row gap-2">
                 <PlayerTrackedStatus player={player} />
                 <PlayerSteamProfile player={player} />

projects/website/src/components/table-player.tsx

@@ -3,6 +3,7 @@ import CountryFlag from "@/components/country-flag";
 import Link from "next/link";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import ScoreSaberLeaderboardPlayerInfoToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-player-info-token";
+import { getScoreSaberRole } from "@ssr/common/scoresaber.util";
 
 type TablePlayerProps = {
   /**
@@ -27,7 +28,12 @@ export function TablePlayer({ player, claimedPlayer }: TablePlayerProps) {
       </Avatar>
       <CountryFlag code={player.country} size={12} />
       <Link className="transform-gpu transition-all hover:text-blue-500" href={`/player/${player.id}`}>
-        <p className={player.id == claimedPlayer?.id ? "transform-gpu text-pp transition-all hover:brightness-75" : ""}>
+        <p
+          className={player.id == claimedPlayer?.id ? "font-bold" : ""}
+          style={{
+            color: getScoreSaberRole(player)?.color,
+          }}
+        >
           {player.name}
         </p>
       </Link>