From 9971cee9d0e1fe44620bedf38df6e0536f5826e2 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 18:09:08 -0500
Subject: [PATCH] refactor: enhance Cloud-init configuration section with
 improved styling and layout

---
 .../Servers/Proxmox/views/overview.blade.php  | 56 +++++++++++--------
 1 file changed, 32 insertions(+), 24 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/overview.blade.php b/extensions/Servers/Proxmox/views/overview.blade.php
index fe53487ef..7300a4ac2 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-lg border-l-4 border-blue-500 bg-blue-50 p-3 mb-4 dark:bg-blue-950 dark:border-blue-400"
+    <div class="lte-callout lte-callout-info lte-fade-in"
          x-data="{
              isCollapsed: localStorage.getItem('overview-notice-collapsed') === 'true',
              isAdvancedView: localStorage.getItem('proxmox-view-mode') === 'advanced',
@@ -57,42 +57,50 @@
              });
          "
          x-show="isAdvancedView"
-         x-transition>
-        <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'" />
+         x-transition
+         style="margin-bottom: 1.5rem;">
+        <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
+            <x-ri-information-line class="size-5 lte-text-info" style="flex-shrink: 0; margin-top: 0.125rem;" />
+            <div style="flex: 1; min-width: 0;">
+                <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem;">
+                    <h5 style="font-size: 1.1rem; font-weight: 600; margin: 0;">Cloud-init Configuration</h5>
+                    <button @click="toggle()" type="button" class="lte-btn lte-btn-sm lte-btn-outline-secondary" style="padding: 0.25rem 0.5rem;">
+                        <x-ri-arrow-down-s-line class="size-4" x-bind:class="isCollapsed ? 'rotate-180' : ''" />
                     </button>
                 </div>
-                <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:
+                <div x-show="!isCollapsed" x-transition>
+                    <p style="font-size: 0.875rem; margin-bottom: 0.75rem;">
+                        <strong>Hostname, password, and networking</strong> are configured via <strong>cloud-init</strong>. Manual configuration required for:
                     </p>
-                    <ul class="text-xs text-gray-600 dark:text-gray-300 mt-1 ml-4 list-disc">
+                    <ul style="font-size: 0.875rem; margin-left: 1.5rem; margin-bottom: 0.75rem; list-style: disc;">
                         <li>ISO installations</li>
                         <li>Manual OS configuration</li>
-                        <li>Windows (no cloud-init)</li>
+                        <li>Windows systems (no cloud-init support)</li>
                     </ul>
-                    <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 style="font-size: 0.875rem; margin: 0;">
+                        You will need to <strong>manually configure networking, security settings, and hostname</strong> within the operating system in these scenarios.
                     </p>
                 </div>
             </div>
         </div>
     </div>
 
-    <div class="flex items-center" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
+    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem;" wire:poll.{{ $fastPolling ? '2s' : '30s' }}="checkStatus"
         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-lg font-semibold">Server Details</h2>
-                <div class="relative" x-data="{ open: false }" x-cloak>
-                    <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>
+        <div style="display: flex; align-items: center; gap: 0.75rem;">
+            <div style="display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem;" class="lte-bg-primary" style="background: linear-gradient(135deg, var(--lte-primary), var(--lte-info));">
+                <x-ri-server-line class="size-5" style="color: white;" />
+            </div>
+            <div>
+                <h2 style="font-size: 1.5rem; font-weight: 700; margin: 0;">Server Overview</h2>
+                <p class="lte-text-muted" style="font-size: 0.875rem; margin: 0;">Real-time resource monitoring and server details</p>
+            </div>
+        </div>
+        <div class="relative" x-data="{ open: false }" x-cloak>
+            <button type="button" @click="open = true" class="lte-btn lte-btn-sm lte-btn-outline-secondary">
+                <x-ri-question-line class="size-4" />
+                <span>Help</span>
+            </button>
                     <!-- Modal Backdrop -->
                     <div x-show="open" 
                          x-transition:enter="transition ease-out duration-200"