From e6e0f34d3a999b9273be161aa6c288df80787d5d Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 17 Dec 2025 17:43:47 -0500
Subject: [PATCH] refactor: replace Proxmox UI buttons with custom button
 elements for improved styling and loading states

---
 .../Proxmox/views/components/layout.blade.php | 165 ++++++++++--------
 1 file changed, 96 insertions(+), 69 deletions(-)

diff --git a/extensions/Servers/Proxmox/views/components/layout.blade.php b/extensions/Servers/Proxmox/views/components/layout.blade.php
index b5f2eaebc..6637b92e1 100644
--- a/extensions/Servers/Proxmox/views/components/layout.blade.php
+++ b/extensions/Servers/Proxmox/views/components/layout.blade.php
@@ -1229,87 +1229,114 @@
 
                 
                     <div class="hidden lg:flex flex-row gap-2 ml-auto justify-end items-center">
-                        <x-proxmox::ui.button wire:click="do('start')" class="disabled:cursor-not-allowed"
-                            wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                            :disabled="$vmStatus !== 'stopped'" variant="primary">
-                            <x-loading target="do('start')" />
-                            <x-ri-play-fill class="size-4" />
-                            <div wire:loading.remove wire:target="do('start')">
-                                Start
-                            </div>
-                        </x-proxmox::ui.button>
+                        <button wire:click="do('start')" 
+                            wire:loading.attr="disabled" 
+                            wire:loading.class="opacity-50 cursor-not-allowed"
+                            @if($vmStatus !== 'stopped') disabled @endif
+                            class="inline-flex items-center gap-2 px-4 py-2 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
+                            <span wire:loading wire:target="do('start')" class="animate-spin">
+                                <x-ri-loader-4-line class="size-4" />
+                            </span>
+                            <x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
+                            <span wire:loading.remove wire:target="do('start')">Start</span>
+                            <span wire:loading wire:target="do('start')">Starting...</span>
+                        </button>
                         <div x-show="isAdvancedView" x-transition>
-                            <x-proxmox::ui.button wire:click="do('shutdown')" class="text-nowrap disabled:cursor-not-allowed"
-                                wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                                :disabled="$vmStatus !== 'running'" variant="secondary">
-                                <x-loading target="do('shutdown')" />
-                                <x-ri-stop-fill class="size-4" />
-                                <div wire:loading.remove wire:target="do('shutdown')">
-                                    Stop (ACPI)
-                                </div>
-                            </x-proxmox::ui.button>
+                            <button wire:click="do('shutdown')" 
+                                wire:loading.attr="disabled" 
+                                wire:loading.class="opacity-50 cursor-not-allowed"
+                                @if($vmStatus !== 'running') disabled @endif
+                                class="inline-flex items-center gap-2 px-4 py-2 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
+                                <span wire:loading wire:target="do('shutdown')" class="animate-spin">
+                                    <x-ri-loader-4-line class="size-4" />
+                                </span>
+                                <x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
+                                <span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
+                                <span wire:loading wire:target="do('shutdown')">Stopping...</span>
+                            </button>
                         </div>
                         <div x-show="isAdvancedView" x-transition>
-                            <x-proxmox::ui.button wire:click="do('reboot')" class="text-nowrap disabled:cursor-not-allowed"
-                                :disabled="$vmStatus !== 'running'" variant="secondary">
-                                <x-loading target="do('reboot')" />
-                                <x-ri-loop-left-line class="size-4" />
-                                <div wire:loading.remove wire:target="do('reboot')">
-                                    Reboot (ACPI)
-                                </div>
-                            </x-proxmox::ui.button>
+                            <button wire:click="do('reboot')" 
+                                wire:loading.attr="disabled" 
+                                wire:loading.class="opacity-50 cursor-not-allowed"
+                                @if($vmStatus !== 'running') disabled @endif
+                                class="inline-flex items-center gap-2 px-4 py-2 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
+                                <span wire:loading wire:target="do('reboot')" class="animate-spin">
+                                    <x-ri-loader-4-line class="size-4" />
+                                </span>
+                                <x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
+                                <span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
+                                <span wire:loading wire:target="do('reboot')">Rebooting...</span>
+                            </button>
                         </div>
-                        <x-proxmox::ui.button wire:click="do('stop')" class="text-nowrap disabled:cursor-not-allowed"
-                            :disabled="$vmStatus !== 'running'" variant="danger">
-                            <x-loading target="do('stop')" />
-                            <x-ri-shut-down-line class="size-4" />
-                            <div wire:loading.remove wire:target="do('stop')">
-                                Power Off
-                            </div>
-                        </x-proxmox::ui.button>
+                        <button wire:click="do('stop')" 
+                            wire:loading.attr="disabled" 
+                            wire:loading.class="opacity-50 cursor-not-allowed"
+                            @if($vmStatus !== 'running') disabled @endif
+                            class="inline-flex items-center gap-2 px-4 py-2 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
+                            <span wire:loading wire:target="do('stop')" class="animate-spin">
+                                <x-ri-loader-4-line class="size-4" />
+                            </span>
+                            <x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
+                            <span wire:loading.remove wire:target="do('stop')">Power Off</span>
+                            <span wire:loading wire:target="do('stop')">Powering Off...</span>
+                        </button>
                     </div>
 
                     <div class="flex lg:hidden w-full flex-col gap-2">
                         <div class="flex flex-col gap-2 w-full">
-                            <x-proxmox::ui.button wire:click="do('start')" class="w-full disabled:cursor-not-allowed"
-                                wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                                :disabled="$vmStatus !== 'stopped'" variant="primary">
-                                <x-loading target="do('start')" />
-                                <x-ri-play-fill class="size-4" />
-                                <div wire:loading.remove wire:target="do('start')">
-                                    Start
-                                </div>
-                            </x-proxmox::ui.button>
+                            <button wire:click="do('start')" 
+                                wire:loading.attr="disabled" 
+                                wire:loading.class="opacity-50 cursor-not-allowed"
+                                @if($vmStatus !== 'stopped') disabled @endif
+                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-success hover:bg-success/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-success">
+                                <span wire:loading wire:target="do('start')" class="animate-spin">
+                                    <x-ri-loader-4-line class="size-4" />
+                                </span>
+                                <x-ri-play-fill wire:loading.remove wire:target="do('start')" class="size-4" />
+                                <span wire:loading.remove wire:target="do('start')">Start</span>
+                                <span wire:loading wire:target="do('start')">Starting...</span>
+                            </button>
                             <div x-show="isAdvancedView" x-transition>
-                                <x-proxmox::ui.button wire:click="do('shutdown')" class="w-full text-nowrap disabled:cursor-not-allowed"
-                                    wire:loading.attr="disabled" wire:loading.class="opacity-50 cursor-not-allowed"
-                                    :disabled="$vmStatus !== 'running'" variant="secondary">
-                                    <x-loading target="do('shutdown')" />
-                                    <x-ri-stop-fill class="size-4" />
-                                    <div wire:loading.remove wire:target="do('shutdown')">
-                                        Stop (ACPI)
-                                    </div>
-                                </x-proxmox::ui.button>
+                                <button wire:click="do('shutdown')" 
+                                    wire:loading.attr="disabled" 
+                                    wire:loading.class="opacity-50 cursor-not-allowed"
+                                    @if($vmStatus !== 'running') disabled @endif
+                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-warning hover:bg-warning/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-warning">
+                                    <span wire:loading wire:target="do('shutdown')" class="animate-spin">
+                                        <x-ri-loader-4-line class="size-4" />
+                                    </span>
+                                    <x-ri-stop-fill wire:loading.remove wire:target="do('shutdown')" class="size-4" />
+                                    <span wire:loading.remove wire:target="do('shutdown')">Stop (ACPI)</span>
+                                    <span wire:loading wire:target="do('shutdown')">Stopping...</span>
+                                </button>
                             </div>
                             <div x-show="isAdvancedView" x-transition>
-                                <x-proxmox::ui.button wire:click="do('reboot')" class="w-full text-nowrap disabled:cursor-not-allowed"
-                                    :disabled="$vmStatus !== 'running'" variant="secondary">
-                                    <x-loading target="do('reboot')" />
-                                    <x-ri-loop-left-line class="size-4" />
-                                    <div wire:loading.remove wire:target="do('reboot')">
-                                        Reboot (ACPI)
-                                    </div>
-                                </x-proxmox::ui.button>
+                                <button wire:click="do('reboot')" 
+                                    wire:loading.attr="disabled" 
+                                    wire:loading.class="opacity-50 cursor-not-allowed"
+                                    @if($vmStatus !== 'running') disabled @endif
+                                    class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-info hover:bg-info/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-info">
+                                    <span wire:loading wire:target="do('reboot')" class="animate-spin">
+                                        <x-ri-loader-4-line class="size-4" />
+                                    </span>
+                                    <x-ri-restart-line wire:loading.remove wire:target="do('reboot')" class="size-4" />
+                                    <span wire:loading.remove wire:target="do('reboot')">Reboot (ACPI)</span>
+                                    <span wire:loading wire:target="do('reboot')">Rebooting...</span>
+                                </button>
                             </div>
-                            <x-proxmox::ui.button wire:click="do('stop')"
-                                class="text-nowrap w-full disabled:cursor-not-allowed"
-                                :disabled="$vmStatus !== 'running'" variant="danger">
-                                <x-loading target="do('stop')" />
-                                <x-ri-shut-down-line class="size-4" />
-                                <div wire:loading.remove wire:target="do('stop')">
-                                    Power Off
-                                </div>
-                            </x-proxmox::ui.button>
+                            <button wire:click="do('stop')" 
+                                wire:loading.attr="disabled" 
+                                wire:loading.class="opacity-50 cursor-not-allowed"
+                                @if($vmStatus !== 'running') disabled @endif
+                                class="w-full inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-danger hover:bg-danger/90 text-white font-medium rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-danger">
+                                <span wire:loading wire:target="do('stop')" class="animate-spin">
+                                    <x-ri-loader-4-line class="size-4" />
+                                </span>
+                                <x-ri-shut-down-line wire:loading.remove wire:target="do('stop')" class="size-4" />
+                                <span wire:loading.remove wire:target="do('stop')">Power Off</span>
+                                <span wire:loading wire:target="do('stop')">Powering Off...</span>
+                            </button>
                         </div>
                     </div>
             </div>