From 013b05c54e66e0a25d5ba9deac437853654e9fd1 Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sat, 11 Apr 2026 19:45:54 +0200
Subject: [PATCH] fix: restore glassmorphism card effects on new components

Apply global .card class to Dashboard, Profile, ConfettiReveal, and
Toast components for consistent glossy card appearance.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/ConfettiReveal.tsx |  2 +-
 frontend/src/components/Toast.tsx          |  2 +-
 frontend/src/pages/DashboardPage.tsx       | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ConfettiReveal.tsx b/frontend/src/components/ConfettiReveal.tsx
index b6f270c..a92017e 100644
--- a/frontend/src/components/ConfettiReveal.tsx
+++ b/frontend/src/components/ConfettiReveal.tsx
@@ -25,7 +25,7 @@ export default function ConfettiReveal({ match, onDismiss }: Props) {
 
   return (
     <div className={styles.overlay} onClick={onDismiss}>
-      <div className={styles.card} onClick={e => e.stopPropagation()}>
+      <div className={`card ${styles.card}`} onClick={e => e.stopPropagation()}>
         <div className={styles.result}>
           {match.homeTeam.shortName} {match.score.home}:{match.score.away} {match.awayTeam.shortName}
         </div>
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 75c40b3..78a6577 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -14,7 +14,7 @@ export default function Toast({ message, onDismiss, duration = 5000 }: Props) {
   }, [onDismiss, duration]);
 
   return (
-    <div className={styles.toast} onClick={onDismiss}>
+    <div className={`card ${styles.toast}`} onClick={onDismiss}>
       {message}
     </div>
   );
diff --git a/frontend/src/pages/DashboardPage.tsx b/frontend/src/pages/DashboardPage.tsx
index 96f239b..5289866 100644
--- a/frontend/src/pages/DashboardPage.tsx
+++ b/frontend/src/pages/DashboardPage.tsx
@@ -43,7 +43,7 @@ export default function DashboardPage(_props: Props) {
   return (
     <div className={styles.dashboard}>
       {/* Hero Card */}
-      <div className={styles.hero} onClick={() => navigate('/spiele')}>
+      <div className={`card ${styles.hero}`} onClick={() => navigate('/spiele')}>
         <div className={styles.heroLabel}>
           <span>Nächstes Spiel</span>
           {hero && (
@@ -105,17 +105,17 @@ export default function DashboardPage(_props: Props) {
 
       {/* Stats Row */}
       <div className={styles.statsRow}>
-        <div className={styles.statTile}>
+        <div className={`card ${styles.statTile}`}>
           <span className={styles.statValue}>
             {stats.rank !== null ? stats.rank : '—'}
           </span>
           <span className={styles.statLabel}>Dein Rang</span>
         </div>
-        <div className={styles.statTile}>
+        <div className={`card ${styles.statTile}`}>
           <span className={styles.statValue}>{stats.totalPoints}</span>
           <span className={styles.statLabel}>Punkte</span>
         </div>
-        <div className={styles.statTile}>
+        <div className={`card ${styles.statTile}`}>
           <span className={styles.statValue}>{formatStreak(stats.streak)}</span>
           <span className={styles.statLabel}>Streak</span>
         </div>
@@ -127,7 +127,7 @@ export default function DashboardPage(_props: Props) {
           {nudges.map((nudge, i) => (
             <div
               key={i}
-              className={styles.nudge}
+              className={`card ${styles.nudge}`}
               onClick={() => {
                 if (nudge.type === 'untipped') navigate('/spiele');
                 else if (nudge.type === 'leader') navigate('/rangliste');