Merge branch 'develop' of https://github.com/vector-im/element-web into t3chguy/dedup-icons-17oct

# Conflicts:
#	.editorconfig
#	.eslintignore
#	.git-blame-ignore-revs
#	.github/PULL_REQUEST_TEMPLATE.md
#	.github/labels.yml
#	.github/release-drafter.yml
#	.github/workflows/backport.yml
#	.github/workflows/release-gitflow.yml
#	.github/workflows/release.yml
#	.github/workflows/static_analysis.yaml
#	.gitignore
#	.lintstagedrc
#	.npmignore
#	.prettierignore
#	CHANGELOG.md
#	CONTRIBUTING.md
#	LICENSE-AGPL-3.0
#	README.md
#	babel.config.js
#	docs/SUMMARY.md
#	docs/jitsi.md
#	jest.config.ts
#	localazy.json
#	package.json
#	playwright/snapshots/forgot-password/forgot-password.spec.ts/forgot-password-linux.png
#	playwright/snapshots/spaces/spaces.spec.ts/space-panel-collapsed-linux.png
#	release_config.yaml
#	res/css/structures/_RoomSearch.pcss
#	res/fonts/Open_Sans/LICENSE.txt
#	res/jitsi_external_api.min.js.LICENSE.txt
#	sonar-project.properties
#	src/@types/global.d.ts
#	src/async-components/views/dialogs/security/CreateSecretStorageDialog.tsx
#	src/components/structures/AutocompleteInput.tsx
#	src/components/structures/ErrorMessage.tsx
#	src/components/structures/auth/ForgotPassword.tsx
#	src/components/structures/auth/forgot-password/EnterEmail.tsx
#	src/components/views/elements/AppPermission.tsx
#	src/components/views/elements/AppTile.tsx
#	src/components/views/messages/DecryptionFailureBody.tsx
#	src/components/views/messages/MessageActionBar.tsx
#	src/components/views/rooms/EntityTile.tsx
#	src/components/views/spaces/QuickSettingsButton.tsx
#	src/voice-broadcast/components/atoms/VoiceBroadcastError.tsx
#	src/voice-broadcast/components/atoms/VoiceBroadcastRecordingConnectionError.tsx
#	tsconfig.json
#	yarn.lock

res/css/structures/_AutocompleteInput.pcss

@@ -69,8 +69,8 @@ Please see LICENSE files in the repository root for full details.
     font-size: $font-12px;
 }
 
-.mx_AutocompleteInput_editor_selection_remove_button {
-    padding: 0 $spacing-4;
+.mx_AutocompleteInput_editor_selection_remove_button svg {
+    vertical-align: middle;
 }
 
 .mx_AutocompleteInput_matches {

res/css/structures/_FilePanel.pcss

@@ -20,70 +20,51 @@ Please see LICENSE files in the repository root for full details.
 
     .mx_RoomView_MessageList {
         width: 100%;
-
-        h2 {
-            display: none;
-        }
+        gap: var(--cpd-space-6x);
     }
 
     /* FIXME: rather than having EventTile's default CSS be for MessagePanel,
    we should make EventTile a base CSS class and customise it specifically
    for usage in {Message,File,Notification}Panel. */
 
-    .mx_EventTile_avatar {
-        display: none;
-    }
-
     /* Overrides for the attachment body tiles */
     .mx_EventTile {
         word-break: break-word;
-        margin-top: 10px;
         padding-top: 0;
 
+        & + .mx_EventTile {
+            border-top: 1px solid var(--cpd-color-gray-400);
+            padding-top: var(--cpd-space-6x);
+        }
+
         .mx_EventTile_line {
             padding-inline-start: 0;
         }
 
-        .mx_MFileBody {
-            line-height: 2.4rem;
-        }
-
         .mx_MFileBody_download {
-            padding-top: $spacing-8;
-            display: flex;
-            justify-content: space-between;
-            font: var(--cpd-font-body-md-regular);
-            color: $event-timestamp-color;
-
-            .mx_MImageBody_size {
-                font: var(--cpd-font-body-md-regular);
-                text-align: right;
-                white-space: nowrap;
-            }
-        }
-
-        .mx_MFileBody_downloadLink {
-            flex: 1 1 auto;
-            color: $light-fg-color;
+            margin-top: var(--cpd-space-4x);
         }
 
         /* anchor link as wrapper */
         .mx_EventTile_senderDetailsLink {
             text-decoration: none;
+            margin-bottom: var(--cpd-space-1x);
+            display: block;
 
             .mx_EventTile_senderDetails {
                 display: flex;
-                justify-content: space-between;
                 margin-top: -2px;
+                gap: var(--cpd-space-2x);
+                align-items: center;
 
                 .mx_DisambiguatedProfile {
                     color: $event-timestamp-color; /* for ellipsis. Color of displayName and mxid is inherited */
                 }
 
                 .mx_MessageTimestamp {
-                    text-align: right;
-                    color: $secondary-content;
-                    font: var(--cpd-font-body-sm-regular);
+                    margin-left: auto;
+                    font: var(--cpd-font-body-xs-regular);
+                    color: var(--cpd-color-text-secondary);
                 }
             }
         }

res/css/structures/_GenericErrorPage.pcss

@@ -1,17 +0,0 @@
-.mx_GenericErrorPage {
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.mx_GenericErrorPage_box {
-    display: inline;
-    width: 500px;
-    min-height: 125px;
-    border: 1px solid #f22;
-    padding: 10px 10px 20px;
-    background-color: #fcc;
-}

res/css/structures/_RoomSearch.pcss

@@ -24,13 +24,13 @@ Please see LICENSE files in the repository root for full details.
     cursor: pointer;
 
     .mx_RoomSearch_icon {
-        width: 16px;
-        height: 16px;
-        mask: url("@vector-im/compound-design-tokens/icons/search.svg");
+        width: 20px;
+        height: 20px;
+        mask-image: url("@vector-im/compound-design-tokens/icons/search.svg");
         mask-repeat: no-repeat;
+        mask-size: contain;
         background-color: $secondary-content;
-        margin-left: 7px;
-        margin-bottom: 2px;
+        margin-left: var(--cpd-space-2x);
         flex-shrink: 0;
         mask-size: 20px;
     }