Create a common header on right panel cards on BaseCard (#8808)

* Remove duplicate declarations and add height and overflow properties Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_TimelineCard__header under mx_BaseCard_header for normalization Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize mx_BaseCard_close position Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize className of header - mx_BaseCard_header__ThreadPanel - mx_BaseCard_header__TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize header's button size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize inline start header margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * normalize header bottom margin for PinnedMessagesCard and TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize header declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add mixin RightPanelCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - top level Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_header Remove specific declarations on PinnedMessagesCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_back and mx_BaseCard_close Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Create a common class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Create a common class name - mx_BaseCard_header_title - ThreadPanel Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - span:first-of-type Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename a variable to remove --ThreadPanel_header-button-size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from PinnedMessagesCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Headers need Heading Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use spacing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules of mx_ContextualMenu inside mx_BaseCard_header_title to BaseCard leaving style rules specific to ThreadPanel. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide long header title with ellipsis Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard_header-button-size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard_header margin-bottom Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard back and close margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard back ~ mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Return special declarations to _ThreadPanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove the mixin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add mx_BaseCard_header_title_button--option Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant margin from AppTileFullWidth Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Header on mx_RoomSummaryCard - remove default declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove default declarations from mx_UserInfo Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables - _BaseCard.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2024-11-22 17:25:50 +03:00 · 2022-06-16 07:22:45 +00:00 · 2022-06-16 07:22:45 +00:00 · fe8c267a14
commit fe8c267a14
parent 81c894f2d9
14 changed files with 138 additions and 208 deletions
--- a/res/css/views/right_panel/_BaseCard.scss
+++ b/res/css/views/right_panel/_BaseCard.scss
@ -16,9 +16,10 @@ limitations under the License.

 .mx_BaseCard {
    --BaseCard_EventTile_line-padding-block: 2px;
-    --BaseCard_EventTile-spacing-inline: 36px;
+    --BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable
+    --BaseCard_header-button-size: 24px;

-    padding: 0 8px;
+    padding: 0 $spacing-8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
@ -27,10 +28,10 @@ limitations under the License.
    .mx_BaseCard_header {
        --BaseCard_header_button-margin: $spacing-12;

-        margin: $spacing-4 0;
+        margin: $spacing-4 0 $spacing-12;

        > h2 {
-            margin: 0 44px;
+            margin: 0 44px; // TODO: Use a spacing variable
            font-size: $font-18px;
            font-weight: $font-semi-bold;
            overflow: hidden;
@ -42,8 +43,8 @@ limitations under the License.
        .mx_BaseCard_close {
            position: absolute;
            background-color: rgba(141, 151, 165, 0.2);
-            height: 20px;
-            width: 20px;
+            width: var(--BaseCard_header-button-size);
+            height: var(--BaseCard_header-button-size);
            margin: var(--BaseCard_header_button-margin);
            top: 0;
            border-radius: 50%;
@ -63,22 +64,73 @@ limitations under the License.

        .mx_BaseCard_back {
            left: 0;
+            margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4);

            &::before {
                transform: rotate(90deg);
                mask-size: 22px;
                mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
            }
+
+            // Header title with the back button
+            ~ .mx_BaseCard_header_title {
+                width: calc(100% - 60px);
+                margin-inline-start: var(--BaseCard_header-button-size);
+
+                .mx_BaseCard_header_title_heading {
+                    margin-inline-start: 6px; // TODO: Use a spacing variable
+                }
+            }
        }

        .mx_BaseCard_close {
            right: 0;
+            margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4);

            &::before {
                mask-image: url('$(res)/img/icons-close.svg');
                mask-size: 8px;
            }
        }
+
+        .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;
+            }
+
+            .mx_BaseCard_header_title_button--option {
+                position: relative;
+                width: var(--BaseCard_header-button-size);
+                height: var(--BaseCard_header-button-size);
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    inset-block-start: 0;
+                    inset-inline-start: 0;
+                    height: 100%;
+                    width: 100%;
+                    mask-repeat: no-repeat;
+                    mask-position: center;
+                    mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
+                    background-color: $secondary-content;
+                }
+
+                &:hover::after {
+                    background-color: $primary-content;
+                }
+            }
+        }
    }

    .mx_AutoHideScrollbar {
@ -91,11 +143,11 @@ limitations under the License.
    }

    .mx_BaseCard_Group {
-        margin: 20px 0 16px;
+        margin: $spacing-20 0 $spacing-16;

        & > * {
-            margin-left: 12px;
-            margin-right: 12px;
+            margin-left: $spacing-12;
+            margin-right: $spacing-12;
        }

        > h1 {
@ -105,7 +157,8 @@ limitations under the License.
        }

        .mx_BaseCard_Button {
-            padding: 10px 10px 10px 12px;
+            padding: 10px; // TODO: Use a spacing variable
+            padding-inline-start: $spacing-12;
            margin: 0;
            position: relative;
            font-size: $font-13px;
@ -127,7 +180,7 @@ limitations under the License.
            }

            &.mx_AccessibleButton_disabled {
-                padding-right: 12px;
+                padding-right: $spacing-12;
                &::after {
                    content: unset;
                }
@ -136,7 +189,7 @@ limitations under the License.
    }

    .mx_BaseCard_footer {
-        padding-top: 4px;
+        padding-top: $spacing-4;
        text-align: center;
        display: flex;
        justify-content: space-around;
@ -159,7 +212,7 @@ limitations under the License.
 .mx_NotificationPanel,
 .mx_MemberList {
    &.mx_BaseCard {
-        padding: 32px 0 0;
+        padding: $spacing-32 0 0;

        .mx_AutoHideScrollbar {
            margin-right: unset;
@ -167,3 +220,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; // TODO: Use a spacing variable
+        padding-bottom: 10px; // TODO: Use a spacing variable
+
+        border: 1px solid $quinary-content;
+        box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
+    }
+
+    .mx_ContextualMenu_chevron_top {
+        left: auto;
+        right: 22px; // TODO: Use a spacing variable
+        border-bottom-color: $quinary-content;
+
+        &::after {
+            content: "";
+            border: inherit;
+            border-bottom-color: $menu-bg-color;
+            position: absolute;
+            top: 1px;
+            left: -8px;
+        }
+    }
+}
--- a/res/css/views/right_panel/_PinnedMessagesCard.scss
+++ b/res/css/views/right_panel/_PinnedMessagesCard.scss
@ -15,24 +15,6 @@ 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;
-        }
-    }
-
    .mx_PinnedMessagesCard_empty_wrapper {
        display: flex;
        height: 100%;
--- a/res/css/views/right_panel/_RoomSummaryCard.scss
+++ b/res/css/views/right_panel/_RoomSummaryCard.scss
@ -17,25 +17,23 @@ limitations under the License.
 .mx_RoomSummaryCard {
    .mx_BaseCard_header {
        text-align: center;
-        margin-top: 20px;
+        margin-top: $spacing-20;

        h2 {
-            font-weight: $font-semi-bold;
-            font-size: $font-18px;
-            margin: 12px 0 4px;
+            margin: $spacing-12 0 $spacing-4;
        }

        .mx_RoomSummaryCard_alias {
            font-size: $font-13px;
            color: $secondary-content;
+            overflow: hidden;
+            text-overflow: ellipsis;
        }

        h2, .mx_RoomSummaryCard_alias {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
-            overflow: hidden;
-            text-overflow: ellipsis;
            white-space: pre-wrap;
        }

--- a/res/css/views/right_panel/_ThreadPanel.scss
+++ b/res/css/views/right_panel/_ThreadPanel.scss
@ -15,73 +15,16 @@ limitations under the License.
 */

 .mx_ThreadPanel {
-    --ThreadPanel_header-button-size: 24px;
-
-    display: flex;
-    flex-direction: column;
    height: 100px;
    overflow: visible;

    .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;
            }

-            .mx_MessageActionBar_optionsButton {
-                position: relative;
-            }
-
-            .mx_MessageActionBar_maskButton {
-                width: var(--ThreadPanel_header-button-size);
-                height: var(--ThreadPanel_header-button-size);
-
-                &::after {
-                    mask-size: var(--ThreadPanel_header-button-size);
-                    mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
-                }
-            }
-
            .mx_ThreadPanel_dropdown {
                padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable
                border-radius: 4px;
@ -278,40 +221,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;
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@ -15,26 +15,6 @@ 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;
-        }
-    }
-
    .mx_TimelineCard_timeline {
        overflow: hidden;
        position: relative; // offset parent for jump to bottom button
--- a/res/css/views/right_panel/_UserInfo.scss
+++ b/res/css/views/right_panel/_UserInfo.scss
@ -18,9 +18,6 @@ limitations under the License.
 .mx_UserInfo.mx_BaseCard {
    // UserInfo has a circular image at the top so it fits between the back & close buttons
    padding-top: 0;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
    overflow-y: auto;
    font-size: $font-12px;

--- a/res/css/views/right_panel/_WidgetCard.scss
+++ b/res/css/views/right_panel/_WidgetCard.scss
@ -15,48 +15,12 @@ limitations under the License.
 */

 .mx_WidgetCard {
-    height: 100%;
-    display: contents;
-
    .mx_AppTileFullWidth {
        max-width: unset;
        width: auto !important;
-        margin: 0px $container-border-width 0px $container-border-width;
        height: 100%;
        border: 0;
    }
-
-    .mx_BaseCard_header {
-        display: inline-flex;
-
-        & > h2 {
-            margin-right: 0;
-            flex-grow: 1;
-        }
-
-        .mx_WidgetCard_optionsButton {
-            position: relative;
-            margin-right: 44px;
-            height: 20px;
-            width: 20px;
-            min-width: 20px; // prevent crushing by the flexbox
-            padding: 0;
-
-            &::before {
-                content: "";
-                position: absolute;
-                width: 20px;
-                height: 20px;
-                top: 0;
-                left: 4px;
-                mask-repeat: no-repeat;
-                mask-position: center;
-                mask-size: contain;
-                mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
-                background-color: $secondary-content;
-            }
-        }
-    }
 }

 .mx_WidgetCard_maxPinnedTooltip {
--- a/src/components/structures/ThreadPanel.tsx
+++ b/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"
--- a/src/components/structures/ThreadView.tsx
+++ b/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} />
--- a/src/components/views/context_menus/ThreadListContextMenu.tsx
+++ b/src/components/views/context_menus/ThreadListContextMenu.tsx
@ -82,7 +82,7 @@ const ThreadListContextMenu: React.FC<IProps> = ({
    return <React.Fragment>
        <ContextMenuTooltipButton
            {...props}
-            className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
+            className="mx_BaseCard_header_title_button--option"
            onClick={openMenu}
            title={_t("Thread options")}
            isExpanded={menuDisplayed}
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/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}
    >
--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/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>;
    };

--- a/src/components/views/right_panel/WidgetCard.tsx
+++ b/src/components/views/right_panel/WidgetCard.tsx
@ -28,6 +28,7 @@ import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import UIStore from "../../../stores/UIStore";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
+import Heading from '../typography/Heading';

 interface IProps {
    room: Room;
@ -68,18 +69,17 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
        );
    }

-    const header = <React.Fragment>
-        <h2>{ WidgetUtils.getWidgetName(app) }</h2>
+    const header = <div className="mx_BaseCard_header_title">
+        <Heading size="h4" className="mx_BaseCard_header_title_heading">{ WidgetUtils.getWidgetName(app) }</Heading>
        <ContextMenuButton
-            kind="secondary"
-            className="mx_WidgetCard_optionsButton"
+            className="mx_BaseCard_header_title_button--option"
            inputRef={handle}
            onClick={openMenu}
            isExpanded={menuDisplayed}
            label={_t("Options")}
        />
        { contextMenu }
-    </React.Fragment>;
+    </div>;

    return <BaseCard
        header={header}
--- a/test/components/structures/snapshots/ThreadPanel-test.tsx.snap
+++ b/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={