chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions

Update some draft room styling.

Browse source
This commit is contained in:
Chris Parsons 2026-04-17 09:36:13 -07:00
parent 32bfbf2564
commit 20a357ecb1
3 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/app.css
View file

@ -105,6 +105,18 @@ html {
}
}
@keyframes pulse-gradient {
0%, 100% {
opacity: 0.35;
}
50% {
opacity: 1;
}
}
.animate-pulse-gradient {
animation: pulse-gradient 2s ease-in-out infinite;
}
/* NProgress theme override */
#nprogress .bar {
background: var(--electric) !important;

4
app/components/draft/DraftGridSection.tsx
View file

@ -195,6 +195,7 @@ export const DraftGridSection = memo(function DraftGridSection({
const pickData = cell.pick
? { participant: { name: cell.pick.participant.name }, sport: { name: cell.pick.sport.name } }
: undefined;
const pendingCorona = cellState === "upcoming" ? { type: "pending" as const } : undefined;
const mobileButtons = isCommissioner && (
<>
@ -227,6 +228,7 @@ export const DraftGridSection = memo(function DraftGridSection({
pickInRound={cell.pickInRound}
state={cellState}
pick={pickData}
coronaState={pendingCorona}
>
{mobileButtons}
</DraftPickCell>
@ -264,6 +266,7 @@ export const DraftGridSection = memo(function DraftGridSection({
pickInRound={cell.pickInRound}
state={cellState}
pick={pickData}
coronaState={pendingCorona}
>
{mobileButtons}
</DraftPickCell>
@ -299,6 +302,7 @@ export const DraftGridSection = memo(function DraftGridSection({
pickInRound={cell.pickInRound}
state={cellState}
pick={pickData}
coronaState={pendingCorona}
>
{mobileButtons}
</DraftPickCell>

41
app/components/draft/DraftPickCell.tsx
View file

@ -61,7 +61,8 @@ export function DraftPickCell({
className,
children,
}: DraftPickCellProps) {
const showCorona = state === "picked";
const showCorona = state === "picked" || (state === "upcoming" && !!coronaState);
const isCurrent = state === "current";
return (
<div
@ -70,7 +71,9 @@ export function DraftPickCell({
className,
)}
>
{showCorona && coronaState ? (
{isCurrent ? (
<div className="absolute inset-0 rounded-lg [background:linear-gradient(to_bottom,#adf661,#2ce1c1)] animate-pulse-gradient" />
) : showCorona && coronaState ? (
<div
className="absolute top-0.5 bottom-0.5 left-0 right-0 rounded-lg"
style={getCoronaStyle(coronaState)}
@ -86,16 +89,16 @@ export function DraftPickCell({
<div
className={cn(
"relative z-10 h-14 border-2 rounded-lg p-2 transition-all",
showCorona && "mr-1",
state === "current"
? "border-electric bg-electric/20 shadow-lg shadow-electric/30 ring-2 ring-electric/50 animate-pulse"
: state === "picked"
(showCorona || isCurrent) && "mr-1",
isCurrent
? "bg-muted/80 border-transparent"
: state === "picked" || (state === "upcoming" && showCorona)
? "bg-muted border-transparent"
: "border-border bg-card",
)}
title={`Overall Pick #${pickNumber}`}
>
<div className="flex gap-1 items-start">
<div className={cn("flex", isCurrent ? "items-center justify-center h-full" : "gap-1 items-start")}>
{state === "picked" && pick ? (
<div className="text-sm min-w-0 flex-1">
<div className="font-semibold truncate text-sm">{pick.participant.name}</div>
@ -103,19 +106,21 @@ export function DraftPickCell({
{pick.sport.name}
</div>
</div>
) : state === "current" ? (
<div className="text-sm font-bold text-electric">On Clock</div>
) : isCurrent ? (
<div className="text-sm font-bold text-white">On The Clock</div>
) : null}
<div className="flex flex-col items-end shrink-0">
<div className="text-xs font-mono text-muted-foreground leading-5">
{round}.{String(pickInRound).padStart(2, "0")}
{!isCurrent && (
<div className="flex flex-col items-end shrink-0">
<div className="text-xs font-mono text-muted-foreground leading-5">
{round}.{String(pickInRound).padStart(2, "0")}
</div>
{coronaState && coronaState.type !== "pending" && (
<span className={`text-xs font-mono font-bold mt-0.5 ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
{coronaState.type === "scored" && "▲"}{coronaState.points}
</span>
)}
</div>
{coronaState && coronaState.type !== "pending" && (
<span className={`text-xs font-mono font-bold mt-0.5 ${coronaState.type === "eliminated" ? "text-coral-accent" : "text-emerald-400"}`}>
{coronaState.type === "scored" && "▲"}{coronaState.points}
</span>
)}
</div>
)}
</div>
{children && <div className="absolute inset-0 pointer-events-none [&_*]:pointer-events-auto">{children}</div>}
</div>