From cd81e52269a8c40fa1e71bd19ba380f8e9a4eba6 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Thu, 18 Dec 2025 08:00:04 -0500
Subject: [PATCH] fix: adjust disabled toggle styles for better user experience
 and update button elements for consistency

---
 .../Servers/Proxmox/views/firewall.blade.php  | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/firewall.blade.php b/extensions/Servers/Proxmox/views/firewall.blade.php
index ac4185c55..64211b5cc 100644
--- a/extensions/Servers/Proxmox/views/firewall.blade.php
+++ b/extensions/Servers/Proxmox/views/firewall.blade.php
@@ -112,8 +112,8 @@
             filter: brightness(1.1);
         }
         .fw-toggle input:disabled + .fw-toggle-slider {
-            opacity: 0.6;
-            cursor: not-allowed;
+            opacity: 0.4;
+            cursor: pointer;
         }
         .fw-toggle-label {
             font-weight: 600;
@@ -178,8 +178,8 @@
             filter: brightness(1.1);
         }
         .fw-toggle-sm input:disabled + .fw-toggle-slider-sm {
-            opacity: 0.6;
-            cursor: not-allowed;
+            opacity: 0.4;
+            cursor: pointer;
         }
     </style>
 
@@ -284,10 +284,6 @@
                             <span class="fw-toggle-slider"></span>
                         </label>
                     </div>
-                    <span wire:loading wire:target="toggleFirewall" class="text-xs text-base/50 flex items-center gap-1.5">
-                        <span class="fw-loader-sm text-primary"></span>
-                        {{ $firewallEnabled ? 'Disabling...' : 'Enabling...' }}
-                    </span>
                 </div>
             </div>
         </section>
@@ -375,9 +371,6 @@
                                             >
                                             <span class="fw-toggle-slider-sm"></span>
                                         </label>
-                                        <span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')" class="text-xs text-base/50">
-                                            <span class="fw-loader-sm text-primary"></span>
-                                        </span>
                                     </div>
                                 </div>
                             @endforeach
@@ -693,12 +686,14 @@
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold">Firewall Logs</h3>
                         <div class="flex items-center gap-2">
-                            <x-proxmox::ui.button wire:click="refreshLogs" variant="secondary" size="sm" icon="ri-refresh-line">
+                            <button type="button" wire:click="refreshLogs" class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
+                                <x-ri-refresh-line class="size-4" />
                                 Refresh
-                            </x-proxmox::ui.button>
-                            <x-proxmox::ui.button wire:click="clearLogs" variant="danger" size="sm" icon="ri-delete-bin-line">
+                            </button>
+                            <button type="button" wire:click="clearLogs" class="px-4 py-2 bg-error text-white rounded-lg hover:bg-error/90 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
+                                <x-ri-delete-bin-line class="size-4" />
                                 Clear Logs
-                            </x-proxmox::ui.button>
+                            </button>
                         </div>
                     </div>
 
@@ -748,9 +743,10 @@
                 <div x-show="activeTab === 'saved'" x-transition>
                     <div class="flex items-center justify-between mb-4">
                         <h3 class="text-lg font-semibold">Saved Configurations</h3>
-                        <x-proxmox::ui.button wire:click="saveCurrentConfiguration" icon="ri-save-3-line">
+                        <button type="button" wire:click="saveCurrentConfiguration" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
+                            <x-ri-save-3-line class="size-4" />
                             Save Current Config
-                        </x-proxmox::ui.button>
+                        </button>
                     </div>
 
                     @if(count($savedConfigurations) > 0)
@@ -786,9 +782,10 @@
                             title="No Saved Configurations"
                             description="Save your current firewall configuration for backup or reuse">
                             <x-slot name="actions">
-                                <x-proxmox::ui.button wire:click="saveCurrentConfiguration" icon="ri-save-3-line">
+                                <button type="button" wire:click="saveCurrentConfiguration" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 whitespace-nowrap">
+                                    <x-ri-save-3-line class="size-4" />
                                     Save Current Config
-                                </x-proxmox::ui.button>
+                                </button>
                             </x-slot>
                         </x-proxmox::ui.empty-state>
                     @endif
@@ -972,8 +969,7 @@
                                     <span class="text-xs font-normal text-gray-500">(auto-filled by macro)</span>
                                 </label>
                                 <select wire:model="ruleProto" class="w-full px-3 py-2 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-sm">
-                                    <option value="">Any</option>
-                                    <option value="tcp">TCP</option>
+                                    <option value="tcp" selected>TCP</option>
                                     <option value="udp">UDP</option>
                                     <option value="icmp">ICMP</option>
                                     <option value="igmp">IGMP</option>