fix: refactor firewall management header for improved layout and accessibility

This commit is contained in:
2025-12-18 08:23:40 -05:00
parent 4e810c17a5
commit 413af85fcf

View File

@@ -187,29 +187,34 @@
{{-- Page Header --}}
<div :class="pageLoaded ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-2'" style="transition: all 0.4s ease-out;">
<x-proxmox::ui.section-header
title="Firewall Management"
icon="ri-shield-line"
subtitle="Configure firewall rules, policies, aliases, and IPSets for your virtual machine."
class="mb-0">
<x-slot name="actions">
<x-proxmox::ui.help-modal title="Firewall Management" icon="ri-question-line">
<x-slot name="description">
<p class="text-sm text-base/90 mb-4">
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies.
</p>
</x-slot>
<x-slot name="details">
<div class="space-y-2">
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns.</p>
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering.</p>
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
</div>
</x-slot>
</x-proxmox::ui.help-modal>
</x-slot>
</x-proxmox::ui.section-header>
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between group mb-6">
<div class="flex items-start gap-3.5">
<div style="width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: .5rem; background: rgba(13, 110, 253, 0.1);" class="transition-transform duration-300 group-hover:scale-105">
<x-ri-shield-line class="size-5 transition-colors duration-200" style="color: #0d6efd;" />
</div>
<div style="display: flex; flex-direction: column; gap: .25rem;">
<div class="flex items-start gap-2">
<h2 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Firewall Management</h2>
<x-proxmox::ui.help-modal title="Firewall Management" icon="ri-information-line">
<x-slot name="description">
<p class="text-sm text-base/90 mb-4">
The Firewall Management interface provides comprehensive control over your virtual machine's network security, including rule-based filtering, IP aliases, and security policies.
</p>
</x-slot>
<x-slot name="details">
<div class="space-y-2">
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Firewall Rules:</span> Create granular rules to allow or block specific traffic patterns.</p>
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Aliases:</span> Define named groups of IP addresses for easier rule management.</p>
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">IP Sets:</span> Manage collections of IP addresses for advanced filtering.</p>
<p class="text-xs text-base/75"><span class="font-semibold text-base/90">Security Logs:</span> Monitor firewall activity and blocked attempts.</p>
</div>
</x-slot>
</x-proxmox::ui.help-modal>
</div>
<p style="font-size: .875rem; color: #6c757d; margin: 0;">Configure firewall rules, policies, aliases, and IPSets for your virtual machine.</p>
</div>
</div>
</div>
</div>
{{-- Error Modal --}}