Use EmptyState when there is no pinned messages

matrix-org · Aug 7, 2024 · cfaddb0 · cfaddb0
1 parent 980496f
commit cfaddb0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 76 deletions.
diff --git a/res/css/views/right_panel/_PinnedMessagesCard.pcss b/res/css/views/right_panel/_PinnedMessagesCard.pcss
@@ -15,50 +15,6 @@ limitations under the License.
 */
 
 .mx_PinnedMessagesCard {
-    .mx_PinnedMessagesCard_empty_wrapper {
-        display: flex;
-        height: 100%;
-
-        .mx_PinnedMessagesCard_empty {
-            height: max-content;
-            text-align: center;
-            margin: auto 40px;
-
-            .mx_PinnedMessagesCard_MessageActionBar {
-                pointer-events: none;
-                width: max-content;
-                margin: 0 auto;
-
-                /* Cancel the default values for non-interactivity */
-                position: unset;
-                visibility: visible;
-                cursor: unset;
-
-                &::before {
-                    content: unset;
-                }
-
-                .mx_MessageActionBar_optionsButton {
-                    background: var(--MessageActionBar-item-hover-background);
-                    border-radius: var(--MessageActionBar-item-hover-borderRadius);
-                    z-index: var(--MessageActionBar-item-hover-zIndex);
-                    color: var(--cpd-color-icon-primary);
-                }
-            }
-
-            .mx_PinnedMessagesCard_empty_header {
-                color: $primary-content;
-                margin-block: $spacing-24 $spacing-20;
-            }
-
-            > span {
-                font-size: $font-12px;
-                line-height: $font-15px;
-                color: $secondary-content;
-            }
-        }
-    }
-
     --unpin-height: 76px;
 
     .mx_PinnedMessagesCard_wrapper {

diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx
@@ -19,10 +19,8 @@ import { Room, RoomEvent, RoomStateEvent, MatrixEvent, EventType, RelationType }
 import { logger } from "matrix-js-sdk/src/logger";
 import { Button, Separator } from "@vector-im/compound-web";
 import classNames from "classnames";
+import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin";
 
-import { Icon as ContextMenuIcon } from "../../../../res/img/element-icons/context-menu.svg";
-import { Icon as EmojiIcon } from "../../../../res/img/element-icons/room/message-bar/emoji.svg";
-import { Icon as ReplyIcon } from "../../../../res/img/element-icons/room/message-bar/reply.svg";
 import { _t } from "../../../languageHandler";
 import BaseCard from "./BaseCard";
 import Spinner from "../elements/Spinner";
@@ -39,6 +37,7 @@ import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import { filterBoolean } from "../../../utils/arrays";
 import Modal from "../../../Modal";
 import { UnpinAllDialog } from "../dialogs/UnpinAllDialog";
+import EmptyState from "./EmptyState";
 
 interface IProps {
     room: Room;
@@ -170,33 +169,11 @@ const PinnedMessagesCard: React.FC<IProps> = ({ room, onClose, permalinkCreator
     let content: JSX.Element[] | JSX.Element | undefined;
     if (!pinnedEventIds.length) {
         content = (
-            <div className="mx_PinnedMessagesCard_empty_wrapper">
-                <div className="mx_PinnedMessagesCard_empty">
-                    {/* XXX: We reuse the classes for simplicity, but deliberately not the components for non-interactivity. */}
-                    <div className="mx_MessageActionBar mx_PinnedMessagesCard_MessageActionBar">
-                        <div className="mx_MessageActionBar_iconButton">
-                            <EmojiIcon />
-                        </div>
-                        <div className="mx_MessageActionBar_iconButton">
-                            <ReplyIcon />
-                        </div>
-                        <div className="mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton">
-                            <ContextMenuIcon />
-                        </div>
-                    </div>
-
-                    <Heading size="4" className="mx_PinnedMessagesCard_empty_header">
-                        {_t("right_panel|pinned_messages|empty")}
-                    </Heading>
-                    {_t(
-                        "right_panel|pinned_messages|explainer",
-                        {},
-                        {
-                            b: (sub) => <b>{sub}</b>,
-                        },
-                    )}
-                </div>
-            </div>
+            <EmptyState
+                Icon={PinIcon}
+                title={_t("right_panel|pinned_messages|empty_title")}
+                description={_t("right_panel|pinned_messages|empty_description")}
+            />
         );
     } else if (pinnedEvents?.length) {
         content = (

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
@@ -1839,8 +1839,8 @@
         "files_button": "Files",
         "info": "Info",
         "pinned_messages": {
-            "empty": "Nothing pinned, yet",
-            "explainer": "If you have permissions, open the menu on any message and select <b>Pin</b> to stick them here.",
+            "empty_description": "Select a message and choose “Pin message” to include here.",
+            "empty_title": "Pin important messages so that they can be easily discovered",
             "header": {
                 "one": "1 Pinned message",
                 "other": "%(count)s Pinned messages",