From ad1695d3602dc5a7524a4d7fbacb3e74231b5079 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Tue, 3 Mar 2026 11:50:07 +0100
Subject: [PATCH] fix(ui): make Sync button smaller and more subtle in header

---
 App.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/App.tsx b/App.tsx
index b63fed8..2c67b9e 100644
--- a/App.tsx
+++ b/App.tsx
@@ -736,13 +736,14 @@ const App: React.FC = () => {
             <button
               onClick={() => { handleDataFetch(); handleAdsFetch(); handleTrafficFetch(); handleVendorStockFetch(); handleBuyBoxFetch(); }}
               disabled={syncing}
-              className={`flex items-center gap-2 px-3 py-1.5 md:px-4 md:py-2 rounded-xl text-sm font-black uppercase tracking-widest transition-all
+              title={syncing ? 'Syncing...' : 'Sync Now'}
+              className={`flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold transition-all active:scale-95
                 ${syncing
-                  ? 'bg-indigo-500/20 text-indigo-400 border border-indigo-500/30'
-                  : 'bg-slate-900 text-slate-300 border border-border hover:border-indigo-500/50 hover:text-white shadow-lg active:scale-95'}`}
+                  ? 'text-indigo-400/70 cursor-not-allowed'
+                  : 'text-slate-500 hover:text-slate-300 hover:bg-slate-800/60'}`}
             >
-              <RefreshIcon className={`w-4 h-4 ${syncing ? 'animate-spin' : ''}`} />
-              <span className="hidden sm:inline">{syncing ? 'Syncing...' : 'Sync Now'}</span>
+              <RefreshIcon className={`w-3.5 h-3.5 ${syncing ? 'animate-spin' : ''}`} />
+              <span className="hidden sm:inline">{syncing ? 'Syncing...' : 'Sync'}</span>
             </button>
             {/* View Switcher - Hidden on mobile (shown in bottom nav instead) */}
             <div className="hidden md:flex bg-slate-900 rounded-lg p-1 border border-border">