diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index 246acb5..c8b5b3c 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -48,23 +48,26 @@ } -.badge, .badgeUrgent { +/* Countdown — left-aligned row */ +.countdownRow { + display: flex; + margin-bottom: 4px; +} + +.countdownBadge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; - margin-left: auto; -} - -.badge { background: var(--surface-high); color: var(--text-secondary); } -.badgeUrgent { +.countdownUrgent { background: rgba(254,174,50,0.12); color: var(--gold); border: 1px solid rgba(254,174,50,0.2); + animation: pulse 1.5s ease-in-out infinite; } .group { @@ -95,9 +98,6 @@ 0 0 40px rgba(254, 174, 50, 0.15); } -.topRowSpacer { - flex: 1; -} /* VS separator */ .vsSeparator { diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx index 1491476..1e3885e 100644 --- a/frontend/src/components/MatchCard.tsx +++ b/frontend/src/components/MatchCard.tsx @@ -84,7 +84,7 @@ export default function MatchCard({ match, onTip }: Props) { return (
- {/* Top row: Group + Countdown */} + {/* Top row: Status/Group */}
{(isLive || isFinished) && ( @@ -97,9 +97,19 @@ export default function MatchCard({ match, onTip }: Props) { {match.group.replace('GROUP_', 'Gruppe ')} )} - - {(state === 'open' || state === 'tipped') && match.tippable && ( - +
+ + {/* Kickoff — stadium LED display, centered */} + {!isFinished && !isLive && ( +
+ {formatKickoff(match.utcDate)} +
+ )} + + {/* Countdown badge — left-aligned */} + {(state === 'open' || state === 'tipped') && match.tippable && ( +
+ {match.minutesUntilKickoff < 60 ? `Noch ${remainingMins} Min!` : (() => { @@ -110,13 +120,6 @@ export default function MatchCard({ match, onTip }: Props) { })() } - )} -
- - {/* Kickoff — stadium LED display, centered */} - {!isFinished && !isLive && ( -
- {formatKickoff(match.utcDate)}
)}