diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png index 1a6148c9c1..0887d95a0c 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png index 7ece029188..1a082fc9bf 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png index a62067243e..4600e591f8 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png index 4993fec9b6..4878163232 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png index b6c259785e..1167c0672f 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png index 921117c945..bdddc786c5 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png index 6968d3176d..e9feb85d10 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png index fb80e1645c..f59e2d7ab1 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png index 3baeecb3d9..078eae3de4 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png index 1d8b5771d4..0f0df017fd 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png index ca0fab0f78..6cc3f5506f 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png index 6b903fd7ff..f92f43c947 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png index 6a486d591f..bc3f87e221 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png index 22b7b56d27..88f8e1982d 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png index 56624ac9bd..834135a09b 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png index 7d48d40fb6..d87f2da4ba 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png index 62744fc4e9..249f4dabfb 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png differ diff --git a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png index c203d12b5d..d057007ec2 100644 Binary files a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png and b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png differ diff --git a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png index 0593b44155..1f24df116e 100644 Binary files a/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png and b/playwright/snapshots/right-panel/file-panel.spec.ts/file-tiles-list-linux.png differ diff --git a/res/css/views/audio_messages/_PlayPauseButton.pcss b/res/css/views/audio_messages/_PlayPauseButton.pcss index 8eb6547413..a47399090b 100644 --- a/res/css/views/audio_messages/_PlayPauseButton.pcss +++ b/res/css/views/audio_messages/_PlayPauseButton.pcss @@ -21,6 +21,10 @@ Please see LICENSE files in the repository root for full details. background-color: $secondary-content; mask-repeat: no-repeat; mask-size: contain; + top: 6px; /* center */ + left: 6px; /* center */ + width: 20px; + height: 20px; } &.mx_PlayPauseButton_disabled::before { @@ -28,18 +32,10 @@ Please see LICENSE files in the repository root for full details. } &.mx_PlayPauseButton_play::before { - width: 13px; - height: 16px; - top: 8px; /* center */ - left: 12px; /* center */ - mask-image: url("$(res)/img/element-icons/play.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/play-solid.svg"); } &.mx_PlayPauseButton_pause::before { - width: 10px; - height: 12px; - top: 10px; /* center */ - left: 11px; /* center */ - mask-image: url("$(res)/img/element-icons/pause.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/pause-solid.svg"); } } diff --git a/res/css/views/messages/_LegacyCallEvent.pcss b/res/css/views/messages/_LegacyCallEvent.pcss index e9a88dd8f1..54ebb95766 100644 --- a/res/css/views/messages/_LegacyCallEvent.pcss +++ b/res/css/views/messages/_LegacyCallEvent.pcss @@ -75,7 +75,7 @@ Please see LICENSE files in the repository root for full details. &.mx_LegacyCallEvent_rejected, &.mx_LegacyCallEvent_noAnswer { .mx_LegacyCallEvent_type_icon::before { - mask-image: url("$(res)/img/voip/declined-video.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-declined-solid.svg"); } } } @@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details. &.mx_LegacyCallEvent_video { .mx_LegacyCallEvent_type_icon::before { - mask-image: url("$(res)/img/voip/missed-video.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-missed-solid.svg"); } } } diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index dde96afd6a..5e3e8b0303 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -253,7 +253,7 @@ Please see LICENSE files in the repository root for full details. } .mx_MessageComposer_voiceMessage::before { - mask-image: url("$(res)/img/element-icons/mic.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); } .mx_MessageComposer_voiceBroadcast::before { diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss index 98b3c36c72..82cdd59ccf 100644 --- a/res/css/views/rooms/_ReplyTile.pcss +++ b/res/css/views/rooms/_ReplyTile.pcss @@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details. font: var(--cpd-font-body-md-regular); &.mx_ReplyTile_audio .mx_MFileBody_info_icon::before { - mask-image: url("$(res)/img/element-icons/speaker.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/volume-on-solid.svg"); } &.mx_ReplyTile_video .mx_MFileBody_info_icon::before { diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss index 7feb73c7c8..d17e05bb05 100644 --- a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss +++ b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss @@ -87,19 +87,19 @@ Please see LICENSE files in the repository root for full details. &.mx_LegacyCallViewButtons_button_mic::before { height: 20px; - mask-image: url("$(res)/img/element-icons/mic.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); width: 20px; } &.mx_LegacyCallViewButtons_button_vid::before { - mask-image: url("$(res)/img/voip/call-view/cam-on.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } &.mx_LegacyCallViewButtons_button_screensharing { background-color: $accent; &::before { - mask-image: url("$(res)/img/voip/call-view/screensharing.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg"); background-color: white; /* Same on both themes */ } } @@ -118,19 +118,19 @@ Please see LICENSE files in the repository root for full details. &.mx_LegacyCallViewButtons_button_mic::before { height: 20px; - mask-image: url("$(res)/img/element-icons/Mic-off.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg"); width: 20px; } &.mx_LegacyCallViewButtons_button_vid::before { - mask-image: url("$(res)/img/voip/call-view/cam-off.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg"); } &.mx_LegacyCallViewButtons_button_screensharing { background-color: $call-view-button-on-background; &::before { - mask-image: url("$(res)/img/voip/call-view/screensharing.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/share-screen-solid.svg"); background-color: $call-view-button-on-foreground; } } diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss index 648c1dbb43..7cb7925cd8 100644 --- a/res/css/views/voip/_CallView.pcss +++ b/res/css/views/voip/_CallView.pcss @@ -123,12 +123,12 @@ Please see LICENSE files in the repository root for full details. } &.mx_CallView_deviceButton_audio::before { - mask-image: url("$(res)/img/element-icons/mic.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); mask-size: 14px; } &.mx_CallView_deviceButton_video::before { - mask-image: url("$(res)/img/voip/call-view/cam-on.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-solid.svg"); } } @@ -168,12 +168,12 @@ Please see LICENSE files in the repository root for full details. .mx_CallView_deviceButton { &.mx_CallView_deviceButton_audio::before { - mask-image: url("$(res)/img/element-icons/Mic-off.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg"); mask-size: 18px; } &.mx_CallView_deviceButton_video::before { - mask-image: url("$(res)/img/voip/call-view/cam-off.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/video-call-off-solid.svg"); } } } diff --git a/res/css/views/voip/_VideoFeed.pcss b/res/css/views/voip/_VideoFeed.pcss index 86c61ec152..c0f13c3e78 100644 --- a/res/css/views/voip/_VideoFeed.pcss +++ b/res/css/views/voip/_VideoFeed.pcss @@ -72,11 +72,11 @@ Please see LICENSE files in the repository root for full details. } &.mx_VideoFeed_mic_muted::before { - mask-image: url("$(res)/img/element-icons/Mic-off.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-off-solid.svg"); } &.mx_VideoFeed_mic_unmuted::before { - mask-image: url("$(res)/img/element-icons/mic.svg"); + mask-image: url("@vector-im/compound-design-tokens/icons/mic-on-solid.svg"); } } } diff --git a/res/img/compound/mic-16px.svg b/res/img/compound/mic-16px.svg deleted file mode 100644 index bc80ff14ce..0000000000 --- a/res/img/compound/mic-16px.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/compound/pause-12.svg b/res/img/compound/pause-12.svg deleted file mode 100644 index 8e2cc88a5b..0000000000 --- a/res/img/compound/pause-12.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/compound/play-16.svg b/res/img/compound/play-16.svg deleted file mode 100644 index c8ed756429..0000000000 --- a/res/img/compound/play-16.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/Mic-off.svg b/res/img/element-icons/Mic-off.svg deleted file mode 100644 index 0bf1c3f922..0000000000 --- a/res/img/element-icons/Mic-off.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/element-icons/mic.svg b/res/img/element-icons/mic.svg deleted file mode 100644 index 00f0564edc..0000000000 --- a/res/img/element-icons/mic.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/res/img/element-icons/pause.svg b/res/img/element-icons/pause.svg deleted file mode 100644 index 4b7be99e3b..0000000000 --- a/res/img/element-icons/pause.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/res/img/element-icons/play.svg b/res/img/element-icons/play.svg deleted file mode 100644 index 3443ae01fa..0000000000 --- a/res/img/element-icons/play.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/element-icons/speaker.svg b/res/img/element-icons/speaker.svg deleted file mode 100644 index fd811d2cda..0000000000 --- a/res/img/element-icons/speaker.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/res/img/voip/call-view/cam-off.svg b/res/img/voip/call-view/cam-off.svg deleted file mode 100644 index 9a36290521..0000000000 --- a/res/img/voip/call-view/cam-off.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/voip/call-view/cam-on.svg b/res/img/voip/call-view/cam-on.svg deleted file mode 100644 index fb18058786..0000000000 --- a/res/img/voip/call-view/cam-on.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/voip/call-view/screensharing.svg b/res/img/voip/call-view/screensharing.svg deleted file mode 100644 index 4639c34cbf..0000000000 --- a/res/img/voip/call-view/screensharing.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/voip/declined-video.svg b/res/img/voip/declined-video.svg deleted file mode 100644 index 509ffa8fd1..0000000000 --- a/res/img/voip/declined-video.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/res/img/voip/missed-video.svg b/res/img/voip/missed-video.svg deleted file mode 100644 index a2f3bc73ac..0000000000 --- a/res/img/voip/missed-video.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx index 238c151409..52c0251c5e 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx @@ -10,10 +10,10 @@ import React from "react"; import { Room } from "matrix-js-sdk/src/matrix"; import classNames from "classnames"; import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close"; +import MicrophoneIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on-solid"; import { LiveBadge, VoiceBroadcastLiveness } from "../.."; import { Icon as LiveIcon } from "../../../../res/img/compound/live-16px.svg"; -import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg"; import { Icon as TimerIcon } from "../../../../res/img/compound/timer-16px.svg"; import { _t } from "../../../languageHandler"; import RoomAvatar from "../../../components/views/avatars/RoomAvatar"; diff --git a/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx b/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx index 339135604f..08531b8afd 100644 --- a/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx +++ b/src/voice-broadcast/components/atoms/VoiceBroadcastPlaybackControl.tsx @@ -7,9 +7,9 @@ Please see LICENSE files in the repository root for full details. */ import React, { ReactElement } from "react"; +import PauseIcon from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid"; +import PlayIcon from "@vector-im/compound-design-tokens/assets/web/icons/play-solid"; -import { Icon as PlayIcon } from "../../../../res/img/compound/play-16.svg"; -import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg"; import { _t } from "../../../languageHandler"; import { VoiceBroadcastControl, VoiceBroadcastPlaybackState } from "../.."; diff --git a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx index 046e25ea5c..d04132b220 100644 --- a/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx +++ b/src/voice-broadcast/components/molecules/VoiceBroadcastRecordingPip.tsx @@ -7,6 +7,8 @@ Please see LICENSE files in the repository root for full details. */ import React, { useRef, useState } from "react"; +import PauseIcon from "@vector-im/compound-design-tokens/assets/web/icons/pause-solid"; +import MicrophoneIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on-solid"; import { VoiceBroadcastControl, @@ -18,9 +20,7 @@ import { import { useVoiceBroadcastRecording } from "../../hooks/useVoiceBroadcastRecording"; import { VoiceBroadcastHeader } from "../atoms/VoiceBroadcastHeader"; import { Icon as StopIcon } from "../../../../res/img/compound/stop-16.svg"; -import { Icon as PauseIcon } from "../../../../res/img/compound/pause-12.svg"; import { Icon as RecordIcon } from "../../../../res/img/compound/record-10px.svg"; -import { Icon as MicrophoneIcon } from "../../../../res/img/compound/mic-16px.svg"; import { _t } from "../../../languageHandler"; import { useAudioDeviceSelection } from "../../../hooks/useAudioDeviceSelection"; import { DevicesContextMenu } from "../../../components/views/audio_messages/DevicesContextMenu"; diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap index c378b9737d..0c1c966f73 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap @@ -29,9 +29,21 @@ exports[`VoiceBroadcastHeader when rendering a buffering live broadcast header w role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + test user @@ -86,9 +98,21 @@ exports[`VoiceBroadcastHeader when rendering a live (grey) broadcast header with role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + test user @@ -143,9 +167,21 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + test user @@ -216,9 +252,21 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + test user diff --git a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap index 109fae39be..1ce23ca8b5 100644 --- a/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap +++ b/test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastPlaybackControl-test.tsx.snap @@ -8,9 +8,18 @@ exports[` should render state buffering as expe role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
`; @@ -23,9 +32,18 @@ exports[` should render state pause as expected role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
`; @@ -38,9 +56,18 @@ exports[` should render state playing as expect role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
`; @@ -53,9 +80,18 @@ exports[` should render state stopped as expect role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
`; diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap index 722f44886b..e9e902c5d6 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap @@ -32,9 +32,21 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -84,9 +96,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -198,9 +231,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a pause/not-live broadcast sh role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -324,9 +378,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast in pip mo role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -438,9 +513,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing broadcast should re role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -560,9 +656,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a playing/live broadcast shou role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -664,9 +781,18 @@ exports[`VoiceBroadcastPlaybackBody when rendering a stopped broadcast should re role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap index 9170d43ce0..f50cdc3be4 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPreRecordingPip-test.tsx.snap @@ -44,9 +44,21 @@ exports[`VoiceBroadcastPreRecordingPip when rendered should match the snapshot 1 role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + Default Device diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap index 799af889bc..c2e6fdcd54 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap @@ -32,9 +32,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -85,9 +97,21 @@ exports[`VoiceBroadcastRecordingBody when rendering a paused broadcast should re role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com diff --git a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap index 043dd0bbc8..2fc2334575 100644 --- a/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap +++ b/test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap @@ -83,9 +83,21 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
-
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + +
when rendering a { state: 'pause', role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -59,9 +71,18 @@ exports[` when rendering a { state: 'pause', role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
when rendering a { state: 'playing' role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -152,9 +185,18 @@ exports[` when rendering a { state: 'playing' role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
when rendering a buffering broadcas role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -256,9 +310,18 @@ exports[` when rendering a buffering broadcas role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
when rendering a playing broadcast role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -341,9 +416,18 @@ exports[` when rendering a playing broadcast role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +
when rendering a stopped broadcast role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + + + @user:example.com @@ -426,9 +522,18 @@ exports[` when rendering a stopped broadcast role="button" tabindex="0" > -
+ fill="currentColor" + height="1em" + viewBox="0 0 24 24" + width="1em" + xmlns="http://www.w3.org/2000/svg" + > + +