Remodel "Can't confirm" dialog to match designs (#35375)

Author: andybalaam

apps/web/playwright/e2e/login/login-consent.spec.ts

@@ -323,7 +323,7 @@ test.describe("Login", () => {
                 await page.getByRole("button", { name: "Can't confirm?" }).click();
 
                 // Then click outside the dialog and restart
-                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
+                await page.locator("body").click({ force: true, position: { x: 1, y: 1 } });
                 await page.getByRole("button", { name: "Can't confirm?" }).click();
 
                 // Finally we actually continue

apps/web/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts

@@ -172,7 +172,7 @@ test.describe("Encryption tab", () => {
             await page.getByRole("button", { name: "Can't confirm?" }).click();
 
             // Then click outside the dialog and restart
-            await page.locator("li").filter({ hasText: "Encryption" }).click({ force: true });
+            await page.getByRole("heading", { name: "Settings" }).click({ force: true, position: { x: 0, y: 0 } });
             await page.getByRole("button", { name: "Can't confirm?" }).click();
 
             // Finally we actually continue

apps/web/playwright/snapshots/settings/encryption-user-tab/advanced.spec.ts/reset-cryptographic-identity-linux.png

@@ -10,6 +10,7 @@ import React, { type JSX } from "react";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { ResetIdentityBody, type ResetIdentityBodyVariant } from "../settings/encryption/ResetIdentityBody";
+import BaseDialog from "./BaseDialog";
 
 interface ResetIdentityDialogProps {
     /**
@@ -71,7 +72,9 @@ export function ResetIdentityDialog({
 
     return (
         <MatrixClientContext.Provider value={matrixClient}>
-            <ResetIdentityBody onReset={onResetWrapper} onCancelClick={onCancelOrSignOut} variant={variant} />
+            <BaseDialog fixedWidth={true} hasCancel={false}>
+                <ResetIdentityBody onReset={onResetWrapper} onCancelClick={onCancelOrSignOut} variant={variant} />
+            </BaseDialog>
         </MatrixClientContext.Provider>
     );
 }

apps/web/src/components/views/dialogs/ResetIdentityDialog.tsx

@@ -5,10 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import { Button, InlineSpinner, VisualList, VisualListItem } from "@vector-im/compound-web";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
-import InfoIcon from "@vector-im/compound-design-tokens/assets/web/icons/info";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
+import { Alert, Button, InlineSpinner, VisualList, VisualListItem } from "@vector-im/compound-web";
+import CheckCircle from "@vector-im/compound-design-tokens/assets/web/icons/check-circle";
+import Group from "@vector-im/compound-design-tokens/assets/web/icons/group";
+import UserProfileSolid from "@vector-im/compound-design-tokens/assets/web/icons/user-profile-solid";
+import VisibilityOff from "@vector-im/compound-design-tokens/assets/web/icons/visibility-off";
 import React, { type JSX, useState } from "react";
 
 import { _t } from "../../../../languageHandler";
@@ -69,24 +70,29 @@ export function ResetIdentityBody({ onCancelClick, onReset, variant }: ResetIden
     const [inProgress, setInProgress] = useState(false);
 
     return (
-        <EncryptionCard Icon={ErrorIcon} destructive={true} title={titleForVariant(variant)}>
+        <EncryptionCard
+            Icon={UserProfileSolid}
+            title={titleForVariant(variant)}
+            description={descriptionForVariant(variant)}
+        >
             <EncryptionCardEmphasisedContent>
                 <VisualList>
-                    <VisualListItem Icon={CheckIcon} success={true}>
+                    <VisualListItem Icon={CheckCircle} success={true}>
                         {_t("settings|encryption|advanced|breadcrumb_first_description")}
                     </VisualListItem>
-                    <VisualListItem Icon={InfoIcon}>
+                    <VisualListItem Icon={VisibilityOff}>
                         {_t("settings|encryption|advanced|breadcrumb_second_description")}
                     </VisualListItem>
-                    <VisualListItem Icon={InfoIcon}>
+                    <VisualListItem Icon={Group}>
                         {_t("settings|encryption|advanced|breadcrumb_third_description")}
                     </VisualListItem>
                 </VisualList>
                 {variant === "compromised" && <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span>}
             </EncryptionCardEmphasisedContent>
+            {alertForVariant(variant)}
             <EncryptionCardButtons>
                 <Button
-                    destructive={true}
+                    destructive={destructiveForVariant(variant)}
                     disabled={inProgress}
                     onClick={async () => {
                         setInProgress(true);
@@ -135,6 +141,31 @@ function titleForVariant(variant: ResetIdentityBodyVariant): string {
     }
 }
 
+function descriptionForVariant(variant: ResetIdentityBodyVariant): string | undefined {
+    switch (variant) {
+        case "no_verification_method":
+            return _t("settings|encryption|advanced|breadcrumb_description_no_verification_method");
+        case "confirm":
+            return _t("settings|encryption|advanced|breadcrumb_description");
+        case "compromised":
+        case "sync_failed":
+        case "forgot":
+            return undefined;
+    }
+}
+
+function alertForVariant(variant: string): JSX.Element | undefined {
+    switch (variant) {
+        case "confirm":
+            return <Alert type="critical" title={_t("settings|encryption|advanced|breadcrumb_alert_cant_confirm")} />;
+        case "no_verification_method":
+        case "compromised":
+        case "sync_failed":
+        case "forgot":
+            return undefined;
+    }
+}
+
 function cancelTextForVariant(variant: ResetIdentityBodyVariant): string {
     switch (variant) {
         case "confirm":
@@ -146,3 +177,15 @@ function cancelTextForVariant(variant: ResetIdentityBodyVariant): string {
             return _t("action|sign_out_before_verify");
     }
 }
+
+function destructiveForVariant(variant: ResetIdentityBodyVariant): boolean {
+    switch (variant) {
+        case "no_verification_method":
+            return false;
+        case "confirm":
+        case "compromised":
+        case "sync_failed":
+        case "forgot":
+            return true;
+    }
+}