fix(ui): clarify dialogs, use a red focus ring on error buttons, fix missing icons

- The certificate delete dialog no longer lists a proxy restart it does not
  perform, and its warning mentions the backup.
- Confirmation dialogs list actions with a dash instead of a trash icon.
- Error buttons get a red focus ring instead of the accent ring.
- Use existing icons for the TLS empty state and built-in shared variables.
This commit is contained in:
Andras Bacsai
2026-09-30 18:59:49 +02:00
parent 8b007edceb
commit c221b22503
4 changed files with 14 additions and 5 deletions
+9
View File
@@ -127,6 +127,15 @@
box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-accent);
}
/* Destructive buttons keep a focus indicator in their own red instead of the accent. */
.button.button-error:not(:disabled):focus-visible {
box-shadow: var(--button-depth), 0 0 0 1px var(--color-red-500);
}
.button.button-error:not(:disabled):hover:focus-visible {
box-shadow: var(--button-depth-hover), 0 0 0 1px var(--color-red-500);
}
/* Other button-like controls retain the lighter scale feedback. */
.button,
.icon-button,
@@ -267,21 +267,21 @@
<ul class="mb-4 space-y-2">
@foreach ($actions as $action)
<li class="flex items-start gap-2 text-[12px] leading-5 text-red-600 dark:text-red-400">
<x-reicon name="trash" class="mt-0.5 size-3.5 shrink-0" />
<span class="shrink-0" aria-hidden="true">-</span>
<span>{{ $action }}</span>
</li>
@endforeach
@foreach ($checkboxes as $checkbox)
<template x-if="selectedActions.includes('{{ $checkbox['id'] }}')">
<li class="flex items-start gap-2 text-[12px] leading-5 text-red-600 dark:text-red-400">
<x-reicon name="trash" class="mt-0.5 size-3.5 shrink-0" />
<span class="shrink-0" aria-hidden="true">-</span>
<span>{{ $checkbox['label'] }}</span>
</li>
</template>
@if (isset($checkbox['default_warning']))
<template x-if="!selectedActions.includes('{{ $checkbox['id'] }}')">
<li class="flex items-start gap-2 text-[12px] leading-5 text-red-600 dark:text-red-400">
<x-reicon name="trash" class="mt-0.5 size-3.5 shrink-0" />
<span class="shrink-0" aria-hidden="true">-</span>
<span>{{ $checkbox['default_warning'] }}</span>
</li>
</template>
@@ -123,7 +123,7 @@
<span class="env-type-desktop text-[13px] text-neutral-500 dark:text-fg-dim">{{ str($type)->headline() }}</span>
<span class="min-w-0 truncate font-mono text-[13px]" title="{{ $env->value }}">{{ $env->value }}</span>
<span class="data-table-cell-dash">-</span>
<span class="justify-self-end text-neutral-400 dark:text-fg-faint" title="Built-in variable, managed by Coolify"><x-reicon name="lock" class="size-3.5" /></span>
<span class="justify-self-end text-neutral-400 dark:text-fg-faint" title="Built-in variable, managed by Coolify"><x-reicon name="keys" class="size-3.5" /></span>
</div>
</div>
@else
@@ -156,8 +156,8 @@
:actions="[
'Save the current acme.json as a backup that you can restore below.',
'Delete the certificate for '.$certificate['main_domain'].' from acme.json.',
'Restart the proxy before it stops using the certificate. If a route still uses the domain, Traefik requests a new certificate after the restart.',
]"
warningMessage="The proxy keeps using the certificate until you restart it. If a route still uses the domain, Traefik requests a new certificate after the restart. You can restore the backup below to undo this."
confirmationText="{{ $certificate['main_domain'] }}"
confirmationLabel="Confirm by entering the domain"
shortConfirmationLabel="Domain"