From 0f70a1913cfa40a51adadd95938fe8a3b8e96fd2 Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 09:00:55 +0200
Subject: [PATCH] style: LIVE badge right-aligned, bigger live score, remove
 redundant tip

- LIVE: pulsing red badge with dot, right-aligned in header (replaces countdown position)
- Live score: 28px instead of 22px for better visibility
- Removed duplicate tip display under live score (tip only shown in footer)
- BEENDET status stays left in header

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/MatchCard.module.css | 35 ++++++++++++--------
 frontend/src/components/MatchCard.tsx        | 28 +++++++---------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index 75fc4b0..df095fa 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -39,6 +39,22 @@
 
 .statusLive {
   color: var(--error);
+}
+
+/* LIVE badge — right-aligned in header */
+.liveBadge {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--error);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: rgba(248, 113, 113, 0.12);
+  padding: 3px 10px;
+  border-radius: 20px;
+  border: 1px solid rgba(248, 113, 113, 0.25);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
@@ -182,6 +198,11 @@
   letter-spacing: 4px;
 }
 
+.scoreLive {
+  font-size: 28px;
+  color: var(--text-primary);
+}
+
 .kickoffCenter {
   display: flex;
   flex-direction: column;
@@ -447,20 +468,6 @@
   animation: pulse 1.5s ease-in-out infinite;
 }
 
-/* Score + live tip stacked */
-.scoreStack {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-.liveTipCompare {
-  font-size: 11px;
-  color: var(--text-muted);
-  font-weight: 600;
-  letter-spacing: 0.03em;
-}
 
 /* Points badge */
 .pointsBadge {
diff --git a/frontend/src/components/MatchCard.tsx b/frontend/src/components/MatchCard.tsx
index 530ee4d..35878e1 100644
--- a/frontend/src/components/MatchCard.tsx
+++ b/frontend/src/components/MatchCard.tsx
@@ -84,13 +84,10 @@ export default function MatchCard({ match, onTip }: Props) {
   return (
     <div className={`card ${styles.card} ${styles[`card_${state}`]} ${isLive ? styles.live : ''} ${glowClass}`}>
 
-      {/* Top row: Status/Group + Countdown right-aligned */}
+      {/* Top row: Group left + Status/Countdown right */}
       <div className={styles.topRow}>
-        {(isLive || isFinished) && (
-          <span className={`${styles.status} ${isLive ? styles.statusLive : ''}`}>
-            {isLive && <span className={styles.liveDot} />}
-            {STATUS_LABELS[match.status] ?? match.status}
-          </span>
+        {isFinished && (
+          <span className={styles.status}>{STATUS_LABELS[match.status] ?? match.status}</span>
         )}
         {match.group && (
           <span className={styles.group}>
@@ -98,6 +95,12 @@ export default function MatchCard({ match, onTip }: Props) {
           </span>
         )}
         <span style={{ flex: 1 }} />
+        {isLive && (
+          <span className={styles.liveBadge}>
+            <span className={styles.liveDot} />
+            LIVE
+          </span>
+        )}
         {(state === 'open' || state === 'tipped') && match.tippable && (
           <span className={`${styles.countdownBadge} ${remainingMins < 60 ? styles.countdownUrgent : ''}`}>
             {match.minutesUntilKickoff < 60
@@ -131,16 +134,9 @@ export default function MatchCard({ match, onTip }: Props) {
         {/* Center: Score or VS separator */}
         <div className={styles.scoreBox}>
           {isFinished || isLive ? (
-            <div className={styles.scoreStack}>
-              <span className={styles.score}>
-                {match.score.home ?? '–'}&nbsp;:&nbsp;{match.score.away ?? '–'}
-              </span>
-              {isLive && hasTip && (
-                <span className={styles.liveTipCompare}>
-                  Tipp: {match.userTip!.home}:{match.userTip!.away}
-                </span>
-              )}
-            </div>
+            <span className={`${styles.score} ${isLive ? styles.scoreLive : ''}`}>
+              {match.score.home ?? '–'}&nbsp;:&nbsp;{match.score.away ?? '–'}
+            </span>
           ) : (
             <span className={styles.vsSeparator}>–</span>
           )}