Use a CSS class and compound variable

Author: richvdh

res/css/_components.pcss

@@ -362,6 +362,7 @@
 @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/_ResetIdentityPanel.pcss

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+// Red text for the "Do not close this window" warning
+.mx_ResetIdentityPanel_warning {
+    color: var(--cpd-color-text-critical-primary);
+}

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

@@ -101,7 +101,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId
                     </Button>
                     {inProgress ? (
                         <EncryptionCardEmphasisedContent>
-                            <span className="text-warning">
+                            <span className="mx_ResetIdentityPanel_warning">
                                 {_t("settings|encryption|advanced|do_not_close_warning")}
                             </span>
                         </EncryptionCardEmphasisedContent>