From 17a7d1c74772a75f006b5c56bc0001e3c9dd45ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Sat, 20 Jun 2026 16:56:49 +0200
Subject: [PATCH] fix(admin): neutralise the danger-zone card surface

Render the danger-zone section on the shared SettingsCard surface
(bg-card + border-border) instead of the destructive-tinted card edge.
A red card surface reads as alarming rather than premium; the danger
signal now lives only in the destructive delete button and its typed
confirmation dialog, with the AlertTriangle header icon still flagging
intent.
---
 src/components/admin/danger-zone-section.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/admin/danger-zone-section.tsx b/src/components/admin/danger-zone-section.tsx
index 4135d3a4a..923099bde 100644
--- a/src/components/admin/danger-zone-section.tsx
+++ b/src/components/admin/danger-zone-section.tsx
@@ -17,6 +17,7 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { SettingsCard } from "@/components/settings/settings-card";
 import { SettingsCardHeader } from "@/components/settings/_card-header";
 import { useTranslations } from "@/lib/i18n/context";
 import { apiDelete } from "@/lib/api/api-fetch";
@@ -83,13 +84,13 @@ export function DangerZoneSection() {
   });
 
   return (
-    // v1.18.1 E4 — adopt the shared card shape (rounded-xl border + the
-    // `SettingsCardHeader` icon/title/description/status layout) so the
-    // Danger Zone reads like every other admin section. The destructive
-    // tint + AlertTriangle icon keep it visually flagged as dangerous;
-    // the delete affordance now sits in the header status slot, properly
-    // aligned beside its label rather than floating below a lone icon.
-    <div className="bg-destructive/5 border-destructive/30 rounded-xl border p-4 sm:p-6">
+    // v1.18.10 (W7) — the card SURFACE is neutral like every other admin /
+    // settings section (`SettingsCard`: bg-card + border-border): a red card
+    // edge reads as alarming, not premium. The danger signal lives ONLY in
+    // the destructive delete button + its typed-confirmation dialog, which
+    // are alarm enough. The header keeps the `AlertTriangle` icon so the
+    // section still flags its intent.
+    <SettingsCard>
       <SettingsCardHeader
         icon={AlertTriangle}
         title={t("admin.deleteAllData")}
@@ -176,6 +177,6 @@ export function DangerZoneSection() {
           {wipeMsg}
         </p>
       )}
-    </div>
+    </SettingsCard>
   );
 }