Amalgamate duplicated CSS files

res/css/_components.pcss

@@ -358,10 +358,9 @@
 @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/_DestructiveComponent.pcss";
 @import "./views/settings/encryption/_EncryptionCard.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/_DestructiveComponent.pcss

@@ -5,8 +5,11 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-.mx_DeleteKeyStoragePanel {
-    .mx_DeleteKeyStoragePanel_content {
+/**
+ * Shared by multiple components that confirm a destructive action in the user settings dialog.
+ */
+.mx_DestructiveComponent {
+    .mx_DestructiveComponent_content {
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-3x);
@@ -17,7 +20,7 @@
         }
     }
 
-    .mx_DeleteKeyStoragePanel_footer {
+    .mx_DestructiveComponent_footer {
         display: flex;
         flex-direction: column;
         gap: var(--cpd-space-4x);

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

@@ -1,26 +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;
-        }
-    }
-
-    .mx_ResetIdentityPanel_footer {
-        display: flex;
-        flex-direction: column;
-        gap: var(--cpd-space-4x);
-        justify-content: center;
-    }
-}

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

@@ -51,9 +51,9 @@ export function DeleteKeyStoragePanel({ onFinish }: Props): JSX.Element {
                 Icon={ErrorIcon}
                 destructive={true}
                 title={_t("settings|encryption|delete_key_storage|title")}
-                className="mx_DeleteKeyStoragePanel"
+                className="mx_DestructiveComponent"
             >
-                <div className="mx_DeleteKeyStoragePanel_content">
+                <div className="mx_DestructiveComponent_content">
                     {_t("settings|encryption|delete_key_storage|description")}
                     <VisualList>
                         <VisualListItem Icon={CrossIcon} destructive={true}>
@@ -64,7 +64,7 @@ export function DeleteKeyStoragePanel({ onFinish }: Props): JSX.Element {
                         </VisualListItem>
                     </VisualList>
                 </div>
-                <div className="mx_DeleteKeyStoragePanel_footer">
+                <div className="mx_DestructiveComponent_footer">
                     <Button destructive={true} onClick={onDeleteClick} disabled={busy}>
                         {_t("settings|encryption|delete_key_storage|confirm")}
                     </Button>

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

@@ -58,9 +58,9 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                         ? _t("settings|encryption|advanced|breadcrumb_title_forgot")
                         : _t("settings|encryption|advanced|breadcrumb_title")
                 }
-                className="mx_ResetIdentityPanel"
+                className="mx_DestructiveComponent"
             >
-                <div className="mx_ResetIdentityPanel_content">
+                <div className="mx_DestructiveComponent_content">
                     <VisualList>
                         <VisualListItem Icon={CheckIcon} success={true}>
                             {_t("settings|encryption|advanced|breadcrumb_first_description")}
@@ -74,7 +74,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                     </VisualList>
                     {variant === "compromised" && <span>{_t("settings|encryption|advanced|breadcrumb_warning")}</span>}
                 </div>
-                <div className="mx_ResetIdentityPanel_footer">
+                <div className="mx_DestructiveComponent_footer">
                     <Button
                         destructive={true}
                         onClick={async (evt) => {