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

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

@ -9,7 +9,6 @@ import { useState } from "react";
import ScoreButton from "./score-button"; import ScoreButton from "./score-button";
import { copyToClipboard } from "@/common/browser-utils"; import { copyToClipboard } from "@/common/browser-utils";
import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token"; 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 { ArrowDownIcon } from "@heroicons/react/24/solid";
import clsx from "clsx"; import clsx from "clsx";
import ScoreEditorButton from "@/components/score/score-editor-button"; import ScoreEditorButton from "@/components/score/score-editor-button";
@ -81,7 +80,9 @@ export default function ScoreButtons({
<YouTubeLogo /> <YouTubeLogo />
</ScoreButton> </ScoreButton>
</div> </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 */} {/* Edit score button */}
{score && leaderboard && setScore && ( {score && leaderboard && setScore && (
<ScoreEditorButton score={score} leaderboard={leaderboard} setScore={setScore} /> <ScoreEditorButton score={score} leaderboard={leaderboard} setScore={setScore} />
@ -90,18 +91,16 @@ export default function ScoreButtons({
{/* View Leaderboard button */} {/* View Leaderboard button */}
{leaderboardExpanded != undefined && setIsLeaderboardExpanded != undefined && ( {leaderboardExpanded != undefined && setIsLeaderboardExpanded != undefined && (
<div className="pr-2 flex items-center justify-center cursor-default"> <div className="pr-2 flex items-center justify-center cursor-default">
<Button <ArrowDownIcon
className="p-0 hover:bg-transparent" className={clsx(
variant="ghost" "w-6 h-6 transition-all transform-gpu cursor-pointer",
leaderboardExpanded ? "" : "rotate-180"
)}
onClick={() => { onClick={() => {
setLeaderboardExpanded(!leaderboardExpanded); setLeaderboardExpanded(!leaderboardExpanded);
setIsLeaderboardExpanded?.(!leaderboardExpanded); setIsLeaderboardExpanded?.(!leaderboardExpanded);
}} }}
> />
<ArrowDownIcon
className={clsx("w-6 h-6 transition-all transform-gpu", leaderboardExpanded ? "" : "rotate-180")}
/>
</Button>
</div> </div>
)} )}
</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> <PopoverTrigger>
<Button className="p-0 hover:bg-transparent" variant="ghost"> <CogIcon className={clsx("w-6 h-6 transition-all transform-gpu p-0", isScoreEditMode ? "" : "rotate-180")} />
<CogIcon className={clsx("w-6 h-6 transition-all transform-gpu", isScoreEditMode ? "" : "rotate-180")} />
</Button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="p-0" side="left"> <PopoverContent className="p-0" side="left">
<div className="p-3 flex flex-col gap-2"> <div className="p-3 flex flex-col gap-2">