Deduplicate icons using Compound (#28239)

* Deduplicate icons using Compound Signed-off-by: Michael Telatynski <[email protected]> * Update snapshots Signed-off-by: Michael Telatynski <[email protected]> * Update e2e tests Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
element-hq · Oct 21, 2024 · 02e0aca · 02e0aca
1 parent c278d2f
commit 02e0aca
Show file tree

Hide file tree

Showing 48 changed files with 156 additions and 203 deletions.
diff --git a/playwright/e2e/timeline/timeline.spec.ts b/playwright/e2e/timeline/timeline.spec.ts
@@ -653,7 +653,7 @@ test.describe("Timeline", () => {
             const toggleEventButton = viewSourceEventExpanded.getByRole("button", { name: "toggle event" });
             // Check size and position of toggle on expanded view source event
             // See: _ViewSourceEvent.pcss
-            await expect(toggleEventButton).toHaveCSS("height", "12px"); // --ViewSourceEvent_toggle-size
+            await expect(toggleEventButton).toHaveCSS("height", "16px"); // --ViewSourceEvent_toggle-size
             await expect(toggleEventButton).toHaveCSS("align-self", "flex-end");
             // Click again to collapse the source
             await toggleEventButton.click({ position: { x: 0, y: 0 } });
@@ -679,7 +679,7 @@ test.describe("Timeline", () => {
             );
 
             // Click view source event toggle
-            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 0, y: 0 } });
+            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 8, y: 8 } });
 
             // Make sure the expand toggle worked
             await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible();

diff --git a/...snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png b/...snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png
diff --git a/...snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png b/...snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
diff --git a/.../snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png b/.../snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
diff --git a/...snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png b/...snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
diff --git a/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png
diff --git a/res/css/components/views/location/_ZoomButtons.pcss b/res/css/components/views/location/_ZoomButtons.pcss
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
 
         .mx_ZoomButtons_icon {
-            $ZoomButtons_icon-size: 10px;
+            $ZoomButtons_icon-size: 12px;
 
             height: $ZoomButtons_icon-size;
             width: $ZoomButtons_icon-size;

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
             &::before {
                 background-color: $primary-content;
-                mask-image: url("$(res)/img/element-icons/plus.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
                 transition: all 0.2s ease-in-out; /* TODO transition */
             }
         }
@@ -434,7 +434,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url("$(res)/img/element-icons/plus.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
     }
 
     .mx_SpacePanel_iconExplore::before {

diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCollapse::before {
-        mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
     }
 
     .mx_MessageContextMenu_iconReport::before {

diff --git 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/feather-customised/eye.svg");
+            mask-image: url("$(res)/img/element-icons/eye.svg");
             display: inline-block;
             width: 18px;
             height: 14px;

diff --git a/res/css/views/messages/_MImageBody.pcss b/res/css/views/messages/_MImageBody.pcss
@@ -100,7 +100,7 @@ Please see LICENSE files in the repository root for full details.
             margin-right: 8px;
 
             background-color: $accent;
-            mask-image: url("$(res)/img/feather-customised/eye.svg");
+            mask-image: url("$(res)/img/element-icons/eye.svg");
             display: inline-block;
             width: 18px;
             height: 14px;

diff --git a/res/css/views/messages/_ViewSourceEvent.pcss b/res/css/views/messages/_ViewSourceEvent.pcss
@@ -25,19 +25,18 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_ViewSourceEvent_toggle {
-        --ViewSourceEvent_toggle-size: 12px;
+        --ViewSourceEvent_toggle-size: 16px;
 
         visibility: hidden;
-        /* override styles from AccessibleButton */
-        border-radius: 0;
         /* icon */
-        mask-repeat: no-repeat;
-        mask-position: 0 center;
-        mask-size: auto var(--ViewSourceEvent_toggle-size);
         width: var(--ViewSourceEvent_toggle-size);
         min-width: var(--ViewSourceEvent_toggle-size);
-        background-color: $accent;
-        mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
+
+        svg {
+            color: $accent;
+            width: var(--ViewSourceEvent_toggle-size);
+            height: var(--ViewSourceEvent_toggle-size);
+        }
 
         .mx_EventTile:hover & {
             visibility: visible;
@@ -47,8 +46,5 @@ Please see LICENSE files in the repository root for full details.
     &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
         align-self: flex-end;
         height: var(--ViewSourceEvent_toggle-size);
-        mask-position: 0 bottom;
-        margin-bottom: 5px;
-        mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
     }
 }
diff --git a/res/css/views/right_panel/_BaseCard.pcss b/res/css/views/right_panel/_BaseCard.pcss
@@ -73,7 +73,7 @@ Please see LICENSE files in the repository root for full details.
                     width: 100%;
                     mask-repeat: no-repeat;
                     mask-position: center;
-                    mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                     background-color: $secondary-content;
                 }
 

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
@@ -982,11 +982,11 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_collapseButton {
-    mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
 }
 
 .mx_EventTile_expandButton {
-    mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
 }
 
 .mx_EventTile_tileError {

diff --git a/res/css/views/rooms/_JumpToBottomButton.pcss b/res/css/views/rooms/_JumpToBottomButton.pcss
@@ -53,9 +53,9 @@ Please see LICENSE files in the repository root for full details.
     content: "";
     position: absolute;
     inset: 0;
-    mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
     mask-repeat: no-repeat;
-    mask-size: 20px;
+    mask-size: 24px;
     mask-position: center 6px;
     transform: rotate(180deg);
     background: var(--cpd-color-icon-tertiary);

diff --git a/res/css/views/rooms/_RoomListHeader.pcss b/res/css/views/rooms/_RoomListHeader.pcss
@@ -75,7 +75,7 @@ Please see LICENSE files in the repository root for full details.
             mask-size: contain;
             mask-repeat: no-repeat;
             background-color: $secondary-content;
-            mask-image: url("$(res)/img/element-icons/roomlist/plus.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
         }
 
         &:hover {
@@ -104,5 +104,5 @@ Please see LICENSE files in the repository root for full details.
     mask-image: url("$(res)/img/element-icons/roomlist/hash-search.svg");
 }
 .mx_RoomListHeader_iconPlus::before {
-    mask-image: url("$(res)/img/element-icons/plus.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
 }
diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss
@@ -127,7 +127,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_RoomSublist_auxButton::before {
-            mask-image: url("$(res)/img/element-icons/roomlist/plus.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
         }
 
         .mx_RoomSublist_menuButton::before {

diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
@@ -41,9 +41,9 @@ Please see LICENSE files in the repository root for full details.
     position: absolute;
     width: 36px;
     height: 36px;
-    mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
     mask-repeat: no-repeat;
-    mask-size: 20px;
+    mask-size: 24px;
     mask-position: center;
     background: var(--cpd-color-icon-tertiary);
 }

diff --git a/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss b/res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss
@@ -67,9 +67,9 @@ Please see LICENSE files in the repository root for full details.
             bottom: 0;
 
             &::before {
-                width: 14px;
-                height: 14px;
-                mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
+                width: 16px;
+                height: 16px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
             }
 
             &.mx_LegacyCallViewButtons_dropdownButton_collapsed::before {

diff --git a/res/img/element-icons/add-photo.svg b/res/img/element-icons/add-photo.svg
diff --git a/res/img/element-icons/community-rooms.svg b/res/img/element-icons/community-rooms.svg
diff --git a/res/img/element-icons/maximise-expand.svg b/res/img/element-icons/maximise-expand.svg
diff --git a/res/img/element-icons/message/chevron-up.svg b/res/img/element-icons/message/chevron-up.svg
diff --git a/res/img/element-icons/message/overflow-large.svg b/res/img/element-icons/message/overflow-large.svg
diff --git a/res/img/element-icons/minimise-collapse.svg b/res/img/element-icons/minimise-collapse.svg
diff --git a/res/img/element-icons/minus-button.svg b/res/img/element-icons/minus-button.svg
diff --git a/res/img/element-icons/plus-button.svg b/res/img/element-icons/plus-button.svg
diff --git a/res/img/element-icons/plus.svg b/res/img/element-icons/plus.svg
diff --git a/res/img/element-icons/roomlist/archived.svg b/res/img/element-icons/roomlist/archived.svg
diff --git a/res/img/element-icons/roomlist/plus.svg b/res/img/element-icons/roomlist/plus.svg
diff --git a/res/img/feather-customised/alert-triangle.svg b/res/img/feather-customised/alert-triangle.svg
diff --git a/res/img/feather-customised/eye.svg b/res/img/feather-customised/eye.svg
diff --git a/res/img/feather-customised/plus.svg b/res/img/feather-customised/plus.svg
diff --git a/res/img/feather-customised/widget/external-link.svg b/res/img/feather-customised/widget/external-link.svg
diff --git a/res/img/icon-address-delete.svg b/res/img/icon-address-delete.svg