Place account deletion in its own danger row so it stays separate from routine options.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/profile/_components/ProfilePage.view.tsx

@@ -6,6 +6,7 @@ import Rule from "../../../components/cards/Rule";
 import TextInput from "../../../components/controls/TextInput";
 import List from "../../../components/layout/List";
 import type { ListItem, ListSize } from "../../../components/layout/List";
+import ListEntry from "../../../components/layout/ListEntry";
 import Icon from "../../../components/asset/icon";
 import Dialog from "../../../components/modals/Dialog";
 import Alert from "../../../components/modals/Alert";
@@ -397,33 +398,24 @@ export function ProfilePageView({
                   leadingIcon="edit"
                 />
               </nav>
+              <section
+                aria-label={t("deleteAccount")}
+                className="w-full overflow-hidden rounded-[12px] border border-[var(--color-border-default-negative-primary)] bg-[var(--color-surface-default-negative-secondary)]"
+              >
+                <ListEntry
+                  title={t("deleteAccount")}
+                  description=""
+                  showDescription={false}
+                  onClick={onOpenDeleteAccount}
+                  size={profileListSize}
+                  leadingIcon="edit"
+                  variant="danger"
+                  topDivider={false}
+                  bottomDivider={false}
+                />
+              </section>
             </section>
           </div>
-
-          <section
-            className="flex w-full flex-col items-start gap-3 rounded-[12px] border border-[var(--color-border-default-negative-primary)] bg-[var(--color-surface-default-negative-secondary)] px-4 py-4 lg:px-6 lg:py-6"
-            aria-labelledby="profile-delete-heading"
-          >
-            <h2
-              id="profile-delete-heading"
-              className="text-small-label text-[var(--color-content-default-negative-primary)]"
-            >
-              {t("deleteAccount")}
-            </h2>
-            <p className="max-w-[640px] text-small-paragraph text-[var(--color-content-default-secondary)]">
-              {t("deleteAccountIntro")}
-            </p>
-            <Button
-              type="button"
-              size="small"
-              buttonType="danger"
-              palette="default"
-              className="self-start"
-              onClick={onOpenDeleteAccount}
-            >
-              {t("deleteAccountConfirm")}
-            </Button>
-          </section>
         </div>
       </div>
 

app/components/layout/ListEntry/ListEntry.view.tsx

@@ -51,15 +51,8 @@ const ListEntryRow = memo(function ListEntryRow({
       ? `${layout.title} !text-[var(--color-content-default-negative-primary)]`
       : layout.title;
 
-  const leadingToneClass =
-    variant === "danger"
-      ? "text-[var(--color-content-default-negative-primary)]"
-      : "text-[var(--color-content-default-primary)]";
-
-  const chevronToneClass =
-    variant === "danger"
-      ? "text-[var(--color-content-default-negative-primary)]"
-      : "text-[var(--color-content-default-primary)]";
+  const leadingToneClass = "text-[var(--color-content-default-primary)]";
+  const chevronToneClass = "text-[var(--color-content-default-primary)]";
 
   const leadingSlot = (
     <div className={`${leadingBoxClass} ${leadingToneClass}`}>