refactor: enhance button styles in Proxmox firewall view for improved user interaction and visual feedback
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user