Unify toggle buttons styling across all pages - match Day page design

Author: hiteshkrmsft

www/css/datefilter.css

@@ -10,26 +10,45 @@
 
 .filter-buttons {
   display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
+  gap: 0;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  box-shadow: var(--shadow);
+  background: var(--card-bg);
 }
 
 .filter-btn {
   background: var(--light-bg);
   border: 2px solid var(--border-color);
   color: var(--text-primary);
-  padding: 10px 16px;
-  border-radius: var(--radius);
+  padding: 12px 16px;
+  border-radius: 0;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all var(--transition);
   flex: 1;
   min-width: 80px;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+}
+
+.filter-btn:first-child {
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
 }
 
-.filter-btn:hover {
-  border-color: var(--primary-color);
+.filter-btn:last-child {
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+.filter-btn:only-child {
+  border-radius: var(--radius-md);
+}
+
+.filter-btn:hover:not(.active) {
+  background: var(--border-color);
   color: var(--primary-color);
 }
 
@@ -56,4 +75,25 @@
   transform: scale(0.98);
 }
 
+/* Secondary filter style (for period filters inside cards) */
+.filter-buttons-secondary {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.filter-buttons-secondary .filter-btn {
+  flex: 0 1 auto;
+  min-width: 60px;
+  padding: 8px 12px;
+  font-size: 13px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-color);
+}
+
+.filter-buttons-secondary .filter-btn:first-child,
+.filter-buttons-secondary .filter-btn:last-child {
+  border-radius: var(--radius);
+}
+
 

www/templates/analytics.html

@@ -9,12 +9,12 @@
 
         <!-- Date Range Filter -->
         <div class="settings-card" style="margin-bottom: 20px;">
-            <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap;">
-                <label style="font-weight: 500;">Period:</label>
-                <button class="filter-btn" onclick="window.app.analytics.setPeriod('7days', event)">Last 7 Days</button>
-                <button class="filter-btn active" onclick="window.app.analytics.setPeriod('30days', event)">Last 30 Days</button>
-                <button class="filter-btn" onclick="window.app.analytics.setPeriod('90days', event)">Last 90 Days</button>
-                <button class="filter-btn" onclick="window.app.analytics.setPeriod('all', event)">All Time</button>
+            <label style="font-weight: 500; display: block; margin-bottom: 12px;">Period:</label>
+            <div class="filter-buttons">
+                <button class="filter-btn" onclick="window.app.analytics.setPeriod('7days', event)">7 Days</button>
+                <button class="filter-btn active" onclick="window.app.analytics.setPeriod('30days', event)">30 Days</button>
+                <button class="filter-btn" onclick="window.app.analytics.setPeriod('90days', event)">90 Days</button>
+                <button class="filter-btn" onclick="window.app.analytics.setPeriod('all', event)">All</button>
             </div>
         </div>
 

www/templates/due.html

@@ -1,6 +1,6 @@
 <div id="due" class="tab">
 
-        <div style="display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;">
+        <div class="filter-buttons" style="margin-bottom: 20px;">
             <button class="filter-btn filter-purchase active" onclick="window.app.outstanding.filterDue('purchase', event)">Purchases</button>
             <button class="filter-btn filter-sale" onclick="window.app.outstanding.filterDue('sale', event)">Sales</button>
         </div>

www/templates/history.html

@@ -1,6 +1,6 @@
 <div id="history" class="tab">
 
-        <div style="display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;">
+        <div class="filter-buttons" style="margin-bottom: 16px;">
             <button class="filter-btn filter-purchase active" onclick="window.app.history.filterHistory('purchase', event)">Purchase</button>
             <button class="filter-btn filter-sale" onclick="window.app.history.filterHistory('sale', event)">Sale</button>
         </div>

www/templates/reports.html

@@ -8,7 +8,7 @@ <h2 style="margin: 0;">Reports</h2>
         </div>
 
         <div class="date-filter-card">
-            <div class="date-filter-buttons">
+            <div class="filter-buttons">
                 <button class="filter-btn active" onclick="window.app.dateFilter.setFilter('today', event)">Today</button>
                 <button class="filter-btn" onclick="window.app.dateFilter.setFilter('week', event)">This Week</button>
                 <button class="filter-btn" onclick="window.app.dateFilter.setFilter('month', event)">This Month</button>