diff --git a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png index 79335b66ae..94efd93b7e 100644 Binary files a/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png and b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png differ diff --git a/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss b/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss index 38609c7fd4..36c852c8df 100644 --- a/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss +++ b/res/css/views/settings/tabs/room/_NotificationSettingsTab.pcss @@ -17,21 +17,8 @@ Please see LICENSE files in the repository root for full details. font-weight: var(--cpd-font-weight-semibold); margin-top: 16px; position: relative; - padding-left: 8px; align-items: center; - &::before { - content: ""; - position: absolute; - height: 24px; - width: 24px; - left: 0; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - background-color: $secondary-content; - } - input + div { margin-top: 8px; } @@ -44,22 +31,6 @@ Please see LICENSE files in the repository root for full details. margin-right: 32px; } } - - .mx_NotificationSettingsTab_defaultEntry::before { - mask-image: url("$(res)/img/element-icons/notifications.svg"); - } - - .mx_NotificationSettingsTab_allMessagesEntry::before { - mask-image: url("$(res)/img/element-icons/roomlist/notifications-default.svg"); - } - - .mx_NotificationSettingsTab_mentionsKeywordsEntry::before { - mask-image: url("$(res)/img/element-icons/roomlist/notifications-dm.svg"); - } - - .mx_NotificationSettingsTab_noneEntry::before { - mask-image: url("$(res)/img/element-icons/roomlist/notifications-off.svg"); - } } input[type="file"].mx_NotificationSound_soundUpload { diff --git a/res/img/element-icons/notifications.svg b/res/img/element-icons/notifications.svg deleted file mode 100644 index 7709c673f1..0000000000 --- a/res/img/element-icons/notifications.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/roomlist/notifications-default.svg b/res/img/element-icons/roomlist/notifications-default.svg deleted file mode 100644 index c3af0ef809..0000000000 --- a/res/img/element-icons/roomlist/notifications-default.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/roomlist/notifications-dm.svg b/res/img/element-icons/roomlist/notifications-dm.svg deleted file mode 100644 index 9259c4d880..0000000000 --- a/res/img/element-icons/roomlist/notifications-dm.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/roomlist/notifications-off.svg b/res/img/element-icons/roomlist/notifications-off.svg deleted file mode 100644 index bbc2dcfeb9..0000000000 --- a/res/img/element-icons/roomlist/notifications-off.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx index 249a5f456b..d077b3da1b 100644 --- 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 { {homeButton} {linkNewDeviceButton} } + icon={} label={_t("notifications|enable_prompt_toast_title")} onClick={(e) => this.onSettingsOpen(e, UserTab.Notifications)} /> diff --git a/src/components/views/context_menus/RoomNotificationContextMenu.tsx b/src/components/views/context_menus/RoomNotificationContextMenu.tsx index 9ad381736a..bcf240dddd 100644 --- 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 = ({ room, onFinished } onClick={wrapHandler(() => setNotificationState(RoomNotifState.AllMessages))} /> ); @@ -59,7 +54,6 @@ export const RoomNotificationContextMenu: React.FC = ({ room, onFinished } onClick={wrapHandler(() => setNotificationState(RoomNotifState.AllMessagesLoud))} /> ); @@ -68,7 +62,6 @@ export const RoomNotificationContextMenu: React.FC = ({ room, onFinished } onClick={wrapHandler(() => setNotificationState(RoomNotifState.MentionsOnly))} /> ); @@ -77,7 +70,6 @@ export const RoomNotificationContextMenu: React.FC = ({ room, onFinished } onClick={wrapHandler(() => setNotificationState(RoomNotifState.Mute))} /> ); diff --git a/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx b/src/components/views/dialogs/spotlight/RoomResultContextMenus.tsx index 8bf5c1e22b..c11bd777e2 100644 --- 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.AllMessages]: , - [RoomNotifState.AllMessagesLoud]: , - [RoomNotifState.MentionsOnly]: , - [RoomNotifState.Mute]: , - }; - return icons[state]; + switch (state) { + case RoomNotifState.Mute: + return ; + default: + return ; + } } export function RoomResultContextMenus({ room }: Props): JSX.Element { diff --git a/src/components/views/rooms/NotificationDecoration.tsx b/src/components/views/rooms/NotificationDecoration.tsx index 321625adb1..732793551b 100644 --- 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 && } {callType === CallType.Video && ( - + )} {callType === CallType.Voice && ( - + )} - {invited && } + {invited && } {isMention && } {(isMention || isNotification) && } {isActivityNotification && } - {muted && } + {muted && } ); } diff --git a/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx b/src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx index 1162d07e9a..7c5dd5ba1a 100644 --- 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" > - + } > @@ -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 ? : } + {vm.isNotificationMute ? : } } > diff --git a/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx b/src/components/views/settings/tabs/room/NotificationSettingsTab.tsx index f400024c0b..a66c75d65c 100644 --- 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 {_t("notifications|default")} @@ -195,7 +194,6 @@ export default class NotificationsSettingsTab extends React.Component {_t("notifications|all_messages")} @@ -207,7 +205,6 @@ export default class NotificationsSettingsTab extends React.Component {_t("notifications|mentions_and_keywords")} @@ -232,7 +229,6 @@ export default class NotificationsSettingsTab extends React.Component {_t("common|off")} diff --git a/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap index 9cbc1a6464..9706fb7024 100644 --- a/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/__snapshots__/NotificationDecoration-test.tsx.snap @@ -157,7 +157,7 @@ exports[` should render the unset message decoration 1 xmlns="http://www.w3.org/2000/svg" > diff --git a/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap b/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap index 1567cb594b..3475835ef0 100644 --- a/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/__snapshots__/RoomTile-test.tsx.snap @@ -81,7 +81,19 @@ exports[`RoomTile when message previews are enabled and there is a message in a class="mx_AccessibleButton mx_RoomTile_notificationsButton" role="button" tabindex="-1" - /> + > + + + + `; @@ -175,7 +187,19 @@ exports[`RoomTile when message previews are enabled and there is a message in th class="mx_AccessibleButton mx_RoomTile_notificationsButton" role="button" tabindex="-1" - /> + > + + + + `; @@ -250,7 +274,19 @@ exports[`RoomTile when message previews are enabled should render a room without class="mx_AccessibleButton mx_RoomTile_notificationsButton" role="button" tabindex="-1" - /> + > + + + + `; @@ -324,7 +360,19 @@ exports[`RoomTile when message previews are not enabled should render the room 1 class="mx_AccessibleButton mx_RoomTile_notificationsButton" role="button" tabindex="-1" - /> + > + + + + `; diff --git a/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx index f4efc39e1f..3d0cc39a2e 100644 --- a/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx +++ b/test/unit-tests/components/views/settings/tabs/room/NotificationSettingsTab-test.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; -import { render, type RenderResult, screen } from "jest-matrix-react"; +import { render, type RenderResult, screen, within } from "jest-matrix-react"; import { type MatrixClient } from "matrix-js-sdk/src/matrix"; import userEvent from "@testing-library/user-event"; @@ -19,7 +19,7 @@ import { type RoomEchoChamber } from "../../../../../../../src/stores/local-echo import SettingsStore from "../../../../../../../src/settings/SettingsStore"; import { SettingLevel } from "../../../../../../../src/settings/SettingLevel"; -describe("NotificatinSettingsTab", () => { +describe("NotificationSettingsTab", () => { const roomId = "!room:example.com"; let cli: MatrixClient; let roomProps: RoomEchoChamber; @@ -45,9 +45,7 @@ describe("NotificatinSettingsTab", () => { const tab = renderTab(); // settings link of mentions_only volume - const settingsLink = tab.container.querySelector( - "label.mx_NotificationSettingsTab_mentionsKeywordsEntry div.mx_AccessibleButton", - ); + const settingsLink = within(tab.getByText("@mentions & keywords")).getByRole("button", { name: "settings" }); if (!settingsLink) throw new Error("settings link does not exist."); await userEvent.click(settingsLink);