From ecd2e3fccdff4949cda91f0ccf49572e5ec7d590 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Sat, 6 Dec 2025 09:23:19 -0500
Subject: [PATCH] fix: correct escaped quotes in modal backdrop and match
 server list icon style

- Fixed escaped quotes in Alpine.js directives that were breaking the modal
- Changed icon button styling to match server list (bg-secondary/10 p-2 rounded-lg)
- Use x-dynamic-component for custom icons, x-ri-server-line for default
- Properly format all x-transition and @click attributes
---
 .../Proxmox/views/components/layout.blade.php | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index e35860f9d..09823b4fa 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -50,16 +50,16 @@
                     <!-- Server Icon -->
                     <button 
                         wire:click="openIconModal"
-                        class="flex-shrink-0 size-10 rounded-lg bg-background-secondary border border-neutral hover:border-primary/50 hover:bg-background-secondary/80 transition-all duration-200 flex items-center justify-center group"
+                        class="bg-secondary/10 p-2 rounded-lg hover:bg-secondary/20 transition-colors cursor-pointer"
                         title="Click to customize server icon"
                     >
                         @if($server->user_set_icon)
                             @php
-                                $iconStyle = $server->user_set_icon_color ? 'color: ' . $server->user_set_icon_color : '';
+                                $iconColor = $server->user_set_icon_color ?: 'currentColor';
                             @endphp
-                            <i class="ri-{{ $server->user_set_icon }} text-xl transition-transform group-hover:scale-110" style="{{ $iconStyle }}"></i>
+                            <x-dynamic-component :component="'ri-' . $server->user_set_icon" class="size-5" style="color: {{ $iconColor }}" />
                         @else
-                            <x-ri-server-line class="size-5 text-base/60 transition-transform group-hover:scale-110" />
+                            <x-ri-server-line class="size-5 text-secondary" />
                         @endif
                     </button>
                     <span class="text-2xl font-bold">
@@ -964,16 +964,16 @@
         }">
             <!-- Modal Backdrop -->
             <div x-cloak x-show="open" 
-                 x-transition:enter=\"transition ease-out duration-300\"
-                 x-transition:enter-start=\"opacity-0\"
-                 x-transition:enter-end=\"opacity-100\"
-                 x-transition:leave=\"transition ease-in duration-200\"
-                 x-transition:leave-start=\"opacity-100\"
-                 x-transition:leave-end=\"opacity-0\"
-                 @click=\"$wire.closeIconModal()\"
-                 @keydown.escape.window=\"$wire.closeIconModal()\"
-                 class=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\"
-                 style=\"display: none;\">
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0"
+                 x-transition:enter-end="opacity-100"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="opacity-100"
+                 x-transition:leave-end="opacity-0"
+                 @click="$wire.closeIconModal()"
+                 @keydown.escape.window="$wire.closeIconModal()"
+                 class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+                 style="display: none;">
             </div>
             <!-- Modal Content -->
             <div x-cloak x-show="open"