Merge branch 'develop' into unverified_user_identity_change_warning

2024-11-06 18:49:17 -05:00 · 2024-11-06 18:49:17 -05:00 · 4e8a990887
parent f4b403d236 5057668705
commit 4e8a990887
403 changed files with 4237 additions and 6375 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -18,7 +18,7 @@ trim_trailing_whitespace = true
 indent_size = 4

 [package.json]
-indent_size = 2
+indent_size = 4

 [*.tsx.snap]
 trim_trailing_whitespace = false
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -266,6 +266,9 @@ module.exports = {
            parserOptions: {
                project: ["./playwright/tsconfig.json"],
            },
+            rules: {
+                "react-hooks/rules-of-hooks": ["off"],
+            },
        },
    ],
    settings: {
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -49,7 +49,7 @@ jobs:
                  ref: master
                  repo-token: ${{ secrets.GITHUB_TOKEN }}
                  wait-interval: 10
-                  check-name: "Docker Buildx (vanilla)"
+                  check-name: "Docker Buildx"
                  allowed-conclusions: success

            - name: Wait for debian package
--- a/.github/workflows/release_prepare.yml
+++ b/.github/workflows/release_prepare.yml
@ -20,6 +20,9 @@ on:
 jobs:
    prepare:
        runs-on: ubuntu-24.04
+        env:
+            # The order is specified bottom-up to avoid any races for allchange
+            REPOS: matrix-js-sdk element-web element-desktop
        steps:
            - name: Checkout Element Desktop
              uses: actions/checkout@v4
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@ -34,27 +34,6 @@ jobs:
            - name: Typecheck
              run: "yarn run lint:types"

-            - name: Switch js-sdk to release mode
-              working-directory: node_modules/matrix-js-sdk
-              run: |
-                  scripts/switch_package_to_release.cjs
-                  yarn install
-                  yarn run build:compile
-                  yarn run build:types
-
-            - name: Typecheck (release mode)
-              run: "yarn run lint:types"
-
-            # Temporary while we directly import matrix-js-sdk/src/* which means we need
-            # certain @types/* packages to make sense of matrix-js-sdk types.
-            #- name: Typecheck (release mode; no yarn link)
-            #  if: github.event_name != 'pull_request' && github.ref_name != 'master'
-            #  run: |
-            #      yarn unlink matrix-js-sdk
-            #      yarn add github:matrix-org/matrix-js-sdk#develop
-            #      yarn install --force
-            #      yarn run lint:types
-
    i18n_lint:
        name: "i18n Check"
        uses: matrix-org/matrix-web-i18n/.github/workflows/i18n_check.yml@main
--- a/.node-version
+++ b/.node-version
@ -1 +1 @@
-20
+22
--- a/.prettierignore
+++ b/.prettierignore
@ -37,5 +37,10 @@ package-lock.json

 # Downloaded and already minified
 res/jitsi_external_api.min.js
+
 # This file is also machine-generated
 /playwright/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
+/playwright/test-results/
+/playwright/html-report/
+/playwright/logs/
+/playwright/snapshots/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,68 @@
+Changes in [1.11.84](https://github.com/element-hq/element-web/releases/tag/v1.11.84) (2024-11-05)
+==================================================================================================
+## ✨ Features
+
+* Remove abandoned MSC3886, MSC3903, MSC3906 implementations ([#28274](https://github.com/element-hq/element-web/pull/28274)). Contributed by @t3chguy.
+* Update to React 18 ([#24763](https://github.com/element-hq/element-web/pull/24763)). Contributed by @t3chguy.
+* Deduplicate icons using Compound ([#28239](https://github.com/element-hq/element-web/pull/28239)). Contributed by @t3chguy.
+* Replace legacy Tooltips with Compound tooltips ([#28231](https://github.com/element-hq/element-web/pull/28231)). Contributed by @t3chguy.
+* Deduplicate icons using Compound Design Tokens ([#28219](https://github.com/element-hq/element-web/pull/28219)). Contributed by @t3chguy.
+* Add reactions to html export ([#28210](https://github.com/element-hq/element-web/pull/28210)). Contributed by @langleyd.
+* Remove feature\_dehydration ([#28173](https://github.com/element-hq/element-web/pull/28173)). Contributed by @florianduros.
+
+## 🐛 Bug Fixes
+
+* Remove upgrade encryption in `DeviceListener` and `SetupEncryptionToast` ([#28299](https://github.com/element-hq/element-web/pull/28299)). Contributed by @florianduros.
+* Fix 'remove alias' button in room settings ([#28269](https://github.com/element-hq/element-web/pull/28269)). Contributed by @Dev-Gurjar.
+* Add back unencrypted path in `StopGapWidgetDriver.sendToDevice` ([#28295](https://github.com/element-hq/element-web/pull/28295)). Contributed by @florianduros.
+* Fix other devices not being decorated as such ([#28279](https://github.com/element-hq/element-web/pull/28279)). Contributed by @t3chguy.
+* Fix pill contrast in invitation dialog ([#28250](https://github.com/element-hq/element-web/pull/28250)). Contributed by @florianduros.
+* Close right panel chat when minimising maximised voip widget ([#28241](https://github.com/element-hq/element-web/pull/28241)). Contributed by @t3chguy.
+* Fix develop changelog parsing ([#28232](https://github.com/element-hq/element-web/pull/28232)). Contributed by @t3chguy.
+* Fix Ctrl+F shortcut not working with minimised room summary card ([#28223](https://github.com/element-hq/element-web/pull/28223)). Contributed by @t3chguy.
+* Fix network dropdown missing checkbox \& aria-checked ([#28220](https://github.com/element-hq/element-web/pull/28220)). Contributed by @t3chguy.
+
+
+Changes in [1.11.83](https://github.com/element-hq/element-web/releases/tag/v1.11.83) (2024-10-29)
+==================================================================================================
+## ✨ Features
+
+* Enable Element Call by default on release instances ([#28314](https://github.com/element-hq/element-web/pull/28314)). Contributed by @t3chguy.
+
+
+
+Changes in [1.11.82](https://github.com/element-hq/element-web/releases/tag/v1.11.82) (2024-10-22)
+==================================================================================================
+## ✨ Features
+
+* Deduplicate more icons using Compound Design Tokens ([#132](https://github.com/element-hq/matrix-react-sdk/pull/132)). Contributed by @t3chguy.
+* Always show link new device flow even if unsupported ([#147](https://github.com/element-hq/matrix-react-sdk/pull/147)). Contributed by @t3chguy.
+* Update design of files list in right panel ([#144](https://github.com/element-hq/matrix-react-sdk/pull/144)). Contributed by @t3chguy.
+* Remove feature\_dehydration ([#138](https://github.com/element-hq/matrix-react-sdk/pull/138)). Contributed by @florianduros.
+* Upgrade emojibase-bindings and remove local handling of emoticon variations ([#127](https://github.com/element-hq/matrix-react-sdk/pull/127)). Contributed by @langleyd.
+* Add support for rendering media captions ([#43](https://github.com/element-hq/matrix-react-sdk/pull/43)). Contributed by @tulir.
+* Replace composer icons with Compound variants ([#123](https://github.com/element-hq/matrix-react-sdk/pull/123)). Contributed by @t3chguy.
+* Tweak default right panel size to be 320px except for maximised widgets at 420px ([#110](https://github.com/element-hq/matrix-react-sdk/pull/110)). Contributed by @t3chguy.
+* Add a pinned message badge under a pinned message ([#118](https://github.com/element-hq/matrix-react-sdk/pull/118)). Contributed by @florianduros.
+* Ditch right panel tabs and re-add close button ([#99](https://github.com/element-hq/matrix-react-sdk/pull/99)). Contributed by @t3chguy.
+* Force verification even for refreshed clients ([#44](https://github.com/element-hq/matrix-react-sdk/pull/44)). Contributed by @dbkr.
+* Update emoji text, border and background colour in timeline ([#119](https://github.com/element-hq/matrix-react-sdk/pull/119)). Contributed by @florianduros.
+* Disable ICE fallback based on well-known configuration ([#111](https://github.com/element-hq/matrix-react-sdk/pull/111)). Contributed by @t3chguy.
+* Remove legacy room header and promote beta room header ([#105](https://github.com/element-hq/matrix-react-sdk/pull/105)). Contributed by @t3chguy.
+* Respect `io.element.jitsi` `useFor1To1Calls` in well-known ([#112](https://github.com/element-hq/matrix-react-sdk/pull/112)). Contributed by @t3chguy.
+* Use Compound close icon in favour of mishmash of x/close icons ([#108](https://github.com/element-hq/matrix-react-sdk/pull/108)). Contributed by @t3chguy.
+
+## 🐛 Bug Fixes
+
+* Correct typo in option documentation ([#28148](https://github.com/element-hq/element-web/pull/28148)). Contributed by @AndrewKvalheim.
+* Revert #124 and #135 ([#139](https://github.com/element-hq/matrix-react-sdk/pull/139)). Contributed by @dbkr.
+* Add aria-label to e2e icon ([#136](https://github.com/element-hq/matrix-react-sdk/pull/136)). Contributed by @florianduros.
+* Fix bell icons on room list hover being black squares ([#135](https://github.com/element-hq/matrix-react-sdk/pull/135)). Contributed by @dbkr.
+* Fix vertical overflow on the mobile register screen ([#137](https://github.com/element-hq/matrix-react-sdk/pull/137)). Contributed by @langleyd.
+* Allow to unpin redacted event ([#98](https://github.com/element-hq/matrix-react-sdk/pull/98)). Contributed by @florianduros.
+
+
+
 Changes in [1.11.81](https://github.com/element-hq/element-web/releases/tag/v1.11.81) (2024-10-15)
 ==================================================================================================
 This release fixes High severity vulnerability CVE-2024-47771 / GHSA-963w-49j9-gxj6
--- a/2
+++ b/2
@ -1,5 +1,5 @@
 # Builder
-FROM --platform=$BUILDPLATFORM node:20-bullseye as builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye as builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
--- a/components.json
+++ b/components.json
@ -1,5 +1 @@
-{
-    "src/components/views/auth/AuthFooter.tsx": "src/components/views/auth/VectorAuthFooter.tsx",
-    "src/components/views/auth/AuthHeaderLogo.tsx": "src/components/views/auth/VectorAuthHeaderLogo.tsx",
-    "src/components/views/auth/AuthPage.tsx": "src/components/views/auth/VectorAuthPage.tsx"
-}
+{}
--- a/docs/customisations.md
+++ b/docs/customisations.md
@ -11,8 +11,8 @@ Customisations will be removed from the codebase in a future release.
 Element Web and the React SDK support "customisation points" that can be used to
 easily add custom logic specific to a particular deployment of Element Web.

-An example of this is the [security customisations
-module](https://github.com/element-hq/element-web/blob/develop/src/customisations/Security.ts).
+An example of this is the [media customisations
+module](https://github.com/element-hq/element-web/blob/develop/src/customisations/Media.ts).
 This module in the React SDK only defines some empty functions and their types:
 it does not do anything by default.

@ -21,14 +21,14 @@ Web so that you can add your own code. Even though the default module is part of
 the React SDK, you can still override it from the Element Web layer:

 1. Copy the default customisation module to
-   `element-web/src/customisations/YourNameSecurity.ts`
+   `element-web/src/customisations/YourNameMedia.ts`
 2. Edit customisations points and make sure export the ones you actually want to
   activate
 3. Create/add an entry to `customisations.json` next to the webpack config:

 ```json
 {
-    "src/customisations/Security.ts": "src/customisations/YourNameSecurity.ts"
+    "src/customisations/Media.ts": "src/customisations/YourNameMedia.ts"
 }
 ```

--- a/docs/install.md
+++ b/docs/install.md
@ -41,7 +41,15 @@ The Docker image can be used to serve element-web as a web server. The easiest w
 it is to use the prebuilt image:

 ```bash
-docker run -p 80:80 vectorim/element-web
+docker run --rm -p 127.0.0.1:80:80 vectorim/element-web
+```
+
+A server can also be made available to clients outside the local host by omitting the
+explicit local address as described in
+[docker run documentation](https://docs.docker.com/engine/reference/commandline/run/#publish-or-expose-port--p---expose):
+
+```bash
+docker run --rm -p 80:80 vectorim/element-web
 ```

 To supply your own custom `config.json`, map a volume to `/app/config.json`. For example,
@ -49,7 +57,7 @@ if your custom config was located at `/etc/element-web/config.json` then your Do
 would be:

 ```bash
-docker run -p 80:80 -v /etc/element-web/config.json:/app/config.json vectorim/element-web
+docker run --rm -p 127.0.0.1:80:80 -v /etc/element-web/config.json:/app/config.json vectorim/element-web
 ```

 To build the image yourself:
--- a/docs/theming.md
+++ b/docs/theming.md
@ -29,7 +29,7 @@ default theme, you would use `default_theme: "custom-Electric Blue"`.

 e.g. in config.json:

-```
+```json5
 "setting_defaults": {
        "custom_themes": [
            {
@ -59,6 +59,10 @@ e.g. in config.json:
                    "timeline-text-color": "#2e2f32",
                    "timeline-text-secondary-color": "#61708b",
                    "timeline-highlights-color": "#f3f8fd",
+
+                    // These should both be 8 values long
+                    "username-colors": ["#ff0000", /*...*/],
+                    "avatar-background-colors": ["#cc0000", /*...*/]
                },
                "compound": {
                    "--cpd-color-icon-accent-tertiary": "var(--cpd-color-blue-800)",
--- a/element.io/app/config.json
+++ b/element.io/app/config.json
@ -46,5 +46,13 @@
    "map_style_url": "https://api.maptiler.com/maps/streets/style.json?key=fU3vlMsMn4Jb6dnEIFsx",
    "setting_defaults": {
        "RustCrypto.staged_rollout_percent": 60
+    },
+    "features": {
+        "feature_video_rooms": true,
+        "feature_group_calls": true,
+        "feature_element_call_video_rooms": true
+    },
+    "element_call": {
+        "url": "https://call.element.io"
    }
 }
--- a/jest.config.ts
+++ b/jest.config.ts
@ -44,6 +44,8 @@ const config: Config = {
        // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
        // not available in that contest. So, turn off coverage instrumentation for it.
        "!<rootDir>/src/utils/SessionLock.ts",
+        // Coverage chokes on type definition files
+        "!<rootDir>/src/**/*.d.ts",
    ],
    coverageReporters: ["text-summary", "lcov"],
    testResultsProcessor: "@casualbot/jest-sonar-reporter",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.81",
+    "version": "1.11.84",
    "description": "A feature-rich client for Matrix.org",
    "author": "New Vector Ltd.",
    "repository": {
@ -74,13 +74,9 @@
        "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
    },
    "resolutions": {
-        "@types/react-dom": "17.0.25",
-        "@types/react": "17.0.83",
        "@types/seedrandom": "3.0.8",
        "oidc-client-ts": "3.1.0",
        "jwt-decode": "4.0.0",
-        "@floating-ui/react": "0.26.11",
-        "@radix-ui/react-id": "1.1.0",
        "caniuse-lite": "1.0.30001668",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0",
        "wrap-ansi": "npm:wrap-ansi@^7.0.0"
@ -88,15 +84,14 @@
    "dependencies": {
        "@babel/runtime": "^7.12.5",
        "@formatjs/intl-segmenter": "^11.5.7",
-        "@matrix-org/analytics-events": "^0.26.0",
+        "@matrix-org/analytics-events": "^0.29.0",
        "@matrix-org/emojibase-bindings": "^1.3.3",
-        "@vector-im/matrix-wysiwyg": "2.37.13",
        "@matrix-org/react-sdk-module-api": "^2.4.0",
        "@matrix-org/spec": "^1.7.0",
        "@sentry/browser": "^8.0.0",
-        "@testing-library/react-hooks": "^8.0.1",
        "@vector-im/compound-design-tokens": "^1.8.0",
        "@vector-im/compound-web": "^7.1.0",
+        "@vector-im/matrix-wysiwyg": "2.37.13",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
@ -119,8 +114,8 @@
        "highlight.js": "^11.3.1",
        "html-entities": "^2.0.0",
        "is-ip": "^3.1.0",
-        "jsrsasign": "^11.0.0",
        "js-xxhash": "^4.0.0",
+        "jsrsasign": "^11.0.0",
        "jszip": "^3.7.0",
        "katex": "^0.16.0",
        "linkify-element": "4.1.3",
@ -141,10 +136,10 @@
        "posthog-js": "1.157.2",
        "qrcode": "1.5.4",
        "re-resizable": "6.9.17",
-        "react": "17.0.2",
+        "react": "^18.3.1",
        "react-beautiful-dnd": "^13.1.0",
        "react-blurhash": "^0.3.0",
-        "react-dom": "17.0.2",
+        "react-dom": "^18.3.1",
        "react-focus-lock": "^2.5.1",
        "react-transition-group": "^4.4.1",
        "rfc4648": "^1.4.0",
@ -153,7 +148,7 @@
        "tar-js": "^0.3.0",
        "temporal-polyfill": "^0.2.5",
        "ua-parser-js": "^1.0.2",
-        "uuid": "^10.0.0",
+        "uuid": "^11.0.0",
        "what-input": "^5.2.10"
    },
    "devDependencies": {
@ -186,10 +181,10 @@
        "@sentry/webpack-plugin": "^2.7.1",
        "@stylistic/eslint-plugin": "^2.9.0",
        "@svgr/webpack": "^8.0.0",
-        "@testing-library/dom": "^9.0.0",
-        "@testing-library/jest-dom": "^6.0.0",
-        "@testing-library/react": "^12.1.5",
-        "@testing-library/user-event": "^14.4.3",
+        "@testing-library/dom": "^10.4.0",
+        "@testing-library/jest-dom": "^6.4.8",
+        "@testing-library/react": "^16.0.0",
+        "@testing-library/user-event": "^14.5.2",
        "@types/commonmark": "^0.27.4",
        "@types/content-type": "^1.1.5",
        "@types/counterpart": "^0.18.1",
@ -211,9 +206,9 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "17.0.83",
+        "@types/react": "18.3.3",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "17.0.25",
+        "@types/react-dom": "18.3.1",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.13.0",
        "@types/sdp-transform": "^2.4.6",
@ -224,7 +219,7 @@
        "@types/uuid": "^10.0.0",
        "@typescript-eslint/eslint-plugin": "^8.0.0",
        "@typescript-eslint/parser": "^8.0.0",
-        "axe-core": "4.10.0",
+        "axe-core": "4.10.2",
        "babel-jest": "^29.0.0",
        "babel-loader": "^9.0.0",
        "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
@ -247,7 +242,7 @@
        "eslint-plugin-jsx-a11y": "^6.5.1",
        "eslint-plugin-matrix-org": "^2.0.2",
        "eslint-plugin-react": "^7.28.0",
-        "eslint-plugin-react-hooks": "^4.3.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
        "eslint-plugin-unicorn": "^56.0.0",
        "express": "^4.18.2",
        "fake-indexeddb": "^6.0.0",
@ -260,7 +255,7 @@
        "husky": "^9.0.0",
        "jest": "^29.6.2",
        "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.6.2",
+        "jest-environment-jsdom": "^29.7.0",
        "jest-mock": "^29.6.2",
        "jest-raw-loader": "^1.0.1",
        "jsqr": "^1.4.0",
--- a/playwright/.gitignore
+++ b/playwright/.gitignore
@ -4,3 +4,5 @@
 # Only commit snapshots from Linux
 /snapshots/**/*.png
 !/snapshots/**/*-linux.png
+# This file is machine-generated
+/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
--- a/playwright/Dockerfile
+++ b/playwright/Dockerfile
@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/playwright:v1.48.0-jammy
+FROM mcr.microsoft.com/playwright:v1.48.2-jammy

 WORKDIR /work

--- a/playwright/e2e/audio-player/audio-player.spec.ts
+++ b/playwright/e2e/audio-player/audio-player.spec.ts
@ -242,6 +242,7 @@ test.describe("Audio player", () => {

        // Find and click "Reply" button
        const clickButtonReply = async () => {
+            await tile.scrollIntoViewIfNeeded();
            await tile.hover();
            await tile.getByRole("button", { name: "Reply", exact: true }).click();
        };
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@ -114,13 +114,10 @@ test.describe("Cryptography", function () {
                await dialog.getByRole("button", { name: "Continue" }).click();
                await copyAndContinue(page);

-                // When the device is verified, the `Setting up keys` step is skipped
-                if (!isDeviceVerified) {
-                    const uiaDialogTitle = page.locator(".mx_InteractiveAuthDialog .mx_Dialog_title");
-                    await expect(uiaDialogTitle.getByText("Setting up keys")).toBeVisible();
-                    await expect(uiaDialogTitle.getByText("Setting up keys")).not.toBeVisible();
-                }
+                // If the device is unverified, there should be a "Setting up keys" step; however, it
+                // can be quite quick, and playwright can miss it, so we can't test for it.

+                // Either way, we end up at a success dialog:
                await expect(dialog.getByText("Secure Backup successful")).toBeVisible();
                await dialog.getByRole("button", { name: "Done" }).click();
                await expect(dialog.getByText("Secure Backup successful")).not.toBeVisible();
--- a/playwright/e2e/crypto/invisible-crypto.spec.ts
+++ b/playwright/e2e/crypto/invisible-crypto.spec.ts
@ -51,6 +51,6 @@ test.describe("Invisible cryptography", () => {
        /* should show an error for a message from a previously verified device */
        await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
        const lastTile = page.locator(".mx_EventTile_last");
-        await expect(lastTile).toContainText("Verified identity has changed");
+        await expect(lastTile).toContainText("Sender's verified identity has changed");
    });
 });
--- a/playwright/e2e/crypto/user-verification.spec.ts
+++ b/playwright/e2e/crypto/user-verification.spec.ts
@ -60,6 +60,11 @@ test.describe("User verification", () => {
        // Accept
        await toast.getByRole("button", { name: "Verify User" }).click();

+        // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
+        // Playwright tries to click the "Verify by emoji" button, which seems to make it miss the button.
+        // (richvdh: I thought Playwright was supposed to be resilient to such things, but empirically not.)
+        await expect(page.getByAltText("QR Code")).toBeVisible();
+
        // request verification by emoji
        await page.locator("#mx_RightPanel").getByRole("button", { name: "Verify by emoji" }).click();

@ -101,13 +106,20 @@ test.describe("User verification", () => {
        const toast = await toasts.getToast("Verification requested");
        await toast.getByRole("button", { name: "Verify User" }).click();

+        // Wait for the QR code to be rendered. If we don't do this, then the QR code can be rendered just as
+        // Playwright tries to click the "Verify by emoji" button, which seems to make it miss the button.
+        // (richvdh: I thought Playwright was supposed to be resilient to such things, but empirically not.)
+        await expect(page.getByAltText("QR Code")).toBeVisible();
+
        // request verification by emoji
        await page.locator("#mx_RightPanel").getByRole("button", { name: "Verify by emoji" }).click();

        /* on the bot side, wait for the verifier to exist ... */
        const botVerifier = await awaitVerifier(bobVerificationRequest);
-        // ... confirm ...
-        botVerifier.evaluate((verifier) => verifier.verify()).catch(() => {});
+        // ... and confirm. We expect the verification to fail; we catch the error on the DOM side
+        // to stop playwright marking the evaluate as failing in the UI.
+        const botVerification = botVerifier.evaluate((verifier) => verifier.verify().catch(() => {}));
+
        // ... and abort the verification
        await page.getByRole("button", { name: "They don't match" }).click();

@ -115,6 +127,8 @@ test.describe("User verification", () => {
        await expect(dialog.getByText("Your messages are not secure")).toBeVisible();
        await dialog.getByRole("button", { name: "OK" }).click();
        await expect(dialog).not.toBeVisible();
+
+        await botVerification;
    });
 });

--- a/playwright/e2e/pinned-messages/pinned-messages.spec.ts
+++ b/playwright/e2e/pinned-messages/pinned-messages.spec.ts
@ -31,6 +31,12 @@ test.describe("Pinned messages", () => {
        const tile = util.getEventTile("Msg1");
        await expect(tile).toMatchScreenshot("pinned-message-Msg1.png", {
            mask: [tile.locator(".mx_MessageTimestamp")],
+            // Hide the jump to bottom button in the timeline to avoid flakiness
+            css: `
+                .mx_JumpToBottomButton {
+                    display: none !important;
+                }
+            `,
        });
    });

--- a/playwright/e2e/release-announcement/index.ts
+++ b/playwright/e2e/release-announcement/index.ts
@ -42,7 +42,7 @@ export class Helpers {
     */
    async assertReleaseAnnouncementIsVisible(name: string) {
        await expect(this.getReleaseAnnouncement(name)).toBeVisible();
-        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`);
+        await expect(this.page).toMatchScreenshot(`release-announcement-${name}.png`, { showTooltips: true });
    }

    /**
--- a/playwright/e2e/spotlight/spotlight.spec.ts
+++ b/playwright/e2e/spotlight/spotlight.spec.ts
@ -216,7 +216,7 @@ test.describe("Spotlight", () => {
     *
     * https://github.com/matrix-org/synapse/issues/16472
     */
-    test.skip("should find unknown people", async ({ page, app }) => {
+    test("should find unknown people", async ({ page, app }) => {
        const spotlight = await app.openSpotlight();
        await page.waitForTimeout(500); // wait for the dialog to settle
        await spotlight.filter(Filter.People);
--- 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();
--- a/playwright/element-web-test.ts
+++ b/playwright/element-web-test.ts
@ -224,7 +224,7 @@ export const test = base.extend<{
    },

    axe: async ({ page }, use) => {
-        await use(new AxeBuilder({ page }).exclude("[id^='floating-ui-']"));
+        await use(new AxeBuilder({ page }).exclude("[data-floating-ui-portal]"));
    },
    checkA11y: async ({ axe }, use, testInfo) =>
        use(async () => {
@ -345,6 +345,7 @@ export const expect = baseExpect.extend({

        if (!options?.showTooltips) {
            css += `
+                [data-floating-ui-portal],
                [role="tooltip"] {
                    visibility: hidden !important;
                }
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@ -188,6 +188,6 @@ export class ElementAppPage {
                "Element has no aria-labelledby or aria-describedy attributes! The tooltip should have added either one of these.",
            );
        }
-        return this.page.locator(`#${labelledById ?? describedById}`);
+        return this.page.locator(`id=${labelledById ?? describedById}`);
    }
 }
--- 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:47c62aa9507a24820190eef547861c0d278cc83fe90329c46b9f4329eed88ef4";
+const DOCKER_TAG = "develop@sha256:6c33604ee62f009f3b34454a3c3e85f7e3ff5de63e45011fcd79e0ddc54a4e51";

 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
    const templateDir = path.join(__dirname, "templates", opts.template);
--- a/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png
+++ b/playwright/snapshots/chat-export/html-export.spec.ts/html-export-linux.png
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
--- a/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
+++ b/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-room-with-user-pill-linux.png
--- a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png
+++ b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-Msg1-linux.png
--- a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
+++ b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-bubble-layout-linux.png
--- a/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
+++ b/playwright/snapshots/polls/polls.spec.ts/ThreadView-with-a-poll-on-group-layout-linux.png
--- a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
+++ b/playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
--- a/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png
+++ b/playwright/snapshots/widgets/layout.spec.ts/apps-drawer-linux.png
--- a/res/css/_components.pcss
+++ b/res/css/_components.pcss
@ -282,11 +282,11 @@
@import "./views/rooms/_EmojiButton.pcss";
@import "./views/rooms/_EntityTile.pcss";
@import "./views/rooms/_EventBubbleTile.pcss";
+@import "./views/rooms/_EventPreview.pcss";
@import "./views/rooms/_EventTile.pcss";
@import "./views/rooms/_HistoryTile.pcss";
@import "./views/rooms/_IRCLayout.pcss";
@import "./views/rooms/_JumpToBottomButton.pcss";
-@import "./views/rooms/_LegacyRoomHeader.pcss";
@import "./views/rooms/_LinkPreviewGroup.pcss";
@import "./views/rooms/_LinkPreviewWidget.pcss";
@import "./views/rooms/_LiveContentSummary.pcss";
--- 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;
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@ -181,11 +181,6 @@ Please see LICENSE files in the repository root for full details.
    }
 }

-/* Rooms with immersive content */
-.mx_RoomView_immersive .mx_LegacyRoomHeader_wrapper {
-    border: unset;
-}
-
 .mx_RoomView_inCall {
    .mx_RoomView_statusAreaBox_line {
        margin-top: 2px;
--- 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 {
--- 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 {
--- a/res/css/views/dialogs/_InviteDialog.pcss
+++ b/res/css/views/dialogs/_InviteDialog.pcss
@ -143,14 +143,15 @@ Please see LICENSE files in the repository root for full details.
    margin-inline-end: $spacing-8;

    .mx_InviteDialog_userTile_pill {
-        background-color: var(--cpd-color-bg-success-subtle);
-        border-radius: 12px;
+        background-color: var(--cpd-color-bg-canvas-default);
+        border: 1px solid var(--cpd-color-gray-400);
+        border-radius: 99px;
        display: inline-block;
        height: 24px;
        line-height: $font-24px;
        padding-inline: $spacing-8;
        vertical-align: middle;
-        color: $primary-content;
+        color: var(--cpd-color-gray-1100);

        .mx_SearchResultAvatar {
            border-radius: 20px;
--- a/res/css/views/elements/_EditableItemList.pcss
+++ b/res/css/views/elements/_EditableItemList.pcss
@ -18,10 +18,9 @@ Please see LICENSE files in the repository root for full details.
 .mx_EditableItem_delete {
    @mixin customisedCancelButton;
    order: 3;
-    margin-right: 5px;
    vertical-align: middle;
-    width: 14px;
-    height: 14px;
+    width: 28px;
+    height: 28px;
    background-color: $alert;
    mask-size: 100%;
 }
@ -42,7 +41,7 @@ Please see LICENSE files in the repository root for full details.
 .mx_EditableItem_item {
    flex: auto 1 0;
    order: 1;
-    width: calc(100% - 14px); /* leave space for the remove button */
+    width: calc(100% - 28px); /* leave space for the remove button */
    overflow-x: hidden;
    text-overflow: ellipsis;
 }
--- 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;
--- a/res/css/views/messages/_DecryptionFailureBody.pcss
+++ b/res/css/views/messages/_DecryptionFailureBody.pcss
@ -11,22 +11,11 @@ Please see LICENSE files in the repository root for full details.
    font-style: italic;
 }

-/* Formatting for the "Verified identity has changed" error */
-.mx_DecryptionFailureVerifiedIdentityChanged > span {
-    /* Show it in red */
-    color: var(--cpd-color-text-critical-primary);
-    background-color: var(--cpd-color-bg-critical-subtle);
-
-    /* With a red border */
-    border: 1px solid var(--cpd-color-border-critical-subtle);
-    border-radius: $font-16px;
-
-    /* Some space inside the border */
-    padding: var(--cpd-space-1x) var(--cpd-space-3x) var(--cpd-space-1x) var(--cpd-space-2x);
-
-    /* some space between the (!) icon and text */
+/* Formatting for errors due to sender trust requirement failures */
+.mx_DecryptionFailureSenderTrustRequirement > span {
+    /* some space between the (/) icon and text */
    display: inline-flex;
-    gap: var(--cpd-space-2x);
+    gap: var(--cpd-space-1x);

    /* Center vertically */
    align-items: center;
--- 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;
--- 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");
    }
 }
--- 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;
                }

--- a/res/css/views/rooms/_EventPreview.pcss
+++ b/res/css/views/rooms/_EventPreview.pcss
@ -0,0 +1,18 @@
+/*
+* Copyright 2024 New Vector Ltd.
+* Copyright 2024 The Matrix.org Foundation C.I.C.
+*
+* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+* Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EventPreview {
+    font: var(--cpd-font-body-sm-regular);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .mx_EventPreview_prefix {
+        font: var(--cpd-font-body-sm-semibold);
+    }
+}
--- 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 {
--- 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);
--- a/res/css/views/rooms/_LegacyRoomHeader.pcss
+++ b/res/css/views/rooms/_LegacyRoomHeader.pcss
@ -1,281 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2023 The Matrix.org Foundation C.I.C.
-Copyright 2015, 2016 OpenMarket Ltd
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
-Please see LICENSE files in the repository root for full details.
-*/
-
-:root {
-    --RoomHeader-indicator-dot-size: 8px;
-    --RoomHeader-indicator-dot-offset: -3px;
-    --RoomHeader-indicator-pulseColor: $alert;
-}
-
-.mx_LegacyRoomHeader {
-    flex: 0 0 50px;
-    border-bottom: 1px solid $primary-hairline-color;
-    background-color: $background;
-
-    .mx_LegacyRoomHeader_icon {
-        height: 12px;
-        width: 12px;
-
-        &.mx_LegacyRoomHeader_icon_video {
-            height: 14px;
-            width: 14px;
-            background-color: $secondary-content;
-            mask-image: url("$(res)/img/element-icons/call/video-call.svg");
-            mask-size: 100%;
-        }
-
-        &.mx_E2EIcon {
-            margin: 0;
-            height: 100%; /* To give the tooltip room to breathe */
-        }
-    }
-
-    .mx_CallDuration {
-        margin-top: calc(($font-15px - $font-13px) / 2); /* To align with the name */
-        font-size: $font-13px;
-    }
-}
-
-.mx_LegacyRoomHeader_wrapper {
-    height: 44px;
-    display: flex;
-    align-items: center;
-    min-width: 0;
-    padding: 10px 20px 9px 16px;
-    border-bottom: 1px solid $separator;
-
-    .mx_InviteOnlyIcon_large {
-        margin: 0;
-    }
-
-    .mx_BetaCard_betaPill {
-        margin-right: $spacing-8;
-    }
-
-    /* The container of E2EIcon in the legacy header needs to have its height set */
-    & > span {
-        height: 100%;
-    }
-}
-
-.mx_LegacyRoomHeader_name {
-    flex: 0 1 auto;
-    overflow: hidden;
-    color: $primary-content;
-    font: var(--cpd-font-heading-sm-semibold);
-    font-weight: var(--cpd-font-weight-semibold);
-    min-height: 24px;
-    align-items: center;
-    border-radius: 6px;
-    margin: 0 3px;
-    padding: 1px 4px;
-    display: flex;
-    user-select: none;
-    cursor: pointer;
-
-    &:hover {
-        background-color: $quinary-content;
-    }
-
-    .mx_LegacyRoomHeader_nametext {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-
-    .mx_LegacyRoomHeader_chevron {
-        align-self: center;
-        width: 20px;
-        height: 20px;
-        mask-position: center;
-        mask-size: 20px;
-        mask-repeat: no-repeat;
-        mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
-        background-color: $tertiary-content;
-    }
-
-    &.mx_LegacyRoomHeader_name--textonly {
-        cursor: unset;
-
-        &:hover {
-            background-color: unset;
-        }
-    }
-
-    &[aria-expanded="true"] {
-        background-color: $separator;
-
-        .mx_LegacyRoomHeader_chevron {
-            transform: rotate(180deg);
-        }
-    }
-}
-
-.mx_LegacyRoomHeader_settingsHint {
-    color: $settings-grey-fg-color !important;
-}
-
-.mx_LegacyRoomHeader_searchStatus {
-    font-weight: normal;
-    opacity: 0.6;
-}
-
-.mx_RoomTopic {
-    position: relative;
-    cursor: pointer;
-}
-
-.mx_LegacyRoomHeader_topic {
-    $lines: 2;
-
-    flex: 1;
-    color: $secondary-content;
-    font: var(--cpd-font-body-sm-regular);
-    line-height: 1rem;
-    max-height: calc(1rem * $lines);
-
-    overflow: hidden;
-    -webkit-line-clamp: $lines; /* See: https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp */
-    -webkit-box-orient: vertical;
-    display: -webkit-box;
-}
-
-.mx_LegacyRoomHeader_topic .mx_Emoji {
-    /* Undo font size increase to prevent vertical cropping and ensure the same size */
-    /* as in plain text emojis */
-    font-size: inherit;
-}
-
-.mx_LegacyRoomHeader_avatar {
-    flex: 0;
-    margin: 0 7px;
-    position: relative;
-    cursor: pointer;
-}
-
-.mx_LegacyRoomHeader_button_unreadIndicator_bg {
-    position: absolute;
-    right: var(--RoomHeader-indicator-dot-offset);
-    top: var(--RoomHeader-indicator-dot-offset);
-    margin: 4px;
-    width: var(--RoomHeader-indicator-dot-size);
-    height: var(--RoomHeader-indicator-dot-size);
-    border-radius: 50%;
-    transform: scale(1.6);
-    transform-origin: center center;
-    background: $background;
-}
-
-.mx_LegacyRoomHeader_button_unreadIndicator {
-    position: absolute;
-    right: var(--RoomHeader-indicator-dot-offset);
-    top: var(--RoomHeader-indicator-dot-offset);
-    margin: 4px;
-
-    &.mx_Indicator_highlight {
-        background: var(--cpd-color-icon-critical-primary);
-        box-shadow: var(--cpd-color-icon-critical-primary);
-    }
-
-    &.mx_Indicator_notification {
-        background: var(--cpd-color-icon-success-primary);
-        box-shadow: var(--cpd-color-icon-success-primary);
-    }
-
-    &.mx_Indicator_activity {
-        background: var(--cpd-color-icon-primary);
-        box-shadow: var(--cpd-color-icon-primary);
-    }
-}
-
-.mx_LegacyRoomHeader_forgetButton::before {
-    mask-image: url("$(res)/img/element-icons/leave.svg");
-    width: 26px;
-}
-
-.mx_LegacyRoomHeader_appsButton::before {
-    mask-image: url("$(res)/img/element-icons/room/apps.svg");
-}
-
-.mx_LegacyRoomHeader_appsButton_highlight::before {
-    background-color: $accent;
-}
-
-.mx_LegacyRoomHeader_searchButton::before {
-    mask-image: url("$(res)/img/element-icons/room/search-inset.svg");
-}
-
-.mx_LegacyRoomHeader_inviteButton::before {
-    mask-image: url("$(res)/img/element-icons/room/invite.svg");
-}
-
-.mx_LegacyRoomHeader_voiceCallButton::before {
-    mask-image: url("$(res)/img/element-icons/call/voice-call.svg");
-
-    /* The call button SVG is padded slightly differently, so match it up to the size */
-    /* of the other icons */
-    mask-size: 20px;
-    mask-position: center;
-}
-
-.mx_LegacyRoomHeader_videoCallButton::before {
-    mask-image: url("$(res)/img/element-icons/call/video-call.svg");
-}
-
-.mx_LegacyRoomHeader_layoutButton--freedom::before,
-.mx_LegacyRoomHeader_freedomIcon::before {
-    mask-image: url("$(res)/img/element-icons/call/freedom.svg");
-}
-
-.mx_LegacyRoomHeader_layoutButton--spotlight::before,
-.mx_LegacyRoomHeader_spotlightIcon::before {
-    mask-image: url("$(res)/img/element-icons/call/spotlight.svg");
-}
-
-.mx_LegacyRoomHeader_closeButton {
-    &::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
-        mask-size: 20px;
-        mask-position: center;
-    }
-
-    &:hover {
-        background: unset; /* remove background color on hover */
-
-        &::before {
-            background-color: $icon-button-color; /* set the default background color */
-        }
-    }
-}
-
-.mx_LegacyRoomHeader_minimiseButton::before {
-    mask-image: url("$(res)/img/element-icons/reduce.svg");
-}
-
-.mx_LegacyRoomHeader_layoutMenu .mx_IconizedContextMenu_icon::before {
-    content: "";
-    width: 16px;
-    height: 16px;
-    display: block;
-    mask-position: center;
-    mask-size: 20px;
-    mask-repeat: no-repeat;
-    background: $primary-content;
-}
-
-@media only screen and (max-width: 480px) {
-    .mx_LegacyRoomHeader_wrapper {
-        padding: 0;
-        margin: 0;
-    }
-
-    .mx_LegacyRoomHeader {
-        overflow: hidden;
-    }
-}
--- a/res/css/views/rooms/_PinnedMessageBanner.pcss
+++ b/res/css/views/rooms/_PinnedMessageBanner.pcss
@ -81,15 +81,7 @@

        .mx_PinnedMessageBanner_message {
            grid-area: message;
-            font: var(--cpd-font-body-sm-regular);
            line-height: 20px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-
-            .mx_PinnedMessageBanner_prefix {
-                font: var(--cpd-font-body-sm-semibold);
-            }
        }

        .mx_PinnedMessageBanner_redactedMessage {
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@ -88,3 +88,8 @@ Please see LICENSE files in the repository root for full details.
 .mx_RoomHeader .mx_BaseAvatar {
    flex-shrink: 0;
 }
+
+.mx_RoomHeader_videoCallOption {
+    /* Workaround for https://github.com/element-hq/compound/issues/331 */
+    min-width: 240px;
+}
--- 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");
 }
--- 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 {
--- 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);
 }
--- 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 {
--- a/res/img/camera.svg
+++ b/res/img/camera.svg
@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="15px" viewBox="-1 -1 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_camera</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="06a-Room-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="06_4-Room-settings-admin" sketch:type="MSArtboardGroup" transform="translate(-248.000000, -71.000000)" fill="#454545">
-            <path d="M255.5,76.25 C256.119795,76.25 256.649737,76.4700499 257.089844,76.9101562 C257.52995,77.3502626 257.75,77.8802052 257.75,78.5 C257.75,79.1197948 257.52995,79.6497374 257.089844,80.0898438 C256.649737,80.5299501 256.119795,80.75 255.5,80.75 C254.880205,80.75 254.350263,80.5299501 253.910156,80.0898438 C253.47005,79.6497374 253.25,79.1197948 253.25,78.5 C253.25,77.8802052 253.47005,77.3502626 253.910156,76.9101562 C254.350263,76.4700499 254.880205,76.25 255.5,76.25 L255.5,76.25 Z M261,73 C261.552086,73 262.023436,73.1953105 262.414062,73.5859375 C262.804689,73.9765645 263,74.4479139 263,75 L263,82 C263,82.5520861 262.804689,83.0234355 262.414062,83.4140625 C262.023436,83.8046895 261.552086,84 261,84 L250,84 C249.447914,84 248.976564,83.8046895 248.585938,83.4140625 C248.195311,83.0234355 248,82.5520861 248,82 L248,75 C248,74.4479139 248.195311,73.9765645 248.585938,73.5859375 C248.976564,73.1953105 249.447914,73 250,73 L251.75,73 L252.148438,71.9375 C252.247396,71.6822904 252.428384,71.4622405 252.691406,71.2773438 C252.954428,71.092447 253.223957,71 253.5,71 L257.5,71 C257.776043,71 258.045572,71.092447 258.308594,71.2773438 C258.571616,71.4622405 258.752604,71.6822904 258.851562,71.9375 L259.25,73 L261,73 Z M255.5,82 C256.463546,82 257.287757,81.6575555 257.972656,80.9726562 C258.657556,80.287757 259,79.4635465 259,78.5 C259,77.5364535 258.657556,76.712243 257.972656,76.0273438 C257.287757,75.3424445 256.463546,75 255.5,75 C254.536454,75 253.712243,75.3424445 253.027344,76.0273438 C252.342444,76.712243 252,77.5364535 252,78.5 C252,79.4635465 252.342444,80.287757 253.027344,80.9726562 C253.712243,81.6575555 254.536454,82 255.5,82 L255.5,82 Z" id="icon_camera" sketch:type="MSShapeGroup"></path>
-        </g>
-    </g>
-</svg>
--- a/res/img/element-icons/add-photo.svg
+++ b/res/img/element-icons/add-photo.svg
@ -1,5 +0,0 @@
-<svg width="84" height="84" viewBox="0 0 84 84" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7988 34.9062C37.077 33.5217 38.2978 32.5 39.7396 32.5H44.2604C45.7022 32.5 46.923 33.5217 47.2012 34.9062C47.2429 35.1137 47.3232 35.3141 47.4627 35.4731L48.0649 36.1595C48.2548 36.3759 48.5287 36.5 48.8166 36.5H52C53.1046 36.5 54 37.3954 54 38.5V49.5C54 50.6046 53.1046 51.5 52 51.5H32C30.8954 51.5 30 50.6046 30 49.5V38.5C30 37.3954 30.8954 36.5 32 36.5H35.1834C35.4713 36.5 35.7452 36.3759 35.9351 36.1595L36.5373 35.4731C36.6768 35.3141 36.7571 35.1137 36.7988 34.9062ZM42 47.5C44.2091 47.5 46 45.7091 46 43.5C46 41.2909 44.2091 39.5 42 39.5C39.7909 39.5 38 41.2909 38 43.5C38 45.7091 39.7909 47.5 42 47.5Z" fill="white"/>
-<rect x="32" y="35" width="3" height="1" rx="0.5" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M59.75 27C59.75 26.5858 59.4142 26.25 59 26.25C58.5858 26.25 58.25 26.5858 58.25 27V31.25L54 31.25C53.5858 31.25 53.25 31.5858 53.25 32C53.25 32.4142 53.5858 32.75 54 32.75L58.25 32.75V37C58.25 37.4142 58.5858 37.75 59 37.75C59.4142 37.75 59.75 37.4142 59.75 37V32.75L64 32.75C64.4142 32.75 64.75 32.4142 64.75 32C64.75 31.5858 64.4142 31.25 64 31.25L59.75 31.25V27Z" fill="white"/>
-</svg>
--- a/res/img/element-icons/call/freedom.svg
+++ b/res/img/element-icons/call/freedom.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.28571 3.66667C6.28571 2.74619 7.03191 2 7.95238 2H11.7619C12.6824 2 13.4286 2.74619 13.4286 3.66667V7.47619C13.4286 8.39666 12.6824 9.14286 11.7619 9.14286H7.95238C7.03191 9.14286 6.28571 8.39667 6.28571 7.47619V3.66667ZM16.5238 2C15.6033 2 14.8571 2.74619 14.8571 3.66667V7.47619C14.8571 8.39667 15.6033 9.14286 16.5238 9.14286H20.3333C21.2538 9.14286 22 8.39666 22 7.47619V3.66667C22 2.74619 21.2538 2 20.3333 2H16.5238ZM16.5238 10.5714C15.6033 10.5714 14.8571 11.3176 14.8571 12.2381V16.0476C14.8571 16.9681 15.6033 17.7143 16.5238 17.7143H20.3333C21.2538 17.7143 22 16.9681 22 16.0476V12.2381C22 11.3176 21.2538 10.5714 20.3333 10.5714H16.5238ZM3.63265 10.5714C2.73096 10.5714 2 11.3024 2 12.2041V20.3673C2 21.269 2.73097 22 3.63266 22H11.7959C12.6976 22 13.4286 21.269 13.4286 20.3673V12.2041C13.4286 11.3024 12.6976 10.5714 11.7959 10.5714H3.63265Z" fill="white"/>
-</svg>
--- a/res/img/element-icons/call/spotlight.svg
+++ b/res/img/element-icons/call/spotlight.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 17.8689V2.51551C4 2.06669 4.53728 1.83452 4.86986 2.13591C8.18767 5.14263 10.9111 7.48209 13.102 9.36399L13.102 9.36403C18.3295 13.8544 20.5243 15.7398 20.5243 17.8689C20.5243 19.4181 19.6538 20.0153 18.1044 20.79C16.5549 21.5648 14.4534 22 12.2621 22C10.0709 22 7.96938 21.5648 6.41992 20.79C4.87047 20.0153 4 18.9646 4 17.8689ZM12.2621 20.9673C16.2548 20.9673 19.4915 19.5801 19.4915 17.869C19.4915 16.1578 16.2548 14.7707 12.2621 14.7707C8.26947 14.7707 5.03277 16.1578 5.03277 17.869C5.03277 19.5801 8.26947 20.9673 12.2621 20.9673ZM16.2618 8.67876C16.1718 8.64549 16.1718 8.51831 16.2618 8.48504L17.84 7.90103C17.8683 7.89057 17.8906 7.86828 17.901 7.84001L18.4851 6.26174C18.5183 6.17182 18.6455 6.17182 18.6788 6.26174L19.2628 7.84001C19.2733 7.86828 19.2955 7.89057 19.3238 7.90103L20.9021 8.48504C20.992 8.51831 20.992 8.64549 20.9021 8.67876L19.3238 9.26277C19.2955 9.27323 19.2733 9.29552 19.2628 9.32379L18.6788 10.9021C18.6455 10.992 18.5183 10.992 18.4851 10.9021L17.901 9.32379C17.8906 9.29552 17.8683 9.27323 17.84 9.26277L16.2618 8.67876ZM13.2618 5.45232C13.1718 5.48559 13.1718 5.61276 13.2618 5.64604L14.0862 5.95111C14.1145 5.96157 14.1368 5.98386 14.1472 6.01213L14.4523 6.83657C14.4856 6.92649 14.6127 6.92649 14.646 6.83657L14.9511 6.01213C14.9615 5.98386 14.9838 5.96157 15.0121 5.95111L15.8365 5.64603C15.9265 5.61276 15.9265 5.48559 15.8365 5.45232L15.0121 5.14725C14.9838 5.13679 14.9615 5.1145 14.9511 5.08623L14.646 4.26178C14.6127 4.17187 14.4856 4.17187 14.4523 4.26178L14.1472 5.08623C14.1368 5.1145 14.1145 5.13679 14.0862 5.14725L13.2618 5.45232Z" fill="white"/>
-</svg>
--- a/res/img/element-icons/community-rooms.svg
+++ b/res/img/element-icons/community-rooms.svg
@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM10.5253 6.00581C11.0743 6.06524 11.4713 6.55853 11.4118 7.10761L11.2234 8.84821H13.3843L13.596 6.89239C13.6554 6.34332 14.1487 5.94638 14.6978 6.00581C15.2469 6.06524 15.6438 6.55853 15.5844 7.10761L15.396 8.84821H16.3C16.8523 8.84821 17.3 9.29592 17.3 9.84821C17.3 10.4005 16.8523 10.8482 16.3 10.8482H15.1795L14.9319 13.1362H16.3C16.8523 13.1362 17.3 13.5839 17.3 14.1362C17.3 14.6884 16.8523 15.1362 16.3 15.1362H14.7154L14.502 17.1076C14.4426 17.6567 13.9493 18.0536 13.4002 17.9942C12.8512 17.9348 12.4542 17.4415 12.5136 16.8924L12.7037 15.1362H10.5429L10.3295 17.1076C10.2701 17.6567 9.77677 18.0536 9.22769 17.9942C8.67861 17.9348 8.28167 17.4415 8.3411 16.8924L8.53119 15.1362H7.5C6.94772 15.1362 6.5 14.6884 6.5 14.1362C6.5 13.5839 6.94772 13.1362 7.5 13.1362H8.74766L8.9953 10.8482H7.93922C7.38693 10.8482 6.93922 10.4005 6.93922 9.84821C6.93922 9.29592 7.38693 8.84821 7.93922 8.84821H9.21177L9.42345 6.89239C9.48288 6.34332 9.97618 5.94638 10.5253 6.00581ZM10.7593 13.1362H12.9202L13.1678 10.8482H11.007L10.7593 13.1362Z" fill="black"/>
-</svg>
--- a/res/img/element-icons/maximise-expand.svg
+++ b/res/img/element-icons/maximise-expand.svg
@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 4.34778V0.777778C14 0.35 13.65 0 13.2222 0H9.65222C8.96 0 8.61 0.84 9.1 1.33L10.3367 2.56667L2.55889 10.3444L1.32222 9.10778C0.84 8.61778 0 8.96 0 9.65222V13.2222C0 13.65 0.35 14 0.777778 14H4.34778C5.04 14 5.39 13.16 4.9 12.67L3.66333 11.4333L11.4411 3.65556L12.6778 4.89222C13.16 5.38222 14 5.04 14 4.34778Z" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/message/chevron-up.svg
+++ b/res/img/element-icons/message/chevron-up.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
--- a/res/img/element-icons/message/overflow-large.svg
+++ b/res/img/element-icons/message/overflow-large.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.66699 12C6.66699 13.1046 5.77156 14 4.66699 14C3.56242 14 2.66699 13.1046 2.66699 12C2.66699 10.8954 3.56242 10 4.66699 10C5.77156 10 6.66699 10.8954 6.66699 12Z" fill="#17191C"/>
-<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" fill="#17191C"/>
-<path d="M19.333 14C20.4376 14 21.333 13.1046 21.333 12C21.333 10.8954 20.4376 10 19.333 10C18.2284 10 17.333 10.8954 17.333 12C17.333 13.1046 18.2284 14 19.333 14Z" fill="#17191C"/>
-</svg>
--- a/res/img/element-icons/minimise-collapse.svg
+++ b/res/img/element-icons/minimise-collapse.svg
@ -1,3 +0,0 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.7855 1.25024L10.4345 4.60126L11.5953 5.76207C12.0553 6.22202 11.7267 7.01049 11.077 7.01049H7.73326C7.33172 7.01049 7.00319 6.68196 7.00319 6.28042V2.9221C7.00319 2.27234 7.79166 1.94381 8.25161 2.40375L9.41242 3.56456L12.7634 0.213545C13.0482 -0.0711818 13.5081 -0.0711818 13.7928 0.213545C14.0703 0.505573 14.0703 0.965517 13.7855 1.25024ZM1.25024 13.7855L4.60126 10.4345L5.76207 11.5953C6.22202 12.0553 7.01049 11.7267 7.01049 11.077V7.73326C7.01049 7.33172 6.68196 7.00319 6.28042 7.00319H2.9221C2.27234 7.00319 1.94381 7.79166 2.40375 8.25161L3.56456 9.41242L0.213545 12.7634C-0.0711818 13.0482 -0.0711818 13.5081 0.213545 13.7928C0.505573 14.0703 0.965517 14.0703 1.25024 13.7855Z" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/minus-button.svg
+++ b/res/img/element-icons/minus-button.svg
@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 8.00001C2 7.56779 2.35038 7.21741 2.78261 7.21741L13.2173 7.21741C13.6496 7.21741 13.9999 7.56779 13.9999 8.00001C13.9999 8.43223 13.6496 8.78262 13.2173 8.78262L2.78261 8.78262C2.35038 8.78262 2 8.43223 2 8.00001Z" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/plus-button.svg
+++ b/res/img/element-icons/plus-button.svg
@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8.78269 2.78285C8.78269 2.35063 8.43231 2.00024 8.00009 2.00024C7.56787 2.00024 7.21748 2.35063 7.21748 2.78285V7.21748L2.78285 7.21748C2.35063 7.21748 2.00024 7.56787 2.00024 8.00009C2.00024 8.43231 2.35063 8.78269 2.78285 8.78269L7.21748 8.7827V13.2176C7.21748 13.6498 7.56787 14.0002 8.00009 14.0002C8.43231 14.0002 8.7827 13.6498 8.7827 13.2176V8.7827L13.2176 8.7827C13.6498 8.7827 14.0002 8.43231 14.0002 8.00009C14.0002 7.56787 13.6498 7.21749 13.2176 7.21749L8.78269 7.21748V2.78285Z" fill="currentColor"/>
-</svg>
--- a/res/img/element-icons/plus.svg
+++ b/res/img/element-icons/plus.svg
@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.74986 3.55554C8.74986 3.14133 8.41408 2.80554 7.99986 2.80554C7.58565 2.80554 7.24986 3.14133 7.24986 3.55554V7.24999L3.55542 7.24999C3.14121 7.24999 2.80542 7.58577 2.80542 7.99999C2.80542 8.4142 3.14121 8.74999 3.55542 8.74999L7.24987 8.74999V12.4444C7.24987 12.8586 7.58565 13.1944 7.99987 13.1944C8.41408 13.1944 8.74987 12.8586 8.74987 12.4444V8.74999L12.4443 8.74999C12.8585 8.74999 13.1943 8.4142 13.1943 7.99999C13.1943 7.58577 12.8585 7.24999 12.4443 7.24999L8.74986 7.24999V3.55554Z" fill="#8E99A4"/>
-</svg>
--- a/res/img/element-icons/reduce.svg
+++ b/res/img/element-icons/reduce.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0759 13.6172C13.0273 13.7343 13.0004 13.8625 13 13.997C13 13.998 13 13.999 13 14L13 14.0007L13 20C13 20.5523 13.4477 21 14 21C14.5523 21 15 20.5523 15 20L15 16.4142L18.7929 20.2071C19.1834 20.5976 19.8166 20.5976 20.2071 20.2071C20.5976 19.8166 20.5976 19.1834 20.2071 18.7929L16.4142 15L20 15C20.5523 15 21 14.5523 21 14C21 13.4477 20.5523 13 20 13L14.0007 13L14 13C13.999 13 13.998 13 13.997 13C13.743 13.0008 13.4892 13.0977 13.295 13.2908C13.2943 13.2915 13.2936 13.2922 13.2929 13.2929C13.2922 13.2936 13.2915 13.2943 13.2908 13.295C13.196 13.3904 13.1243 13.5001 13.0759 13.6172ZM13.0759 13.6172C13.1262 13.4959 13.1996 13.3867 13.2908 13.295L13.0759 13.6172Z" fill="#737D8C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9241 10.3828C10.9727 10.2657 10.9996 10.1375 11 10.003C11 10.002 11 10.001 11 10V9.9993L11 4C11 3.44772 10.5523 3 10 3C9.44772 3 9 3.44772 9 4L9 7.58579L5.20711 3.79289C4.81658 3.40237 4.18342 3.40237 3.79289 3.79289C3.40237 4.18342 3.40237 4.81658 3.79289 5.20711L7.58579 9L4 9C3.44771 9 3 9.44771 3 10C3 10.5523 3.44771 11 4 11L9.9993 11H10C10.001 11 10.002 11 10.003 11C10.257 10.9992 10.5108 10.9023 10.705 10.7092C10.7057 10.7085 10.7064 10.7078 10.7071 10.7071C10.7078 10.7064 10.7085 10.7057 10.7092 10.705C10.804 10.6096 10.8757 10.4999 10.9241 10.3828ZM10.9241 10.3828C10.8738 10.5041 10.8004 10.6133 10.7092 10.705L10.9241 10.3828Z" fill="#737D8C"/>
-</svg>
--- a/res/img/element-icons/roomlist/archived.svg
+++ b/res/img/element-icons/roomlist/archived.svg
@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2C1.44772 2 1 2.44772 1 3V4C1 4.55228 1.44772 5 2 5H16C16.5523 5 17 4.55228 17 4V3C17 2.44772 16.5523 2 16 2H2ZM2.5 6.5H15.5V13.5C15.5 14.8807 14.3807 16 13 16H5C3.61929 16 2.5 14.8807 2.5 13.5V6.5ZM6 9C6 8.72386 6.22386 8.5 6.5 8.5H11.5C11.7761 8.5 12 8.72386 12 9V9.5C12 9.77614 11.7761 10 11.5 10H6.5C6.22386 10 6 9.77614 6 9.5V9Z" fill="black"/>
-</svg>
--- a/res/img/element-icons/roomlist/plus.svg
+++ b/res/img/element-icons/roomlist/plus.svg
@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 4C9.75 3.58579 9.41421 3.25 9 3.25C8.58579 3.25 8.25 3.58579 8.25 4V8.25L4 8.25C3.58579 8.25 3.25 8.58579 3.25 9C3.25 9.41421 3.58579 9.75 4 9.75L8.25 9.75V14C8.25 14.4142 8.58579 14.75 9 14.75C9.41421 14.75 9.75 14.4142 9.75 14V9.75L14 9.75C14.4142 9.75 14.75 9.41421 14.75 9C14.75 8.58579 14.4142 8.25 14 8.25L9.75 8.25V4Z" fill="black"/>
-</svg>
--- a/res/img/feather-customised/alert-triangle.svg
+++ b/res/img/feather-customised/alert-triangle.svg
@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.29 3.86002L1.82002 18C1.46466 18.6154 1.46254 19.3732 1.81445 19.9905C2.16635 20.6079 2.81943 20.9922 3.53002 21H20.47C21.1806 20.9922 21.8337 20.6079 22.1856 19.9905C22.5375 19.3732 22.5354 18.6154 22.18 18L13.71 3.86002C13.3475 3.2623 12.6991 2.89728 12 2.89728C11.3009 2.89728 10.6526 3.2623 10.29 3.86002Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 9V13" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<circle cx="12" cy="17" r="1" fill="#2E2F32"/>
-</svg>
--- a/res/img/feather-customised/edit.svg
+++ b/res/img/feather-customised/edit.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2L18 6L7 17H3V13L14 2V2Z" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M3 22H21" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/feather-customised/eye.svg
+++ b/res/img/feather-customised/eye.svg
@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="14" viewBox="0 0 18 14">
-    <g fill="none" fill-rule="evenodd" stroke="#03B381" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
-        <path d="M0 6s3-6 8.25-6 8.25 6 8.25 6-3 6-8.25 6S0 6 0 6z"/>
-        <circle cx="8.25" cy="6" r="2.25"/>
-    </g>
-</svg>
--- a/res/img/feather-customised/plus.svg
+++ b/res/img/feather-customised/plus.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 5V19" stroke="#2E2F32" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 12H19" stroke="#2E2F32" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/feather-customised/widget/external-link.svg
+++ b/res/img/feather-customised/widget/external-link.svg
@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M8.5 6v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h3M7 1h3v3M4.5 6.5L10 1"/>
-    </g>
-</svg>
--- a/res/img/icon-address-delete.svg
+++ b/res/img/icon-address-delete.svg
@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>943783E9-DBD7-4D4E-BAC9-35437C17C2C4</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Chat-People-2b-Invite-modal" transform="translate(-579.000000, -346.000000)" stroke="#FF0064">
-            <g id="icon_context_delete-copy" transform="translate(580.000000, 346.000000)">
-                <path d="M0.45,0.45 L8.55,8.55" id="Line"></path>
-                <path d="M0.45,0.45 L8.55,8.55" id="Line-Copy-2" transform="translate(4.500000, 4.500000) scale(-1, 1) translate(-4.500000, -4.500000) "></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/img/icon-email-user.svg
+++ b/res/img/icon-email-user.svg
@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>6F488856-F8EF-479C-9747-AB6E0945C7DE</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Chat-Group-5a-Invite-modal" transform="translate(-611.000000, -366.000000)">
-            <g id="Group-6" transform="translate(604.000000, 364.000000)">
-                <g id="icon_email_user" transform="translate(7.000000, 2.000000)">
-                    <circle id="Oval-2" fill="#D8D8D8" cx="12.5" cy="12.5" r="12.5"></circle>
-                    <path d="M19.3007812,12.2265625 C19.3007812,12.9713579 19.1835949,13.6523407 18.9492188,14.2695312 C18.7148426,14.8867218 18.3854188,15.3671858 17.9609375,15.7109375 C17.5364562,16.0546892 17.0455757,16.2265625 16.4882812,16.2265625 C16.0768209,16.2265625 15.7200536,16.1171886 15.4179688,15.8984375 C15.1158839,15.6796864 14.9127609,15.3828144 14.8085938,15.0078125 L14.7148438,15.0078125 C14.4596341,15.4140645 14.1445331,15.718749 13.7695312,15.921875 C13.3945294,16.125001 12.9726586,16.2265625 12.5039062,16.2265625 C11.6549437,16.2265625 10.9869816,15.9531277 10.5,15.40625 C10.0130184,14.8593723 9.76953125,14.1197963 9.76953125,13.1875 C9.76953125,12.114578 10.0924447,11.2434929 10.7382812,10.5742188 C11.3841178,9.90494457 12.2512966,9.5703125 13.3398438,9.5703125 C13.7356791,9.5703125 14.1744768,9.6054684 14.65625,9.67578125 C15.1380232,9.7460941 15.5664044,9.84374937 15.9414062,9.96875 L15.7695312,13.6015625 L15.7695312,13.7890625 C15.7695312,14.6224 16.0403619,15.0390625 16.5820312,15.0390625 C16.9934916,15.0390625 17.3203113,14.7734402 17.5625,14.2421875 C17.8046887,13.7109348 17.9257812,13.0338583 17.9257812,12.2109375 C17.9257812,11.320308 17.7434914,10.5377638 17.3789062,9.86328125 C17.0143211,9.18879871 16.4960971,8.66927266 15.8242188,8.3046875 C15.1523404,7.94010234 14.3815148,7.7578125 13.5117188,7.7578125 C12.4023382,7.7578125 11.4375041,7.98697687 10.6171875,8.4453125 C9.7968709,8.90364813 9.17057508,9.55858949 8.73828125,10.4101562 C8.30598742,11.261723 8.08984375,12.2499944 8.08984375,13.375 C8.08984375,14.8854242 8.49348555,16.0468709 9.30078125,16.859375 C10.108077,17.6718791 11.2669195,18.078125 12.7773438,18.078125 C13.9283912,18.078125 15.1289,17.8437523 16.3789062,17.375 L16.3789062,18.65625 C15.2851508,19.1041689 14.0950585,19.328125 12.8085938,19.328125 C10.8815008,19.328125 9.37891164,18.8085989 8.30078125,17.7695312 C7.22265086,16.7304636 6.68359375,15.2812593 6.68359375,13.421875 C6.68359375,12.0624932 6.9752575,10.8528699 7.55859375,9.79296875 C8.14193,8.73306762 8.95051566,7.92187781 9.984375,7.359375 C11.0182343,6.79687219 12.1887955,6.515625 13.4960938,6.515625 C14.6263077,6.515625 15.6328081,6.74999766 16.515625,7.21875 C17.3984419,7.68750234 18.0833309,8.35546441 18.5703125,9.22265625 C19.0572941,10.0898481 19.3007812,11.0911402 19.3007812,12.2265625 L19.3007812,12.2265625 Z M11.2695312,13.21875 C11.2695312,14.4322977 11.746089,15.0390625 12.6992188,15.0390625 C13.7044321,15.0390625 14.2539058,14.2760493 14.3476562,12.75 L14.4414062,10.8828125 C14.1132796,10.7942704 13.7617206,10.75 13.3867188,10.75 C12.7200488,10.75 12.2005227,10.971352 11.828125,11.4140625 C11.4557273,11.856773 11.2695312,12.4583295 11.2695312,13.21875 L11.2695312,13.21875 Z" id="@" fill="#FFFFFF"></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/img/icon-invite-people.svg
+++ b/res/img/icon-invite-people.svg
@ -1,5 +0,0 @@
-<svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.9999 3.30001C2.9999 5.02501 4.3499 6.37501 6.0749 6.37501C7.7999 6.45001 9.1499 5.02501 9.1499 3.30001C9.1499 1.57501 7.7999 0.225006 6.0749 0.225006C4.3499 0.225006 2.9999 1.57501 2.9999 3.30001ZM4.1249 3.30001C4.1249 2.25001 5.0249 1.35001 6.0749 1.35001C7.1999 1.35001 8.0249 2.25001 8.0249 3.30001C8.0249 4.35001 7.1249 5.25001 6.0749 5.25001C5.0249 5.25001 4.1249 4.35001 4.1249 3.30001Z" fill="white"/>
-<path d="M6.0749 6.97501C9.2249 6.97501 11.7749 9.52501 11.7749 12.675C11.7749 12.975 11.5499 13.275 11.1749 13.275C10.8749 13.275 10.5749 13.05 10.5749 12.675C10.4999 10.2 8.3249 8.25001 5.8499 8.32501C3.4499 8.40001 1.5749 10.35 1.4999 12.675C1.4999 12.975 1.2749 13.275 0.899902 13.275C0.524902 13.275 0.299902 13.05 0.299902 12.675C0.449902 9.52501 2.9249 6.97501 6.0749 6.97501Z" fill="white"/>
-<path d="M11.025 6.375C10.725 6.375 10.425 6.15 10.425 5.85C10.425 5.55 10.65 5.25 11.025 5.25H12V4.35C12 4.05 12.225 3.75 12.6 3.75C12.9 3.75 13.2 3.975 13.2 4.35V5.25H14.025C14.325 5.25 14.625 5.475 14.625 5.85C14.625 6.225 14.4 6.375 14.025 6.375H13.125V7.275C13.125 7.575 12.9 7.875 12.525 7.875C12.15 7.875 11.925 7.65 11.925 7.275V6.375H11.025Z" fill="white"/>
-</svg>
--- a/res/img/icon-return.svg
+++ b/res/img/icon-return.svg
@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
-    <title>B542A09B-DBBF-41D4-A5FD-D05EE1E6BBC4</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Chat-Directory-search-result-ID" transform="translate(-553.000000, -97.000000)" stroke="#4A4A4A">
-            <g id="icon_return" transform="translate(554.000000, 97.000000)">
-                <polyline id="Rectangle" points="7.5 0.5 10.5 0.5 10.5 6.5 0 6.5"></polyline>
-                <g id="Group" transform="translate(0.000000, 1.954545)" stroke-linecap="square">
-                    <path d="M0.227272727,4.40909091 L4.25946916,0.376894528" id="Line"></path>
-                    <path d="M0.227272727,8.44128729 L4.25946916,4.40909091" id="Line-Copy-7" transform="translate(2.243371, 6.425189) scale(1, -1) translate(-2.243371, -6.425189) "></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/img/icon_context_delete.svg
+++ b/res/img/icon_context_delete.svg
@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
-    <g transform="matrix(1,0,0,1,-0,-80)">
-        <g id="icon_context_delete" transform="matrix(0.600982,0,0,0.600982,0,80)">
-            <g transform="matrix(1.66394,0,0,1.66394,0,-133.116)">
-                <path d="M7.508,86.728C8.739,85.523 9.979,84.326 11.196,83.109C11.277,83.034 11.364,82.99 11.472,82.968C11.512,82.964 11.549,82.962 11.589,82.964C11.668,82.973 11.743,82.994 11.811,83.036C11.994,83.148 12.086,83.371 12.036,83.579C12.017,83.657 11.98,83.724 11.93,83.787C10.749,85.064 9.524,86.299 8.285,87.52C9.489,88.752 10.686,89.991 11.904,91.209C11.958,91.267 12.001,91.331 12.026,91.408C12.042,91.458 12.05,91.51 12.05,91.562C12.05,91.82 11.846,92.041 11.589,92.061C11.454,92.071 11.33,92.025 11.225,91.942C9.948,90.762 8.713,89.536 7.492,88.297C6.261,89.501 5.021,90.698 3.804,91.916C3.745,91.97 3.681,92.013 3.605,92.038C3.555,92.054 3.502,92.062 3.45,92.062C3.192,92.062 2.972,91.858 2.952,91.602C2.941,91.466 2.987,91.342 3.07,91.238C4.251,89.96 5.476,88.726 6.715,87.505C5.511,86.273 4.314,85.034 3.096,83.816C3.042,83.757 2.999,83.693 2.974,83.617C2.908,83.413 2.983,83.184 3.156,83.058C3.221,83.01 3.294,82.984 3.372,82.968C3.412,82.964 3.449,82.962 3.489,82.964C3.598,82.977 3.689,83.014 3.775,83.082C5.052,84.263 6.287,85.488 7.508,86.728Z" style="fill:rgb(255,0,100);"/>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/img/icons-create-room.svg
+++ b/res/img/icons-create-room.svg
@ -1,4 +0,0 @@
-<svg width="8" height="8" viewBox="4 4 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 5V11" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M11 8H5" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
-</svg>
--- a/res/img/icons-room-add.svg
+++ b/res/img/icons-room-add.svg
@ -1,9 +0,0 @@
-
-<svg width="8px" height="8px" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Design" stroke="none" stroke-width="1.6" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g id="Add" transform="translate(1.000000, 1.000000)" fill-rule="nonzero" stroke="#FFFFFF">
-            <path d="M3,0 L3,6" id="Stroke H"></path>
-            <path d="M3,0 L3,6" id="Stroke V" transform="translate(3.000000, 3.000000) rotate(90.000000) translate(-3.000000, -3.000000) "></path>
-        </g>
-    </g>
-</svg>
--- a/res/img/location/pointer.svg
+++ b/res/img/location/pointer.svg
@ -1,3 +0,0 @@
-<svg width="9" height="4" viewBox="0 0 9 4" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.5 4L0.602887 0.25L8.39711 0.250001L4.5 4Z" fill="#0DBD8B"/>
-</svg>
--- a/res/img/markdown.svg
+++ b/res/img/markdown.svg
@ -1,3 +0,0 @@
-<svg height="45" viewBox="0 0 69 45" width="69" xmlns="http://www.w3.org/2000/svg">
-    <path d="m6 0h57c3.3137085 0 6 2.6862915 6 6v33c0 3.3137085-2.6862915 6-6 6h-57c-3.3137085 0-6-2.6862915-6-6v-33c0-3.3137085 2.6862915-6 6-6zm23.3703704 11c-.6518551 0-1.1841955.3860101-1.5970371 1.158042l-7.7244444 14.7006993-7.7896296-14.7006993c-.4128416-.7720319-.9560461-1.158042-1.6296297-1.158042-.4780271 0-.86913425.1554763-1.1733333.4664336-.30419906.3109572-.4562963.7130511-.4562963 1.2062937v19.7510489c0 .4717973.13580111.8524461.40740741 1.1419581.27160629.2895119.63555329.4342657 1.09185189.4342657.478027 0 .8474061-.1393925 1.1081481-.4181818.2607421-.2787893.3911111-.6647994.3911111-1.158042v-14.8293706l6.4207408 11.8699301c.4128415.7505865.9451819 1.1258741 1.597037 1.1258741s1.1841955-.3752876 1.597037-1.1258741l6.3881482-11.9986014v14.9580419c0 .4932426.130369.8792527.3911111 1.158042.260742.2787893.619257.4181818 1.0755555.4181818.4780271 0 .8528382-.1393925 1.1244445-.4181818s.4074074-.6647994.4074074-1.158042v-19.7510489c0-.4932426-.1520972-.8953365-.4562963-1.2062937-.304199-.3109573-.6953062-.4664336-1.1733333-.4664336zm18.1296296 17.8786797-7.3180195-7.3180195c-.5857864-.5857865-1.5355339-.5857865-2.1213203 0-.5857865.5857864-.5857865 1.5355339 0 2.1213203l9.8994949 9.899495c.3056756.3056756.7104567.4518432 1.1109127.438503.400456.0133402.8052371-.1328274 1.1109127-.438503l9.899495-9.899495c.5857864-.5857864.5857864-1.5355339 0-2.1213203-.5857865-.5857865-1.535534-.5857865-2.1213204 0l-7.4601551 7.4601551v-16.5208153c0-.8284271-.6715729-1.5-1.5-1.5s-1.5.6715729-1.5 1.5z" fill="#d8d8d8" fill-rule="evenodd"/>
-</svg>
--- a/res/img/subtract.svg
+++ b/res/img/subtract.svg
@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58167 12.4183 0 8 0C3.58173 0 0 3.58167 0 8C0 12.4183 3.58173 16 8 16ZM3.96967 5.0304L6.93933 8L3.96967 10.9697L5.03033 12.0304L8 9.06067L10.9697 12.0304L12.0303 10.9697L9.06067 8L12.0303 5.0304L10.9697 3.96973L8 6.93945L5.03033 3.96973L3.96967 5.0304Z" fill="#8D97A5"/>
-</svg>
--- a/res/img/voip/signal-bars.svg
+++ b/res/img/voip/signal-bars.svg
@ -1,5 +0,0 @@
-<svg width="11" height="12" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="0.5" width="2.2" height="11" fill="#0DBD8B"/>
-<rect x="4.40015" y="2.70001" width="2.2" height="8.8" fill="#0DBD8B"/>
-<rect x="8.79993" y="7.10004" width="2.2" height="4.4" fill="#0DBD8B"/>
-</svg>
--- a/res/jitsi_external_api.min.js
+++ b/res/jitsi_external_api.min.js
--- a/scripts/make-react-component.js
+++ b/scripts/make-react-component.js
@ -32,7 +32,7 @@ export default %%ComponentName%%;
 `,
    TEST: `
 import React from "react";
-import { render } from "@testing-library/react";
+import { render } from "jest-matrix-react";

 import %%ComponentName%% from '%%RelativeComponentPath%%';

--- a/sonar-project.properties
+++ b/sonar-project.properties
@ -11,5 +11,13 @@ sonar.exclusions=__mocks__,docs,element.io,nginx
 sonar.cpd.exclusions=src/i18n/strings/*.json
 sonar.typescript.tsconfigPath=./tsconfig.json
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
-sonar.coverage.exclusions=test/**/*,playwright/**/*,res/**/*,src/vector/modernizr.js,src/components/views/dialogs/devtools/**/*,src/utils/SessionLock.ts
+sonar.coverage.exclusions=\
+  test/**/*,\
+  playwright/**/*,\
+  res/**/*,\
+  scripts/**/*,\
+  src/vector/modernizr.js,\
+  src/components/views/dialogs/devtools/**/*,\
+  src/utils/SessionLock.ts,\
+  src/**/*.d.ts
 sonar.testExecutionReportPaths=coverage/jest-sonar-report.xml
--- a/src/@types/react.d.ts
+++ b/src/@types/react.d.ts
@ -13,4 +13,7 @@ declare module "react" {
    function forwardRef<T, P = {}>(
        render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
    ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+
+    // Fix lazy types - https://stackoverflow.com/a/71017028
+    function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;
 }
--- a/src/AsyncWrapper.tsx
+++ b/src/AsyncWrapper.tsx
@ -37,6 +37,7 @@ export default class AsyncWrapper extends React.Component<IProps, IState> {
    public state: IState = {};

    public componentDidMount(): void {
+        this.unmounted = false;
        this.props.prom
            .then((result) => {
                if (this.unmounted) return;
--- a/src/BasePlatform.ts
+++ b/src/BasePlatform.ts
@ -31,6 +31,8 @@ import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
 import { IConfigOptions } from "./IConfigOptions";
 import SdkConfig from "./SdkConfig";
 import { buildAndEncodePickleKey, encryptPickleKey } from "./utils/tokens/pickling";
+import Favicon from "./favicon.ts";
+import { getVectorConfig } from "./vector/getconfig.ts";

 export const SSO_HOMESERVER_URL_KEY = "mx_sso_hs_url";
 export const SSO_ID_SERVER_URL_KEY = "mx_sso_is_url";
@ -66,14 +68,20 @@ const UPDATE_DEFER_KEY = "mx_defer_update";
 export default abstract class BasePlatform {
    protected notificationCount = 0;
    protected errorDidOccur = false;
+    protected _favicon?: Favicon;

    protected constructor() {
        dis.register(this.onAction);
        this.startUpdateCheck = this.startUpdateCheck.bind(this);
    }

-    public abstract getConfig(): Promise<IConfigOptions | undefined>;
+    public async getConfig(): Promise<IConfigOptions | undefined> {
+        return getVectorConfig();
+    }

+    /**
+     * Get a sensible default display name for the device Element is running on
+     */
    public abstract getDefaultDeviceDisplayName(): string;

    protected onAction = (payload: ActionPayload): void => {
@ -89,11 +97,15 @@ export default abstract class BasePlatform {
    public abstract getHumanReadableName(): string;

    public setNotificationCount(count: number): void {
+        if (this.notificationCount === count) return;
        this.notificationCount = count;
+        this.updateFavicon();
    }

    public setErrorStatus(errorDidOccur: boolean): void {
+        if (this.errorDidOccur === errorDidOccur) return;
        this.errorDidOccur = errorDidOccur;
+        this.updateFavicon();
    }

    /**
@ -456,4 +468,34 @@ export default abstract class BasePlatform {
        url.hash = "";
        return url;
    }
+
+    /**
+     * Delay creating the `Favicon` instance until first use (on the first notification) as
+     * it uses canvas, which can trigger a permission prompt in Firefox's resist fingerprinting mode.
+     * See https://github.com/element-hq/element-web/issues/9605.
+     */
+    public get favicon(): Favicon {
+        if (this._favicon) {
+            return this._favicon;
+        }
+        this._favicon = new Favicon();
+        return this._favicon;
+    }
+
+    private updateFavicon(): void {
+        let bgColor = "#d00";
+        let notif: string | number = this.notificationCount;
+
+        if (this.errorDidOccur) {
+            notif = notif || "×";
+            bgColor = "#f00";
+        }
+
+        this.favicon.badge(notif, { bgColor });
+    }
+
+    /**
+     * Begin update polling, if applicable
+     */
+    public startUpdater(): void {}
 }
--- a/src/CreateCrossSigning.ts
+++ b/src/CreateCrossSigning.ts
@ -0,0 +1,118 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+Copyright 2018, 2019 New Vector Ltd
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { logger } from "matrix-js-sdk/src/logger";
+import { AuthDict, CrossSigningKeys, MatrixClient, MatrixError, UIAFlow, UIAResponse } from "matrix-js-sdk/src/matrix";
+
+import { SSOAuthEntry } from "./components/views/auth/InteractiveAuthEntryComponents";
+import Modal from "./Modal";
+import { _t } from "./languageHandler";
+import InteractiveAuthDialog from "./components/views/dialogs/InteractiveAuthDialog";
+
+/**
+ * Determine if the homeserver allows uploading device keys with only password auth.
+ * @param cli The Matrix Client to use
+ * @returns True if the homeserver allows uploading device keys with only password auth, otherwise false
+ */
+async function canUploadKeysWithPasswordOnly(cli: MatrixClient): Promise<boolean> {
+    try {
+        await cli.uploadDeviceSigningKeys(undefined, {} as CrossSigningKeys);
+        // We should never get here: the server should always require
+        // UI auth to upload device signing keys. If we do, we upload
+        // no keys which would be a no-op.
+        logger.log("uploadDeviceSigningKeys unexpectedly succeeded without UI auth!");
+        return false;
+    } catch (error) {
+        if (!(error instanceof MatrixError) || !error.data || !error.data.flows) {
+            logger.log("uploadDeviceSigningKeys advertised no flows!");
+            return false;
+        }
+        const canUploadKeysWithPasswordOnly = error.data.flows.some((f: UIAFlow) => {
+            return f.stages.length === 1 && f.stages[0] === "m.login.password";
+        });
+        return canUploadKeysWithPasswordOnly;
+    }
+}
+
+/**
+ * Ensures that cross signing keys are created and uploaded for the user.
+ * The homeserver may require user-interactive auth to upload the keys, in
+ * which case the user will be prompted to authenticate. If the homeserver
+ * allows uploading keys with just an account password and one is provided,
+ * the keys will be uploaded without user interaction.
+ *
+ * This function does not set up backups of the created cross-signing keys
+ * (or message keys): the cross-signing keys are stored locally and will be
+ * lost requiring a crypto reset, if the user logs out or loses their session.
+ *
+ * @param cli The Matrix Client to use
+ * @param isTokenLogin True if the user logged in via a token login, otherwise false
+ * @param accountPassword The password that the user logged in with
+ */
+export async function createCrossSigning(
+    cli: MatrixClient,
+    isTokenLogin: boolean,
+    accountPassword?: string,
+): Promise<void> {
+    const cryptoApi = cli.getCrypto();
+    if (!cryptoApi) {
+        throw new Error("No crypto API found!");
+    }
+
+    const doBootstrapUIAuth = async (
+        makeRequest: (authData: AuthDict) => Promise<UIAResponse<void>>,
+    ): Promise<void> => {
+        if (accountPassword && (await canUploadKeysWithPasswordOnly(cli))) {
+            await makeRequest({
+                type: "m.login.password",
+                identifier: {
+                    type: "m.id.user",
+                    user: cli.getUserId(),
+                },
+                password: accountPassword,
+            });
+        } else if (isTokenLogin) {
+            // We are hoping the grace period is active
+            await makeRequest({});
+        } else {
+            const dialogAesthetics = {
+                [SSOAuthEntry.PHASE_PREAUTH]: {
+                    title: _t("auth|uia|sso_title"),
+                    body: _t("auth|uia|sso_preauth_body"),
+                    continueText: _t("auth|sso"),
+                    continueKind: "primary",
+                },
+                [SSOAuthEntry.PHASE_POSTAUTH]: {
+                    title: _t("encryption|confirm_encryption_setup_title"),
+                    body: _t("encryption|confirm_encryption_setup_body"),
+                    continueText: _t("action|confirm"),
+                    continueKind: "primary",
+                },
+            };
+
+            const { finished } = Modal.createDialog(InteractiveAuthDialog, {
+                title: _t("encryption|bootstrap_title"),
+                matrixClient: cli,
+                makeRequest,
+                aestheticsForStagePhases: {
+                    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+                },
+            });
+            const [confirmed] = await finished;
+            if (!confirmed) {
+                throw new Error("Cross-signing key upload auth canceled");
+            }
+        }
+    };
+
+    await cryptoApi.bootstrapCrossSigning({
+        authUploadDeviceSigningKeys: doBootstrapUIAuth,
+    });
+}
--- a/src/DecryptionFailureTracker.ts
+++ b/src/DecryptionFailureTracker.ts
@ -82,6 +82,10 @@ export class DecryptionFailureTracker {
                    return "HistoricalMessage";
                case DecryptionFailureCode.HISTORICAL_MESSAGE_USER_NOT_JOINED:
                    return "ExpectedDueToMembership";
+                case DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED:
+                    return "ExpectedVerificationViolation";
+                case DecryptionFailureCode.UNSIGNED_SENDER_DEVICE:
+                    return "ExpectedSentByInsecureDevice";
                default:
                    return "UnknownError";
            }
--- a/src/DeviceListener.ts
+++ b/src/DeviceListener.ts
@ -113,13 +113,9 @@ export default class DeviceListener {
            this.client.removeListener(ClientEvent.Sync, this.onSync);
            this.client.removeListener(RoomStateEvent.Events, this.onRoomStateEvents);
        }
-        if (this.deviceClientInformationSettingWatcherRef) {
-            SettingsStore.unwatchSetting(this.deviceClientInformationSettingWatcherRef);
-        }
-        if (this.dispatcherRef) {
-            dis.unregister(this.dispatcherRef);
-            this.dispatcherRef = undefined;
-        }
+        SettingsStore.unwatchSetting(this.deviceClientInformationSettingWatcherRef);
+        dis.unregister(this.dispatcherRef);
+        this.dispatcherRef = undefined;
        this.dismissed.clear();
        this.dismissedThisDeviceToast = false;
        this.keyBackupInfo = null;
@ -292,27 +288,21 @@ export default class DeviceListener {
            await crypto.getUserDeviceInfo([cli.getSafeUserId()]);

            // cross signing isn't enabled - nag to enable it
-            // There are 3 different toasts for:
+            // There are 2 different toasts for:
            if (!(await crypto.getCrossSigningKeyId()) && (await crypto.userHasCrossSigningKeys())) {
                // Cross-signing on account but this device doesn't trust the master key (verify this session)
                showSetupEncryptionToast(SetupKind.VERIFY_THIS_SESSION);
                this.checkKeyBackupStatus();
            } else {
-                const backupInfo = await this.getKeyBackupInfo();
-                if (backupInfo) {
-                    // No cross-signing on account but key backup available (upgrade encryption)
-                    showSetupEncryptionToast(SetupKind.UPGRADE_ENCRYPTION);
+                // No cross-signing or key backup on account (set up encryption)
+                await cli.waitForClientWellKnown();
+                if (isSecureBackupRequired(cli) && isLoggedIn()) {
+                    // If we're meant to set up, and Secure Backup is required,
+                    // trigger the flow directly without a toast once logged in.
+                    hideSetupEncryptionToast();
+                    accessSecretStorage();
                } else {
-                    // No cross-signing or key backup on account (set up encryption)
-                    await cli.waitForClientWellKnown();
-                    if (isSecureBackupRequired(cli) && isLoggedIn()) {
-                        // If we're meant to set up, and Secure Backup is required,
-                        // trigger the flow directly without a toast once logged in.
-                        hideSetupEncryptionToast();
-                        accessSecretStorage();
-                    } else {
-                        showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
-                    }
+                    showSetupEncryptionToast(SetupKind.SET_UP_ENCRYPTION);
                }
            }
        }
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>`