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>

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: var(--BaseCard_header-button-size);
-            width: 20px;
+            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-left: $spacing-12;
-            margin-right: 12px;
+            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;
+        }
+    }
+}

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%;

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;
+            margin: $spacing-12 0 $spacing-4;
-            font-size: $font-18px;
-            margin: 12px 0 4px;
         }
 
         .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;
         }
 

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_header_title {
-
-        .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_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_wrapper {
-    .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_ThreadPanel_Header_FilterOptionItem {
         display: flex;
         flex-grow: 1;

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

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;
 

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 {

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">
+    return <div className="mx_BaseCard_header_title">
-        <span>{ _t("Threads") }</span>
+        <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">
+        return <div className="mx_BaseCard_header_title">
-            <span>{ _t("Thread") }</span>
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Thread") }</Heading>
             <ThreadListContextMenu
                 mxEvent={this.props.mxEvent}
                 permalinkCreator={this.props.permalinkCreator} />

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}

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">
+        return <div className="mx_BaseCard_header_title">
-            <span>{ _t("Chat") }</span>
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Chat") }</Heading>
         </div>;
     };
 

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

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={