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 theme override */
#nprogress .bar { #nprogress .bar {
background: var(--electric) !important; 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 const pickData = cell.pick
? { participant: { name: cell.pick.participant.name }, sport: { name: cell.pick.sport.name } } ? { participant: { name: cell.pick.participant.name }, sport: { name: cell.pick.sport.name } }
: undefined; : undefined;
const pendingCorona = cellState === "upcoming" ? { type: "pending" as const } : undefined;
const mobileButtons = isCommissioner && ( const mobileButtons = isCommissioner && (
<> <>
@ -227,6 +228,7 @@ export const DraftGridSection = memo(function DraftGridSection({
pickInRound={cell.pickInRound} pickInRound={cell.pickInRound}
state={cellState} state={cellState}
pick={pickData} pick={pickData}
coronaState={pendingCorona}
> >
{mobileButtons} {mobileButtons}
</DraftPickCell> </DraftPickCell>
@ -264,6 +266,7 @@ export const DraftGridSection = memo(function DraftGridSection({
pickInRound={cell.pickInRound} pickInRound={cell.pickInRound}
state={cellState} state={cellState}
pick={pickData} pick={pickData}
coronaState={pendingCorona}
> >
{mobileButtons} {mobileButtons}
</DraftPickCell> </DraftPickCell>
@ -299,6 +302,7 @@ export const DraftGridSection = memo(function DraftGridSection({
pickInRound={cell.pickInRound} pickInRound={cell.pickInRound}
state={cellState} state={cellState}
pick={pickData} pick={pickData}
coronaState={pendingCorona}
> >
{mobileButtons} {mobileButtons}
</DraftPickCell> </DraftPickCell>

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

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