Use semantic headings in space preferences (#11021)

* remove mx_SettingsTab_heading style

* use semantic headings in space preferences dialog

* remove unused settings style: mx_SettingsTab_subheading

Author: Kerry

res/css/views/dialogs/_SpacePreferencesDialog.pcss

@@ -31,16 +31,6 @@ limitations under the License.
 
         .mx_SettingsTab {
             min-width: unset;
-
-            .mx_SettingsTab_section {
-                font-size: $font-15px;
-                line-height: $font-24px;
-
-                .mx_Checkbox + p {
-                    color: $secondary-content;
-                    margin: 0 20px 0 24px;
-                }
-            }
         }
     }
 }

res/css/views/dialogs/_SpaceSettingsDialog.pcss

@@ -37,12 +37,6 @@ limitations under the License.
             margin-bottom: 20px;
         }
 
-        & + .mx_SettingsTab_subheading {
-            border-top: 1px solid $menu-border-color;
-            margin-top: 0;
-            padding-top: 24px;
-        }
-
         .mx_StyledRadioButton {
             margin-top: 8px;
             margin-bottom: 4px;

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

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_SettingsTab {
-    --SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
     --SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
 
     color: $primary-content;
@@ -47,29 +46,6 @@ limitations under the License.
     color: $alert;
 }
 
-.mx_SettingsTab_heading {
-    font-size: $font-20px;
-    font-weight: var(--font-semi-bold);
-    color: $primary-content;
-    margin-top: 10px; /* TODO: Use a spacing variable */
-    margin-bottom: 10px; /* TODO: Use a spacing variable */
-    margin-right: 100px; /* TODO: Use a spacing variable */
-
-    &:nth-child(n + 2) {
-        margin-top: var(--SettingsTab_heading_nth_child-margin-top);
-    }
-}
-
-.mx_SettingsTab_subheading {
-    font-size: $font-16px;
-    display: block;
-    font-weight: var(--font-semi-bold);
-    color: $primary-content;
-    margin-top: $spacing-12;
-    margin-bottom: 10px; /* TODO: Use a spacing variable */
-    margin-right: 100px; /* TODO: Use a spacing variable */
-}
-
 .mx_SettingsTab_subsectionText {
     color: $secondary-content;
     font-size: $font-14px;

src/components/views/dialogs/SpacePreferencesDialog.tsx

@@ -27,6 +27,9 @@ import { SettingLevel } from "../../../settings/SettingLevel";
 import RoomName from "../elements/RoomName";
 import { SpacePreferenceTab } from "../../../dispatcher/payloads/OpenSpacePreferencesPayload";
 import { NonEmptyArray } from "../../../@types/common";
+import SettingsTab from "../settings/tabs/SettingsTab";
+import { SettingsSection } from "../settings/shared/SettingsSection";
+import SettingsSubsection, { SettingsSubsectionText } from "../settings/shared/SettingsSubsection";
 
 interface IProps {
     space: Room;
@@ -38,34 +41,34 @@ const SpacePreferencesAppearanceTab: React.FC<Pick<IProps, "space">> = ({ space
     const showPeople = useSettingValue("Spaces.showPeopleInSpace", space.roomId);
 
     return (
-        <div className="mx_SettingsTab">
-            <div className="mx_SettingsTab_heading">{_t("Sections to show")}</div>
-
-            <div className="mx_SettingsTab_section">
-                <StyledCheckbox
-                    checked={!!showPeople}
-                    onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                        SettingsStore.setValue(
-                            "Spaces.showPeopleInSpace",
-                            space.roomId,
-                            SettingLevel.ROOM_ACCOUNT,
-                            !showPeople,
-                        );
-                    }}
-                >
-                    {_t("People")}
-                </StyledCheckbox>
-                <p>
-                    {_t(
-                        "This groups your chats with members of this space. " +
-                            "Turning this off will hide those chats from your view of %(spaceName)s.",
-                        {
-                            spaceName: space.name,
-                        },
-                    )}
-                </p>
-            </div>
-        </div>
+        <SettingsTab>
+            <SettingsSection heading={_t("Sections to show")}>
+                <SettingsSubsection>
+                    <StyledCheckbox
+                        checked={!!showPeople}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                            SettingsStore.setValue(
+                                "Spaces.showPeopleInSpace",
+                                space.roomId,
+                                SettingLevel.ROOM_ACCOUNT,
+                                !showPeople,
+                            );
+                        }}
+                    >
+                        {_t("People")}
+                    </StyledCheckbox>
+                    <SettingsSubsectionText>
+                        {_t(
+                            "This groups your chats with members of this space. " +
+                                "Turning this off will hide those chats from your view of %(spaceName)s.",
+                            {
+                                spaceName: space.name,
+                            },
+                        )}
+                    </SettingsSubsectionText>
+                </SettingsSubsection>
+            </SettingsSection>
+        </SettingsTab>
     );
 };
 

test/components/views/dialogs/UserSettingsDialog-test.tsx

@@ -75,7 +75,6 @@ describe("<UserSettingsDialog />", () => {
     const getActiveTabLabel = (container: Element) =>
         container.querySelector(".mx_TabbedView_tabLabel_active")?.textContent;
     const getActiveTabHeading = (container: Element) =>
-        container.querySelector(".mx_SettingsTab_heading")?.textContent ||
         container.querySelector(".mx_SettingsSection .mx_Heading_h2")?.textContent;
 
     it("should render general settings tab when no initialTabId", () => {