From ec3349c3977da11e1f30935da515b427963d7cef Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 06:36:31 -0500
Subject: [PATCH] fix: update binding syntax for hover effects in server card
 component

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

diff --git a/extensions/Servers/Proxmox/views/server.blade.php b/extensions/Servers/Proxmox/views/server.blade.php
index 1fb73d6b4..6d50741d5 100644
--- a/extensions/Servers/Proxmox/views/server.blade.php
+++ b/extensions/Servers/Proxmox/views/server.blade.php
@@ -25,24 +25,24 @@
                             $componentName = $iconPrefix . '-' . $iconName;
                         @endphp
                         <div class="flex items-center justify-center size-7 rounded transition-transform duration-300"
-                             :class="hovered ? 'scale-110' : ''"
+                             x-bind:class="hovered ? 'scale-110' : ''"
                              style="background-color: {{ $bgColor }};">
-                            <x-dynamic-component :component="$componentName" class="size-3 transition-opacity duration-200" :class="hovered ? 'opacity-100' : 'opacity-80'" style="color: {{ $iconColor }};" />
+                            <x-dynamic-component :component="$componentName" class="size-3 transition-opacity duration-200" x-bind:class="hovered ? 'opacity-100' : 'opacity-80'" style="color: {{ $iconColor }};" />
                         </div>
                     @else
                         <div class="flex items-center justify-center size-7 rounded bg-blue-50 dark:bg-blue-900 transition-transform duration-300"
-                             :class="hovered ? 'scale-110' : ''">
-                            <x-ri-server-line class="size-3 text-primary transition-opacity duration-200" :class="hovered ? 'opacity-100' : 'opacity-80'" />
+                             x-bind:class="hovered ? 'scale-110' : ''">
+                            <x-ri-server-line class="size-3 text-primary transition-opacity duration-200" x-bind:class="hovered ? 'opacity-100' : 'opacity-80'" />
                         </div>
                     @endif
-                    <span class="font-semibold text-sm transition-colors duration-200" :class="hovered ? 'text-primary' : ''">{{ $status->name }}</span>
+                    <span class="font-semibold text-sm transition-colors duration-200" x-bind:class="hovered ? 'text-primary' : ''">{{ $status->name }}</span>
                 </div>
                 <x-proxmox::ui.server-status :status="$status->status" showLabel />
             </div>
 
             {{-- Quick Info Row --}}
             <div class="flex flex-row flex-wrap gap-3 px-4 py-2 border-y border-gray-200 dark:border-gray-800 text-xs transition-colors duration-200"
-                 :class="hovered ? 'bg-gray-50/30 dark:bg-gray-800/20' : ''">
+                 x-bind:class="hovered ? 'bg-gray-50/30 dark:bg-gray-800/20' : ''">
                 <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>
@@ -89,7 +89,7 @@
 
             {{-- Server Configuration Grid --}}
             <div class="px-4 py-3">
-                <div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2 transition-opacity duration-200" :class="hovered ? 'opacity-70' : 'opacity-60'">Configuration</div>
+                <div class="text-[10px] font-medium text-gray-500 dark:text-gray-400 uppercase mb-2 transition-opacity duration-200" x-bind:class="hovered ? 'opacity-70' : 'opacity-60'">Configuration</div>
                 <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                     <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 transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-700/50 hover:border-gray-300 dark:hover:border-gray-600">
                         <div class="flex items-center justify-between">
@@ -118,7 +118,7 @@
                             <x-ri-speed-line class="size-3 text-gray-400 transition-colors duration-200 group-hover:text-primary" />
                         </div>
                         <div class="text-sm font-bold">{{ $this->monthlyTraffic }} GiB</div>
-                        <p class="text-[10px] text-gray-500 dark:text-gray-400 transition-opacity duration-200" :class="hovered ? 'opacity-70' : 'opacity-60'">of {{ $this->bandwidthThreshold95 }} GiB (95%)</p>
+                        <p class="text-[10px] text-gray-500 dark:text-gray-400 transition-opacity duration-200" x-bind:class="hovered ? 'opacity-70' : 'opacity-60'">of {{ $this->bandwidthThreshold95 }} GiB (95%)</p>
                     </div>
                 </div>
             </div>