From 0e1675fe90444dc51d460dd2d25f4700a66915e0 Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Sun, 12 Apr 2026 13:37:57 +0200
Subject: [PATCH] style: dashboard LED smaller, TipModal flags fullbleed +
 subtle picker buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Dashboard: LED digits 20px (was 26px) — less crowded between flags
- MatchCard: topRow margins for better badge alignment
- TipModal: flags now object-fit:cover (fullbleed)
- TipModal: picker buttons less glossy — reduced shine from 55% to 12%,
  smaller shadow, subtler hover effect

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/MatchCard.module.css |  6 ++--
 frontend/src/components/TipModal.module.css  | 34 ++++++++------------
 frontend/src/pages/DashboardPage.module.css  |  6 ++--
 3 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index 593a84a..923eac3 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -21,12 +21,14 @@
     inset 0 1px 0 rgba(255,255,255,0.07) !important;
 }
 
-/* Top row */
+/* Top row — badges inset to align near flag inner edges */
 .topRow {
   display: flex;
   align-items: center;
   gap: 8px;
-  margin-bottom: 18px;
+  margin-bottom: 12px;
+  margin-left: 8px;
+  margin-right: 8px;
 }
 
 .status {
diff --git a/frontend/src/components/TipModal.module.css b/frontend/src/components/TipModal.module.css
index 19a8480..d6f1c17 100644
--- a/frontend/src/components/TipModal.module.css
+++ b/frontend/src/components/TipModal.module.css
@@ -99,9 +99,9 @@
 }
 
 .flagImg {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   position: relative;
   z-index: 0;
 }
@@ -164,13 +164,13 @@
 }
 
 .pickerBtn {
-  width: 56px;
-  height: 56px;
+  width: 48px;
+  height: 48px;
   background: var(--surface-high);
   border: 1px solid var(--border-subtle);
-  border-radius: 16px;
+  border-radius: 14px;
   color: var(--text-primary);
-  font-size: 24px;
+  font-size: 22px;
   font-weight: 300;
   cursor: pointer;
   display: flex;
@@ -179,31 +179,23 @@
   transition: all 0.15s;
   position: relative;
   overflow: hidden;
-  box-shadow:
-    var(--shadow-card),
-    inset 0 1px 0 rgba(255,255,255,0.55),
-    inset 0 -1px 0 rgba(0,0,0,0.06);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 }
 
-/* Glossy sheen */
 .pickerBtn::before {
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 55%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
+  height: 40%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%);
   pointer-events: none;
-  border-radius: 16px 16px 0 0;
+  border-radius: 14px 14px 0 0;
 }
 
 .pickerBtn:hover {
-  background: rgba(75,183,248,0.12);
-  border-color: rgba(75,183,248,0.35);
+  background: rgba(75,183,248,0.08);
+  border-color: rgba(75,183,248,0.2);
   color: var(--primary);
-  box-shadow:
-    0 6px 20px rgba(75,183,248,0.2),
-    inset 0 1px 0 rgba(75,183,248,0.15),
-    inset 1px 0 0 rgba(75,183,248,0.08);
 }
 
 .pickerBtn:active {
diff --git a/frontend/src/pages/DashboardPage.module.css b/frontend/src/pages/DashboardPage.module.css
index 7b6209a..9de5c1f 100644
--- a/frontend/src/pages/DashboardPage.module.css
+++ b/frontend/src/pages/DashboardPage.module.css
@@ -123,7 +123,7 @@
 
 .ledDigit, .ledColon {
   font-family: 'DSEG7', 'Courier New', monospace;
-  font-size: 26px;
+  font-size: 20px;
   color: #FECC4C;
   display: inline-block;
   text-align: center;
@@ -135,11 +135,11 @@
 }
 
 .ledDigit {
-  width: 18px;
+  width: 14px;
 }
 
 .ledColon {
-  width: 8px;
+  width: 6px;
 }
 
 .heroGroup {