From a06b4f54e9a3b928e02ec6029bb8df84180d9090 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 13:54:58 -0500
Subject: [PATCH] refactor: improve UI layout and styling for overview page

---
 .../Servers/Proxmox/views/overview.blade.php  | 79 ++++++++-----------
 1 file changed, 35 insertions(+), 44 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index 8d0034915..0093ae131 100644
--- a/extensions/Servers/Proxmox/views/overview.blade.php
+++ b/extensions/Servers/Proxmox/views/overview.blade.php
@@ -41,7 +41,7 @@
                                 }
     </script>
 
-    <div class="rounded-xl border border-blue-200 bg-blue-50/50 p-4 mb-6 dark:border-blue-900/50 dark:bg-blue-950/30"
+    <div class="rounded-lg border-l-4 border-blue-500 bg-blue-50 p-3 mb-4 dark:bg-blue-950 dark:border-blue-400"
          x-data="{
              isCollapsed: localStorage.getItem('overview-notice-collapsed') === 'true',
              isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
@@ -58,26 +58,25 @@
          "
          x-show="isAdvancedView"
          x-transition>
-        <div class="flex items-start gap-3">
-            <x-ri-information-line class="size-5 text-info flex-shrink-0 mt-0.5" />
-            <div class="flex-1">
-                <div class="flex items-center justify-between mb-2">
-                    <h3 class="text-sm font-semibold">Cloud-init Configuration Notice</h3>
-                    <button @click="toggle()" type="button" class="text-base/60 hover:text-base transition-colors">
-                        <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 transition-transform rotate-180' : 'size-4 transition-transform'" />
+        <div class="flex items-start gap-2">
+            <x-ri-information-line class="size-4 text-blue-600 flex-shrink-0 mt-0.5" />
+            <div class="flex-1 min-w-0">
+                <div class="flex items-center justify-between">
+                    <h3 class="text-sm font-semibold text-gray-800 dark:text-gray-100">Cloud-init Configuration</h3>
+                    <button @click="toggle()" type="button" class="text-gray-500 hover:text-gray-700 dark:text-gray-400">
+                        <x-ri-arrow-down-s-line x-bind:class="isCollapsed ? 'size-4 rotate-180' : 'size-4'" />
                     </button>
                 </div>
-                <div x-show="!isCollapsed" x-transition>
-                    <p class="text-xs text-base/70 leading-relaxed">
-                        <strong>Hostname, password, and networking settings</strong> are configured automatically via <strong>cloud-init</strong>. 
-                        This applies to standard operating system installations that support cloud-init. However, if you are:
+                <div x-show="!isCollapsed" x-transition class="mt-1">
+                    <p class="text-xs text-gray-600 dark:text-gray-300">
+                        <strong>Hostname, password, and networking</strong> are configured via <strong>cloud-init</strong>. Manual config required for:
                     </p>
-                    <ul class="text-xs text-base/70 leading-relaxed mt-2 ml-4 list-disc space-y-1">
-                        <li>Installing from an ISO image</li>
-                        <li>Configuring the operating system manually during installation</li>
-                        <li>Using Windows (which does not support cloud-init)</li>
+                    <ul class="text-xs text-gray-600 dark:text-gray-300 mt-1 ml-4 list-disc">
+                        <li>ISO installations</li>
+                        <li>Manual OS configuration</li>
+                        <li>Windows (no cloud-init)</li>
                     </ul>
-                    <p class="text-xs text-base/70 leading-relaxed mt-2">
+                    <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">
                         You will need to <strong>manually configure networking, security settings, and hostname</strong> within the operating system, as cloud-init will not be available in these scenarios.
                     </p>
                 </div>
@@ -89,60 +88,52 @@
         wire:key="{{ $fastPolling ? 'fast' : 'slow' }}">
         <div class="flex items-center gap-3">
             <div class="flex items-center gap-2 min-w-0">
-                <h2 class="text-xl font-semibold break-words">Server Details</h2>
+                <h2 class="text-lg font-semibold">Server Details</h2>
                 <div class="relative" x-data="{ open: false }" x-cloak>
-                    <button type="button" @click="open = true" class="text-base/50 hover:text-base/70 transition-colors">
+                    <button type="button" @click="open = true" class="text-gray-400 hover:text-gray-600 dark:text-gray-500">
                         <x-ri-question-line class="size-4" />
                     </button>
                     <!-- Modal Backdrop -->
                     <div x-show="open" 
-                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter="transition ease-out duration-200"
                          x-transition:enter-start="opacity-0"
                          x-transition:enter-end="opacity-100"
-                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave="transition ease-in duration-150"
                          x-transition:leave-start="opacity-100"
                          x-transition:leave-end="opacity-0"
                          @click="open = false"
                          @keydown.escape.window="open = false"
-                         class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                         class="fixed inset-0 z-50 bg-gray-900 bg-opacity-50"
                          style="display: none;">
                     </div>
                     <!-- Modal -->
                     <div x-show="open"
-                         x-transition:enter="transition ease-out duration-300"
+                         x-transition:enter="transition ease-out duration-200"
                          x-transition:enter-start="opacity-0 scale-95"
                          x-transition:enter-end="opacity-100 scale-100"
-                         x-transition:leave="transition ease-in duration-200"
+                         x-transition:leave="transition ease-in duration-150"
                          x-transition:leave-start="opacity-100 scale-100"
                          x-transition:leave-end="opacity-0 scale-95"
                          @click.away="open = false"
                          class="fixed inset-0 z-50 flex items-center justify-center p-4"
                          style="display: none;">
-                        <div class="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto bg-background-secondary rounded-xl border border-neutral/20 shadow-2xl p-6">
-                            <button @click="open = false" class="absolute top-4 right-4 text-base/50 hover:text-base transition-colors">
+                        <div class="relative w-full max-w-xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-xl p-5">
+                            <button @click="open = false" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:text-gray-500">
                                 <x-ri-close-line class="size-5" />
                             </button>
-                            <div class="flex items-center gap-3 mb-4 pr-8">
-                                <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
-                                    <x-ri-server-line class="size-5 text-primary" />
+                            <div class="flex items-center gap-2 mb-3 pr-6">
+                                <div class="flex items-center justify-center w-8 h-8 rounded bg-blue-100 dark:bg-blue-900">
+                                    <x-ri-server-line class="size-4 text-blue-600 dark:text-blue-400" />
                                 </div>
-                                <h6 class="font-sans text-lg font-semibold leading-tight">
-                                    Server Details
-                                </h6>
+                                <h6 class="text-base font-semibold text-gray-800 dark:text-gray-100">Server Details</h6>
                             </div>
-                            <p class="block font-sans text-sm font-normal leading-relaxed text-base/90 mb-4">
-                                Displays comprehensive information about your virtual machine including status, resource usage, network configuration, and system details.
+                            <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
+                                VM information: status, resources, network config.
                             </p>
-                            <div class="pt-4 mt-4 border-t border-neutral/30 space-y-2.5">
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Status:</span> Shows the current power state of the VPS (running, stopped, etc.) with real-time updates.
-                                </p>
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Resources:</span> Displays CPU, memory, disk, and network usage statistics. Data is automatically refreshed at regular intervals.
-                                </p>
-                                <p class="block font-sans text-xs font-normal leading-relaxed text-base/75">
-                                    <span class="font-semibold text-base/90">Network:</span> Shows assigned IP addresses and network interface information configured for this virtual machine.
-                                </p>
+                            <div class="pt-3 border-t border-gray-200 dark:border-gray-700 space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
+                                <p><span class="font-semibold text-gray-700 dark:text-gray-300">Status:</span> Power state with real-time updates.</p>
+                                <p><span class="font-semibold text-gray-700 dark:text-gray-300">Resources:</span> CPU, memory, disk, network stats.</p>
+                                <p><span class="font-semibold text-gray-700 dark:text-gray-300">Network:</span> IP addresses and interface info.</p>
                             </div>
                         </div>
                     </div>