i hate grids.

src/components/player/player-scores.tsx

@@ -89,7 +89,7 @@ export default function PlayerScores({ initialScoreData, player, sort, page }: P
   }
 
   return (
-    <Card className="flex gap-4">
+    <Card className="flex gap-2">
       <div className="flex items-center flex-row w-full gap-2 justify-center">
         {Object.values(scoreSort).map((sortOption, index) => (
           <Button

src/components/player/score/score-info.tsx

@@ -1,6 +1,7 @@
 import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
 import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
+import { songDifficultyToColor } from "@/common/song-utils";
 import FallbackLink from "@/components/fallback-link";
 import Tooltip from "@/components/tooltip";
 import { StarIcon } from "@heroicons/react/24/solid";
@@ -19,7 +20,7 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
     beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
 
   return (
-    <div className="flex gap-3">
+    <div className="flex gap-3 items-center">
       <div className="relative flex justify-center h-[64px]">
         <Tooltip
           display={
@@ -35,7 +36,12 @@ export default function ScoreSongInfo({ playerScore, beatSaverMap }: Props) {
             </>
           }
         >
-          <div className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs">
+          <div
+            className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs"
+            style={{
+              backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
+            }}
+          >
             {leaderboard.stars > 0 ? (
               <div className="flex gap-1 items-center justify-center">
                 <p>{leaderboard.stars}</p>

src/components/player/score/score-stats.tsx

@@ -4,7 +4,12 @@ import StatValue from "@/components/stat-value";
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 
-const stats = [
+type Badge = {
+  name: string;
+  create: (playerScore: ScoreSaberPlayerScore) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
   {
     name: "PP",
     create: (playerScore: ScoreSaberPlayerScore) => {
@@ -31,6 +36,14 @@ const stats = [
       return `${formatNumberWithCommas(score.baseScore)}`;
     },
   },
+  {
+    name: "",
+    create: () => undefined,
+  },
+  {
+    name: "",
+    create: () => undefined,
+  },
   {
     name: "Full Combo",
     create: (playerScore: ScoreSaberPlayerScore) => {
@@ -39,7 +52,7 @@ const stats = [
 
       return (
         <>
-          <p>{fullCombo ? "FC" : formatNumberWithCommas(score.missedNotes)}</p>
+          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
           <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
         </>
       );
@@ -52,32 +65,15 @@ type Props = {
 };
 
 export default function ScoreStats({ playerScore }: Props) {
-  const itemsPerRow = 3;
-  const totalStats = stats.length;
-  const numRows = Math.ceil(totalStats / itemsPerRow);
-
   return (
-    <div className="flex flex-wrap gap-2 pl-0 lg:pl-2">
+    <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
-      {Array.from({ length: numRows }).map((_, rowIndex) => {
+      {badges.map((badge, index) => {
-        const startIndex = rowIndex * itemsPerRow;
+        const toRender = badge.create(playerScore);
-        const endIndex = startIndex + itemsPerRow;
+        if (toRender === undefined) {
-        const rowStats = stats.slice(startIndex, endIndex);
+          return <div key={index} />;
-        const emptySpaces = itemsPerRow - rowStats.length;
+        }
 
-        return (
+        return <StatValue key={index} value={toRender} />;
-          <div key={rowIndex} className="flex w-full gap-2">
-            {rowIndex === numRows - 1 &&
-              emptySpaces > 0 &&
-              Array(emptySpaces)
-                .fill(null)
-                .map((_, index) => <div key={`empty-${index}`} className="flex-1 min-w-[30%]"></div>)}
-            {rowStats.map((stat) => (
-              <div key={stat.name} className="flex-1 min-w-[30%]">
-                {stat.create(playerScore) && <StatValue value={stat.create(playerScore)} />}
-              </div>
-            ))}
-          </div>
-        );
       })}
     </div>
   );