Merge branch 'develop' into florianduros/rip-out-legacy-crypto/remove…

…-deprecated-call-client # Conflicts: # src/components/structures/MatrixChat.tsx # test/components/structures/MatrixChat-test.tsx # test/test-utils/client.ts
element-hq · Oct 15, 2024 · aa1b049 · aa1b049
2 parents 86ea82f + 950ab19
commit aa1b049
Show file tree

Hide file tree

Showing 127 changed files with 889 additions and 1,504 deletions.
diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^6.3.1",
+        "@vector-im/compound-web": "^7.0.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

diff --git a/playwright/e2e/crypto/crypto.spec.ts b/playwright/e2e/crypto/crypto.spec.ts
@@ -226,7 +226,7 @@ test.describe("Cryptography", function () {
         // Assert that verified icon is rendered
         await page.getByTestId("base-card-back-button").click();
         await page.getByLabel("Room info").nth(1).click();
-        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="success"]')).toContainText("Encrypted");
+        await expect(page.locator('.mx_RoomSummaryCard_badges [data-kind="green"]')).toContainText("Encrypted");
 
         // Take a snapshot of RoomSummaryCard with a verified E2EE icon
         await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("RoomSummaryCard-with-verified-e2ee.png");

diff --git a/playwright/plugins/homeserver/synapse/index.ts b/playwright/plugins/homeserver/synapse/index.ts
@@ -20,7 +20,7 @@ import { randB64Bytes } from "../../utils/rand";
 // Docker tag to use for synapse docker image.
 // We target a specific digest as every now and then a Synapse update will break our CI.
 // This digest is updated by the playwright-image-updates.yaml workflow periodically.
-const DOCKER_TAG = "develop@sha256:117a94ee66e4049eb6f40d04cc70d4fc83f7022dacc9871448c141e7756492f9";
+const DOCKER_TAG = "develop@sha256:78091e205adcd94ff42a0db688c83289a1d56c17b928f04d11b5b87a52cd2083";
 
 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
     const templateDir = path.join(__dirname, "templates", opts.template);

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/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-linux.png b/playwright/snapshots/user-menu/user-menu.spec.ts/user-menu-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/auth/_LoginWithQR.pcss b/res/css/views/auth/_LoginWithQR.pcss
@@ -11,6 +11,13 @@ Please see LICENSE files in the repository root for full details.
     margin-bottom: $spacing-16;
 }
 
+.mx_LoginWithQRSection {
+    .mx_AccessibleButton_kind_primary + p {
+        color: var(--cpd-color-text-secondary);
+        margin-top: var(--cpd-space-2x);
+    }
+}
+
 .mx_LoginWithQRSection .mx_AccessibleButton svg {
     margin-right: $spacing-12;
 }
@@ -135,9 +142,16 @@ Please see LICENSE files in the repository root for full details.
         padding: var(--cpd-space-3x);
         gap: 10px;
 
-        background-color: var(--cpd-color-bg-success-subtle);
+        background-color: var(--cpd-color-bg-subtle-secondary);
         svg {
-            color: var(--cpd-color-icon-success-primary);
+            color: var(--cpd-color-icon-secondary);
+        }
+
+        &.mx_LoginWithQR_icon--success {
+            background-color: var(--cpd-color-bg-success-subtle);
+            svg {
+                color: var(--cpd-color-icon-success-primary);
+            }
         }
 
         &.mx_LoginWithQR_icon--critical {

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