fix: adjust disabled toggle styles for better user experience and update button elements for consistency

This commit is contained in:
2025-12-18 08:00:04 -05:00
parent 7c9b6b2d5b
commit cd81e52269

View File

@@ -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>