Use semantic headings in user settings - profile (#10973)

* account password section

* account email and phone numbers

* update cypress selectors

* use settingsection for General section

* use semantic headings for profile settings

* fix show advanced spacing

* udpate snapshot

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -136,7 +136,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             );
         }
         return (
-            <SettingsSubsection heading={<></>}>
+            <SettingsSubsection>
                 {toggle}
                 {advanced}
             </SettingsSubsection>

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -320,14 +320,6 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
         });
     };
 
-    private renderProfileSection(): JSX.Element {
-        return (
-            <div className="mx_SettingsTab_section">
-                <ProfileSettings />
-            </div>
-        );
-    }
-
     private renderAccountSection(): JSX.Element {
         let threepidSection: ReactNode = null;
 
@@ -558,13 +550,12 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         return (
             <SettingsTab data-testid="mx_GeneralUserSettingsTab">
-                <div className="mx_SettingsTab_heading" data-testid="general">
-                    {_t("General")}
-                </div>
-                {this.renderProfileSection()}
-                {this.renderAccountSection()}
-                {this.renderLanguageSection()}
-                {supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
+                <SettingsSection heading={_t("General")}>
+                    <ProfileSettings />
+                    {this.renderAccountSection()}
+                    {this.renderLanguageSection()}
+                    {supportsMultiLanguageSpellCheck ? this.renderSpellCheckSection() : null}
+                </SettingsSection>
                 {discoverySection}
                 {this.renderIntegrationManagerSection()}
                 {accountManagementSection}