feat: enhance delete button styles and interactions for better user experience
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user