Use semantic headings in user settings Help & About (#10752)

* split SettingsSection out of SettingsTab, replace usage

* correct copyright

* use semantic headings in GeneralRoomSettingsTab

* use SettingsTab and SettingsSubsection in room settings

* fix VoipRoomSettingsTab

* use SettingsSection components in space settings

* settingssubsection text component

* use semantic headings in HelpUserSetttings tab

* use ExternalLink components for external links

* test

* strict

* lint

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

@@ -24,10 +24,20 @@ export interface SettingsSubsectionProps extends HTMLAttributes<HTMLDivElement>
     children?: React.ReactNode;
 }
 
-const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
+export const SettingsSubsectionText: React.FC<HTMLAttributes<HTMLDivElement>> = ({ children, ...rest }) => (
+    <div {...rest} className="mx_SettingsSubsection_text">
+        {children}
+    </div>
+);
+
+export const SettingsSubsection: React.FC<SettingsSubsectionProps> = ({ heading, description, children, ...rest }) => (
     <div {...rest} className="mx_SettingsSubsection">
         {typeof heading === "string" ? <SettingsSubsectionHeading heading={heading} /> : <>{heading}</>}
-        {!!description && <div className="mx_SettingsSubsection_description">{description}</div>}
+        {!!description && (
+            <div className="mx_SettingsSubsection_description">
+                <SettingsSubsectionText>{description}</SettingsSubsectionText>
+            </div>
+        )}
         <div className="mx_SettingsSubsection_content">{children}</div>
     </div>
 );