Remove global h2 css rule in favour of heading styles/components (#32969)

* Remove global h2 css rule in favour of heading styles/components

* Use Compound Heading in shared-components

and forbid hX elements

* Use Compound Heading in settings

add back margin to some legacy headings

* Tweak some headings

* Update screenshots

* Update screenshots

* Update snapshots

* Tweak .gitignore

* Update snapshots

* Iterate

* Update screenshots

* Update screenshots

* Update screenshot

apps/web/src/components/views/settings/UserPersonalInfoSettings.tsx

@@ -18,6 +18,7 @@ import { type ThirdPartyIdentifier } from "../../../AddThreepid";
 import SettingsStore from "../../../settings/SettingsStore";
 import { UIFeature } from "../../../settings/UIFeature";
 import { AddRemoveThreepids } from "./AddRemoveThreepids";
+import Heading from "../typography/Heading.tsx";
 
 type LoadingState = "loading" | "loaded" | "error";
 
@@ -81,8 +82,8 @@ export const UserPersonalInfoSettings: React.FC<UserPersonalInfoSettingsProps> =
     if (!SettingsStore.getValue(UIFeature.ThirdPartyID)) return null;
 
     return (
-        <div>
-            <h2>{_t("settings|general|personal_info")}</h2>
+        <div className="mx_UserPersonalInfoSettings">
+            <Heading size="2">{_t("settings|general|personal_info")}</Heading>
             <SettingsSubsection
                 heading={_t("settings|general|emails_heading")}
                 stretchContent

apps/web/src/components/views/settings/UserProfileSettings.tsx

@@ -27,6 +27,7 @@ import AccessibleButton from "../elements/AccessibleButton";
 import LogoutDialog, { shouldShowLogoutDialog } from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
+import Heading from "../typography/Heading.tsx";
 
 const SpinnerToast: React.FC<{ children?: ReactNode }> = ({ children }) => (
     <>
@@ -194,7 +195,7 @@ const UserProfileSettings: React.FC<UserProfileSettingsProps> = ({
 
     return (
         <div className="mx_UserProfileSettings">
-            <h2>{_t("common|profile")}</h2>
+            <Heading size="2">{_t("common|profile")}</Heading>
             <div>
                 {someFieldsDisabled
                     ? _t("settings|general|profile_subtitle_oidc")