From bb0936c176cd2d28d7ed392811c6ca4e668de76a Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Tue, 26 Aug 2025 18:25:40 +0000
Subject: [PATCH] style: converge table styling across Guest, Storage, and
 Backups tables

- Updated all tables to match Node Summary Table's cleaner aesthetic
- Consistent rounded corners, shadows, and border styling
- Cleaner header rows with gray-500 text and no background colors
- Added row dividers using divide-y for better visual separation
- Made node group headers more subtle with 50% opacity backgrounds
- Kept row heights compact with py-0.5 padding
- Improved overall visual consistency across the UI
---
 .../src/components/Backups/UnifiedBackups.tsx | 28 +++++-----
 .../src/components/Dashboard/Dashboard.tsx    | 45 +++++++---------
 .../src/components/Storage/Storage.tsx        | 54 +++++++++----------
 3 files changed, 60 insertions(+), 67 deletions(-)

diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index e0ecad38f..c32740a18 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -1436,7 +1436,8 @@ const UnifiedBackups: Component = () => {
       />
 
       {/* Table */}
-      <div class="overflow-x-auto border border-gray-200 dark:border-gray-700 rounded overflow-hidden">
+      <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+        <div class="overflow-x-auto">
         <style>{`
           .backup-table {
             table-layout: fixed;
@@ -1544,35 +1545,35 @@ const UnifiedBackups: Component = () => {
           </div>
           
           {/* Desktop Table View */}
-          <table class="backup-table text-xs sm:text-sm hidden lg:table">
-            <thead class="bg-gray-100 dark:bg-gray-800">
-              <tr class="text-[10px] sm:text-xs font-medium tracking-wider text-left text-gray-600 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
-                <th class="p-1 px-2" style="width: 150px;">
+          <table class="backup-table hidden lg:table">
+            <thead>
+              <tr class="border-b border-gray-200 dark:border-gray-700">
+                <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 150px;">
                   Name
                 </th>
                 <th
-                  class="sortable p-1 px-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('type')}
                   style="width: 60px;"
                 >
                   Type {sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th
-                  class="sortable p-1 px-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('vmid')}
                   style="width: 60px;"
                 >
                   VMID {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th
-                  class="sortable p-1 px-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('node')}
                   style="width: 100px;"
                 >
                   Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th
-                  class="sortable p-1 px-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('backupTime')}
                   style="width: 140px;"
                 >
@@ -1588,7 +1589,7 @@ const UnifiedBackups: Component = () => {
                   </th>
                 </Show>
                 <th
-                  class="sortable p-1 px-2 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('backupType')}
                   style="width: 80px;"
                 >
@@ -1609,12 +1610,12 @@ const UnifiedBackups: Component = () => {
                 </th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
               <For each={groupedData()}>
                 {(group) => (
                   <>
-                    <tr class="bg-gray-50 dark:bg-gray-700/30">
-                      <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                    <tr class="bg-gray-50/50 dark:bg-gray-700/30">
+                      <td class="px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 whitespace-nowrap">
                         {group.label} ({group.items.length})
                       </td>
                       <td colspan={(() => {
@@ -1755,6 +1756,7 @@ const UnifiedBackups: Component = () => {
           </table>
           </Show>
         </Show>
+        </div>
       </div>
 
       {/* Tooltip */}
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 686d604fc..2b80ec3c0 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -549,14 +549,14 @@ export function Dashboard(props: DashboardProps) {
       <Show when={connected() && initialDataReceived() && filteredGuests().length > 0}>
         <ComponentErrorBoundary name="Guest Table">
           <ScrollableTable 
-            class="mb-2 border border-gray-200 dark:border-gray-700 rounded overflow-hidden"
+            class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700"
             minWidth="900px"
           >
-          <table class="w-full min-w-[900px] text-xs sm:text-sm table-fixed">
+          <table class="w-full min-w-[900px] table-fixed">
             <thead>
-              <tr class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
+              <tr class="border-b border-gray-200 dark:border-gray-700">
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[200px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[200px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
                   onClick={() => handleSort('name')}
                   onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
                   tabindex="0"
@@ -566,61 +566,61 @@ export function Dashboard(props: DashboardProps) {
                   Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[60px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[60px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('type')}
                 >
                   Type {sortKey() === 'type' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[70px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[70px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('vmid')}
                 >
                   VMID {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[100px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[100px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('uptime')}
                 >
                   Uptime {sortKey() === 'uptime' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('cpu')}
                 >
                   CPU {sortKey() === 'cpu' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('memory')}
                 >
                   Memory {sortKey() === 'memory' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[140px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('disk')}
                 >
                   Disk {sortKey() === 'disk' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('diskRead')}
                 >
                   Disk Read {sortKey() === 'diskRead' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('diskWrite')}
                 >
                   Disk Write {sortKey() === 'diskWrite' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('networkIn')}
                 >
                   Net In {sortKey() === 'networkIn' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
                 <th 
-                  class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                  class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-[90px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('networkOut')}
                 >
                   Net Out {sortKey() === 'networkOut' && (sortDirection() === 'asc' ? '▲' : '▼')}
@@ -632,28 +632,19 @@ export function Dashboard(props: DashboardProps) {
                 {([node, guests]) => (
                   <>
                     <Show when={node}>
-                      <tr class="node-header bg-gray-50 dark:bg-gray-700/50 font-semibold text-gray-700 dark:text-gray-300 text-xs">
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[200px]">
+                      <tr class="bg-gray-50/50 dark:bg-gray-700/30">
+                        <td class="px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 w-[200px]">
                           <a 
                             href={nodeHostMap()[node] || (node.includes(':') ? `https://${node}` : `https://${node}:8006`)} 
                             target="_blank" 
                             rel="noopener noreferrer" 
-                            class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150 cursor-pointer"
+                            class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150 cursor-pointer"
                             title={`Open ${node} web interface`}
                           >
                             {node}
                           </a>
                         </td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[60px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[70px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[100px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[140px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[140px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[140px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[90px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[90px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[90px]"></td>
-                        <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400 w-[90px]"></td>
+                        <td colspan="10" class="px-2 py-0.5"></td>
                       </tr>
                     </Show>
                     <For each={guests} fallback={<></>}>
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index 6793dab3a..10d2d9d6f 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -259,51 +259,50 @@ const Storage: Component = () => {
       {/* Storage Table - shows for both PVE and PBS storage */}
       <Show when={connected() && initialDataReceived() && sortedStorage().length > 0}>
         <ComponentErrorBoundary name="Storage Table">
-          <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded overflow-x-auto">
-            <table class="w-full text-xs">
+          <div class="mb-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+            <div class="overflow-x-auto">
+            <table class="w-full">
               <thead>
-                <tr class="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600">
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">Storage</th>
+                <tr class="border-b border-gray-200 dark:border-gray-700">
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Storage</th>
                   <Show when={viewMode() === 'node'}>
-                    <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">Node</th>
+                    <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden sm:table-cell">Node</th>
                   </Show>
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider hidden md:table-cell">Type</th>
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">Content</th>
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">Status</th>
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden md:table-cell">Type</th>
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden lg:table-cell">Content</th>
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden sm:table-cell">Status</th>
                   <Show when={viewMode() === 'node'}>
-                    <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider hidden lg:table-cell">Shared</th>
+                    <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden lg:table-cell">Shared</th>
                   </Show>
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider min-w-[100px] sm:min-w-[150px] md:min-w-[200px]">Usage</th>
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider hidden sm:table-cell">Free</th>
-                  <th class="p-1 px-2 text-left text-[10px] sm:text-xs font-medium uppercase tracking-wider">Total</th>
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider min-w-[100px] sm:min-w-[150px] md:min-w-[200px]">Usage</th>
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider hidden sm:table-cell">Free</th>
+                  <th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total</th>
                 </tr>
               </thead>
-              <tbody>
+              <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                 <For each={Object.entries(groupedStorage()).sort(([a], [b]) => a.localeCompare(b))}>
                   {([groupName, storages]) => (
                     <>
                       {/* Group Header */}
                       <Show when={viewMode() === 'node'}>
-                        <tr class="bg-gray-50 dark:bg-gray-700/50 font-semibold text-gray-700 dark:text-gray-300 text-xs">
-                          <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400">
+                        <tr class="bg-gray-50/50 dark:bg-gray-700/30">
+                          <td class="px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400">
                             <a 
                               href={nodeHostMap()[groupName] || (groupName.includes(':') ? `https://${groupName}` : `https://${groupName}:8006`)} 
                               target="_blank" 
                               rel="noopener noreferrer" 
-                              class="text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150 cursor-pointer"
+                              class="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-150 cursor-pointer"
                               title={`Open ${groupName} web interface`}
                             >
                               {groupName}
                             </a>
                           </td>
-                          <td class="px-2 py-1 text-xs font-medium text-gray-500 dark:text-gray-400" colspan="8">
-                            <span class="text-[10px]">
-                              {getTotalByNode(storages).total > 0 && (
-                                <span>
-                                  {formatBytes(getTotalByNode(storages).used)} / {formatBytes(getTotalByNode(storages).total)} ({calculateOverallUsage(storages).toFixed(1)}%)
-                                </span>
-                              )}
-                            </span>
+                          <td class="px-2 py-0.5 text-[10px] text-gray-500 dark:text-gray-400" colspan="8">
+                            {getTotalByNode(storages).total > 0 && (
+                              <span>
+                                {formatBytes(getTotalByNode(storages).used)} / {formatBytes(getTotalByNode(storages).total)} ({calculateOverallUsage(storages).toFixed(1)}%)
+                              </span>
+                            )}
                           </td>
                         </tr>
                       </Show>
@@ -318,8 +317,8 @@ const Storage: Component = () => {
                           const rowClass = `${isDisabled ? 'opacity-60' : ''} ${alertStyles.rowClass} hover:shadow-sm transition-all duration-200`;
                           
                           return (
-                            <tr class={rowClass}>
-                              <td class="p-1 px-2">
+                            <tr class={`${rowClass} hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors`}>
+                              <td class="px-2 py-0.5">
                                 <div class="flex items-center gap-2">
                                   <span class="font-medium text-gray-900 dark:text-gray-100">
                                     {storage.name}
@@ -363,7 +362,7 @@ const Storage: Component = () => {
                                 </td>
                               </Show>
                               
-                              <td class="p-1 px-2">
+                              <td class="px-2 py-0.5">
                                 <div class="relative w-full h-3.5 rounded overflow-hidden bg-gray-200 dark:bg-gray-600">
                                   <div 
                                     class={`absolute top-0 left-0 h-full ${getProgressBarColor(usagePercent)}`}
@@ -388,6 +387,7 @@ const Storage: Component = () => {
                 </For>
               </tbody>
             </table>
+            </div>
           </div>
         </ComponentErrorBoundary>
       </Show>