Update Leaderboard component styles

src/components/leaderboard/Leaderboard.tsx

@@ -127,7 +127,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
           </div>
         </Card>
         <Card className="mt-2 h-fit">
-          <div className="mb-2 mt-2 flex justify-center gap-2">
+          <div className="mb-2 flex justify-center gap-2">
             {difficulties.map((diff) => {
               return (
                 <div

src/components/leaderboard/LeaderboardScore.tsx

@@ -21,7 +21,7 @@ export default function LeaderboardScore({
   const accuracy = ((score.baseScore / leaderboard.maxScore) * 100).toFixed(2);
 
   return (
-    <div className="mb-1 mt-1 grid grid-cols-[0.6fr_3fr_1.3fr] first:pt-0 last:pb-0 md:grid-cols-[1.2fr_6fr_1.3fr]">
+    <div className="mb-1 mt-1 grid grid-cols-[0.6fr_3fr_1.3fr] first:pt-0 last:pb-0 md:grid-cols-[1.28fr_6fr_1.3fr]">
       <div className="flex flex-col items-center justify-center">
         <div className="flex w-fit flex-row items-center justify-center gap-1">
           <p>#{formatNumber(score.rank)}</p>

tailwind.config.ts

@@ -25,7 +25,7 @@ module.exports = {
         "pp-blue": "hsl(var(--primary))",
       },
       textColor: {
-        primary: "hsl(var(--primary))",
+        primary: "hsl(var(--foreground))",
         "pp-blue": "#9fa8f3",
       },
       colors: {