diff --git a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png index 2e46c528a3..81807e1a0d 100644 Binary files a/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png and b/playwright/snapshots/settings/room-settings/room-video-tab.spec.ts/room-video-settings-linux.png differ diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png index aa181714ae..8fc91cba6b 100644 Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-checked-linux.png differ diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png index 9893a76cb7..6e8e78e66b 100644 Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-video-toast-unchecked-linux.png differ diff --git a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png index 8841e13823..d5d9e8f21d 100644 Binary files a/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png and b/playwright/snapshots/voip/element-call.spec.ts/incoming-call-group-voice-toast-linux.png differ diff --git a/playwright/snapshots/voip/pstn.spec.ts/dialpad-linux.png b/playwright/snapshots/voip/pstn.spec.ts/dialpad-linux.png index 3be63e2f50..ea67953d9e 100644 Binary files a/playwright/snapshots/voip/pstn.spec.ts/dialpad-linux.png and b/playwright/snapshots/voip/pstn.spec.ts/dialpad-linux.png differ diff --git a/res/css/structures/_LeftPanel.pcss b/res/css/structures/_LeftPanel.pcss index 46d1b99617..14c9230a37 100644 --- a/res/css/structures/_LeftPanel.pcss +++ b/res/css/structures/_LeftPanel.pcss @@ -125,11 +125,11 @@ Please see LICENSE files in the repository root for full details. &::before { content: ""; position: absolute; - top: 8px; - left: 8px; - width: 16px; - height: 16px; - mask-image: url("$(res)/img/element-icons/call/dialpad.svg"); + top: 6px; + left: 6px; + width: 20px; + height: 20px; + mask-image: url("@vector-im/compound-design-tokens/icons/dial-pad.svg"); mask-position: center; mask-size: contain; mask-repeat: no-repeat; diff --git a/res/css/views/dialogs/_RoomSettingsDialog.pcss b/res/css/views/dialogs/_RoomSettingsDialog.pcss index 7593a72bd9..7a37462955 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.pcss +++ b/res/css/views/dialogs/_RoomSettingsDialog.pcss @@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details. } .mx_RoomSettingsDialog_voiceIcon::before { - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); } .mx_RoomSettingsDialog_securityIcon::before { diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.pcss b/res/css/views/dialogs/_SpaceSettingsDialog.pcss index 6c48e34b75..9b9a825407 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.pcss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.pcss @@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details. } .mx_SpaceSettingsDialog_visibilityIcon::before { - mask-image: url("$(res)/img/element-icons/eye.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg"); } } } diff --git a/res/css/views/elements/_InviteReason.pcss b/res/css/views/elements/_InviteReason.pcss index 509e6cfaf9..b007a90c6c 100644 --- a/res/css/views/elements/_InviteReason.pcss +++ b/res/css/views/elements/_InviteReason.pcss @@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details. content: ""; margin-right: 8px; background-color: $secondary-content; - mask-image: url("$(res)/img/element-icons/eye.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/visibility-on.svg"); display: inline-block; width: 18px; height: 14px; diff --git a/res/css/views/messages/_CallEvent.pcss b/res/css/views/messages/_CallEvent.pcss index 1797c283ce..dd260189d8 100644 --- a/res/css/views/messages/_CallEvent.pcss +++ b/res/css/views/messages/_CallEvent.pcss @@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details. vertical-align: middle; content: ""; background-color: $secondary-content; - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); mask-size: 16px; width: 16px; height: 16px; diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/res/css/views/messages/_LegacyCallEvent.pcss index c79279b763..12004bbdcf 100644 --- a/res/css/views/messages/_LegacyCallEvent.pcss +++ b/res/css/views/messages/_LegacyCallEvent.pcss @@ -54,13 +54,13 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyCallEvent_type_icon::before, .mx_LegacyCallEvent_content_button_callBack span::before, .mx_LegacyCallEvent_content_button_answer span::before { - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); } &.mx_LegacyCallEvent_rejected, &.mx_LegacyCallEvent_noAnswer { .mx_LegacyCallEvent_type_icon::before { - mask-image: url("$(res)/img/element-icons/call/hangup.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); } } } @@ -69,7 +69,7 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyCallEvent_type_icon::before, .mx_LegacyCallEvent_content_button_callBack span::before, .mx_LegacyCallEvent_content_button_answer span::before { - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } &.mx_LegacyCallEvent_rejected, @@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details. .mx_LegacyCallEvent_content_button_reject { span::before { - mask-image: url("$(res)/img/element-icons/call/hangup.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); } } diff --git a/res/css/views/messages/_MJitsiWidgetEvent.pcss b/res/css/views/messages/_MJitsiWidgetEvent.pcss index 252681f684..9884d8951f 100644 --- a/res/css/views/messages/_MJitsiWidgetEvent.pcss +++ b/res/css/views/messages/_MJitsiWidgetEvent.pcss @@ -9,6 +9,6 @@ Please see LICENSE files in the repository root for full details. .mx_EventTileBubble.mx_MJitsiWidgetEvent { &::before { background-color: $header-panel-text-primary-color; /* XXX: Variable abuse */ - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } } diff --git a/res/css/views/rooms/_LiveContentSummary.pcss b/res/css/views/rooms/_LiveContentSummary.pcss index a367e7e75d..916d7e73dc 100644 --- a/res/css/views/rooms/_LiveContentSummary.pcss +++ b/res/css/views/rooms/_LiveContentSummary.pcss @@ -22,11 +22,11 @@ Please see LICENSE files in the repository root for full details. } &.mx_LiveContentSummary_text_video::before { - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } &.mx_LiveContentSummary_text_voice::before { - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); } &.mx_LiveContentSummary_text_active { diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss index 803e38c67f..2d7ec9353a 100644 --- a/res/css/views/rooms/_ReplyTile.pcss +++ b/res/css/views/rooms/_ReplyTile.pcss @@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_ReplyTile_video .mx_MFileBody_info_icon::before { - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } > a { diff --git a/res/css/views/rooms/_RoomCallBanner.pcss b/res/css/views/rooms/_RoomCallBanner.pcss index 0be3abe26f..f4fd14c2fa 100644 --- a/res/css/views/rooms/_RoomCallBanner.pcss +++ b/res/css/views/rooms/_RoomCallBanner.pcss @@ -41,6 +41,6 @@ Please see LICENSE files in the repository root for full details. width: 16px; height: 1.2em; /* to match line height */ margin-right: 8px; - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } } diff --git a/res/css/views/rooms/_RoomInfoLine.pcss b/res/css/views/rooms/_RoomInfoLine.pcss index 16127b1c6d..74ef6c77e1 100644 --- a/res/css/views/rooms/_RoomInfoLine.pcss +++ b/res/css/views/rooms/_RoomInfoLine.pcss @@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details. &.mx_RoomInfoLine_video::before { width: 16px; mask-size: 16px; - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } .mx_RoomInfoLine_members { diff --git a/res/css/views/rooms/_RoomPreviewCard.pcss b/res/css/views/rooms/_RoomPreviewCard.pcss index bad3a9ad05..61afe0d92b 100644 --- a/res/css/views/rooms/_RoomPreviewCard.pcss +++ b/res/css/views/rooms/_RoomPreviewCard.pcss @@ -81,7 +81,7 @@ Please see LICENSE files in the repository root for full details. mask-size: 22px; mask-position: center; mask-repeat: no-repeat; - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } } diff --git a/res/css/views/toasts/_IncomingLegacyCallToast.pcss b/res/css/views/toasts/_IncomingLegacyCallToast.pcss index 257cfbe370..a90e36bbda 100644 --- a/res/css/views/toasts/_IncomingLegacyCallToast.pcss +++ b/res/css/views/toasts/_IncomingLegacyCallToast.pcss @@ -65,14 +65,14 @@ Please see LICENSE files in the repository root for full details. &.mx_IncomingLegacyCallToast_content_voice { .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before, .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before { - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); } } &.mx_IncomingLegacyCallToast_content_video { .mx_LegacyCallEvent_type .mx_LegacyCallEvent_type_icon::before, .mx_IncomingLegacyCallToast_buttons .mx_IncomingLegacyCallToast_button_accept span::before { - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } } @@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details. } &.mx_IncomingLegacyCallToast_button_decline span::before { - mask-image: url("$(res)/img/element-icons/call/hangup.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); mask-size: 16px; width: 16px; height: 16px; diff --git a/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss index a404430204..9a4afb98ab 100644 --- a/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss +++ b/res/css/views/toasts/_NonUrgentEchoFailureToast.pcss @@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details. mask-size: contain; mask-repeat: no-repeat; background-color: #fff; /* we know that non-urgent toasts are always styled the same */ - mask-image: url("$(res)/img/element-icons/cloud-off.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/offline.svg"); margin-right: 8px; } diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index 9849e9c560..e7bd4c3281 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -155,7 +155,7 @@ Please see LICENSE files in the repository root for full details. background-color: $alert; &::before { - mask-image: url("$(res)/img/element-icons/call/hangup.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/end-call.svg"); background-color: white; /* Same on both themes */ } } diff --git a/res/css/views/voip/_DialPad.pcss b/res/css/views/voip/_DialPad.pcss index e39620fd64..717ec335b8 100644 --- a/res/css/views/voip/_DialPad.pcss +++ b/res/css/views/voip/_DialPad.pcss @@ -54,6 +54,6 @@ Please see LICENSE files in the repository root for full details. mask-size: 20px; mask-position: center; background-color: #fff; /* on all themes */ - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); } } diff --git a/res/css/views/voip/_LegacyCallViewHeader.pcss b/res/css/views/voip/_LegacyCallViewHeader.pcss index c69add3ba0..d3a3d76cee 100644 --- a/res/css/views/voip/_LegacyCallViewHeader.pcss +++ b/res/css/views/voip/_LegacyCallViewHeader.pcss @@ -116,6 +116,6 @@ Please see LICENSE files in the repository root for full details. mask-repeat: no-repeat; mask-size: contain; mask-position: center; - mask-image: url("$(res)/img/element-icons/call/voice-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/voice-call-solid.svg"); } } diff --git a/res/img/element-icons/call/dialpad.svg b/res/img/element-icons/call/dialpad.svg deleted file mode 100644 index a97e80aa0b..0000000000 --- a/res/img/element-icons/call/dialpad.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/call/hangup.svg b/res/img/element-icons/call/hangup.svg deleted file mode 100644 index 173677db2d..0000000000 --- a/res/img/element-icons/call/hangup.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/call/video-call.svg b/res/img/element-icons/call/video-call.svg deleted file mode 100644 index 1d9546d034..0000000000 --- a/res/img/element-icons/call/video-call.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/call/voice-call.svg b/res/img/element-icons/call/voice-call.svg deleted file mode 100644 index d32b703523..0000000000 --- a/res/img/element-icons/call/voice-call.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/cloud-off.svg b/res/img/element-icons/cloud-off.svg deleted file mode 100644 index 7faea7d3b5..0000000000 --- a/res/img/element-icons/cloud-off.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/eye.svg b/res/img/element-icons/eye.svg deleted file mode 100644 index 0460a6201d..0000000000 --- a/res/img/element-icons/eye.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/structures/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx index 3bd2518c8a..6447b0706b 100644 --- a/src/components/structures/LeftPanel.tsx +++ b/src/components/structures/LeftPanel.tsx @@ -344,7 +344,7 @@ export default class LeftPanel extends React.Component { if (this.state.supportsPstnProtocol) { dialPadButton = ( diff --git a/src/components/views/pips/WidgetPip.tsx b/src/components/views/pips/WidgetPip.tsx index ed49552cf0..22df47865d 100644 --- a/src/components/views/pips/WidgetPip.tsx +++ b/src/components/views/pips/WidgetPip.tsx @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details. import React, { type FC, type RefObject, useCallback, useMemo } from "react"; import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix"; -import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left"; +import { ArrowLeftIcon, EndCallIcon } from "@vector-im/compound-design-tokens/assets/web/icons"; import PersistentApp from "../elements/PersistentApp"; import defaultDispatcher from "../../../dispatcher/dispatcher"; @@ -20,7 +20,6 @@ import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayo import { useTypedEventEmitterState } from "../../../hooks/useEventEmitter"; import Toolbar from "../../../accessibility/Toolbar"; import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex"; -import { Icon as HangupIcon } from "../../../../res/img/element-icons/call/hangup.svg"; import { _t } from "../../../languageHandler"; import { WidgetType } from "../../../widgets/WidgetType"; import { WidgetMessagingStore } from "../../../stores/widgets/WidgetMessagingStore"; @@ -112,7 +111,7 @@ export const WidgetPip: FC = ({ widgetId, room, viewingRoom, onStartMovin className="mx_WidgetPip_backButton" aria-label={_t("action|back")} > - + {roomName} @@ -124,7 +123,7 @@ export const WidgetPip: FC = ({ widgetId, room, viewingRoom, onStartMovin aria-label={_t("action|leave")} placement="top" > - + )} diff --git a/src/vector/jitsi/index.pcss b/src/vector/jitsi/index.pcss index f51559f19a..9dfbd1796f 100644 --- a/src/vector/jitsi/index.pcss +++ b/src/vector/jitsi/index.pcss @@ -99,7 +99,7 @@ html { background-color: $dark-fg; mask-repeat: no-repeat; mask-position: center; - mask-image: url("$(res)/img/element-icons/call/video-call.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); mask-size: $icon-size; display: block; width: $icon-size;