From e589792137ebdacf355bdd860b99a6571f1635c5 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Sun, 1 Mar 2026 19:29:42 +0200
Subject: [PATCH] ui: event name as main header title + fix stat box background
 color

---
 frontend/src/components/EventList.css |  2 +-
 frontend/src/components/GuestList.css | 20 ++++++++++++++++++--
 frontend/src/components/GuestList.jsx | 10 +++++++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/EventList.css b/frontend/src/components/EventList.css
index 872d3c7..f26e855 100644
--- a/frontend/src/components/EventList.css
+++ b/frontend/src/components/EventList.css
@@ -138,7 +138,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: var(--color-background-tertiary);
+  background: var(--color-background);
   border: 1px solid var(--color-border);
   border-radius: 8px;
   padding: 0.5rem 0.25rem;
diff --git a/frontend/src/components/GuestList.css b/frontend/src/components/GuestList.css
index bedf483..fa45505 100644
--- a/frontend/src/components/GuestList.css
+++ b/frontend/src/components/GuestList.css
@@ -47,19 +47,35 @@
   font-size: 1.8rem;
 }
 
+.header-event-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 1.8rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.header-event-subtitle {
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
 .header-title {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.15rem;
+  gap: 0.1rem;
 }
 
+/* keep old .header-event-name as fallback */
 .header-event-name {
   font-size: 1rem;
   color: var(--color-primary);
   font-weight: 600;
-  letter-spacing: 0.01em;
 }
 
 .header-actions {
diff --git a/frontend/src/components/GuestList.jsx b/frontend/src/components/GuestList.jsx
index b698426..ea47613 100644
--- a/frontend/src/components/GuestList.jsx
+++ b/frontend/src/components/GuestList.jsx
@@ -331,9 +331,13 @@ function GuestList({ eventId, onBack, onShowMembers }) {
       <div className="guest-list-header">
         <button className="btn-back" onClick={onBack}>{he.backToEvents}</button>
         <div className="header-title">
-          <h2>{he.guestManagement}</h2>
-          {eventData?.name && (
-            <span className="header-event-name">{eventData.name}</span>
+          {eventData?.name ? (
+            <>
+              <h2 className="header-event-title">{eventData.name}</h2>
+              <span className="header-event-subtitle">{he.guestManagement}</span>
+            </>
+          ) : (
+            <h2>{he.guestManagement}</h2>
           )}
         </div>
         <div className="header-actions">