From 0f17f876d6b5f4b7481717d73ee9e40461000288 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Mon, 19 Jun 2023 08:08:48 +0000
Subject: [PATCH] Fix style inconsistency on SecureBackupPanel (#11102)

---
 src/components/views/settings/SecureBackupPanel.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/views/settings/SecureBackupPanel.tsx b/src/components/views/settings/SecureBackupPanel.tsx
index aabb1cb90c0..80f756a30f5 100644
--- a/src/components/views/settings/SecureBackupPanel.tsx
+++ b/src/components/views/settings/SecureBackupPanel.tsx
@@ -240,14 +240,20 @@ export default class SecureBackupPanel extends React.PureComponent<{}, IState> {
         let extraDetails: JSX.Element | undefined;
         const actions: JSX.Element[] = [];
         if (error) {
-            statusDescription = <div className="error">{_t("Unable to load key backup status")}</div>;
+            statusDescription = (
+                <SettingsSubsectionText className="error">
+                    {_t("Unable to load key backup status")}
+                </SettingsSubsectionText>
+            );
         } else if (loading) {
             statusDescription = <Spinner />;
         } else if (backupInfo) {
             let restoreButtonCaption = _t("Restore from Backup");
 
             if (MatrixClientPeg.safeGet().getKeyBackupEnabled()) {
-                statusDescription = <p>✅ {_t("This session is backing up your keys.")}</p>;
+                statusDescription = (
+                    <SettingsSubsectionText>✅ {_t("This session is backing up your keys.")}</SettingsSubsectionText>
+                );
             } else {
                 statusDescription = (
                     <>