Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

fix button gaps
All checks were successful
Deploy Website / deploy (push) Successful in 4m19s
Details

Browse Source
This commit is contained in:
Lee 2024-10-12 07:32:41 +01:00
parent 988d8cb17e
commit 20a0208e92
2 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
projects/website/src/components/score/score-buttons.tsx
View File

@ -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>

4
projects/website/src/components/score/score-editor-button.tsx
View File

@ -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">