feat: enhance delete button styles and interactions for better user experience

This commit is contained in:
2025-12-05 06:08:18 -05:00
parent b0388874d5
commit 161af0f090

View File

@@ -349,7 +349,9 @@
</button>
<button wire:click="deleteUnusedDrive('{{ $unusedKey }}')"
wire:confirm="Are you sure you want to permanently delete this detached drive? This action cannot be undone."
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-danger/50 bg-danger/10 text-danger hover:bg-danger/20 transition-colors">
style="display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 0.5rem; border: 1px solid rgb(239 68 68 / 0.5); background-color: rgb(239 68 68 / 0.1); color: rgb(239 68 68); transition: background-color 0.15s ease;"
onmouseover="this.style.backgroundColor='rgb(239 68 68 / 0.2)'"
onmouseout="this.style.backgroundColor='rgb(239 68 68 / 0.1)'">
<x-ri-delete-bin-line class="size-3.5" />
Delete
</button>
@@ -763,8 +765,10 @@
</button>
<button wire:click="deleteDrive"
wire:loading.attr="disabled"
class="px-4 py-2 text-sm font-medium rounded-lg bg-danger text-white hover:bg-danger/90 disabled:opacity-50 transition-colors"
@if($status && $status->status !== 'stopped') disabled @endif>
style="padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.5rem; background-color: rgb(239 68 68); color: white; transition: background-color 0.15s ease;"
onmouseover="this.style.backgroundColor='rgb(220 38 38)'"
onmouseout="this.style.backgroundColor='rgb(239 68 68)'"
@if($status && $status->status !== 'stopped') disabled style="opacity: 0.5;" @endif>
<x-loading target="deleteDrive" />
<span wire:loading.remove wire:target="deleteDrive">Delete Drive</span>
<span wire:loading wire:target="deleteDrive">Deleting...</span>