Create a common header on right panel cards on BaseCard

res/css/_common.scss

@@ -806,3 +806,54 @@ legend {
     mask-repeat: no-repeat;
     mask-size: contain;
 }
+
+@define-mixin RightPanelCard {
+    --RightPanelCard_header-button-size: 24px;
+
+    height: 100px;
+    overflow: visible;
+
+    .mx_BaseCard_header {
+        margin-bottom: $spacing-12;
+
+        .mx_BaseCard_back,
+        .mx_BaseCard_close {
+            width: var(--RightPanelCard_header-button-size);
+            height: var(--RightPanelCard_header-button-size);
+        }
+
+        .mx_BaseCard_back {
+            margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);
+
+            // Header title with the back button
+            ~ .mx_BaseCard_header_title {
+                width: calc(100% - 60px);
+                margin-inline-start: var(--RightPanelCard_header-button-size);
+
+                .mx_BaseCard_header_title_heading {
+                    margin-inline-start: 6px; // TODO: Use a spacing variable
+                }
+            }
+        }
+
+        .mx_BaseCard_close {
+            margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);
+        }
+
+        .mx_BaseCard_header_title {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            width: calc(100% - 38px);
+            height: 24px;
+            flex: 1;
+
+            .mx_BaseCard_header_title_heading {
+                color: $secondary-content;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+}

res/css/views/right_panel/_BaseCard.scss

@@ -167,3 +167,38 @@ limitations under the License.
         }
     }
 }
+
+.mx_ContextualMenu_wrapper.mx_BaseCard_header_title {
+    .mx_ContextualMenu {
+        position: initial;
+
+        span:first-of-type {
+            font-weight: $font-semi-bold;
+            font-size: inherit;
+            color: $primary-content;
+        }
+
+        font-size: $font-12px;
+        color: $secondary-content;
+        padding-top: 10px;
+        padding-bottom: 10px;
+
+        border: 1px solid $quinary-content;
+        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
+    }
+
+    .mx_ContextualMenu_chevron_top {
+        left: auto;
+        right: 22px;
+        border-bottom-color: $quinary-content;
+
+        &::after {
+            content: "";
+            border: inherit;
+            border-bottom-color: $menu-bg-color;
+            position: absolute;
+            top: 1px;
+            left: -8px;
+        }
+    }
+}

res/css/views/right_panel/_PinnedMessagesCard.scss

@@ -15,23 +15,7 @@ limitations under the License.
 */
 
 .mx_PinnedMessagesCard {
-    padding-top: 0;
-
-    .mx_BaseCard_header {
-        text-align: center;
-        margin-top: 0;
-        border-bottom: 1px solid $menu-border-color;
-
-        > h2 {
-            font-weight: $font-semi-bold;
-            font-size: $font-18px;
-            margin: 8px 0;
-        }
-
-        .mx_BaseCard_close {
-            margin-right: 6px;
-        }
-    }
+    @mixin RightPanelCard;
 
     .mx_PinnedMessagesCard_empty_wrapper {
         display: flex;

res/css/views/right_panel/_ThreadPanel.scss

@@ -15,54 +15,10 @@ limitations under the License.
 */
 
 .mx_ThreadPanel {
-    --ThreadPanel_header-button-size: 24px;
-
-    display: flex;
-    flex-direction: column;
-    height: 100px;
-    overflow: visible;
+    @mixin RightPanelCard;
 
     .mx_BaseCard_header {
-        margin-bottom: $spacing-12;
-
-        .mx_BaseCard_close,
-        .mx_BaseCard_back {
-            width: var(--ThreadPanel_header-button-size);
-            height: var(--ThreadPanel_header-button-size);
-        }
-
-        .mx_BaseCard_back {
-            margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px);
-
-            ~ .mx_ThreadPanel__header {
-                width: calc(100% - 60px);
-                margin-inline-start: var(--ThreadPanel_header-button-size);
-
-                span {
-                    margin-inline-start: 6px;
-                }
-            }
-        }
-
-        .mx_BaseCard_close {
-            margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px);
-        }
-
-        .mx_ThreadPanel__header {
-            width: calc(100% - 38px);
-            height: 24px;
-            display: flex;
-            flex: 1;
-            justify-content: space-between;
-            align-items: center;
-
-            span:first-of-type {
-                font-weight: 600;
-                font-size: 15px;
-                line-height: 18px;
-                color: $secondary-content;
-            }
-
+        .mx_BaseCard_header_title {
             .mx_AccessibleButton {
                 font-size: 12px;
                 color: $secondary-content;
@@ -73,11 +29,11 @@ limitations under the License.
             }
 
             .mx_MessageActionBar_maskButton {
-                width: var(--ThreadPanel_header-button-size);
-                height: var(--ThreadPanel_header-button-size);
+                width: var(--RightPanelCard_header-button-size);
+                height: var(--RightPanelCard_header-button-size);
 
                 &::after {
-                    mask-size: var(--ThreadPanel_header-button-size);
+                    mask-size: var(--RightPanelCard_header-button-size);
                     mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
                 }
             }
@@ -296,40 +252,7 @@ limitations under the License.
     }
 }
 
-.mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
-    .mx_ContextualMenu {
-        position: initial;
-
-        span:first-of-type {
-            font-weight: $font-semi-bold;
-            font-size: inherit;
-            color: $primary-content;
-        }
-
-        font-size: $font-12px;
-        color: $secondary-content;
-        padding-top: 10px;
-        padding-bottom: 10px;
-
-        border: 1px solid $quinary-content;
-        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
-    }
-
-    .mx_ContextualMenu_chevron_top {
-        left: auto;
-        right: 22px;
-        border-bottom-color: $quinary-content;
-
-        &::after {
-            content: "";
-            border: inherit;
-            border-bottom-color: $menu-bg-color;
-            position: absolute;
-            top: 1px;
-            left: -8px;
-        }
-    }
-
+.mx_ContextualMenu_wrapper {
     .mx_ThreadPanel_Header_FilterOptionItem {
         display: flex;
         flex-grow: 1;

res/css/views/right_panel/_TimelineCard.scss

@@ -15,25 +15,7 @@ limitations under the License.
 */
 
 .mx_TimelineCard {
-    .mx_TimelineCard__header {
-        margin-left: 6px;
-
-        span:first-of-type {
-            font-weight: 600;
-            font-size: 15px;
-            line-height: 18px;
-            color: $secondary-content;
-        }
-    }
-
-    .mx_BaseCard_header {
-        margin: 5px 0 9px 0;
-
-        .mx_BaseCard_close {
-            margin: 8px;
-            right: 0;
-        }
-    }
+    @mixin RightPanelCard;
 
     .mx_TimelineCard_timeline {
         overflow: hidden;

src/components/structures/ThreadPanel.tsx

@@ -40,6 +40,7 @@ import { Action } from '../../dispatcher/actions';
 import { UserTab } from '../views/dialogs/UserTab';
 import dis from '../../dispatcher/dispatcher';
 import Spinner from "../views/elements/Spinner";
+import Heading from '../views/typography/Heading';
 
 interface IProps {
     roomId: string;
@@ -113,12 +114,12 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
         right={33}
         onFinished={closeMenu}
         chevronFace={ChevronFace.Top}
-        wrapperClassName="mx_ThreadPanel__header"
+        wrapperClassName="mx_BaseCard_header_title"
     >
         { contextMenuOptions }
     </ContextMenu> : null;
-    return <div className="mx_ThreadPanel__header">
-        <span>{ _t("Threads") }</span>
+    return <div className="mx_BaseCard_header_title">
+        <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Threads") }</Heading>
         { !empty && <>
             <ContextMenuButton
                 className="mx_ThreadPanel_dropdown"

src/components/structures/ThreadView.tsx

@@ -54,6 +54,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton";
 import { RoomViewStore } from '../../stores/RoomViewStore';
 import Spinner from "../views/elements/Spinner";
 import { ComposerInsertPayload, ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
+import Heading from '../views/typography/Heading';
 
 interface IProps {
     room: Room;
@@ -298,8 +299,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
     }
 
     private renderThreadViewHeader = (): JSX.Element => {
-        return <div className="mx_ThreadPanel__header">
-            <span>{ _t("Thread") }</span>
+        return <div className="mx_BaseCard_header_title">
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Thread") }</Heading>
             <ThreadListContextMenu
                 mxEvent={this.props.mxEvent}
                 permalinkCreator={this.props.permalinkCreator} />

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -174,7 +174,9 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
     }
 
     return <BaseCard
-        header={<h2>{ _t("Pinned messages") }</h2>}
+        header={<div className="mx_BaseCard_header_title">
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Pinned messages") }</Heading>
+        </div>}
         className="mx_PinnedMessagesCard"
         onClose={onClose}
     >

src/components/views/right_panel/TimelineCard.tsx

@@ -42,6 +42,7 @@ import SettingsStore from '../../../settings/SettingsStore';
 import JumpToBottomButton from '../rooms/JumpToBottomButton';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import Measured from '../elements/Measured';
+import Heading from '../typography/Heading';
 
 interface IProps {
     room: Room;
@@ -192,8 +193,8 @@ export default class TimelineCard extends React.Component<IProps, IState> {
     };
 
     private renderTimelineCardHeader = (): JSX.Element => {
-        return <div className="mx_TimelineCard__header">
-            <span>{ _t("Chat") }</span>
+        return <div className="mx_BaseCard_header_title">
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Chat") }</Heading>
         </div>;
     };
 

test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap

@@ -2,11 +2,14 @@
 
 exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properly renders Show: All threads 1`] = `
 <div
-  className="mx_ThreadPanel__header"
+  className="mx_BaseCard_header_title"
 >
-  <span>
+  <Heading
+    className="mx_BaseCard_header_title_heading"
+    size="h4"
+  >
     Threads
-  </span>
+  </Heading>
   <ContextMenuButton
     className="mx_ThreadPanel_dropdown"
     inputRef={
@@ -24,11 +27,14 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
 
 exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly renders Show: My threads 1`] = `
 <div
-  className="mx_ThreadPanel__header"
+  className="mx_BaseCard_header_title"
 >
-  <span>
+  <Heading
+    className="mx_BaseCard_header_title_heading"
+    size="h4"
+  >
     Threads
-  </span>
+  </Heading>
   <ContextMenuButton
     className="mx_ThreadPanel_dropdown"
     inputRef={