Deduplicate media & voip icons using Compound Design Tokens (#129)

* Deduplicate media & voip icons using Compound Design Tokens Signed-off-by: Michael Telatynski <[email protected]> * Update tests Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 8, 2024 · df4a223 · df4a223
1 parent 197168b
commit df4a223
Show file tree

Hide file tree

Showing 49 changed files with 497 additions and 149 deletions.
diff --git a/...spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png b/...spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png
diff --git a/....spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png b/....spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
diff --git a/...er.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png b/...er.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
diff --git a/...c.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png b/...c.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
diff --git a/...ec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png b/...ec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
diff --git a/...spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png b/...spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
diff --git a/...pec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png b/...pec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png
diff --git a/...spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png b/...spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
diff --git a/...r.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png b/...r.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
diff --git a/...EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png b/...EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png
diff --git a/...-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png b/...-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
diff --git a/...ed-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png b/...ed-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
diff --git a/...spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png b/...spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
diff --git a/...s/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png b/...s/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
diff --git a/...ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png b/...ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
diff --git a/...c.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png b/...c.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
diff --git a/....spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png b/....spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
diff --git a/...er.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png b/...er.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
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
diff --git a/res/css/views/audio_messages/_PlayPauseButton.pcss b/res/css/views/audio_messages/_PlayPauseButton.pcss
@@ -21,25 +21,21 @@ 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 {
         opacity: 0.5;
     }
 
     &.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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/res/img/compound/pause-12.svg b/res/img/compound/pause-12.svg
diff --git a/res/img/compound/play-16.svg b/res/img/compound/play-16.svg
diff --git a/res/img/element-icons/Mic-off.svg b/res/img/element-icons/Mic-off.svg
diff --git a/res/img/element-icons/mic.svg b/res/img/element-icons/mic.svg
diff --git a/res/img/element-icons/pause.svg b/res/img/element-icons/pause.svg
diff --git a/res/img/element-icons/play.svg b/res/img/element-icons/play.svg
diff --git a/res/img/element-icons/speaker.svg b/res/img/element-icons/speaker.svg
diff --git a/res/img/voip/call-view/cam-off.svg b/res/img/voip/call-view/cam-off.svg
diff --git a/res/img/voip/call-view/cam-on.svg b/res/img/voip/call-view/cam-on.svg
diff --git a/res/img/voip/call-view/screensharing.svg b/res/img/voip/call-view/screensharing.svg
diff --git a/res/img/voip/declined-video.svg b/res/img/voip/declined-video.svg
diff --git a/res/img/voip/missed-video.svg b/res/img/voip/missed-video.svg
diff --git 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
@@ -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 "../..";