Refactor button components to use Proxmox UI library

- Updated button components across various views to utilize the new Proxmox UI button structure.
- Replaced instances of <x-button.primary> and <x-button.secondary> with <x-proxmox::ui.button> for consistency and improved styling.
- Adjusted button attributes and loading states to align with the new component design.
- Ensured that all button functionalities remain intact while enhancing the overall UI consistency.
This commit is contained in:
2025-12-17 17:40:11 -05:00
parent 6d6ea1a2cc
commit 689f84ab53
13 changed files with 245 additions and 250 deletions

View File

@@ -1,11 +1,11 @@
<div class="" wire:poll.10s="pollEligibility">
<x-button.primary
<x-proxmox::ui.button
wire:click="$set('visible', true)"
:disabled="!$this->canCreateBackup"
class="disabled:cursor-not-allowed">
class="disabled:cursor-not-allowed" variant="primary">
<x-ri-add-circle-fill class="size-4" />
Create Backup
</x-button.primary>
</x-proxmox::ui.button>
@if($visible)
<x-modal id="backup" title="Backup Server" open>
<div class="flex flex-col gap-4">
@@ -26,15 +26,15 @@
</div>
<div class="flex flex-row gap-4 mt-4">
<x-button.secondary wire:click="$set('visible', false)">Cancel</x-button.secondary>
<x-button.primary wire:click="backup" wire:loading.attr="disabled" wire:loading.class="opacity-50" wire:loading.attr="aria-busy" wire:target="backup"
<x-proxmox::ui.button wire:click="$set('visible', false)" variant="secondary">Cancel</x-proxmox::ui.button>
<x-proxmox::ui.button wire:click="backup" wire:loading.attr="disabled" wire:loading.class="opacity-50" wire:loading.attr="aria-busy" wire:target="backup"
:disabled="!$this->canCreateBackup"
class="disabled:cursor-not-allowed">
class="disabled:cursor-not-allowed" variant="primary">
<x-loading target="backup" />
<div wire:loading.remove wire:target="backup">
Create backup
</div>
</x-button.primary>
</x-proxmox::ui.button>
</div>
</x-modal>
@endif