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.

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}