refactor: enhance button styles in Proxmox firewall view for improved user interaction and visual feedback

This commit is contained in:
2025-12-04 19:05:36 -05:00
parent d420592759
commit 99a39d066c

View File

@@ -53,7 +53,9 @@
<button type="button"
wire:click="toggleFirewall"
wire:loading.attr="disabled"
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">
style="padding: 0.5rem 1rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem;"
onmouseover="this.style.backgroundColor='#dc2626'"
onmouseout="this.style.backgroundColor='#ef4444'">
<x-ri-close-line class="size-4" />
<span wire:loading.remove wire:target="toggleFirewall">Disable Firewall</span>
<span wire:loading wire:target="toggleFirewall">Disabling...</span>
@@ -122,7 +124,9 @@
wire:click="toggleAdapterFirewall('{{ $adapter['name'] }}')"
wire:loading.attr="disabled"
wire:key="adapter-{{ $adapter['name'] }}"
class="px-3 py-1.5 bg-error text-white rounded-lg hover:bg-error/90 transition-colors text-xs font-medium flex items-center gap-1.5">
style="padding: 0.375rem 0.75rem; background-color: #ef4444; color: white; border-radius: 0.5rem; transition: all 0.2s; font-size: 0.75rem; font-weight: 500; display: flex; align-items: center; gap: 0.375rem;"
onmouseover="this.style.backgroundColor='#dc2626'"
onmouseout="this.style.backgroundColor='#ef4444'">
<x-ri-close-line class="size-3.5" />
<span wire:loading.remove wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">Disable</span>
<span wire:loading wire:target="toggleAdapterFirewall('{{ $adapter['name'] }}')">...</span>