From e8954f08ce2a520a30805b2a6134f2ebec2c599b Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 20 Feb 2025 13:20:49 +0000 Subject: [PATCH] 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. --- res/css/_components.pcss | 2 +- .../_EncryptionCardEmphasisedContent.pcss | 13 +++++++++ .../encryption/_ResetIdentityPanel.pcss | 19 ------------- src/components/utils/Flex.tsx | 2 +- .../EncryptionCardEmphasisedContent.tsx | 27 +++++++++++++++++++ .../encryption/ResetIdentityPanel.tsx | 6 ++--- .../ResetIdentityPanel-test.tsx.snap | 10 ++++--- .../EncryptionUserSettingsTab-test.tsx.snap | 5 ++-- 8 files changed, 54 insertions(+), 30 deletions(-) create mode 100644 res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss delete mode 100644 res/css/views/settings/encryption/_ResetIdentityPanel.pcss create mode 100644 src/components/views/settings/encryption/EncryptionCardEmphasisedContent.tsx diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 18ea44db5c..a6adf430d9 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -360,8 +360,8 @@ @import "./views/settings/encryption/_AdvancedPanel.pcss"; @import "./views/settings/encryption/_ChangeRecoveryKey.pcss"; @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"; diff --git a/res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss b/res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss new file mode 100644 index 0000000000..6b18fcff65 --- /dev/null +++ b/res/css/views/settings/encryption/_EncryptionCardEmphasisedContent.pcss @@ -0,0 +1,13 @@ +/* + * 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_EncryptionCard_emphasisedContent { + span { + font: var(--cpd-font-body-md-medium); + text-align: center; + } +} diff --git a/res/css/views/settings/encryption/_ResetIdentityPanel.pcss b/res/css/views/settings/encryption/_ResetIdentityPanel.pcss deleted file mode 100644 index 1933351337..0000000000 --- a/res/css/views/settings/encryption/_ResetIdentityPanel.pcss +++ /dev/null @@ -1,19 +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; - } - } -} diff --git a/src/components/utils/Flex.tsx b/src/components/utils/Flex.tsx index 01f8022193..ca085a0a52 100644 --- a/src/components/utils/Flex.tsx +++ b/src/components/utils/Flex.tsx @@ -33,7 +33,7 @@ type FlexProps + {children} + + ); +} diff --git a/src/components/views/settings/encryption/ResetIdentityPanel.tsx b/src/components/views/settings/encryption/ResetIdentityPanel.tsx index c445ce1d8c..7b3b84c6b8 100644 --- a/src/components/views/settings/encryption/ResetIdentityPanel.tsx +++ b/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" > -
+ {_t("settings|encryption|advanced|breadcrumb_first_description")} @@ -74,7 +74,7 @@ export function ResetIdentityPanel({ onCancelClick, onFinish, variant }: ResetId {variant === "compromised" && {_t("settings|encryption|advanced|breadcrumb_warning")}} -
+