From 20a0208e926e9b278fd5c75f60af4e3ae7b97cbe Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sat, 12 Oct 2024 07:32:41 +0100
Subject: [PATCH] fix button gaps

---
 .../src/components/score/score-buttons.tsx    | 19 +++++++++----------
 .../components/score/score-editor-button.tsx  |  4 +---
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/projects/website/src/components/score/score-buttons.tsx b/projects/website/src/components/score/score-buttons.tsx
index ac083f0..feb1cb0 100644
--- a/projects/website/src/components/score/score-buttons.tsx
+++ b/projects/website/src/components/score/score-buttons.tsx
@@ -9,7 +9,6 @@ import { useState } from "react";
 import ScoreButton from "./score-button";
 import { copyToClipboard } from "@/common/browser-utils";
 import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
-import { Button } from "@/components/ui/button";
 import { ArrowDownIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
 import ScoreEditorButton from "@/components/score/score-editor-button";
@@ -81,7 +80,9 @@ export default function ScoreButtons({
           <YouTubeLogo />
         </ScoreButton>
       </div>
-      <div className={`flex ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center`}>
+      <div
+        className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center`}
+      >
         {/* Edit score button */}
         {score && leaderboard && setScore && (
           <ScoreEditorButton score={score} leaderboard={leaderboard} setScore={setScore} />
@@ -90,18 +91,16 @@ export default function ScoreButtons({
         {/* View Leaderboard button */}
         {leaderboardExpanded != undefined && setIsLeaderboardExpanded != undefined && (
           <div className="pr-2 flex items-center justify-center cursor-default">
-            <Button
-              className="p-0 hover:bg-transparent"
-              variant="ghost"
+            <ArrowDownIcon
+              className={clsx(
+                "w-6 h-6 transition-all transform-gpu cursor-pointer",
+                leaderboardExpanded ? "" : "rotate-180"
+              )}
               onClick={() => {
                 setLeaderboardExpanded(!leaderboardExpanded);
                 setIsLeaderboardExpanded?.(!leaderboardExpanded);
               }}
-            >
-              <ArrowDownIcon
-                className={clsx("w-6 h-6 transition-all transform-gpu", leaderboardExpanded ? "" : "rotate-180")}
-              />
-            </Button>
+            />
           </div>
         )}
       </div>
diff --git a/projects/website/src/components/score/score-editor-button.tsx b/projects/website/src/components/score/score-editor-button.tsx
index bdeeb8a..c72f257 100644
--- a/projects/website/src/components/score/score-editor-button.tsx
+++ b/projects/website/src/components/score/score-editor-button.tsx
@@ -46,9 +46,7 @@ export default function ScoreEditorButton({ score, leaderboard, setScore }: Scor
         }}
       >
         <PopoverTrigger>
-          <Button className="p-0 hover:bg-transparent" variant="ghost">
-            <CogIcon className={clsx("w-6 h-6 transition-all transform-gpu", isScoreEditMode ? "" : "rotate-180")} />
-          </Button>
+          <CogIcon className={clsx("w-6 h-6 transition-all transform-gpu p-0", isScoreEditMode ? "" : "rotate-180")} />
         </PopoverTrigger>
         <PopoverContent className="p-0" side="left">
           <div className="p-3 flex flex-col gap-2">