Fix font & spaces in settings subsection (#28631)

* Fix settings header

* Fix gap between subsection

* Update tests

* Update e2e tests

* Update snapshots

Author: florianduros

playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png

@@ -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));
     }
 }
 

playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-added-linux.png

@@ -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>

playwright/snapshots/settings/appearance-user-settings-tab/theme-choice-panel.spec.ts/theme-panel-custom-theme-linux.png

@@ -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> = ({
-    heading,
-    legacy = true,
-    children,
-    ...rest
-}) => {
-    const size = legacy ? "4" : "3";
-
+export const SettingsSubsectionHeading: React.FC<SettingsSubsectionHeadingProps> = ({ heading, children, ...rest }) => {
     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}