Move CSS for ResetIdentityPanel into EncryptionCard (#29311)

* Move CSS for ResetIdentityPanel into EncryptionCard

This allows it to be re-used in other components. It's a *bit* magic
that EncryptionCard applies style to divs within it, although it
somewhat makes sense that it wants them styled a particular way.
The alternative would be to add another component for a div child of
encryption card like EncryptionCardButtons that just makes it flexbox
and centered: I'm not sure which is better.

* Update snapshot

* Update snapshot

* Do it the other way

Because we only want it in the destructive cards, not the other ones.

* Use flex component

* Also use gap prop and update snapshots

* Fix justification

* Snaspshots again

* Set align-items to normal

As center affected the list items too. Also add it to the flex
component because it didn't have it as an option.

res/css/_components.pcss

@@ -360,8 +360,8 @@
 @import "./views/settings/encryption/_AdvancedPanel.pcss";
 @import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
 @import "./views/settings/encryption/_EncryptionCard.pcss";
+@import "./views/settings/encryption/_EncryptionCardEmphasisedContent.pcss";
 @import "./views/settings/encryption/_RecoveryPanelOutOfSync.pcss";
-@import "./views/settings/encryption/_ResetIdentityPanel.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EncryptionCard_emphasisedContent {
+    span {
+        font: var(--cpd-font-body-md-medium);
+        text-align: center;
+    }
+}

res/css/views/settings/encryption/_ResetIdentityPanel.pcss

@@ -1,19 +0,0 @@
-/*
- * Copyright 2024 New Vector Ltd.
- *
- * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
- * Please see LICENSE files in the repository root for full details.
- */
-
-.mx_ResetIdentityPanel {
-    .mx_ResetIdentityPanel_content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cpd-space-3x);
-
-        > span {
-            font: var(--cpd-font-body-md-medium);
-            text-align: center;
-        }
-    }
-}

src/components/utils/Flex.tsx

@@ -33,7 +33,7 @@ type FlexProps<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any
      * The alignment of the flex children
      * @default start
      */
-    align?: "start" | "center" | "end" | "baseline" | "stretch";
+    align?: "start" | "center" | "end" | "baseline" | "stretch" | "normal";
     /**
      * The justification of the flex children
      * @default start

src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type PropsWithChildren } from "react";
+
+import { Flex } from "../../../utils/Flex";
+
+/**
+ * A component for emphasised text within an {@link EncryptionCard}
+ * (mostly as somewhere for the common CSS to live).
+ */
+export function EncryptionCardEmphasisedContent({ children }: PropsWithChildren): JSX.Element {
+    return (
+        <Flex
+            direction="column"
+            gap="var(--cpd-space-3x)"
+            align="normal"
+            className="mx_EncryptionCard_emphasisedContent"
+        >
+            {children}
+        </Flex>
+    );
+}

src/components/views/settings/encryption/ResetIdentityPanel.tsx

@@ -16,6 +16,7 @@ import { EncryptionCard } from "./EncryptionCard";
 import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
 import { uiAuthCallback } from "../../../../CreateCrossSigning";
 import { EncryptionCardButtons } from "./EncryptionCardButtons";
+import { EncryptionCardEmphasisedContent } from "./EncryptionCardEmphasisedContent";
 
 interface ResetIdentityPanelProps {
     /**
@@ -59,9 +60,8 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                         ? _t("settings|encryption|advanced|breadcrumb_title_forgot")
                         : _t("settings|encryption|advanced|breadcrumb_title")
                 }
-                className="mx_ResetIdentityPanel"
             >
-                <div className="mx_ResetIdentityPanel_content">
+                <EncryptionCardEmphasisedContent>
                     <VisualList>
                         <VisualListItem Icon={CheckIcon} success={true}>
                             {_t("settings|encryption|advanced|breadcrumb_first_description")}
@@ -74,7 +74,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                         </VisualListItem>
                     </VisualList>
                     {variant === "compromised" && <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span>}
-                </div>
+                </EncryptionCardEmphasisedContent>
                 <EncryptionCardButtons>
                     <Button
                         destructive={true}

test/unit-tests/components/views/settings/encryption/__snapshots__/ResetIdentityPanel-test.tsx.snap

@@ -55,7 +55,7 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
     </ol>
   </nav>
   <div
-    class="mx_EncryptionCard mx_ResetIdentityPanel"
+    class="mx_EncryptionCard"
   >
     <div
       class="mx_EncryptionCard_header"
@@ -83,7 +83,8 @@ exports[`<ResetIdentityPanel /> should display the 'forgot recovery key' variant
       </h2>
     </div>
     <div
-      class="mx_ResetIdentityPanel_content"
+      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
       <ul
         class="_visual-list_4dcf8_17"
@@ -235,7 +236,7 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
     </ol>
   </nav>
   <div
-    class="mx_EncryptionCard mx_ResetIdentityPanel"
+    class="mx_EncryptionCard"
   >
     <div
       class="mx_EncryptionCard_header"
@@ -263,7 +264,8 @@ exports[`<ResetIdentityPanel /> should reset the encryption when the continue bu
       </h2>
     </div>
     <div
-      class="mx_ResetIdentityPanel_content"
+      class="mx_Flex mx_EncryptionCard_emphasisedContent"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
     >
       <ul
         class="_visual-list_4dcf8_17"

test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap

@@ -226,7 +226,7 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
         </ol>
       </nav>
       <div
-        class="mx_EncryptionCard mx_ResetIdentityPanel"
+        class="mx_EncryptionCard"
       >
         <div
           class="mx_EncryptionCard_header"
@@ -254,7 +254,8 @@ exports[`<EncryptionUserSettingsTab /> should display the reset identity panel w
           </h2>
         </div>
         <div
-          class="mx_ResetIdentityPanel_content"
+          class="mx_Flex mx_EncryptionCard_emphasisedContent"
+          style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: normal; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
         >
           <ul
             class="_visual-list_4dcf8_17"