fix: use primary color for loader, add loader-inherit for colored buttons
This commit is contained in:
@@ -109,7 +109,7 @@
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="promptDelete('{{ $backup->volid }}')"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold flex items-center gap-2 text-error disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span wire:loading wire:target="promptDelete('{{ $backup->volid }}')" class="loader w-4 h-4"></span>
|
||||
<span wire:loading wire:target="promptDelete('{{ $backup->volid }}')" class="loader loader-inherit w-4 h-4"></span>
|
||||
<x-ri-delete-bin-fill wire:loading.remove wire:target="promptDelete('{{ $backup->volid }}')" class="w-4 h-4"/> Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -384,7 +384,7 @@
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-lg font-semibold">Firewall Rules</h3>
|
||||
<button type="button" wire:click="startCreateRule" wire:loading.attr="disabled" wire:target="startCreateRule" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span wire:loading wire:target="startCreateRule" class="loader size-4"></span>
|
||||
<span wire:loading wire:target="startCreateRule" class="loader loader-inherit size-4"></span>
|
||||
<x-ri-add-line wire:loading.remove wire:target="startCreateRule" class="size-4" />
|
||||
Add Rule
|
||||
</button>
|
||||
@@ -663,7 +663,7 @@
|
||||
<p class="text-sm text-base/60">Create named references to IP addresses or CIDR ranges</p>
|
||||
</div>
|
||||
<button type="button" wire:click="startCreateAlias" wire:loading.attr="disabled" wire:target="startCreateAlias" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span wire:loading wire:target="startCreateAlias" class="loader size-4"></span>
|
||||
<span wire:loading wire:target="startCreateAlias" class="loader loader-inherit size-4"></span>
|
||||
<x-ri-add-line wire:loading.remove wire:target="startCreateAlias" class="size-4" />
|
||||
Add Alias
|
||||
</button>
|
||||
@@ -714,7 +714,7 @@
|
||||
<p class="text-sm text-base/60">Group multiple IPs/CIDRs for easier rule management</p>
|
||||
</div>
|
||||
<button type="button" wire:click="startCreateIPSet" wire:loading.attr="disabled" wire:target="startCreateIPSet" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm font-medium flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span wire:loading wire:target="startCreateIPSet" class="loader size-4"></span>
|
||||
<span wire:loading wire:target="startCreateIPSet" class="loader loader-inherit size-4"></span>
|
||||
<x-ri-add-line wire:loading.remove wire:target="startCreateIPSet" class="size-4" />
|
||||
Create IP Set
|
||||
</button>
|
||||
|
||||
@@ -152,7 +152,7 @@
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-75"
|
||||
class="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors">
|
||||
<span class="loader size-4" wire:loading wire:target="openAddDriveModal"></span>
|
||||
<span class="loader loader-inherit size-4" wire:loading wire:target="openAddDriveModal"></span>
|
||||
<x-ri-add-line class="size-4" wire:loading.remove wire:target="openAddDriveModal" />
|
||||
Add Drive
|
||||
</button>
|
||||
@@ -376,7 +376,7 @@
|
||||
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(234 179 8 / 0.5); background-color: rgb(234 179 8 / 0.1); color: rgb(234 179 8); transition: background-color 0.15s ease;"
|
||||
onmouseover="this.style.backgroundColor='rgb(234 179 8 / 0.2)'"
|
||||
onmouseout="this.style.backgroundColor='rgb(234 179 8 / 0.1)'">
|
||||
<span class="loader size-3.5" wire:loading wire:target="openDetachModal('{{ $driveKey }}')"></span>
|
||||
<span class="loader loader-inherit size-3.5" wire:loading wire:target="openDetachModal('{{ $driveKey }}')"></span>
|
||||
<x-ri-eject-line class="size-3.5" wire:loading.remove wire:target="openDetachModal('{{ $driveKey }}')" />
|
||||
Detach
|
||||
</button>
|
||||
@@ -385,7 +385,7 @@
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="openDeleteModal('{{ $driveKey }}')"
|
||||
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">
|
||||
<span class="loader size-3.5" wire:loading wire:target="openDeleteModal('{{ $driveKey }}')"></span>
|
||||
<span class="loader loader-inherit size-3.5" wire:loading wire:target="openDeleteModal('{{ $driveKey }}')"></span>
|
||||
<x-ri-delete-bin-line class="size-3.5" wire:loading.remove wire:target="openDeleteModal('{{ $driveKey }}')" />
|
||||
Delete
|
||||
</button>
|
||||
@@ -492,7 +492,7 @@
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="openReattachModal('{{ $unusedKey }}')"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-success/50 bg-success/10 text-success hover:bg-success/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
<span wire:loading wire:target="openReattachModal('{{ $unusedKey }}')" class="loader size-3.5"></span>
|
||||
<span wire:loading wire:target="openReattachModal('{{ $unusedKey }}')" class="loader loader-inherit size-3.5"></span>
|
||||
<x-ri-link wire:loading.remove wire:target="openReattachModal('{{ $unusedKey }}')" class="size-3.5" />
|
||||
Reattach
|
||||
</button>
|
||||
@@ -503,7 +503,7 @@
|
||||
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)'">
|
||||
<span wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="loader size-3.5"></span>
|
||||
<span wire:loading wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="loader loader-inherit size-3.5"></span>
|
||||
<x-ri-delete-bin-line wire:loading.remove wire:target="deleteUnusedDrive('{{ $unusedKey }}')" class="size-3.5" />
|
||||
Delete
|
||||
</button>
|
||||
|
||||
@@ -156,7 +156,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<x-button.primary wire:click="$set('showCreateModal', true)" :disabled="count($this->availableIpsForSubdomain) === 0" wire:loading.attr="disabled" class="!w-auto flex-shrink-0">
|
||||
<span wire:loading wire:target="$set('showCreateModal', true)" class="loader size-4"></span>
|
||||
<span wire:loading wire:target="$set('showCreateModal', true)" class="loader loader-inherit size-4"></span>
|
||||
<x-ri-add-circle-fill wire:loading.remove wire:target="$set('showCreateModal', true)" class="size-4" />
|
||||
Create Subdomain
|
||||
</x-button.primary>
|
||||
@@ -257,7 +257,7 @@
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<x-button.danger wire:click="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" wire:loading.attr="disabled" wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})">
|
||||
<span wire:loading wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="loader size-4"></span>
|
||||
<span wire:loading wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="loader loader-inherit size-4"></span>
|
||||
<x-ri-delete-bin-line wire:loading.remove wire:target="openDeleteModal('{{ $zone['subdomain'] }}', {{ $zone['ipAddressId'] }})" class="size-4" />
|
||||
Delete
|
||||
</x-button.danger>
|
||||
|
||||
Reference in New Issue
Block a user