Compound Typography pass regression fixes (#11189)

* Compound Typography pass regression fixes

* updates to the room list sizing

* fix subtitle clipping

* revert display name to use medium variant

src/components/views/dialogs/BaseDialog.tsx

@@ -174,8 +174,8 @@ export default class BaseDialog extends React.Component<IProps> {
                     >
                         {!!(this.props.title || headerImage) && (
                             <Heading
+                                size="3"
                                 as="h2"
-                                size="4"
                                 className={classNames("mx_Dialog_title", this.props.titleClass)}
                                 id="mx_BaseDialog_title"
                             >

src/components/views/rooms/RoomTileSubtitle.tsx

@@ -57,7 +57,7 @@ export const RoomTileSubtitle: React.FC<Props> = ({
             "mx_RoomTile_subtitle--thread-reply": messagePreview.isThreadReply,
         });
 
-        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_16" /> : null;
+        const icon = messagePreview.isThreadReply ? <ThreadIcon className="mx_Icon mx_Icon_12" /> : null;
 
         return (
             <div className={className} id={messagePreviewId(roomId)} title={messagePreview.text}>

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

@@ -43,7 +43,13 @@ export interface SettingsSectionProps extends HTMLAttributes<HTMLDivElement> {
  */
 export const SettingsSection: React.FC<SettingsSectionProps> = ({ className, heading, children, ...rest }) => (
     <div {...rest} className={classnames("mx_SettingsSection", className)}>
-        {typeof heading === "string" ? <Heading size="2">{heading}</Heading> : <>{heading}</>}
+        {typeof heading === "string" ? (
+            <Heading as="h2" size="3">
+                {heading}
+            </Heading>
+        ) : (
+            <>{heading}</>
+        )}
         <div className="mx_SettingsSection_subSections">{children}</div>
     </div>
 );