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

fix tooltips
All checks were successful
Deploy Website / docker (ubuntu-latest) (push) Successful in 2m5s
Details

Browse Source
This commit is contained in:
Lee 2024-10-19 17:29:17 +01:00
parent 337331538a
commit 2df95d140a
12 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/website/src/components/footer.tsx
View File

@ -54,7 +54,7 @@ export default function Footer() {
return (
<Link
key={index}
className="px-2 text-pp hover:brightness-50 transition-all transform-gpu"
className="px-2 text-pp hover:brightness-[66%] transition-all transform-gpu"
href={item.link}
target={item.openInNewTab ? "_blank" : undefined}
>

2
projects/website/src/components/leaderboard/leaderboard-scores.tsx
View File

@ -162,7 +162,7 @@ export default function LeaderboardScores({
})}
</div>
<div className="overflow-x-auto">
<div className="overflow-x-auto relative">
<table className="table w-full table-auto border-spacing-2 border-none text-left text-sm">
<thead>
<tr>

2
projects/website/src/components/loaders/fullscreen-loader.tsx
View File

@ -7,7 +7,7 @@ type Props = {
export default function FullscreenLoader({ reason }: Props) {
return (
<div className="absolute w-screen h-screen bg-background brightness-50 flex flex-col gap-6 items-center justify-center">
<div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
<div className="flex flex-col items-center justify-center">
<p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
<p className="text-gray-300 text-md text-center">{reason}</p>

2
projects/website/src/components/player/chart/player-charts.tsx
View File

@ -78,7 +78,7 @@ export default function PlayerCharts({ player }: PlayerChartsProps) {
>
<button
onClick={() => setSelectedChart(chart)}
className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-50 transform-gpu transition-all`}
className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-[66%] transform-gpu transition-all`}
>
{chart.icon}
</button>

8
projects/website/src/components/player/player-header.tsx
View File

@ -110,7 +110,9 @@ const playerData = [
player,
"rank",
<Link href={`/ranking/${player.rankPages.global}`}>
<p className="hover:brightness-50 transition-all transform-gpu">#{formatNumberWithCommas(player.rank)}</p>
<p className="hover:brightness-[66%] transition-all transform-gpu">
#{formatNumberWithCommas(player.rank)}
</p>
</Link>
)}
{rankChange != 0 && renderDailyChange(rankChange, <p>The change in rank compared to yesterday</p>)}
@ -133,7 +135,7 @@ const playerData = [
player,
"countryRank",
<Link href={`/ranking/${player.country}/${player.rankPages.country}`}>
<p className="hover:brightness-50 transition-all transform-gpu">
<p className="hover:brightness-[66%] transition-all transform-gpu">
#{formatNumberWithCommas(player.countryRank)}
</p>
</Link>
@ -154,7 +156,7 @@ const playerData = [
{renderChange(
player,
"pp",
<p className="hover:brightness-50 transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
<p className="hover:brightness-[66%] transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
)}
{ppChange != 0 && renderDailyChange(ppChange, <p>The change in pp compared to yesterday</p>)}
</div>

2
projects/website/src/components/player/player-info.tsx
View File

@ -33,7 +33,7 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
/>
</Avatar>
{!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
<Link className="transform-gpu transition-all hover:brightness-50" href={`/player/${player.id}`}>
<Link className="transform-gpu transition-all hover:brightness-[66%]" href={`/player/${player.id}`}>
<p
className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
style={{

2
projects/website/src/components/player/player-scores.tsx
View File

@ -199,7 +199,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
{searchTerm && ( // Show clear button only if there's a query
<button
onClick={clearSearch}
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-50 transform-gpu transition-all cursor-default"
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-[66%] transform-gpu transition-all cursor-default"
aria-label="Clear search"
>
<XMarkIcon className="w-5 h-5" />

2
projects/website/src/components/ranking/mini.tsx
View File

@ -97,7 +97,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
<Link
key={index}
href={`/player/${playerRanking.id}`}
className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-50 first:rounded-t last:rounded-b"
className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-[66%] first:rounded-t last:rounded-b"
>
<p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
<div className="flex gap-2 items-center">

2
projects/website/src/components/score/score-feed/score-feed.tsx
View File

@ -47,7 +47,7 @@ export default function ScoreFeed() {
<p className="text-sm">
Set by{" "}
<Link href={`/player/${player.id}`}>
<span className="text-pp hover:brightness-50 transition-all transform-gpu">{player.name}</span>
<span className="text-pp hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
</Link>
</p>
<Score

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

@ -59,7 +59,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
<div className="overflow-y-clip">
<Link
href={`/leaderboard/${leaderboard.id}`}
className="cursor-pointer select-none hover:brightness-50 transform-gpu transition-all text-pp w-fit"
className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-pp w-fit"
>
{leaderboard.songName} {leaderboard.songSubName}
</Link>
@ -67,7 +67,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
<p className="text-gray-400">{leaderboard.songAuthorName}</p>
<FallbackLink
href={mappersProfile}
className={mappersProfile && "hover:brightness-50 transform-gpu transition-all w-fit"}
className={mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit"}
>
{leaderboard.levelAuthorName}
</FallbackLink>

2
projects/website/src/components/score/score-rank-info.tsx
View File

@ -17,7 +17,7 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
<div className="flex gap-1 items-center">
<GlobeAmericasIcon className="w-5 h-5" />
<Link href={`/leaderboard/${leaderboard.id}/${getPageFromRank(score.rank, 12)}`}>
<p className="text-pp cursor-default hover:brightness-50 transition-all transform-gpu cursor-pointer">
<p className="text-pp cursor-default hover:brightness-[66%] transition-all transform-gpu cursor-pointer">
#{formatNumberWithCommas(score.rank)}
</p>
</Link>

41
projects/website/src/components/ui/tooltip.tsx
View File

@ -2,29 +2,42 @@
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import * as React from "react";
import { useEffect, useState } from "react";
import { cn } from "@/common/utils";
import ReactDOM from "react-dom";
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>
));
>(({ className, sideOffset = 4, ...props }, ref) => {
const [mounted, setMounted] = useState(false);
// Ensure the tooltip is rendered after the component has mounted
useEffect(() => {
setMounted(true);
}, []);
// If mounted, render the tooltip using React Portal
return mounted
? ReactDOM.createPortal(
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
/>,
document.body // Render the tooltip outside the table and its overflow
)
: null;
});
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };