Deduplicate more icons using Compound Design Tokens (#132)

* Deduplicate more icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
element-hq · Oct 15, 2024 · 7448bd5 · 7448bd5
1 parent 3256499
commit 7448bd5
Show file tree

Hide file tree

Showing 68 changed files with 358 additions and 210 deletions.
diff --git a/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
diff --git a/.../snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/.../snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
diff --git a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
diff --git a/...pshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png b/...pshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png
diff --git a/res/css/components/views/context_menus/_KebabContextMenu.pcss b/res/css/components/views/context_menus/_KebabContextMenu.pcss
@@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_KebabContextMenu_icon {
     width: 24px;
+    height: 24px;
     color: $icon-button-color;
 }
diff --git a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
@@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_PollDetailHeader_icon {
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     margin-right: $spacing-8;
     vertical-align: middle;
 }
diff --git a/res/css/components/views/location/_ShareDialogButtons.pcss b/res/css/components/views/location/_ShareDialogButtons.pcss
@@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ShareDialogButtons_button-icon {
-    height: 10px;
-    margin-top: 3px;
+    width: 20px;
+    height: 20px;
+    margin: 2px;
 }
diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
             border-width: 2px;
             border-color: var(--cpd-color-icon-accent-tertiary);
             background-color: var(--cpd-color-icon-accent-tertiary);
-            background-image: url("$(res)/img/element-icons/check-white.svg");
+            background-image: url("@vector-im/compound-design-tokens/icons/check.svg");
             background-size: 12px;
             background-repeat: no-repeat;
             background-position: center;

diff --git a/res/css/structures/_SpaceHierarchy.pcss b/res/css/structures/_SpaceHierarchy.pcss
@@ -211,7 +211,7 @@ Please see LICENSE files in the repository root for full details.
                                 mask-size: contain;
                                 mask-repeat: no-repeat;
                                 background-color: $accent;
-                                mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+                                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                             }
                         }
                     }

diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss
@@ -258,7 +258,7 @@ Please see LICENSE files in the repository root for full details.
                 mask-position: center;
                 mask-size: contain;
                 mask-repeat: no-repeat;
-                mask-image: url("$(res)/img/element-icons/context-menu.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                 background: $primary-content;
             }
         }

diff --git a/res/css/views/context_menus/_IconizedContextMenu.pcss b/res/css/views/context_menus/_IconizedContextMenu.pcss
@@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_IconizedContextMenu_checked::before {
-        mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
     }
 
     .mx_IconizedContextMenu_unchecked::before {

diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -49,7 +49,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconEndPoll::before {
-        mask-image: url("$(res)/img/element-icons/check-white.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
     }
 
     .mx_MessageContextMenu_iconForward::before {
@@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCopy::before {
-        height: 12px;
-        left: 2px;
+        height: 16px;
         mask-image: url($copy-button-url);
         position: relative;
-        width: 12px;
-        top: 3px;
+        width: 16px;
     }
 
     .mx_MessageContextMenu_iconEdit::before {

diff --git a/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss b/res/css/views/dialogs/_AddExistingToSpaceDialog.pcss
@@ -197,7 +197,7 @@ Please see LICENSE files in the repository root for full details.
                     mask-size: contain;
                     mask-repeat: no-repeat;
                     background-color: $accent;
-                    mask-image: url("$(res)/img/element-icons/roomlist/checkmark.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
                 }
             }
         }

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -121,14 +121,12 @@ Please see LICENSE files in the repository root for full details.
                     content: "";
                     mask-repeat: no-repeat;
                     mask-position: center;
-                    mask-size: contain;
-                    width: 8px;
-                    height: 8px;
+                    mask-size: 14px;
+                    width: inherit;
+                    height: inherit;
                     position: absolute;
-                    left: 50%;
-                    top: 50%;
-                    transform: translate(-50%, -50%);
-                    mask-image: url("$(res)/img/cancel-small.svg");
+                    left: 0;
+                    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 }
             }
         }
@@ -358,7 +356,7 @@ Please see LICENSE files in the repository root for full details.
                 }
 
                 .mx_SpotlightDialog_option--menu::before {
-                    mask-image: url("$(res)/img/element-icons/context-menu.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
                 }
 
                 &:hover,

diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss
@@ -64,14 +64,14 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         mask-repeat: no-repeat;
         mask-position: center;
-        mask-size: contain;
-        width: 8px;
-        height: 8px;
+        mask-size: 14px;
+        width: inherit;
+        height: inherit;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
-        mask-image: url("$(res)/img/cancel-small.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     }
 }
 

diff --git a/res/css/views/elements/_FacePile.pcss b/res/css/views/elements/_FacePile.pcss
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
         mask-position: center;
         mask-size: 20px;
         mask-repeat: no-repeat;
-        mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
     }
 }
 

diff --git a/res/css/views/elements/_TagComposer.pcss b/res/css/views/elements/_TagComposer.pcss
@@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
         position: relative;
 
         svg {
-            width: 0.5em;
-            vertical-align: middle;
+            width: 16px;
+            height: 16px;
         }
     }
 }
diff --git a/res/css/views/elements/_UseCaseSelectionButton.pcss b/res/css/views/elements/_UseCaseSelectionButton.pcss
@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
             width: 12px;
             height: 12px;
 
-            mask-image: url("$(res)/img/element-icons/check-white.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
         }
     }
 

diff --git a/res/css/views/right_panel/_ExtensionsCard.pcss b/res/css/views/right_panel/_ExtensionsCard.pcss
@@ -97,7 +97,7 @@ Please see LICENSE files in the repository root for full details.
         .mx_ExtensionsCard_app_options {
             right: 32px; /* 24 + 8 */
             &::before {
-                mask-image: url("$(res)/img/element-icons/room/ellipsis.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
             }
         }
 

diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss
@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_LegacyRoomHeader_closeButton {
     &::before {
-        mask-image: url("$(res)/img/cancel.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
         mask-size: 20px;
         mask-position: center;
     }

diff --git a/res/css/views/rooms/_LinkPreviewGroup.pcss b/res/css/views/rooms/_LinkPreviewGroup.pcss
@@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
         width: 18px;
         height: 18px;
 
-        img {
+        svg {
             flex: 0 0 40px;
             visibility: hidden;
         }
     }
 
     &:hover .mx_LinkPreviewGroup_hide img,
-    .mx_LinkPreviewGroup_hide:focus-visible:focus img {
+    .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
         visibility: visible;
     }
 

diff --git a/res/css/views/rooms/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss
@@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
 
             .mx_ReplyPreview_header_cancel {
                 background-color: $primary-content;
-                mask: url("$(res)/img/cancel.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: 18px;
-                width: 18px;
-                height: 18px;
-                min-width: 18px;
-                min-height: 18px;
+                mask-size: contain;
+                width: 20px;
+                height: 20px;
+                min-width: 20px;
+                min-height: 20px;
             }
         }
     }

diff --git a/res/css/views/rooms/_RoomSublist.pcss b/res/css/views/rooms/_RoomSublist.pcss
@@ -131,7 +131,7 @@ Please see LICENSE files in the repository root for full details.
         }
 
         .mx_RoomSublist_menuButton::before {
-            mask-image: url("$(res)/img/element-icons/context-menu.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
         }
 
         .mx_RoomSublist_headerText {

diff --git a/res/css/views/rooms/_RoomTile.pcss b/res/css/views/rooms/_RoomTile.pcss
@@ -133,7 +133,7 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_RoomTile_menuButton::before {
-        mask-image: url("$(res)/img/element-icons/context-menu.svg");
+        mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
     }
 
     &:not(.mx_RoomTile_minimized, .mx_RoomTile_sticky) {

diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
@@ -63,9 +63,9 @@ Please see LICENSE files in the repository root for full details.
     position: absolute;
     width: 18px;
     height: 18px;
-    mask-image: url("$(res)/img/cancel.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     mask-repeat: no-repeat;
-    mask-size: 10px;
-    mask-position: 4px 4px;
+    mask-size: 16px;
+    mask-position: center;
     background: var(--cpd-color-icon-tertiary);
 }
diff --git a/res/css/views/toasts/_IncomingCallToast.pcss b/res/css/views/toasts/_IncomingCallToast.pcss
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
         &::before {
             content: "";
 
-            mask-image: url("$(res)/img/cancel.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
 
             height: inherit;
             width: inherit;

diff --git a/res/css/views/user-onboarding/_UserOnboardingButton.pcss b/res/css/views/user-onboarding/_UserOnboardingButton.pcss
@@ -52,14 +52,13 @@ Please see LICENSE files in the repository root for full details.
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: contain;
-                width: 7px;
-                height: 7px;
+                mask-size: 12px;
+                width: inherit;
+                height: inherit;
                 position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                mask-image: url("$(res)/img/element-icons/cancel-rounded.svg");
+                left: -1px;
+                top: -1px;
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
             }
         }
     }

diff --git a/res/css/views/user-onboarding/_UserOnboardingTask.pcss b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
@@ -75,13 +75,13 @@ Please see LICENSE files in the repository root for full details.
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: contain;
-                width: 16px;
-                height: 16px;
+                mask-size: 24px;
+                width: inherit;
+                height: inherit;
                 position: absolute;
-                left: calc(50% - 8px);
-                top: calc(50% - 8px);
-                mask-image: url("$(res)/img/element-icons/check-white.svg");
+                left: 0;
+                top: 0;
+                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
 
                 animation-duration: 300ms;
                 animation-fill-mode: both;

diff --git a/res/img/cancel-small.svg b/res/img/cancel-small.svg
diff --git a/res/img/cancel.svg b/res/img/cancel.svg
diff --git a/res/img/element-icons/back.svg b/res/img/element-icons/back.svg
diff --git a/res/img/element-icons/cancel-rounded.svg b/res/img/element-icons/cancel-rounded.svg
diff --git a/res/img/element-icons/caret-left.svg b/res/img/element-icons/caret-left.svg
diff --git a/res/img/element-icons/check-white.svg b/res/img/element-icons/check-white.svg
diff --git a/res/img/element-icons/check.svg b/res/img/element-icons/check.svg
diff --git a/res/img/element-icons/context-menu.svg b/res/img/element-icons/context-menu.svg
diff --git a/res/img/element-icons/copy.svg b/res/img/element-icons/copy.svg
diff --git a/res/img/element-icons/room/ellipsis.svg b/res/img/element-icons/room/ellipsis.svg
diff --git a/res/img/element-icons/roomlist/checkmark.svg b/res/img/element-icons/roomlist/checkmark.svg