diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css index df095fa..c1f0e66 100644 --- a/frontend/src/components/MatchCard.module.css +++ b/frontend/src/components/MatchCard.module.css @@ -41,6 +41,18 @@ color: var(--error); } +/* BEENDET badge — right-aligned in header */ +.finishedBadge { + font-size: 11px; + font-weight: 700; + color: var(--text-muted); + text-transform: uppercase; + letter-spacing: 0.06em; + background: var(--surface-high); + padding: 3px 10px; + border-radius: 20px; +} + /* LIVE badge — right-aligned in header */ .liveBadge { display: flex; @@ -120,7 +132,7 @@ /* Match row — Teams + Score */ .matchRow { display: flex; - align-items: center; + align-items: flex-start; justify-content: center; gap: 16px; margin-bottom: 18px; @@ -136,6 +148,15 @@ min-width: 0; } +/* Score aligned to flag center (not flag+name center) */ +.scoreBox { + display: flex; + align-items: center; + justify-content: center; + align-self: flex-start; + height: 52px; /* match flag height for vertical centering */ +} + /* Flag box — subtle, clean */ .flagBox { width: 52px; @@ -183,24 +204,17 @@ white-space: nowrap; } -/* Score / VS center */ -.scoreBox { - display: flex; - align-items: center; - justify-content: center; -} .score { font-family: 'Plus Jakarta Sans', sans-serif; - font-size: 22px; + font-size: 26px; font-weight: 800; color: var(--text-primary); letter-spacing: 4px; } .scoreLive { - font-size: 28px; - color: var(--text-primary); + font-size: 32px; } .kickoffCenter { diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx index 35878e1..6f0a8b9 100644 --- a/frontend/src/components/MatchCard.tsx +++ b/frontend/src/components/MatchCard.tsx @@ -86,9 +86,6 @@ export default function MatchCard({ match, onTip }: Props) { {/* Top row: Group left + Status/Countdown right */}
- {isFinished && ( - {STATUS_LABELS[match.status] ?? match.status} - )} {match.group && ( {match.group.replace('GROUP_', 'Gruppe ')} @@ -101,6 +98,9 @@ export default function MatchCard({ match, onTip }: Props) { LIVE )} + {isFinished && ( + {STATUS_LABELS[match.status] ?? match.status} + )} {(state === 'open' || state === 'tipped') && match.tippable && ( {match.minutesUntilKickoff < 60