From c495fd8244a0b6d0215eb6a04fb86be582aedd70 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 14:49:48 -0500
Subject: [PATCH] refactor: update server card component layout and styling for
 improved consistency and clarity

---
 .../Servers/Proxmox/views/server.blade.php    | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index 511104f86..70a5720f1 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -1,8 +1,8 @@
-{{-- Server Card Component - AdminLTE Theme --}}
+{{-- Server Card Component - Task History Theme --}}
 <div class="space-y-2">
     @if($status)
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="lte-card flex flex-col cursor-pointer">
+        <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden shadow-theme-sm hover:shadow-theme-md transition-shadow duration-150 flex flex-col cursor-pointer">
             {{-- Header: Server Name & Status --}}
             <div class="flex items-center justify-between px-4 py-3">
                 <div class="flex items-center gap-2">
@@ -28,7 +28,7 @@
             </div>
 
             {{-- Quick Info Row --}}
-            <div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y text-xs" style="border-color: var(--lte-card-border-color);">
+            <div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-200 dark:border-gray-800 text-xs">
                 <div class="flex flex-col min-w-[100px]">
                     <span class="font-medium text-gray-500 dark:text-gray-400 uppercase text-[10px]">IPv4</span>
                     <span class="text-xs">{{ $server->primaryIpv4->ip ?? 'None' }}</span>
@@ -77,10 +77,28 @@
             <div class="px-4 py-3">
                 <div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2">Configuration</div>
                 <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
-                    <x-proxmox::ui.stat-card label="CPU" :value="($status->cpus ?? 'N/A') . ' Core' . (($status->cpus ?? 0) > 1 ? 's' : '')" icon="ri-cpu-line" />
-                    <x-proxmox::ui.stat-card label="RAM" :value="round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 1) . ' GiB'" icon="ri-ram-line" />
-                    <x-proxmox::ui.stat-card label="Disk" :value="Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0)" icon="ri-hard-drive-2-line" />
-                    <div class="flex flex-col gap-2 rounded p-3" style="border: 1px solid var(--lte-card-border-color); background-color: var(--lte-card-bg);">
+                    <div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">CPU</span>
+                            <x-ri-cpu-line class="size-3 text-gray-400" />
+                        </div>
+                        <div class="text-sm font-bold">{{ ($status->cpus ?? 'N/A') . ' Core' . (($status->cpus ?? 0) > 1 ? 's' : '') }}</div>
+                    </div>
+                    <div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">RAM</span>
+                            <x-ri-ram-line class="size-3 text-gray-400" />
+                        </div>
+                        <div class="text-sm font-bold">{{ round(($status->maxmem ?? 0) / (1024 * 1024 * 1024), 1) }} GiB</div>
+                    </div>
+                    <div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
+                        <div class="flex items-center justify-between">
+                            <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Disk</span>
+                            <x-ri-hard-drive-2-line class="size-3 text-gray-400" />
+                        </div>
+                        <div class="text-sm font-bold">{{ Illuminate\Support\Number::fileSize(bytes: $status->maxdisk ?? 0) }}</div>
+                    </div>
+                    <div class="flex flex-col gap-1 rounded-lg border border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800 p-3">
                         <div class="flex items-center justify-between">
                             <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Bandwidth</span>
                             <x-ri-speed-line class="size-3 text-gray-400" />
@@ -95,7 +113,7 @@
     @else
     {{-- Error State --}}
     <a href="{{ route('proxmox.server.overview', ['server' => $server->id]) }}" wire:navigate>
-        <div class="lte-card lte-card-outline-danger flex flex-col cursor-pointer">
+        <div class="bg-white dark:bg-gray-900 border border-red-200 dark:border-red-800 rounded-2xl overflow-hidden shadow-theme-sm hover:shadow-theme-md transition-shadow duration-150 flex flex-col cursor-pointer">
             <div class="flex items-center justify-between px-4 py-3">
                 <div class="flex items-center gap-2">
                     <div class="flex items-center justify-center size-7 rounded bg-red-50 dark:bg-red-900">