From 586bd7c030cc1dd7bd2507195cd8f23f22054d33 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Sun, 1 Mar 2026 19:41:47 +0200
Subject: [PATCH] ui: full header toolbar redesign + theme-aware event card
 stat boxes

---
 frontend/src/components/EventList.css |  26 +--
 frontend/src/components/GuestList.css | 234 +++++++++++++-------------
 frontend/src/components/GuestList.jsx |  74 ++++----
 3 files changed, 171 insertions(+), 163 deletions(-)

diff --git a/frontend/src/components/EventList.css b/frontend/src/components/EventList.css
index f26e855..e09646b 100644
--- a/frontend/src/components/EventList.css
+++ b/frontend/src/components/EventList.css
@@ -138,23 +138,24 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: var(--color-background);
+  background: var(--color-background-tertiary);
   border: 1px solid var(--color-border);
   border-radius: 8px;
-  padding: 0.5rem 0.25rem;
+  padding: 0.6rem 0.25rem;
 }
 
 .stat-label {
-  font-size: 0.75rem;
+  font-size: 0.72rem;
   color: var(--color-text-secondary);
   text-transform: uppercase;
-  margin-bottom: 0.25rem;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.2rem;
   text-align: center;
 }
 
 .stat-value {
-  font-size: 1.4rem;
-  font-weight: bold;
+  font-size: 1.35rem;
+  font-weight: 700;
   color: var(--color-text);
 }
 
@@ -181,17 +182,20 @@
 
 .btn-delete {
   padding: 0.5rem 0.75rem;
-  background: #ecf0f1;
-  border: none;
+  background: var(--color-background-tertiary);
+  border: 1px solid var(--color-border);
   border-radius: 4px;
   cursor: pointer;
   font-size: 1.1rem;
-  transition: background 0.3s ease;
+  color: var(--color-text-secondary);
+  transition: background 0.2s ease, color 0.2s ease;
 }
 
 .btn-delete:hover {
-  background: #e74c3c;
-  transform: scale(1.1);
+  background: var(--color-danger);
+  border-color: var(--color-danger);
+  color: #fff;
+  transform: scale(1.05);
 }
 
 .event-list-loading {
diff --git a/frontend/src/components/GuestList.css b/frontend/src/components/GuestList.css
index fa45505..26e68f4 100644
--- a/frontend/src/components/GuestList.css
+++ b/frontend/src/components/GuestList.css
@@ -15,151 +15,156 @@
 
 .guest-list-header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  gap: 0.75rem;
   margin-bottom: 2rem;
-  gap: 1rem;
-  flex-wrap: wrap;
 }
 
-[dir="rtl"] .guest-list-header {
+[dir="rtl"] .guest-list-header-top {
   flex-direction: row-reverse;
 }
 
-.btn-back {
-  padding: 0.75rem 1.5rem;
-  background: var(--color-text-secondary);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: background 0.3s ease;
+[dir="rtl"] .guest-list-header-actions {
+  flex-direction: row-reverse;
 }
 
-.btn-back:hover {
-  background: var(--color-text-light);
+[dir="rtl"] .btn-group {
+  flex-direction: row-reverse;
 }
 
-.guest-list-header h2 {
-  margin: 0;
-  color: var(--color-text);
-  font-size: 1.8rem;
+/* ═══════════════════════════════════════════════════
+   HEADER — two-row layout
+   Row 1: back button  +  title block
+   Row 2: secondary tools  |  primary actions
+═══════════════════════════════════════════════════ */
+.guest-list-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
 }
 
-.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;
+/* Row 1 */
+.guest-list-header-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
 .header-title {
   flex: 1;
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 0.1rem;
 }
 
-/* keep old .header-event-name as fallback */
-.header-event-name {
-  font-size: 1rem;
-  color: var(--color-primary);
-  font-weight: 600;
+.header-event-title {
+  margin: 0;
+  color: var(--color-text);
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.2;
 }
 
-.header-actions {
+.header-event-subtitle {
+  font-size: 0.78rem;
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* Row 2 */
+.guest-list-header-actions {
   display: flex;
-  gap: 1rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
   flex-wrap: wrap;
 }
 
-[dir="rtl"] .header-actions {
-  flex-direction: row-reverse;
+.btn-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-.btn-members,
+/* ── shared button base ── */
+.btn-back,
+.btn-tool,
+.btn-add-guest,
+.btn-whatsapp,
+.btn-export,
+.btn-duplicate {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35em;
+  height: 38px;
+  padding: 0 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* back */
+.btn-back {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+.btn-back:hover {
+  background: var(--color-background-tertiary);
+  color: var(--color-text);
+}
+
+/* secondary tool buttons */
+.btn-tool,
+.btn-export,
+.btn-duplicate {
+  background: var(--color-background-tertiary);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.btn-tool:hover,
+.btn-export:hover,
+.btn-duplicate:hover {
+  background: var(--color-border);
+  border-color: var(--color-text-secondary);
+}
+
+/* primary: add guest */
 .btn-add-guest {
-  padding: 0.75rem 1.5rem;
-  background: var(--color-primary);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background 0.3s ease;
-}
-
-.btn-members:hover,
-.btn-add-guest:hover {
-  background: var(--color-primary-hover);
-}
-
-.btn-export {
-  padding: 0.75rem 1.5rem;
   background: var(--color-success);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background 0.3s ease;
+  color: #fff;
 }
-
-.btn-export:hover {
+.btn-add-guest:hover {
   background: var(--color-success-hover);
 }
 
-.btn-duplicate {
-  padding: 0.75rem 1.5rem;
-  background: var(--color-warning);
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: background 0.3s ease;
-}
-
-.btn-duplicate:hover {
-  background: var(--color-warning-hover);
-}
-
+/* whatsapp */
 .btn-whatsapp {
-  padding: 0.75rem 1.5rem;
   background: #25d366;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 1rem;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.3s ease;
-  white-space: nowrap;
+  color: #fff;
 }
-
 .btn-whatsapp:hover {
-  background: #20ba5e;
-  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
+  background: #1eba58;
+  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.35);
 }
-
 .btn-whatsapp:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
+
+/* ── legacy class aliases kept for any remaining refs ── */
+.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.btn-members { display: none; }
+
+
 .pagination-controls {
   display: flex;
   gap: 12px;
@@ -476,35 +481,30 @@ td {
   background: var(--color-danger-hover);
 }
 
-/* Responsive */
 @media (max-width: 768px) {
-  .guest-list-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  [dir="rtl"] .guest-list-header {
-    flex-direction: column-reverse;
+  .guest-list-header-top {
+    flex-wrap: wrap;
   }
 
   .btn-back {
     width: 100%;
   }
 
-  .guest-list-header h2 {
+  .header-title {
     width: 100%;
   }
 
-  .header-actions {
-    width: 100%;
-    flex-wrap: wrap;
+  .guest-list-header-actions {
+    flex-direction: column;
+    align-items: stretch;
   }
 
-  .btn-members,
-  .btn-add-guest,
-  .btn-export {
+  .btn-group {
+    justify-content: stretch;
+  }
+
+  .btn-group > * {
     flex: 1;
-    min-width: 120px;
   }
 
   .guest-stats {
diff --git a/frontend/src/components/GuestList.jsx b/frontend/src/components/GuestList.jsx
index ea47613..9bf25ee 100644
--- a/frontend/src/components/GuestList.jsx
+++ b/frontend/src/components/GuestList.jsx
@@ -329,44 +329,48 @@ function GuestList({ eventId, onBack, onShowMembers }) {
   return (
     <div className="guest-list-container">
       <div className="guest-list-header">
-        <button className="btn-back" onClick={onBack}>{he.backToEvents}</button>
-        <div className="header-title">
-          {eventData?.name ? (
-            <>
-              <h2 className="header-event-title">{eventData.name}</h2>
+        {/* ── Row 1: back + title ── */}
+        <div className="guest-list-header-top">
+          <button className="btn-back" onClick={onBack}>{he.backToEvents}</button>
+          <div className="header-title">
+            <h2 className="header-event-title">
+              {eventData?.name || he.guestManagement}
+            </h2>
+            {eventData?.name && (
               <span className="header-event-subtitle">{he.guestManagement}</span>
-            </>
-          ) : (
-            <h2>{he.guestManagement}</h2>
-          )}
+            )}
+          </div>
         </div>
-        <div className="header-actions">
-          {/* <button className="btn-members" onClick={onShowMembers}>
-            {he.manageMembers}
-          </button> */}
-          <button className="btn-duplicate" onClick={() => setShowDuplicateManager(true)}>
-            🔍 חיפוש כפולויות
-          </button>
-          <GoogleImport eventId={eventId} onImportComplete={loadGuests} />
-          <ImportContacts eventId={eventId} onImportComplete={loadGuests} />
-          <button className="btn-export" onClick={exportToExcel}>
-            {he.exportExcel}
-          </button>
-          {selectedGuestIds.size > 0 && (
-            <button 
-              className="btn-whatsapp"
-              onClick={() => setShowWhatsAppModal(true)}
-              title={he.selectGuestsFirst}
-            >
-              {he.sendWhatsApp} ({selectedGuestIds.size})
+
+        {/* ── Row 2: toolbar ── */}
+        <div className="guest-list-header-actions">
+          <div className="btn-group btn-group-tools">
+            <button className="btn-tool" onClick={() => setShowDuplicateManager(true)}>
+              🔍 כפולויות
             </button>
-          )}
-          <button className="btn-add-guest" onClick={() => {
-            setEditingGuest(null)
-            setShowGuestForm(true)
-          }}>
-            {he.addGuest}
-          </button>
+            <GoogleImport eventId={eventId} onImportComplete={loadGuests} />
+            <ImportContacts eventId={eventId} onImportComplete={loadGuests} />
+            <button className="btn-tool" onClick={exportToExcel}>
+              📥 אקסל
+            </button>
+          </div>
+          <div className="btn-group btn-group-primary">
+            {selectedGuestIds.size > 0 && (
+              <button
+                className="btn-whatsapp"
+                onClick={() => setShowWhatsAppModal(true)}
+                title={he.selectGuestsFirst}
+              >
+                {he.sendWhatsApp} ({selectedGuestIds.size})
+              </button>
+            )}
+            <button className="btn-add-guest" onClick={() => {
+              setEditingGuest(null)
+              setShowGuestForm(true)
+            }}>
+              {he.addGuest}
+            </button>
+          </div>
         </div>
       </div>