From 72c51adbb3eac175b8288dc8bded5bcface2a444 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 28 Sep 2026 14:50:07 -0600
Subject: [PATCH 1/2] Separate account deletion from the routine profile
 options so it reads as a destructive action.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../profile/_components/ProfilePage.view.tsx  |  38 +++--
 tests/pages/profile.test.tsx                  | 143 ++++++++++++++++++
 2 files changed, 170 insertions(+), 11 deletions(-)
 create mode 100644 tests/pages/profile.test.tsx

diff --git a/app/(app)/profile/_components/ProfilePage.view.tsx b/app/(app)/profile/_components/ProfilePage.view.tsx
index 09f80f2..18cf267 100644
--- a/app/(app)/profile/_components/ProfilePage.view.tsx
+++ b/app/(app)/profile/_components/ProfilePage.view.tsx
@@ -237,17 +237,8 @@ export function ProfilePageView({
         leadingIcon: "mail",
         showDescription: false,
       },
-      {
-        id: "delete-account",
-        title: t("deleteAccount"),
-        description: "",
-        onClick: onOpenDeleteAccount,
-        leadingIcon: "warning",
-        variant: "danger",
-        showDescription: false,
-      },
     ];
-  }, [t, onSignOut, onOpenDeleteAccount, onOpenEmailChange, onStartNewCustomRule]);
+  }, [t, onSignOut, onOpenEmailChange, onStartNewCustomRule]);
 
   const ruleCardShellClass =
     "w-full !max-w-full cursor-default !gap-3 !rounded-[12px] shadow-[0_0_48px_rgba(0,0,0,0.1)] lg:!rounded-[24px] lg:shadow-[0_0_24px_rgba(0,0,0,0.1)]";
@@ -408,6 +399,31 @@ export function ProfilePageView({
               </nav>
             </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>
 
@@ -502,7 +518,7 @@ export function ProfilePageView({
             <Button
               type="button"
               size="medium"
-              buttonType="filled"
+              buttonType="danger"
               palette="default"
               onClick={onConfirmDeleteAccount}
               disabled={accountDeleteBusy}
diff --git a/tests/pages/profile.test.tsx b/tests/pages/profile.test.tsx
new file mode 100644
index 0000000..486e906
--- /dev/null
+++ b/tests/pages/profile.test.tsx
@@ -0,0 +1,143 @@
+import { afterEach, describe, expect, test, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { within } from "@testing-library/react";
+import {
+  cleanup,
+  renderWithProviders as render,
+  screen,
+} from "../utils/test-utils";
+import {
+  ProfilePageView,
+  type ProfilePageViewProps,
+} from "../../app/(app)/profile/_components/ProfilePage.view";
+import messages from "../../messages/en/index";
+
+const copy = messages.pages.profile;
+
+afterEach(() => {
+  cleanup();
+});
+
+function viewProps(
+  overrides: Partial<ProfilePageViewProps> = {},
+): ProfilePageViewProps {
+  return {
+    userEmail: "dani@example.com",
+    ruleCardSize: "M",
+    profileLgUp: true,
+    profileListSize: "l",
+    rules: [],
+    rulesError: false,
+    draft: null,
+    showDraftCard: false,
+    ruleDeleteOpen: false,
+    ruleDeleteBusy: false,
+    draftDeleteOpen: false,
+    draftDeleteBusy: false,
+    accountDeleteOpen: false,
+    accountDeleteBusy: false,
+    actionError: null,
+    profileSuccessMessage: null,
+    emailChangeOpen: false,
+    emailChangeValue: "",
+    onEmailChangeValueChange: vi.fn(),
+    emailChangeBusy: false,
+    emailChangeRequestSent: false,
+    emailChangeModalError: null,
+    onDismissEmailChangeModalError: vi.fn(),
+    onOpenEmailChange: vi.fn(),
+    onCloseEmailChange: vi.fn(),
+    onSubmitEmailChange: vi.fn(),
+    onSignOut: vi.fn(),
+    onDeleteRule: vi.fn(),
+    onCloseDeleteRule: vi.fn(),
+    onConfirmDeleteRule: vi.fn(),
+    onDuplicateRule: vi.fn(),
+    onContinueDraft: vi.fn(),
+    onDeleteDraft: vi.fn(),
+    onCloseDeleteDraft: vi.fn(),
+    onConfirmDeleteDraft: vi.fn(),
+    onOpenDeleteAccount: vi.fn(),
+    onCloseDeleteAccount: vi.fn(),
+    onConfirmDeleteAccount: vi.fn(),
+    onDismissProfileSuccess: vi.fn(),
+    onDismissActionError: vi.fn(),
+    onDismissRulesError: vi.fn(),
+    onStartNewCustomRule: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("ProfilePageView", () => {
+  test("keeps account deletion out of the routine options list", () => {
+    render(<ProfilePageView {...viewProps()} />);
+
+    const options = screen.getByRole("navigation", {
+      name: copy.yourOptionsHeading,
+    });
+    const createRule = within(options).getByRole("button", {
+      name: copy.optionCreateCustom,
+    });
+    expect(createRule.closest("ul")).not.toBeNull();
+    expect(
+      within(options).queryByRole("button", { name: copy.deleteAccountConfirm }),
+    ).not.toBeInTheDocument();
+    expect(
+      within(options).queryByRole("heading", { name: copy.deleteAccount }),
+    ).not.toBeInTheDocument();
+
+    const danger = screen.getByRole("region", { name: copy.deleteAccount });
+    expect(danger).toHaveTextContent(copy.deleteAccountIntro);
+    const deleteAccount = within(danger).getByRole("button", {
+      name: copy.deleteAccountConfirm,
+    });
+    expect(deleteAccount.closest("ul")).toBeNull();
+    expect(deleteAccount.className).toContain(
+      "border-[var(--color-border-default-negative-primary)]",
+    );
+    expect(deleteAccount.className).not.toContain(
+      "bg-[var(--color-surface-inverse-primary)]",
+    );
+  });
+
+  test("asks for confirmation before deleting the account", async () => {
+    const user = userEvent.setup();
+    const onOpenDeleteAccount = vi.fn();
+    const onConfirmDeleteAccount = vi.fn();
+    const { rerender } = render(
+      <ProfilePageView {...viewProps({ onOpenDeleteAccount })} />,
+    );
+
+    await user.click(
+      screen.getByRole("button", { name: copy.deleteAccountConfirm }),
+    );
+    expect(onOpenDeleteAccount).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <ProfilePageView
+        {...viewProps({
+          onOpenDeleteAccount,
+          onConfirmDeleteAccount,
+          accountDeleteOpen: true,
+        })}
+      />,
+    );
+
+    const dialog = screen.getByRole("dialog", {
+      name: copy.deleteAccountModalTitle,
+    });
+    expect(dialog).toHaveTextContent(copy.deleteAccountModalBody);
+    const confirm = within(dialog).getByRole("button", {
+      name: copy.deleteAccountConfirm,
+    });
+    expect(confirm.className).toContain(
+      "border-[var(--color-border-default-negative-primary)]",
+    );
+    expect(confirm.className).not.toContain(
+      "bg-[var(--color-surface-inverse-primary)]",
+    );
+
+    await user.click(confirm);
+    expect(onConfirmDeleteAccount).toHaveBeenCalledTimes(1);
+  });
+});
-- 
2.53.0


From 89f3e5684deef9340b716a7c37629ebaaf5b4ea2 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Mon, 28 Sep 2026 15:08:12 -0600
Subject: [PATCH 2/2] Place account deletion in its own danger row so it stays
 separate from routine options.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../profile/_components/ProfilePage.view.tsx  | 42 ++++++++-----------
 .../layout/ListEntry/ListEntry.view.tsx       | 11 +----
 tests/pages/profile.test.tsx                  | 36 ++++++++--------
 3 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/app/(app)/profile/_components/ProfilePage.view.tsx b/app/(app)/profile/_components/ProfilePage.view.tsx
index 18cf267..7f1db4e 100644
--- a/app/(app)/profile/_components/ProfilePage.view.tsx
+++ b/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>
 
diff --git a/app/components/layout/ListEntry/ListEntry.view.tsx b/app/components/layout/ListEntry/ListEntry.view.tsx
index 3380d3d..b09534c 100644
--- a/app/components/layout/ListEntry/ListEntry.view.tsx
+++ b/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}`}>
diff --git a/tests/pages/profile.test.tsx b/tests/pages/profile.test.tsx
index 486e906..cdfb35e 100644
--- a/tests/pages/profile.test.tsx
+++ b/tests/pages/profile.test.tsx
@@ -69,34 +69,36 @@ function viewProps(
 }
 
 describe("ProfilePageView", () => {
-  test("keeps account deletion out of the routine options list", () => {
+  test("puts delete account in its own danger area", () => {
     render(<ProfilePageView {...viewProps()} />);
 
     const options = screen.getByRole("navigation", {
       name: copy.yourOptionsHeading,
     });
-    const createRule = within(options).getByRole("button", {
-      name: copy.optionCreateCustom,
-    });
-    expect(createRule.closest("ul")).not.toBeNull();
     expect(
-      within(options).queryByRole("button", { name: copy.deleteAccountConfirm }),
-    ).not.toBeInTheDocument();
+      within(options).getByRole("button", { name: copy.optionCreateCustom }),
+    ).toBeInTheDocument();
     expect(
-      within(options).queryByRole("heading", { name: copy.deleteAccount }),
+      within(options).queryByRole("button", { name: copy.deleteAccount }),
     ).not.toBeInTheDocument();
+    expect(screen.queryByText(copy.deleteAccountIntro)).not.toBeInTheDocument();
 
     const danger = screen.getByRole("region", { name: copy.deleteAccount });
-    expect(danger).toHaveTextContent(copy.deleteAccountIntro);
-    const deleteAccount = within(danger).getByRole("button", {
-      name: copy.deleteAccountConfirm,
-    });
-    expect(deleteAccount.closest("ul")).toBeNull();
-    expect(deleteAccount.className).toContain(
+    expect(danger.className).toContain(
       "border-[var(--color-border-default-negative-primary)]",
     );
-    expect(deleteAccount.className).not.toContain(
-      "bg-[var(--color-surface-inverse-primary)]",
+    const deleteAccount = within(danger).getByRole("button", {
+      name: copy.deleteAccount,
+    });
+    const deleteTitle = within(deleteAccount).getByText(copy.deleteAccount);
+    expect(deleteTitle.className).toContain(
+      "!text-[var(--color-content-default-negative-primary)]",
+    );
+    expect(deleteAccount.firstElementChild?.className).not.toContain(
+      "negative-primary",
+    );
+    expect(deleteAccount.lastElementChild?.className).not.toContain(
+      "negative-primary",
     );
   });
 
@@ -109,7 +111,7 @@ describe("ProfilePageView", () => {
     );
 
     await user.click(
-      screen.getByRole("button", { name: copy.deleteAccountConfirm }),
+      screen.getByRole("button", { name: copy.deleteAccount }),
     );
     expect(onOpenDeleteAccount).toHaveBeenCalledTimes(1);
 
-- 
2.53.0