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"
/>
+
-
-
-
- {t("deleteAccount")}
-
-
- {t("deleteAccountIntro")}
-
-
-
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 = (
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(
);
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);