Update notification icons using Compound icons (#31671)

* Update notification icons using Compound icons For https://element-io.atlassian.net/browse/PSB-968 This removes icons in places where we only have on/off variants rather than the previous 4 Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2026-01-07 15:58:28 +00:00
parent 6e9d168dd2
commit d060b77e8f
15 changed files with 97 additions and 109 deletions
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -15,6 +15,7 @@ import {
    QrCodeIcon,
    SettingsSolidIcon,
    LeaveIcon,
+    NotificationsSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import { MatrixClientPeg } from "../../MatrixClientPeg";
@@ -51,7 +52,6 @@ import { type ViewHomePagePayload } from "../../dispatcher/payloads/ViewHomePage
 import { SDKContext } from "../../contexts/SDKContext";
 import { shouldShowFeedback } from "../../utils/Feedback";
 import { Icon as DarkLightModeSvg } from "../../../res/img/element-icons/roomlist/dark-light-mode.svg";
-import { Icon as NotificationsIcon } from "../../../res/img/element-icons/notifications.svg";

 interface IProps {
    isPanelCollapsed: boolean;
@@ -337,7 +337,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
                {homeButton}
                {linkNewDeviceButton}
                <IconizedContextMenuOption
-                    icon={<NotificationsIcon />}
+                    icon={<NotificationsSolidIcon />}
                    label={_t("notifications|enable_prompt_toast_title")}
                    onClick={(e) => this.onSettingsOpen(e, UserTab.Notifications)}
                />
--- a/src/components/views/context_menus/RoomNotificationContextMenu.tsx
+++ b/src/components/views/context_menus/RoomNotificationContextMenu.tsx
@@ -20,10 +20,6 @@ import IconizedContextMenu, {
    IconizedContextMenuRadio,
 } from "../context_menus/IconizedContextMenu";
 import { type ButtonEvent } from "../elements/AccessibleButton";
-import { Icon as NotificationsIcon } from "../../../../res/img/element-icons/notifications.svg";
-import { Icon as NotificationsDefaultIcon } from "../../../../res/img/element-icons/roomlist/notifications-default.svg";
-import { Icon as NotificationsDmIcon } from "../../../../res/img/element-icons/roomlist/notifications-dm.svg";
-import { Icon as NotificationsOffIcon } from "../../../../res/img/element-icons/roomlist/notifications-off.svg";

 interface IProps extends IContextMenuProps {
    room: Room;
@@ -50,7 +46,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
        <IconizedContextMenuRadio
            label={_t("room|context_menu|notifications_default")}
            active={notificationState === RoomNotifState.AllMessages}
-            icon={<NotificationsIcon />}
            onClick={wrapHandler(() => setNotificationState(RoomNotifState.AllMessages))}
        />
    );
@@ -59,7 +54,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
        <IconizedContextMenuRadio
            label={_t("notifications|all_messages")}
            active={notificationState === RoomNotifState.AllMessagesLoud}
-            icon={<NotificationsDefaultIcon />}
            onClick={wrapHandler(() => setNotificationState(RoomNotifState.AllMessagesLoud))}
        />
    );
@@ -68,7 +62,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
        <IconizedContextMenuRadio
            label={_t("notifications|mentions_keywords")}
            active={notificationState === RoomNotifState.MentionsOnly}
-            icon={<NotificationsDmIcon />}
            onClick={wrapHandler(() => setNotificationState(RoomNotifState.MentionsOnly))}
        />
    );
@@ -77,7 +70,6 @@ export const RoomNotificationContextMenu: React.FC<IProps> = ({ room, onFinished
        <IconizedContextMenuRadio
            label={_t("room|context_menu|notifications_mute")}
            active={notificationState === RoomNotifState.Mute}
-            icon={<NotificationsOffIcon />}
            onClick={wrapHandler(() => setNotificationState(RoomNotifState.Mute))}
        />
    );
--- a/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx
+++ b/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx
@@ -7,8 +7,12 @@ Please see LICENSE files in the repository root for full details.
 */

 import { type Room } from "matrix-js-sdk/src/matrix";
-import React, { type JSX, Fragment, useState, type ReactNode } from "react";
-import { OverflowHorizontalIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import React, { Fragment, type JSX, type ReactNode, useState } from "react";
+import {
+    NotificationsOffSolidIcon,
+    OverflowHorizontalIcon,
+    NotificationsSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import { ContextMenuTooltipButton } from "../../../../accessibility/context_menu/ContextMenuTooltipButton";
 import { useNotificationState } from "../../../../hooks/useRoomNotificationState";
@@ -21,23 +25,18 @@ import { type ButtonEvent } from "../../elements/AccessibleButton";
 import { contextMenuBelow } from "../../rooms/RoomTile";
 import { shouldShowComponent } from "../../../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../settings/UIFeature";
-import { Icon as NotificationsIcon } from "../../../../../res/img/element-icons/notifications.svg";
-import { Icon as NotificationsDefaultIcon } from "../../../../../res/img/element-icons/roomlist/notifications-default.svg";
-import { Icon as NotificationsDmIcon } from "../../../../../res/img/element-icons/roomlist/notifications-dm.svg";
-import { Icon as NotificationsOffIcon } from "../../../../../res/img/element-icons/roomlist/notifications-off.svg";

 interface Props {
    room: Room;
 }

 export function getNotificationIcon(state: RoomNotifState): ReactNode {
-    const icons: Record<RoomNotifState, JSX.Element> = {
-        [RoomNotifState.AllMessages]: <NotificationsIcon />,
-        [RoomNotifState.AllMessagesLoud]: <NotificationsDefaultIcon />,
-        [RoomNotifState.MentionsOnly]: <NotificationsDmIcon />,
-        [RoomNotifState.Mute]: <NotificationsOffIcon />,
-    };
-    return icons[state];
+    switch (state) {
+        case RoomNotifState.Mute:
+            return <NotificationsOffSolidIcon />;
+        default:
+            return <NotificationsSolidIcon />;
+    }
 }

 export function RoomResultContextMenus({ room }: Props): JSX.Element {
--- a/src/components/views/rooms/NotificationDecoration.tsx
+++ b/src/components/views/rooms/NotificationDecoration.tsx
@@ -6,13 +6,15 @@
 */

 import React, { type HTMLProps, type JSX } from "react";
-import MentionIcon from "@vector-im/compound-design-tokens/assets/web/icons/mention";
-import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
-import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
-import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/video-call-solid";
-import EmailIcon from "@vector-im/compound-design-tokens/assets/web/icons/email-solid";
+import {
+    MentionIcon,
+    ErrorIcon,
+    NotificationsOffSolidIcon,
+    VideoCallSolidIcon,
+    EmailSolidIcon,
+    VoiceCallSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import { UnreadCounter, Unread } from "@vector-im/compound-web";
-import VoiceCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/voice-call-solid";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
 import { Flex } from "@element-hq/web-shared-components";

@@ -72,16 +74,16 @@ export function NotificationDecoration({
        >
            {isUnsentMessage && <ErrorIcon width="20px" height="20px" fill="var(--cpd-color-icon-critical-primary)" />}
            {callType === CallType.Video && (
-                <VideoCallIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
+                <VideoCallSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
            )}
            {callType === CallType.Voice && (
-                <VoiceCallIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
+                <VoiceCallSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />
            )}
-            {invited && <EmailIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />}
+            {invited && <EmailSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />}
            {isMention && <MentionIcon width="20px" height="20px" fill="var(--cpd-color-icon-accent-primary)" />}
            {(isMention || isNotification) && <UnreadCounter count={count || null} />}
            {isActivityNotification && <Unread />}
-            {muted && <NotificationOffIcon width="20px" height="20px" fill="var(--cpd-color-icon-tertiary)" />}
+            {muted && <NotificationsOffSolidIcon width="20px" height="20px" fill="var(--cpd-color-icon-tertiary)" />}
        </Flex>
    );
 }
--- a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
+++ b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
@@ -7,17 +7,19 @@

 import React, { type JSX, useState } from "react";
 import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem } from "@vector-im/compound-web";
-import MarkAsReadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-read";
-import MarkAsUnreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-unread";
-import FavouriteIcon from "@vector-im/compound-design-tokens/assets/web/icons/favourite";
-import ArrowDownIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-down";
-import UserAddIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-add";
-import LinkIcon from "@vector-im/compound-design-tokens/assets/web/icons/link";
-import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave";
-import OverflowIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
-import NotificationIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-solid";
-import NotificationOffIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications-off-solid";
-import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
+import {
+    MarkAsReadIcon,
+    MarkAsUnreadIcon,
+    FavouriteIcon,
+    ArrowDownIcon,
+    UserAddIcon,
+    LinkIcon,
+    LeaveIcon,
+    OverflowHorizontalIcon,
+    NotificationsSolidIcon,
+    NotificationsOffSolidIcon,
+    CheckIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
 import { type Room } from "matrix-js-sdk/src/matrix";
 import { Flex } from "@element-hq/web-shared-components";
 import classNames from "classnames";
@@ -81,7 +83,7 @@ function MoreOptionsMenu({ vm }: MoreOptionsMenuProps): JSX.Element {
                    aria-label={_t("room_list|room|more_options")}
                    size="24px"
                >
-                    <OverflowIcon />
+                    <OverflowHorizontalIcon />
                </IconButton>
            }
        >
@@ -190,7 +192,7 @@ function NotificationMenu({ vm }: NotificationMenuProps): JSX.Element {
                    tooltip={_t("room_list|notification_options")}
                    aria-label={_t("room_list|notification_options")}
                >
-                    {vm.isNotificationMute ? <NotificationOffIcon /> : <NotificationIcon />}
+                    {vm.isNotificationMute ? <NotificationsOffSolidIcon /> : <NotificationsSolidIcon />}
                </IconButton>
            }
        >
--- a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
+++ b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx
@@ -170,7 +170,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                            definitions={[
                                {
                                    value: RoomNotifState.AllMessages,
-                                    className: "mx_NotificationSettingsTab_defaultEntry",
                                    label: (
                                        <>
                                            {_t("notifications|default")}
@@ -195,7 +194,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                                },
                                {
                                    value: RoomNotifState.AllMessagesLoud,
-                                    className: "mx_NotificationSettingsTab_allMessagesEntry",
                                    label: (
                                        <>
                                            {_t("notifications|all_messages")}
@@ -207,7 +205,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                                },
                                {
                                    value: RoomNotifState.MentionsOnly,
-                                    className: "mx_NotificationSettingsTab_mentionsKeywordsEntry",
                                    label: (
                                        <>
                                            {_t("notifications|mentions_and_keywords")}
@@ -232,7 +229,6 @@ export default class NotificationsSettingsTab extends React.Component<IProps, IS
                                },
                                {
                                    value: RoomNotifState.Mute,
-                                    className: "mx_NotificationSettingsTab_noneEntry",
                                    label: (
                                        <>
                                            {_t("common|off")}