From 6daea93df464638fb52c7b79ecd902b24a7a6bd3 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 25 Sep 2026 23:56:01 +0200
Subject: [PATCH] style(ui): render danger zone as red card with Permanent
 badge

Wrap the danger-zone component in a bordered red-tinted card with
padding and dark-mode variants, align content to the top, switch the
title and description to neutral text colors, and add a "Permanent"
pill next to the title. Update the layout test to match.
---
 resources/views/components/danger-zone.blade.php | 14 +++++++++++---
 tests/Feature/DangerZoneLayoutTest.php           |  9 +++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/resources/views/components/danger-zone.blade.php b/resources/views/components/danger-zone.blade.php
index cd2f75fbce..37dc97c807 100644
--- a/resources/views/components/danger-zone.blade.php
+++ b/resources/views/components/danger-zone.blade.php
@@ -1,9 +1,17 @@
 @props(['title'])
 
-<div {{ $attributes->class('flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between') }}>
+<div
+    {{ $attributes->class('flex flex-col gap-4 rounded-lg border border-red-200 bg-red-50 p-5 sm:flex-row sm:items-start sm:justify-between dark:border-red-500/25 dark:bg-red-500/[0.08]') }}>
     <div class="min-w-0">
-        <h4 class="text-sm font-semibold text-red-700 dark:text-red-300">{{ $title }}</h4>
-        <div class="mt-2 max-w-2xl space-y-2 text-[13px] leading-5 text-red-700/80 dark:text-red-300/80">
+        <div class="flex flex-wrap items-center gap-2">
+            <h4 class="text-sm font-semibold text-black dark:text-fg">{{ $title }}</h4>
+            <span
+                class="inline-flex items-center gap-1.5 rounded-full border border-neutral-200 bg-white px-2.5 py-0.5 text-xs font-medium text-neutral-700 dark:border-white/[0.08] dark:bg-white/[0.06] dark:text-fg">
+                <span class="size-1.5 rounded-full bg-red-500"></span>
+                Permanent
+            </span>
+        </div>
+        <div class="mt-2 max-w-2xl space-y-2 text-[13px] leading-5 text-neutral-600 dark:text-fg-dim">
             {{ $slot }}
         </div>
     </div>
diff --git a/tests/Feature/DangerZoneLayoutTest.php b/tests/Feature/DangerZoneLayoutTest.php
index 6f212301f8..5395958c73 100644
--- a/tests/Feature/DangerZoneLayoutTest.php
+++ b/tests/Feature/DangerZoneLayoutTest.php
@@ -5,10 +5,11 @@ it('uses one shared visual treatment for all danger zone actions', function () {
 
     expect($component)
         ->toContain("@props(['title'])")
-        ->toContain('sm:flex-row sm:items-center sm:justify-between')
-        ->toContain('text-red-700 dark:text-red-300')
-        ->toContain('@isset($action)')
-        ->not->toContain('bg-red-50');
+        ->toContain('sm:flex-row sm:items-start sm:justify-between')
+        ->toContain('rounded-lg border border-red-200 bg-red-50')
+        ->toContain('dark:border-red-500/25 dark:bg-red-500/[0.08]')
+        ->toContain('Permanent')
+        ->toContain('@isset($action)');
 
     foreach ([
         'livewire/destination/show.blade.php',