Fix font & spaces in settings subsection (#28631)

* Fix settings header

* Fix gap between subsection

* Update tests

* Update e2e tests

* Update snapshots

res/css/components/views/settings/shared/_SettingsSubsection.pcss

@@ -13,7 +13,16 @@ Please see LICENSE files in the repository root for full details.
     &.mx_SettingsSubsection_newUi {
         display: flex;
         flex-direction: column;
-        gap: var(--cpd-space-8x);
+        gap: var(--cpd-space-6x);
+    }
+
+    *[role="separator"] {
+        /**
+         * The gap between subsections is 32px and inside the subsection is 24px.
+         * The separator separates the subsections, so it should have the same gap as the subsections.
+         * We add 12px and the separator spacing to the top margin to make the separator visually centered between the subsections.
+         */
+        margin-top: calc(var(--cpd-space-3x) + var(--cpd-separator-spacing));
     }
 }
 

src/components/views/settings/shared/SettingsSubsection.tsx

@@ -45,7 +45,7 @@ export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({
             mx_SettingsSubsection_newUi: !legacy,
         })}
     >
-        {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} legacy={legacy} /> : <>{heading}</>}
+        {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
         {!!description && (
             <div className="mx_SettingsSubsection_description">
                 <SettingsSubsectionText>{description}</SettingsSubsectionText>

src/components/views/settings/shared/SettingsSubsectionHeading.tsx

@@ -12,21 +12,13 @@ import Heading from "../../typography/Heading";
 
 export interface SettingsSubsectionHeadingProps extends HTMLAttributes<HTMLDivElement> {
     heading: string;
-    legacy?: boolean;
     children?: React.ReactNode;
 }
 
-export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({
+export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => {
-    heading,
-    legacy = true,
-    children,
-    ...rest
-}) => {
-    const size = legacy ? "4" : "3";
-
     return (
         <div {...rest} className="mx_SettingsSubsectionHeading">
-            <Heading className="mx_SettingsSubsectionHeading_heading" size={size} as="h3">
+            <Heading className="mx_SettingsSubsectionHeading_heading" size="4" as="h3">
                 {heading}
             </Heading>
             {children}

test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap

@@ -10,7 +10,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
       class="mx_SettingsSubsectionHeading"
     >
       <h3
-        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Message layout
       </h3>

test/unit-tests/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -10,7 +10,7 @@ exports[`<ThemeChoicePanel /> custom theme should display custom theme 1`] = `
       class="mx_SettingsSubsectionHeading"
     >
       <h3
-        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Theme
       </h3>
@@ -287,7 +287,7 @@ exports[`<ThemeChoicePanel /> custom theme should render the custom theme sectio
       class="mx_SettingsSubsectionHeading"
     >
       <h3
-        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Theme
       </h3>
@@ -564,7 +564,7 @@ exports[`<ThemeChoicePanel /> renders the theme choice UI 1`] = `
       class="mx_SettingsSubsectionHeading"
     >
       <h3
-        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
       >
         Theme
       </h3>

test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

@@ -23,7 +23,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsectionHeading"
             >
               <h3
-                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Theme
               </h3>
@@ -153,7 +153,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
               class="mx_SettingsSubsectionHeading"
             >
               <h3
-                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
+                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
               >
                 Message layout
               </h3>