Copy css to its own file

res/css/_components.pcss

@@ -358,6 +358,7 @@
 @import "./views/settings/_UserProfileSettings.pcss";
 @import "./views/settings/encryption/_AdvancedPanel.pcss";
 @import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
+@import "./views/settings/encryption/_DeleteKeyStoragePanel.pcss";
 @import "./views/settings/encryption/_EncryptionCard.pcss";
 @import "./views/settings/encryption/_RecoveryPanelOutOfSync.pcss";
 @import "./views/settings/encryption/_ResetIdentityPanel.pcss";

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

@@ -0,0 +1,26 @@
+/*
+ * 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_DeleteKeyStoragePanel {
+    .mx_DeleteKeyStoragePanel_content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-3x);
+
+        > span {
+            font: var(--cpd-font-body-md-medium);
+            text-align: center;
+        }
+    }
+
+    .mx_DeleteKeyStoragePanel_footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        justify-content: center;
+    }
+}

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

@@ -15,14 +15,14 @@ import { EncryptionCard } from "./EncryptionCard";
 import { useKeyStoragePanelViewModel } from "../../../viewmodels/settings/encryption/KeyStoragePanelViewModel";
 import SdkConfig from "../../../../SdkConfig";
 
-interface ResetIdentityPanelProps {
+interface Props {
     onFinish: () => void;
 }
 
 /**
  * Confirms that the user really wants to turn off and delete their key storage
  */
-export function DeleteKeyStoragePanel({ onFinish }: ResetIdentityPanelProps): JSX.Element {
+export function DeleteKeyStoragePanel({ onFinish }: Props): JSX.Element {
     const { setEnabled } = useKeyStoragePanelViewModel();
     const [busy, setBusy] = useState(false);
 
@@ -48,9 +48,9 @@ export function DeleteKeyStoragePanel({ onFinish }: ResetIdentityPanelProps): JS
                 Icon={ErrorIcon}
                 destructive={true}
                 title={_t("settings|encryption|delete_key_storage|title")}
-                className="mx_ResetIdentityPanel"
+                className="mx_DeleteKeyStoragePanel"
             >
-                <div className="mx_ResetIdentityPanel_content">
+                <div className="mx_DeleteKeyStoragePanel_content">
                     {_t("settings|encryption|delete_key_storage|description")}
                     <VisualList>
                         <VisualListItem Icon={CrossIcon} destructive={true}>
@@ -61,7 +61,7 @@ export function DeleteKeyStoragePanel({ onFinish }: ResetIdentityPanelProps): JS
                         </VisualListItem>
                     </VisualList>
                 </div>
-                <div className="mx_ResetIdentityPanel_footer">
+                <div className="mx_DeleteKeyStoragePanel_footer">
                     <Button destructive={true} onClick={onDeleteClick} disabled={busy}>
                         {_t("settings|encryption|delete_key_storage|confirm")}
                     </Button>