From c221b225032ed2315f046d0d9377d273c036671b Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Wed, 30 Sep 2026 18:59:49 +0200
Subject: [PATCH] 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.
---
 resources/css/app.css                                    | 9 +++++++++
 resources/views/components/modal-confirmation.blade.php  | 6 +++---
 .../views/components/shared-variables/editor.blade.php   | 2 +-
 resources/views/livewire/server/proxy.blade.php          | 2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index c501404fdd..112e162152 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -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,
diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index d09d64ea7e..d2a9f0475e 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -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>
diff --git a/resources/views/components/shared-variables/editor.blade.php b/resources/views/components/shared-variables/editor.blade.php
index c2c85a3e4e..883d79cb68 100644
--- a/resources/views/components/shared-variables/editor.blade.php
+++ b/resources/views/components/shared-variables/editor.blade.php
@@ -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
diff --git a/resources/views/livewire/server/proxy.blade.php b/resources/views/livewire/server/proxy.blade.php
index 3b4a465ff3..1fe88d5248 100644
--- a/resources/views/livewire/server/proxy.blade.php
+++ b/resources/views/livewire/server/proxy.blade.php
@@ -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"