Use semantic headings in user settings Security

res/css/views/settings/_CryptographyPanel.pcss

@@ -32,13 +32,9 @@ limitations under the License.
     }
 }
 
-.mx_CryptographyPanel_importExportButtons .mx_AccessibleButton {
-    margin-right: 10px;
-}
-
 .mx_CryptographyPanel_importExportButtons {
-    margin-bottom: 15px;
     display: inline-flex;
     flex-flow: wrap;
-    row-gap: 10px;
+    row-gap: $spacing-8;
+    column-gap: $spacing-8;
 }

res/css/views/settings/tabs/_SettingsTab.pcss

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_SettingsTab {
-    --SettingsTab_section-margin-bottom-preferences-labs: 30px;
     --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
     --SettingsTab_fullWidthField-margin-inline-end: 100px;
     --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */

res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss

@@ -14,43 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityUserSettingsTab_bulkOptions .mx_AccessibleButton {
-    margin-right: 10px;
+.mx_SecurityUserSettingsTab_bulkOptions {
+    display: flex;
+    flex-direction: row;
+    column-gap: $spacing-8;
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser {
-    margin-bottom: 5px;
+    margin-bottom: $spacing-4;
 }
 
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
-    margin-right: 10px;
+    margin-right: $spacing-8;
 }
 
-.mx_SecurityUserSettingsTab {
-    .mx_SettingsTab_section {
-        .mx_AccessibleButton_kind_link {
-            font-size: inherit;
-        }
-    }
-
-    .mx_SecurityUserSettingsTab_warning {
-        color: $alert;
-        position: relative;
-        padding-left: 40px;
-        margin-top: 30px;
-
-        &::before {
-            mask-repeat: no-repeat;
-            mask-position: 0 center;
-            mask-size: $font-24px;
-            position: absolute;
-            width: $font-24px;
-            height: $font-24px;
-            content: "";
-            top: 0;
-            left: 0;
-            background-color: $alert;
-            mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
-        }
+.mx_SecurityUserSettingsTab_warning {
+    color: $alert;
+    position: relative;
+    padding-left: 40px;
+
+    &::before {
+        mask-repeat: no-repeat;
+        mask-position: 0 center;
+        mask-size: $font-24px;
+        position: absolute;
+        width: $font-24px;
+        height: $font-24px;
+        content: "";
+        top: 0;
+        left: 0;
+        background-color: $alert;
+        mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
     }
 }

src/components/views/settings/CrossSigningPanel.tsx

@@ -28,6 +28,7 @@ import ConfirmDestroyCrossSigningDialog from "../dialogs/security/ConfirmDestroy
 import SetupEncryptionDialog from "../dialogs/security/SetupEncryptionDialog";
 import { accessSecretStorage } from "../../../SecurityManager";
 import AccessibleButton from "../elements/AccessibleButton";
+import { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 interface IState {
     error?: Error;
@@ -178,22 +179,38 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
         if (homeserverSupportsCrossSigning === undefined) {
             summarisedStatus = <Spinner />;
         } else if (!homeserverSupportsCrossSigning) {
-            summarisedStatus = <p>{_t("Your homeserver does not support cross-signing.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    {_t("Your homeserver does not support cross-signing.")}
+                </SettingsSubsectionText>
+            );
         } else if (crossSigningReady && crossSigningPrivateKeysInStorage) {
-            summarisedStatus = <p>✅ {_t("Cross-signing is ready for use.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    ✅ {_t("Cross-signing is ready for use.")}
+                </SettingsSubsectionText>
+            );
         } else if (crossSigningReady && !crossSigningPrivateKeysInStorage) {
-            summarisedStatus = <p>⚠️ {_t("Cross-signing is ready but keys are not backed up.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    ⚠️ {_t("Cross-signing is ready but keys are not backed up.")}
+                </SettingsSubsectionText>
+            );
         } else if (crossSigningPrivateKeysInStorage) {
             summarisedStatus = (
-                <p>
+                <SettingsSubsectionText data-testid="summarised-status">
                     {_t(
                         "Your account has a cross-signing identity in secret storage, " +
                             "but it is not yet trusted by this session.",
                     )}
-                </p>
+                </SettingsSubsectionText>
             );
         } else {
-            summarisedStatus = <p>{_t("Cross-signing is not set up.")}</p>;
+            summarisedStatus = (
+                <SettingsSubsectionText data-testid="summarised-status">
+                    {_t("Cross-signing is not set up.")}
+                </SettingsSubsectionText>
+            );
         }
 
         const keysExistAnywhere =
@@ -238,7 +255,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
         }
 
         return (
-            <div>
+            <>
                 {summarisedStatus}
                 <details>
                     <summary>{_t("Advanced")}</summary>
@@ -275,7 +292,7 @@ export default class CrossSigningPanel extends React.PureComponent<{}, IState> {
                 </details>
                 {errorSection}
                 {actionRow}
-            </div>
+            </>
         );
     }
 }

src/components/views/settings/CryptographyPanel.tsx

@@ -26,6 +26,7 @@ import * as FormattingUtils from "../../../utils/FormattingUtils";
 import SettingsStore from "../../../settings/SettingsStore";
 import SettingsFlag from "../elements/SettingsFlag";
 import { SettingLevel } from "../../../settings/SettingLevel";
+import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 interface IProps {}
 
@@ -72,27 +73,28 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
         }
 
         return (
-            <div className="mx_SettingsTab_section mx_CryptographyPanel">
-                <span className="mx_SettingsTab_subheading">{_t("Cryptography")}</span>
-                <table className="mx_SettingsTab_subsectionText mx_CryptographyPanel_sessionInfo">
-                    <tr>
-                        <th scope="row">{_t("Session ID:")}</th>
-                        <td>
-                            <code>{deviceId}</code>
-                        </td>
-                    </tr>
-                    <tr>
-                        <th scope="row">{_t("Session key:")}</th>
-                        <td>
-                            <code>
-                                <b>{identityKey}</b>
-                            </code>
-                        </td>
-                    </tr>
-                </table>
+            <SettingsSubsection heading={_t("Cryptography")}>
+                <SettingsSubsectionText>
+                    <table className="mx_CryptographyPanel_sessionInfo">
+                        <tr>
+                            <th scope="row">{_t("Session ID:")}</th>
+                            <td>
+                                <code>{deviceId}</code>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th scope="row">{_t("Session key:")}</th>
+                            <td>
+                                <code>
+                                    <b>{identityKey}</b>
+                                </code>
+                            </td>
+                        </tr>
+                    </table>
+                </SettingsSubsectionText>
                 {importExportButtons}
                 {noSendUnverifiedSetting}
-            </div>
+            </SettingsSubsection>
         );
     }
 

src/components/views/settings/E2eAdvancedPanel.tsx

@@ -20,21 +20,20 @@ import { _t } from "../../../languageHandler";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import SettingsStore from "../../../settings/SettingsStore";
 import SettingsFlag from "../elements/SettingsFlag";
+import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 const SETTING_MANUALLY_VERIFY_ALL_SESSIONS = "e2ee.manuallyVerifyAllSessions";
 
 const E2eAdvancedPanel: React.FC = () => {
     return (
-        <div className="mx_SettingsTab_section">
-            <span className="mx_SettingsTab_subheading">{_t("Encryption")}</span>
-
+        <SettingsSubsection heading={_t("Encryption")}>
             <SettingsFlag name={SETTING_MANUALLY_VERIFY_ALL_SESSIONS} level={SettingLevel.DEVICE} />
-            <div className="mx_SettingsTab_subsectionText">
+            <SettingsSubsectionText>
                 {_t(
                     "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.",
                 )}
-            </div>
-        </div>
+            </SettingsSubsectionText>
+        </SettingsSubsection>
     );
 };
 

src/components/views/settings/EventIndexPanel.tsx

@@ -27,6 +27,7 @@ import { SettingLevel } from "../../../settings/SettingLevel";
 import SeshatResetDialog from "../dialogs/SeshatResetDialog";
 import InlineSpinner from "../elements/InlineSpinner";
 import ExternalLink from "../elements/ExternalLink";
+import { SettingsSubsectionText } from "./shared/SettingsSubsection";
 
 interface IState {
     enabling: boolean;
@@ -145,8 +146,8 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
 
         if (EventIndexPeg.get() !== null) {
             eventIndexingSettings = (
-                <div>
-                    <div className="mx_SettingsTab_subsectionText">
+                <>
+                    <SettingsSubsectionText>
                         {_t(
                             "Securely cache encrypted messages locally for them " +
                                 "to appear in search results, using %(size)s to store messages from %(rooms)s rooms.",
@@ -158,27 +159,25 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                                 rooms: formatCountLong(this.state.roomCount),
                             },
                         )}
-                    </div>
-                    <div>
-                        <AccessibleButton kind="primary" onClick={this.onManage}>
-                            {_t("Manage")}
-                        </AccessibleButton>
-                    </div>
-                </div>
+                    </SettingsSubsectionText>
+                    <AccessibleButton kind="primary" onClick={this.onManage}>
+                        {_t("Manage")}
+                    </AccessibleButton>
+                </>
             );
         } else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
             eventIndexingSettings = (
-                <div>
-                    <div className="mx_SettingsTab_subsectionText">
+                <>
+                    <SettingsSubsectionText>
                         {_t("Securely cache encrypted messages locally for them to appear in search results.")}
-                    </div>
+                    </SettingsSubsectionText>
                     <div>
                         <AccessibleButton kind="primary" disabled={this.state.enabling} onClick={this.onEnable}>
                             {_t("Enable")}
                         </AccessibleButton>
                         {this.state.enabling ? <InlineSpinner /> : <div />}
                     </div>
-                </div>
+                </>
             );
         } else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
             const nativeLink =
@@ -187,7 +186,7 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                 "adding-seshat-for-search-in-e2e-encrypted-rooms";
 
             eventIndexingSettings = (
-                <div className="mx_SettingsTab_subsectionText">
+                <SettingsSubsectionText>
                     {_t(
                         "%(brand)s is missing some components required for securely " +
                             "caching encrypted messages locally. If you'd like to " +
@@ -204,11 +203,11 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                             ),
                         },
                     )}
-                </div>
+                </SettingsSubsectionText>
             );
         } else if (!EventIndexPeg.platformHasSupport()) {
             eventIndexingSettings = (
-                <div className="mx_SettingsTab_subsectionText">
+                <SettingsSubsectionText>
                     {_t(
                         "%(brand)s can't securely cache encrypted messages locally " +
                             "while running in a web browser. Use <desktopLink>%(brand)s Desktop</desktopLink> " +
@@ -228,24 +227,28 @@ export default class EventIndexPanel extends React.Component<{}, IState> {
                             ),
                         },
                     )}
-                </div>
+                </SettingsSubsectionText>
             );
         } else {
             eventIndexingSettings = (
-                <div className="mx_SettingsTab_subsectionText">
-                    <p>{this.state.enabling ? <InlineSpinner /> : _t("Message search initialisation failed")}</p>
+                <>
+                    <SettingsSubsectionText>
+                        {this.state.enabling ? <InlineSpinner /> : _t("Message search initialisation failed")}
+                    </SettingsSubsectionText>
                     {EventIndexPeg.error && (
-                        <details>
-                            <summary>{_t("Advanced")}</summary>
-                            <code>{EventIndexPeg.error.message}</code>
-                            <p>
-                                <AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
-                                    {_t("Reset")}
-                                </AccessibleButton>
-                            </p>
-                        </details>
+                        <SettingsSubsectionText>
+                            <details>
+                                <summary>{_t("Advanced")}</summary>
+                                <code>{EventIndexPeg.error.message}</code>
+                                <p>
+                                    <AccessibleButton key="delete" kind="danger" onClick={this.confirmEventStoreReset}>
+                                        {_t("Reset")}
+                                    </AccessibleButton>
+                                </p>
+                            </details>
+                        </SettingsSubsectionText>
                     )}
-                </div>
+                </>
             );
         }