Use MessageActionBar style declarations on pinned message card (#8757)

* Refer mx_MessageActionBar on pinned messages card

Normalize mx_MessageActionBar style rules

- Allow the varaible (--MessageActionBar-size-button) to be used
- Remove redundant declarations

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use variables for normalization

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Set class name

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Readd the comment

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Use Heading size='h4'

- Use size='h4' instead of 'h2' as 15px has been specified as the font-size of the header
- Use logical values following _Heading.scss
- Remove line-height declaration in favor of the default value

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

res/css/views/messages/_MessageActionBar.scss

@@ -18,6 +18,9 @@ limitations under the License.
 .mx_MessageActionBar {
     --MessageActionBar-size-button: 28px;
     --MessageActionBar-size-box: 32px; // 28px + 2px (margin) * 2
+    --MessageActionBar-item-hover-background: $panel-actions;
+    --MessageActionBar-item-hover-borderRadius: 6px;
+    --MessageActionBar-item-hover-zIndex: 1;
 
     position: absolute;
     visibility: hidden;
@@ -59,9 +62,9 @@ limitations under the License.
         margin: 2px;
 
         &:hover {
-            background: $panel-actions;
+            background: var(--MessageActionBar-item-hover-background);
-            border-radius: 6px;
+            border-radius: var(--MessageActionBar-item-hover-borderRadius);
-            z-index: 1;
+            z-index: var(--MessageActionBar-item-hover-zIndex);
         }
     }
 }

res/css/views/right_panel/_PinnedMessagesCard.scss

@@ -33,37 +33,33 @@ limitations under the License.
         }
     }
 
-    .mx_PinnedMessagesCard_empty {
+    .mx_PinnedMessagesCard_empty_wrapper {
         display: flex;
         height: 100%;
 
-        > div {
+        .mx_PinnedMessagesCard_empty {
             height: max-content;
             text-align: center;
             margin: auto 40px;
 
             .mx_PinnedMessagesCard_MessageActionBar {
                 pointer-events: none;
-                display: flex;
-                height: 32px;
-                line-height: $font-24px;
-                border-radius: 8px;
-                background: $background;
-                border: 1px solid $input-border-color;
-                padding: 1px;
                 width: max-content;
                 margin: 0 auto;
-                box-sizing: border-box;
 
-                .mx_MessageActionBar_maskButton {
+                // Cancel the default values for non-interactivity
-                    display: inline-block;
+                position: unset;
-                    position: relative;
+                visibility: visible;
+                cursor: unset;
+
+                &::before {
+                    content: unset;
                 }
 
                 .mx_MessageActionBar_optionsButton {
-                    background: $panel-actions;
+                    background: var(--MessageActionBar-item-hover-background);
-                    border-radius: 6px;
+                    border-radius: var(--MessageActionBar-item-hover-borderRadius);
-                    z-index: 1;
+                    z-index: var(--MessageActionBar-item-hover-zIndex);
 
                     &::after {
                         background-color: $primary-content;
@@ -71,13 +67,9 @@ limitations under the License.
                 }
             }
 
-            > h2 {
+            .mx_PinnedMessagesCard_empty_header {
-                font-weight: $font-semi-bold;
-                font-size: $font-15px;
-                line-height: $font-24px;
                 color: $primary-content;
-                margin-top: 24px;
+                margin-block: $spacing-24 $spacing-20;
-                margin-bottom: 20px;
             }
 
             > span {

src/components/views/right_panel/PinnedMessagesCard.tsx

@@ -32,6 +32,7 @@ import PinnedEventTile from "../rooms/PinnedEventTile";
 import { useRoomState } from "../../../hooks/useRoomState";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import { ReadPinsEventId } from "./types";
+import Heading from '../typography/Heading';
 
 interface IProps {
     room: Room;
@@ -154,16 +155,16 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
             />
         ));
     } else {
-        content = <div className="mx_PinnedMessagesCard_empty">
+        content = <div className="mx_PinnedMessagesCard_empty_wrapper">
-            <div>
+            <div className="mx_PinnedMessagesCard_empty">
                 { /* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */ }
-                <div className="mx_PinnedMessagesCard_MessageActionBar">
+                <div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
                     <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_reactButton" />
                     <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton" />
                     <div className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton" />
                 </div>
 
-                <h2>{ _t("Nothing pinned, yet") }</h2>
+                <Heading size="h4" className="mx_PinnedMessagesCard_empty_header">{ _t("Nothing pinned, yet") }</Heading>
                 { _t("If you have permissions, open the menu on any message and select " +
                     "<b>Pin</b> to stick them here.", {}, {
                     b: sub => <b>{ sub }</b>,