Split the cross-signing reset pages & adapt the wording

frontend/locales/en.json

@@ -186,23 +186,24 @@
       }
     },
     "reset_cross_signing": {
-      "button": "Reset identity",
       "cancelled": {
         "description_1": "You can close this window and go back to the app to continue.",
         "description_2": "If you're signed out everywhere and don't remember your recovery code, you'll still need to reset your identity.",
         "heading": "Identity reset cancelled."
       },
       "description": "If you're not signed in to any other devices and you've lost your recovery key, then you'll need to reset your identity to continue using the app.",
       "effect_list": {
-        "negative_1": "You will lose your existing message history",
-        "negative_2": "You will need to verify all your existing devices and contacts again",
+        "neutral_1": "You will lose any message history that's stored only on the server",
+        "neutral_2": "You will need to verify all your existing devices and contacts again",
         "positive_1": "Your account details, contacts, preferences, and chat list will be kept"
       },
       "failure": {
         "description": "This might be a temporary problem, so please try again later. If the problem persists, please contact your server administrator.",
         "heading": "Failed to allow crypto identity reset"
       },
+      "finish_reset": "Finish reset",
       "heading": "Reset your identity in case you can't confirm another way",
+      "start_reset": "Start reset",
       "success": {
         "description": "The identity reset has been approved for the next {{minutes}} minutes. You can close this window and go back to the app to continue.",
         "heading": "Identity reset successfully. Go back to the app to finish the process."

frontend/src/@types/i18next.d.ts

@@ -5,15 +5,15 @@
 // Please see LICENSE in the repository root for full details.
 
 import "i18next";
-import type frontend from "../../locales/en.json";
+import type translation from "../../locales/en.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {
     keySeparator: ".";
     pluralSeparator: ":";
-    defaultNS: "frontend";
+    defaultNS: "translation";
     resources: {
-      frontend: typeof frontend;
+      translation: typeof translation;
     };
   }
 }

frontend/src/components/ButtonLink.module.css

@@ -0,0 +1,13 @@
+/* Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * Please see LICENSE in the repository root for full details.
+ */
+
+/* The weird selector is to have higher specificity than compound-web's button-link */
+a.button-link[href] {
+  /** This is to undo the following rule in compound-web:
+   * https://github.com/element-hq/compound-web/blob/6ccb4b6049f3bc8e9739d9452c850ed3c7de49f9/src/components/Button/Button.module.css#L31-L34
+   */
+  inline-size: initial;
+}

frontend/src/components/ButtonLink.tsx

@@ -6,22 +6,31 @@
 
 import { createLink } from "@tanstack/react-router";
 import { Button } from "@vector-im/compound-web";
+import cx from "classnames";
 import { type PropsWithChildren, forwardRef } from "react";
+import styles from "./ButtonLink.module.css";
 
 type Props = {
   kind?: "primary" | "secondary" | "tertiary";
   size?: "sm" | "lg";
   Icon?: React.ComponentType<React.SVGAttributes<SVGElement>>;
   destructive?: boolean;
   disabled?: boolean;
+  className?: string;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>;
 
 export const ButtonLink = createLink(
   forwardRef<HTMLAnchorElement, PropsWithChildren<Props>>(
-    ({ children, ...props }, ref) => {
+    ({ children, className, ...props }, ref) => {
       const disabled = !!props.disabled || !!props["aria-disabled"] || false;
       return (
-        <Button as="a" {...props} disabled={disabled} ref={ref}>
+        <Button
+          as="a"
+          {...props}
+          className={cx(styles.buttonLink, className)}
+          disabled={disabled}
+          ref={ref}
+        >
           {children}
         </Button>
       );

frontend/src/components/SessionDetail/__snapshots__/CompatSessionDetail.test.tsx.snap

@@ -133,7 +133,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               See your profile info and contact details
             </p>
@@ -154,7 +154,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               View your existing messages and data
             </p>
@@ -177,7 +177,7 @@ exports[`<CompatSessionDetail> > renders a compatability session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               Send new messages on your behalf
             </p>
@@ -393,7 +393,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               See your profile info and contact details
             </p>
@@ -414,7 +414,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               View your existing messages and data
             </p>
@@ -437,7 +437,7 @@ exports[`<CompatSessionDetail> > renders a compatability session without an ssoL
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               Send new messages on your behalf
             </p>
@@ -622,7 +622,7 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               See your profile info and contact details
             </p>
@@ -643,7 +643,7 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               View your existing messages and data
             </p>
@@ -666,7 +666,7 @@ exports[`<CompatSessionDetail> > renders a finished compatability session detail
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               Send new messages on your behalf
             </p>

frontend/src/components/SessionDetail/__snapshots__/OAuth2SessionDetail.test.tsx.snap

@@ -147,7 +147,7 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               See your profile info and contact details
             </p>
@@ -168,7 +168,7 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               View your existing messages and data
             </p>
@@ -191,7 +191,7 @@ exports[`<OAuth2SessionDetail> > renders a finished session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               Send new messages on your behalf
             </p>
@@ -394,7 +394,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               See your profile info and contact details
             </p>
@@ -415,7 +415,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               View your existing messages and data
             </p>
@@ -438,7 +438,7 @@ exports[`<OAuth2SessionDetail> > renders session details 1`] = `
               />
             </svg>
             <p
-              class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69"
+              class="_typography_yh5dq_162 _font-body-md-regular_yh5dq_59"
             >
               Send new messages on your behalf
             </p>

frontend/src/components/VisualList/VisualList.module.css

@@ -14,7 +14,7 @@
 }
 
 .item {
-  background: var(--cpd-color-bg-subtle-secondary);
+  background: var(--cpd-color-bg-action-secondary-hovered);
   padding: var(--cpd-space-3x) var(--cpd-space-5x);
   display: flex;
   align-items: center;

frontend/src/components/VisualList/VisualList.tsx

@@ -30,9 +30,7 @@ export const VisualListItem: FC<{
   return (
     <li className={styles.item}>
       <Icon color={iconColor ?? "var(--cpd-color-icon-tertiary)"} />
-      <Text size="md" weight="medium">
-        {label}
-      </Text>
+      <Text size="md">{label}</Text>
     </li>
   );
 };

frontend/src/i18n.ts

@@ -89,7 +89,7 @@ i18n
     fallbackLng: "en",
     keySeparator: ".",
     pluralSeparator: ":",
-    defaultNS: "frontend",
+    defaultNS: "translation",
     supportedLngs,
     interpolation: {
       escapeValue: false, // React has built-in XSS protections

frontend/src/i18n/password_changes.ts

@@ -21,7 +21,7 @@ import { SetPasswordStatus } from "../gql/graphql";
  * Throws an error if the status is not known.
  */
 export function translateSetPasswordError(
-  t: TFunction<"frontend", undefined>,
+  t: TFunction,
   status: SetPasswordStatus | undefined,
 ): string | undefined {
   switch (status) {