Make the encryption card more configurable:

- Change the icon
- Can set the destructive props

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

@@ -18,6 +18,7 @@ import {
     TextControl,
 } from "@vector-im/compound-web";
 import CopyIcon from "@vector-im/compound-design-tokens/assets/web/icons/copy";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../../languageHandler";
@@ -132,7 +133,12 @@ export function ChangeRecoveryKey({
                 pages={pages}
                 onPageClick={onCancelClick}
             />
-            <EncryptionCard title={labels.title} description={labels.description} className="mx_ChangeRecoveryKey">
+            <EncryptionCard
+                Icon={KeyIcon}
+                title={labels.title}
+                description={labels.description}
+                className="mx_ChangeRecoveryKey"
+            >
                 {content}
             </EncryptionCard>
         </>

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

@@ -5,9 +5,8 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-import React, { JSX, PropsWithChildren } from "react";
+import React, { JSX, PropsWithChildren, ComponentType, SVGAttributes } from "react";
 import { BigIcon, Heading } from "@vector-im/compound-web";
-import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
 import classNames from "classnames";
 
 interface EncryptionCardProps {
@@ -22,7 +21,15 @@ interface EncryptionCardProps {
     /**
      * The description of the card.
      */
-    description: string;
+    description?: string;
+    /**
+     * Whether this icon shows a destructive action.
+     */
+    destructive?: boolean;
+    /**
+     * The icon to display.
+     */
+    Icon: ComponentType<SVGAttributes<SVGElement>>;
 }
 
 /**
@@ -32,18 +39,20 @@ export function EncryptionCard({
     title,
     description,
     className,
+    destructive = false,
+    Icon,
     children,
 }: PropsWithChildren<EncryptionCardProps>): JSX.Element {
     return (
         <div className={classNames("mx_EncryptionCard", className)}>
             <div className="mx_EncryptionCard_header">
-                <BigIcon>
+                <BigIcon destructive={destructive}>
-                    <KeyIcon />
+                    <Icon />
                 </BigIcon>
                 <Heading as="h2" size="sm" weight="semibold">
                     {title}
                 </Heading>
-                <span>{description}</span>
+                {description && <span>{description}</span>}
             </div>
             {children}
         </div>

test/unit-tests/components/views/settings/encryption/EncryptionCard-test.tsx

@@ -7,13 +7,14 @@
 
 import React from "react";
 import { render } from "jest-matrix-react";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
 
 import { EncryptionCard } from "../../../../../../src/components/views/settings/encryption/EncryptionCard";
 
 describe("<EncryptionCard />", () => {
     it("should render", () => {
         const { asFragment } = render(
-            <EncryptionCard title="My title" description="My description">
+            <EncryptionCard Icon={KeyIcon} title="My title" description="My description">
                 Encryption card children
             </EncryptionCard>,
         );