[create-pull-request] automated change (#28212 )

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>
Update browserslist (#28199 )
2026-11-11 02:38:39 +00:00 · 2024-10-17 06:22:40 +00:00 · 2024-10-16 15:02:08 +00:00 · 2024-10-16 14:57:10 +00:00 · 2024-10-16 14:20:56 +00:00 · 2024-10-16 14:13:22 +00:00
440 changed files with 3712 additions and 2876 deletions
@@ -7,6 +7,3 @@ karma-reports/
 .idea/
 .tmp/
 config.json*
-# Exclude the playwright directory as much as we can as the snapshots are huge and we bind mount it in
-playwright/
-!playwright/docker-entrypoint.sh
@@ -18,7 +18,7 @@ trim_trailing_whitespace = true
 indent_size = 4

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

 [*.tsx.snap]
 trim_trailing_whitespace = false
@@ -198,8 +198,6 @@ module.exports = {
                "@typescript-eslint/ban-ts-comment": "off",
                // We're okay with assertion errors when we ask for them
                "@typescript-eslint/no-non-null-assertion": "off",
-                // We do this sometimes to brand interfaces
-                "@typescript-eslint/no-empty-object-type": "off",
            },
        },
        // temporary override for offending icon require files
@@ -10,7 +10,7 @@ on:
 jobs:
    backport:
        name: Backport
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        # Only react to merged PRs for security reasons.
        # See https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows#pull_request_target.
        if: >
@@ -18,15 +18,15 @@ jobs:
            fail-fast: false
            matrix:
                image:
-                    - ubuntu-24.04
-                    - windows-2022
-                    - macos-14
+                    - ubuntu-latest
+                    - windows-latest
+                    - macos-latest
                isDevelop:
                    - ${{ github.event_name == 'push' && github.ref_name == 'develop' }}
-                # Skip the ubuntu-24.04 build for the develop branch as the dedicated CD build_develop workflow handles that
+                # Skip the ubuntu-latest build for the develop branch as the dedicated CD build_develop workflow handles that
                exclude:
                    - isDevelop: true
-                      image: ubuntu-24.04
+                      image: ubuntu-latest
        runs-on: ${{ matrix.image }}
        defaults:
            run:
@@ -7,7 +7,7 @@ jobs:
    build:
        name: Build package
        environment: packages.element.io
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        env:
            R2_INCOMING_BUCKET: ${{ vars.R2_INCOMING_BUCKET }}
            R2_URL: ${{ vars.CF_R2_S3_API }}
@@ -14,7 +14,7 @@ jobs:
        name: "Build & Deploy develop.element.io"
        # Only respect triggers from our develop branch, ignore that of forks
        if: github.repository == 'element-hq/element-web'
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        environment: develop
        env:
            R2_BUCKET: "element-web-develop"
@@ -13,8 +13,17 @@ permissions:
 jobs:
    buildx:
        name: Docker Buildx
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        environment: dockerhub
+        strategy:
+            fail-fast: false
+            matrix:
+                include:
+                    - variant: vanilla
+                    # Variant we ship to aid ESS in providing a build on the OpenCoDE platform including specific modules
+                    - variant: opendesk
+                      flavor: suffix=-opendesk,onlatest=true
+                      prepare: mv variants/openDesk/* .
        steps:
            - uses: actions/checkout@v4
              with:
@@ -23,6 +32,10 @@ jobs:
            - name: Install Cosign
              uses: sigstore/cosign-installer@4959ce089c160fddf62f7b42464195ba1a56d382 # v3

+            - name: Prepare
+              if: matrix.prepare
+              run: ${{ matrix.prepare }}
+
            - name: Set up QEMU
              uses: docker/setup-qemu-action@49b3bc8e6bdd4a60e6116a5414239cba5943d3cf # v3

@@ -48,6 +61,7 @@ jobs:
                      type=ref,event=tag
                  flavor: |
                      latest=${{ contains(github.ref_name, '-rc.') && 'false' || 'auto' }}
+                      ${{ matrix.flavor }}

            - name: Build and push
              id: build-and-push
@@ -71,6 +85,7 @@ jobs:
                  cosign sign --yes ${images}

            - name: Update repo description
+              if: matrix.variant == 'vanilla'
              uses: peter-evans/dockerhub-description@e98e4d1628a5f3be2be7c231e50981aee98723ae # v4
              continue-on-error: true
              with:
@@ -17,7 +17,7 @@ concurrency:
 jobs:
    build:
        name: GitHub Pages
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - name: Fetch element-desktop
              uses: actions/checkout@v4
@@ -99,7 +99,7 @@ jobs:
        environment:
            name: github-pages
            url: ${{ steps.deployment.outputs.page_url }}
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        needs: build
        steps:
            - name: Deploy to GitHub Pages
@@ -7,7 +7,7 @@ on:
 jobs:
    tidy:
        name: Tidy closed issues
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/github-script@v7
              id: main
@@ -9,7 +9,7 @@ concurrency: ${{ github.workflow }}
 jobs:
    bot:
        name: Pending reviews bot
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        environment: Matrix
        env:
            URL: "https://github.com/pulls?q=is%3Apr+is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+review-requested%3A%40me+sort%3Aupdated-desc+"
@@ -27,7 +27,7 @@ jobs:
    notify-downstream:
        name: Trigger release drafter downstream
        needs: release
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - name: Notify element-desktop repo that element-web release has completed to re-trigger release-drafter
              uses: benc-uk/workflow-dispatch@e2e5e9a103e331dad343f381a29e654aea3cf8fc # v1
@@ -41,7 +41,7 @@ jobs:
    check:
        name: Post release checks
        needs: release
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - name: Wait for dockerhub
              uses: t3chguy/wait-on-check-action@18541021811b56544d90e0f073401c2b99e249d6 # fork
@@ -19,7 +19,7 @@ on:
                default: true
 jobs:
    prepare:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - name: Checkout Element Desktop
              uses: actions/checkout@v4
@@ -19,7 +19,7 @@ env:
 jobs:
    ts_lint:
        name: "Typescript Syntax Check"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

@@ -81,7 +81,7 @@ jobs:

    js_lint:
        name: "ESLint"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

@@ -99,7 +99,7 @@ jobs:

    style_lint:
        name: "Style Lint"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

@@ -117,7 +117,7 @@ jobs:

    workflow_lint:
        name: "Workflow Lint"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

@@ -135,7 +135,7 @@ jobs:

    analyse_dead_code:
        name: "Analyse Dead Code"
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

@@ -6,7 +6,7 @@ on:

 jobs:
    web-app-team:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: |
            contains(github.event.issue.assignees.*.login, 't3chguy') ||
            contains(github.event.issue.assignees.*.login, 'andybalaam') ||
@@ -6,7 +6,7 @@ on:

 jobs:
    automate-project-columns:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/add-to-project@main
              with:
@@ -11,7 +11,7 @@ on:
 jobs:
    apply_Z-Labs_label:
        name: Add Z-Labs label for features behind labs flags
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'A-Maths') ||
            contains(github.event.issue.labels.*.name, 'A-Location-Sharing') ||
@@ -37,7 +37,7 @@ jobs:

    apply_Help-Wanted_label:
        name: Add "Help Wanted" label to all "good first issue" and Hacktoberfest
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'good first issue') ||
            contains(github.event.issue.labels.*.name, 'Hacktoberfest')
@@ -54,7 +54,7 @@ jobs:

    move_needs_info_issues:
        name: X-Needs-Info issues to Need info column on triage board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'X-Needs-Info')
        steps:
@@ -77,7 +77,7 @@ jobs:

    move_flakey_test_issues:
        name: Z-Flaky-Test issues to Sized for maintainer column on triage board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'Z-Flaky-Test')
        steps:
@@ -100,7 +100,7 @@ jobs:

    add_priority_design_issues_to_project:
        name: P1 X-Needs-Design to Design project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'X-Needs-Design') &&
            (contains(github.event.issue.labels.*.name, 'S-Critical') &&
@@ -117,7 +117,7 @@ jobs:

    add_product_issues:
        name: X-Needs-Product to product project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'X-Needs-Product')
        steps:
@@ -128,7 +128,7 @@ jobs:

    Search_issues_to_board:
        name: Search issues to project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
        steps:
@@ -139,7 +139,7 @@ jobs:

    voip:
        name: Add labelled issues to VoIP project board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'Team: VoIP')
        steps:
@@ -150,7 +150,7 @@ jobs:

    verticals_feature:
        name: Add labelled issues to Verticals Feature project
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'Team: Verticals Feature')
        steps:
@@ -161,7 +161,7 @@ jobs:

    tech_debt:
        name: Add labelled issues to tech debt project
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            contains(github.event.issue.labels.*.name, 'A-Developer-Experience') ||
            contains(github.event.issue.labels.*.name, 'A-Documentation') ||
@@ -6,7 +6,7 @@ on:
 jobs:
    add_design_pr_to_project:
        name: Move PRs asking for design review to the design board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: octokit/graphql-action@v2.x
              id: find_team_members
@@ -73,7 +73,7 @@ jobs:

    add_product_pr_to_project:
        name: Move PRs asking for design review to the design board
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: octokit/graphql-action@v2.x
              id: find_team_members
@@ -4,7 +4,7 @@ on:
        - cron: "30 1 * * *"
 jobs:
    close:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        permissions:
            actions: write
            issues: write
@@ -7,7 +7,7 @@ on:
 jobs:
    Move_Unabeled_Issue_On_Project_Board:
        name: Move no longer X-Needs-Info issues to Triaged
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            ${{
            !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
@@ -44,7 +44,7 @@ jobs:

    remove_Z-Labs_label:
        name: Remove Z-Labs label when features behind labs flags are removed
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        if: >
            !(contains(github.event.issue.labels.*.name, 'A-Maths') ||
            contains(github.event.issue.labels.*.name, 'A-Message-Pinning') ||
@@ -6,7 +6,7 @@ on:
        - cron: "0 3 * * 0" # 3am every Sunday
 jobs:
    update:
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v4

@@ -18,7 +18,7 @@ concurrency: ${{ github.workflow }}
 jobs:
    bot:
        name: Release topic update
-        runs-on: ubuntu-24.04
+        runs-on: ubuntu-latest
        environment: Matrix
        steps:
            - uses: actions/github-script@v7
@@ -56,7 +56,7 @@ jobs:
                              headers,
                              body: "{}",
                          });
-
+                          
                          let res = await fetch(apiUrl, {
                              method: "GET",
                              headers,
@@ -69,7 +69,7 @@ jobs:

                          const data = await res.json();
                          console.log(roomId, "got event", data);
-
+                          
                          const topic = data.topic.replace(regex, releaseTopic);
                          if (topic === data.topic) {
                              console.log(roomId, "nothing to do");
@@ -89,7 +89,7 @@ jobs:
                              }),
                              headers,
                          });
-
+                          
                          if (res.ok) {
                              console.log(roomId, "topic updated:", topic);
                          } else {
@@ -37,10 +37,5 @@ 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/
@@ -44,8 +44,6 @@ 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",
@@ -67,16 +67,22 @@
        "test:playwright:open": "yarn test:playwright --ui",
        "test:playwright:screenshots": "yarn test:playwright:screenshots:build && yarn test:playwright:screenshots:run",
        "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
-        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
+        "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
        "coverage": "yarn test --coverage",
        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
        "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
        "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",
+        "oidc-client-ts": "3.0.1",
        "jwt-decode": "4.0.0",
+        "@vector-im/compound-design-tokens": "1.8.0",
+        "@vector-im/compound-web": "7.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"
@@ -90,8 +96,9 @@
        "@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/compound-web": "^7.0.0",
        "@zxcvbn-ts/core": "^3.0.4",
        "@zxcvbn-ts/language-common": "^3.0.4",
        "@zxcvbn-ts/language-en": "^3.0.2",
@@ -108,7 +115,7 @@
        "emojibase-regex": "15.3.2",
        "escape-html": "^1.0.3",
        "file-saver": "^2.0.5",
-        "filesize": "10.1.6",
+        "filesize": "10.1.4",
        "github-markdown-css": "^5.5.1",
        "glob-to-regexp": "^0.4.1",
        "highlight.js": "^11.3.1",
@@ -135,16 +142,16 @@
        "png-chunks-extract": "^1.0.0",
        "posthog-js": "1.157.2",
        "qrcode": "1.5.4",
-        "re-resizable": "6.9.17",
-        "react": "^18.3.1",
+        "re-resizable": "^6.9.0",
+        "react": "17.0.2",
        "react-beautiful-dnd": "^13.1.0",
        "react-blurhash": "^0.3.0",
-        "react-dom": "^18.3.1",
+        "react-dom": "17.0.2",
        "react-focus-lock": "^2.5.1",
        "react-transition-group": "^4.4.1",
        "rfc4648": "^1.4.0",
        "sanitize-filename": "^1.6.3",
-        "sanitize-html": "2.13.1",
+        "sanitize-html": "2.13.0",
        "tar-js": "^0.3.0",
        "temporal-polyfill": "^0.2.5",
        "ua-parser-js": "^1.0.2",
@@ -179,12 +186,11 @@
        "@playwright/test": "^1.40.1",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@sentry/webpack-plugin": "^2.7.1",
-        "@stylistic/eslint-plugin": "^2.9.0",
        "@svgr/webpack": "^8.0.0",
-        "@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",
+        "@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",
        "@types/commonmark": "^0.27.4",
        "@types/content-type": "^1.1.5",
        "@types/counterpart": "^0.18.1",
@@ -206,9 +212,9 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "18.3.3",
+        "@types/react": "17.0.83",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "18.3.0",
+        "@types/react-dom": "17.0.25",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.13.0",
        "@types/sdp-transform": "^2.4.6",
@@ -217,8 +223,8 @@
        "@types/tar-js": "^0.3.5",
        "@types/ua-parser-js": "^0.7.36",
        "@types/uuid": "^10.0.0",
-        "@typescript-eslint/eslint-plugin": "^8.0.0",
-        "@typescript-eslint/parser": "^8.0.0",
+        "@typescript-eslint/eslint-plugin": "^7.0.0",
+        "@typescript-eslint/parser": "^7.0.0",
        "axe-core": "4.10.0",
        "babel-jest": "^29.0.0",
        "babel-loader": "^9.0.0",
@@ -240,7 +246,7 @@
        "eslint-plugin-import": "^2.25.4",
        "eslint-plugin-jest": "^28.0.0",
        "eslint-plugin-jsx-a11y": "^6.5.1",
-        "eslint-plugin-matrix-org": "^2.0.2",
+        "eslint-plugin-matrix-org": "1.2.1",
        "eslint-plugin-react": "^7.28.0",
        "eslint-plugin-react-hooks": "^4.3.0",
        "eslint-plugin-unicorn": "^56.0.0",
@@ -255,7 +261,7 @@
        "husky": "^9.0.0",
        "jest": "^29.6.2",
        "jest-canvas-mock": "^2.5.2",
-        "jest-environment-jsdom": "^29.7.0",
+        "jest-environment-jsdom": "^29.6.2",
        "jest-mock": "^29.6.2",
        "jest-raw-loader": "^1.0.1",
        "jsqr": "^1.4.0",
@@ -26,7 +26,6 @@ export default defineConfig({
        command: process.env.CI ? "npx serve -p 8080 -L ./webapp" : "yarn start",
        url: `${baseURL}/config.json`,
        reuseExistingServer: true,
-        timeout: (process.env.CI ? 30 : 120) * 1000,
    },
    testDir: "playwright/e2e",
    outputDir: "playwright/test-results",
@@ -4,5 +4,3 @@
 # Only commit snapshots from Linux
 /snapshots/**/*.png
 !/snapshots/**/*-linux.png
-# This file is machine-generated
-/e2e/crypto/test_indexeddb_cryptostore_dump/dump.json
@@ -15,9 +15,6 @@ test.describe("Landmark navigation tests", () => {
    });

    test("without any rooms", async ({ page, homeserver, app, user }) => {
-        // sometimes the space button doesn't appear right away
-        await expect(page.locator(".mx_SpaceButton_active")).toBeVisible();
-
        /**
         * Without any rooms, there is no tile in the roomlist to be focused.
         * So the next landmark in the list should be focused instead.
@@ -242,7 +242,6 @@ 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();
        };
@@ -96,10 +96,7 @@ test.describe("HTML Export", () => {

        // Send a bunch of messages to populate the room
        for (let i = 1; i < 10; i++) {
-            const respone = await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
-            if (i == 1) {
-                await app.client.reactToMessage(room.roomId, null, respone.event_id, "🙃");
-            }
+            await app.client.sendMessage(room.roomId, { body: `Testing ${i}`, msgtype: "m.text" });
        }

        // Wait for all the messages to be displayed
@@ -96,7 +96,8 @@ test.describe("Composer", () => {
                    },
                });

-                test("autocomplete behaviour tests", async ({ page, app, bot: bob }) => {
+                // https://github.com/vector-im/element-web/issues/26037
+                test.skip("autocomplete behaviour tests", async ({ page, app, bot: bob }) => {
                    // Set up a private room so we have another user to mention
                    await app.client.createRoom({
                        is_direct: true,
@@ -137,10 +138,10 @@ test.describe("Composer", () => {
                        .pressSequentially(`initial text @${bob.credentials.displayName.slice(0, 1)} abc`);
                    await expect(page.getByTestId("autocomplete-wrapper")).toBeEmpty();
                    // Move the cursor left by 4 to put it to: `@B| abc`, check autocomplete displays
-                    await page.getByRole("textbox").press("ArrowLeft");
-                    await page.getByRole("textbox").press("ArrowLeft");
-                    await page.getByRole("textbox").press("ArrowLeft");
-                    await page.getByRole("textbox").press("ArrowLeft");
+                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("LeftArrow");
+                    await page.getByRole("textbox").press("LeftArrow");
                    await expect(page.getByTestId("autocomplete-wrapper")).not.toBeEmpty();

                    // Selecting the autocomplete option using Enter inserts it into the composer
@@ -263,6 +263,7 @@ test.describe("Editing", () => {
        checkA11y,
    }) => {
        axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
+        axe.exclude(".mx_Tooltip_visible"); // XXX: this is fine but would be good to fix

        await page.goto(`#/room/${room.roomId}`);

@@ -217,7 +217,7 @@ test.describe("Login", () => {
                    const h1 = await page.getByRole("heading", { name: "Verify this device", level: 1 });
                    await expect(h1).toBeVisible();

-                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
+                    expect(h1.locator(".mx_CompleteSecurity_skip")).not.toBeVisible();
                });
            });
        });
@@ -69,7 +69,7 @@ export class MessageBuilder {
    /**
     * Map of message content -> event.
     */
-    messages = new Map<string, Promise<JSHandle<MatrixEvent>>>();
+    messages = new Map<String, Promise<JSHandle<MatrixEvent>>>();

    /**
     * Utility to find a MatrixEvent by its body content
@@ -222,7 +222,14 @@ export class MessageBuilder {
                    threadId: !ev.isThreadRoot ? ev.threadRootId : undefined,
                }));
                const roomId = await room.evaluate((room) => room.roomId);
-                await bot.reactToMessage(roomId, threadId, id, reaction);
+
+                await bot.sendEvent(roomId, threadId ?? null, "m.reaction", {
+                    "m.relates_to": {
+                        rel_type: "m.annotation",
+                        event_id: id,
+                        key: reaction,
+                    },
+                });
            }
        })(this);
    }
@@ -96,7 +96,7 @@ test.describe("Registration", () => {
            });
        });
        await page.getByRole("textbox", { name: "Username", exact: true }).fill("_alice");
-        await expect(page.getByRole("tooltip").filter({ hasText: "Some characters not allowed" })).toBeVisible();
+        await expect(page.getByRole("alert").filter({ hasText: "Some characters not allowed" })).toBeVisible();

        await page.route("**/_matrix/client/*/register/available?username=bob", async (route) => {
            await route.fulfill({
@@ -108,9 +108,9 @@ test.describe("Registration", () => {
            });
        });
        await page.getByRole("textbox", { name: "Username", exact: true }).fill("bob");
-        await expect(page.getByRole("tooltip").filter({ hasText: "Someone already has that username" })).toBeVisible();
+        await expect(page.getByRole("alert").filter({ hasText: "Someone already has that username" })).toBeVisible();

        await page.getByRole("textbox", { name: "Username", exact: true }).fill("foobar");
-        await expect(page.getByRole("tooltip")).not.toBeVisible();
+        await expect(page.getByRole("alert")).not.toBeVisible();
    });
 });
@@ -140,51 +140,4 @@ test.describe("Account user settings tab", () => {
        await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
        await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
    });
-
-    // ported to a playwright test because the jest test was very flakey for no obvious reason
-    test("should display an error if the code is incorrect when adding a phone number", async ({ uut, page }) => {
-        const dummyUrl = "https://nowhere.dummy/_matrix/client/unstable/add_threepid/msisdn/submit_token";
-
-        await page.route(
-            `**/_matrix/client/v3/account/3pid/msisdn/requestToken`,
-            async (route) => {
-                await route.fulfill({
-                    json: {
-                        success: true,
-                        sid: "1",
-                        msisdn: "447700900000",
-                        intl_fmt: "+44 7700 900000",
-                        submit_url: dummyUrl,
-                    },
-                });
-            },
-            { times: 1 },
-        );
-
-        await page.route(
-            dummyUrl,
-            async (route) => {
-                await route.fulfill({
-                    status: 400,
-                    json: {
-                        errcode: "M_THREEPID_AUTH_FAILED",
-                        error: "That code is definitely wrong",
-                    },
-                });
-            },
-            { times: 1 },
-        );
-
-        const phoneSection = page.getByTestId("mx_AccountPhoneNumbers");
-        await phoneSection.getByRole("textbox", { name: "Phone Number" }).fill("07700900000");
-        await phoneSection.getByRole("button", { name: "Add" }).click();
-
-        await phoneSection
-            .getByRole("textbox", { name: "Verification code" })
-            .fill("A small eurasian field mouse dancing the paso doble");
-
-        await phoneSection.getByRole("button", { name: "Continue" }).click();
-
-        await expect(page.getByRole("heading", { name: "Unable to verify phone number." })).toBeVisible();
-    });
 });
@@ -74,7 +74,7 @@ test.describe("Appearance user settings tab", () => {
                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");

                await util.removeCustomTheme();
-                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-removed.png");
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
            });
        });
    });
@@ -70,7 +70,7 @@ export class MessageBuilder {
    /**
     * Map of message content -> event.
     */
-    messages = new Map<string, Promise<JSHandle<MatrixEvent>>>();
+    messages = new Map<String, Promise<JSHandle<MatrixEvent>>>();

    /**
     * Utility to find a MatrixEvent by its body content
@@ -216,7 +216,7 @@ test.describe("Spotlight", () => {
     *
     * https://github.com/matrix-org/synapse/issues/16472
     */
-    test("should find unknown people", async ({ page, app }) => {
+    test.skip("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);
@@ -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", "16px"); // --ViewSourceEvent_toggle-size
+            await expect(toggleEventButton).toHaveCSS("height", "12px"); // --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: 8, y: 8 } });
+            await viewSourceEventIrc.getByRole("button", { name: "toggle event" }).click({ position: { x: 0, y: 0 } });

            // Make sure the expand toggle worked
            await expect(page.locator(".mx_EventTile[data-layout=irc] .mx_ViewSourceEvent_expanded")).toBeVisible();
@@ -224,7 +224,7 @@ export const test = base.extend<{
    },

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

        if (!options?.showTooltips) {
            css += `
-                [role="tooltip"] {
+                [role="tooltip"],
+                .mx_Tooltip_visible {
                    visibility: hidden !important;
                }
            `;
@@ -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(`id=${labelledById ?? describedById}`);
+        return this.page.locator(`#${labelledById ?? describedById}`);
    }
 }
@@ -143,29 +143,6 @@ export class Client {
        );
    }

-    /**
-     * Send a reaction to to a message
-     * @param roomId ID of the room to send the reaction into
-     * @param threadId ID of the thread to send into or null for main timeline
-     * @param eventId Event ID of the message you are reacting to
-     * @param reaction The reaction text to send
-     * @returns
-     */
-    public async reactToMessage(
-        roomId: string,
-        threadId: string | null,
-        eventId: string,
-        reaction: string,
-    ): Promise<ISendEventResponse> {
-        return this.sendEvent(roomId, threadId ?? null, "m.reaction", {
-            "m.relates_to": {
-                rel_type: "m.annotation",
-                event_id: eventId,
-                key: reaction,
-            },
-        });
-    }
-
    /**
     * Create a room with given options.
     * @param options the options to apply when creating the room
@@ -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:fd6ba2d8471a0807e1bccef4124b22d17f0058f2cf9285066fdd94d8c631964a";

 async function cfgDirFromTemplate(opts: StartHomeserverOpts): Promise<Omit<HomeserverConfig, "dockerUrl">> {
    const templateDir = path.join(__dirname, "templates", opts.template);
@@ -217,6 +217,7 @@
@import "./views/elements/_TagComposer.pcss";
@import "./views/elements/_TextWithTooltip.pcss";
@import "./views/elements/_ToggleSwitch.pcss";
+@import "./views/elements/_Tooltip.pcss";
@import "./views/elements/_UseCaseSelection.pcss";
@import "./views/elements/_UseCaseSelectionButton.pcss";
@import "./views/elements/_Validation.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: 12px;
+            $ZoomButtons_icon-size: 10px;

            height: $ZoomButtons_icon-size;
            width: $ZoomButtons_icon-size;
@@ -99,11 +99,11 @@ Please see LICENSE files in the repository root for full details.

            &[aria-checked="true"]::before {
                content: "";
-                width: 16px;
-                height: 16px;
-                margin-left: -22px;
-                margin-right: 6px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                width: 12px;
+                height: 12px;
+                margin-left: -20px;
+                margin-right: 8px;
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                mask-size: 100%;
                mask-repeat: no-repeat;
                background-color: $primary-content;
@@ -118,7 +118,7 @@ Please see LICENSE files in the repository root for full details.
            }

            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+                mask-image: url("$(res)/img/element-icons/trashcan.svg");
            }

            &.mx_RoomStatusBar_unsentRetry {
@@ -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("@vector-im/compound-design-tokens/icons/plus.svg");
+                mask-image: url("$(res)/img/element-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("@vector-im/compound-design-tokens/icons/plus.svg");
+        mask-image: url("$(res)/img/element-icons/plus.svg");
    }

    .mx_SpacePanel_iconExplore::before {
@@ -16,8 +16,7 @@ progress.mx_PassphraseField_progress {
    border: 0;
    height: 4px;
    position: absolute;
-    top: -10px;
-    left: 0;
+    top: -12px;

    @mixin ProgressBarBorderRadius "2px";
    @mixin ProgressBarColour $PassphraseStrengthLow;
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconCollapse::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
+        mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
    }

    .mx_MessageContextMenu_iconReport::before {
@@ -57,7 +57,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconRedact::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+        mask-image: url("$(res)/img/element-icons/trashcan.svg");
    }

    .mx_MessageContextMenu_iconResend::before {
@@ -92,7 +92,7 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_MessageContextMenu_iconReply::before {
-        mask-image: url("@vector-im/compound-design-tokens/icons/reply.svg");
+        mask-image: url("$(res)/img/element-icons/room/message-bar/reply.svg");
    }

    .mx_MessageContextMenu_iconReplyInThread::before {
@@ -143,15 +143,14 @@ 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-canvas-default);
-        border: 1px solid var(--cpd-color-gray-400);
-        border-radius: 99px;
+        background-color: var(--cpd-color-bg-success-subtle);
+        border-radius: 12px;
        display: inline-block;
        height: 24px;
        line-height: $font-24px;
        padding-inline: $spacing-8;
        vertical-align: middle;
-        color: var(--cpd-color-gray-1100);
+        color: $primary-content;

        .mx_SearchResultAvatar {
            border-radius: 20px;
@@ -352,7 +351,7 @@ Please see LICENSE files in the repository root for full details.
                height: 24px;
                grid-column: 1;
                grid-row: 1;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                mask-size: 100%;
                mask-repeat: no-repeat;
                position: absolute;
@@ -80,7 +80,7 @@ Please see LICENSE files in the repository root for full details.
                color: $accent;

                &::before {
-                    mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                    mask-image: url("$(res)/img/feather-customised/check.svg");
                    background-color: $accent;
                }
            }
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
            background-color: var(--cpd-color-bg-action-primary-rest);

            &::before {
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
            }
        }

@@ -164,6 +164,14 @@ Please see LICENSE files in the repository root for full details.
    }
 }

+.mx_Field_tooltip {
+    width: 200px;
+}
+
+.mx_Field_tooltip.mx_Field_valid {
+    animation: mx_fadeout 1s 2s forwards;
+}
+
 /* Customise other components when placed inside a Field */

 .mx_Field .mx_Dropdown_input {
@@ -129,8 +129,7 @@ $button-gap: 24px;
 }

 .mx_ImageView_button_more::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 28px;
+    mask-image: url("$(res)/img/image-view/more.svg");
 }

 .mx_ImageView_button_close {
@@ -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/element-icons/eye.svg");
+            mask-image: url("$(res)/img/feather-customised/eye.svg");
            display: inline-block;
            width: 18px;
            height: 14px;
@@ -10,6 +10,18 @@ Please see LICENSE files in the repository root for full details.
    position: relative;
    width: min-content;

+    /* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
+    .mx_Tooltip {
+        display: inline-block;
+        position: absolute;
+        z-index: unset;
+        width: max-content;
+        left: 72px;
+        /* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
    .mx_MiniAvatarUploader_indicator {
        position: absolute;

@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.

                height: 100%;
                width: 100%;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                mask-position: center;
                mask-size: 100%;
                mask-repeat: no-repeat;
@@ -0,0 +1,107 @@
+/*
+Copyright 2019-2024 New Vector Ltd.
+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.
+*/
+
+@keyframes mx_fadein {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes mx_fadeout {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
+}
+
+.mx_Tooltip_chevron {
+    position: absolute;
+    left: -7px;
+    top: calc(50% - 6px);
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid $menu-border-color;
+    border-bottom: 7px solid transparent;
+}
+
+.mx_Tooltip_chevron::after {
+    content: "";
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-right: 6px solid $menu-bg-color;
+    border-bottom: 6px solid transparent;
+    position: absolute;
+    top: -6px;
+    left: 1px;
+}
+
+.mx_Tooltip {
+    display: none;
+    position: fixed;
+    border-radius: 8px;
+    z-index: 6000; /* Higher than context menu so tooltips can be used everywhere */
+    padding: 10px;
+    pointer-events: none;
+    line-height: $font-14px;
+    font-size: $font-12px;
+    font-weight: 500;
+    max-width: 300px;
+    word-break: break-word;
+
+    background-color: var(--cpd-color-alpha-gray-1400);
+    color: var(--cpd-color-text-on-solid-primary);
+    border: 0;
+    text-align: center;
+
+    .mx_Tooltip_chevron {
+        display: none;
+    }
+
+    &.mx_Tooltip_visible {
+        animation: mx_fadein 0.2s forwards;
+    }
+
+    &.mx_Tooltip_invisible {
+        animation: mx_fadeout 0.1s forwards;
+    }
+
+    ul,
+    ol {
+        text-align: start; /* for list items */
+    }
+}
+
+/* These tooltips use an older style with a chevron */
+.mx_Field_tooltip {
+    background-color: $menu-bg-color;
+    color: $primary-content;
+    border: 1px solid $menu-border-color;
+    text-align: unset;
+
+    .mx_Tooltip_chevron {
+        display: unset;
+    }
+}
+
+.mx_Tooltip_title {
+    font-weight: var(--cpd-font-weight-semibold);
+}
+
+.mx_Tooltip_sub {
+    opacity: 0.7;
+    margin-top: 4px;
+}
@@ -7,7 +7,6 @@ Please see LICENSE files in the repository root for full details.

 .mx_Validation {
    position: relative;
-    max-width: 200px;
 }

 .mx_Validation_details {
@@ -45,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
        color: $accent;

        &::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+            mask-image: url("$(res)/img/feather-customised/check.svg");
            background-color: $accent;
        }
    }
@@ -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/element-icons/eye.svg");
+            mask-image: url("$(res)/img/feather-customised/eye.svg");
            display: inline-block;
            width: 18px;
            height: 14px;
@@ -122,8 +122,4 @@ Please see LICENSE files in the repository root for full details.
            --MessageActionBar-icon-size: 12px;
        }
    }
-
-    .mx_MessageActionBar_optionsButton {
-        --MessageActionBar-icon-size: 22px;
-    }
 }
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
        height: 14px;
        width: 14px;
        background-color: $icon-button-color;
-        mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+        mask-image: url("$(res)/img/feather-customised/trash.custom.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
@@ -25,18 +25,19 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_ViewSourceEvent_toggle {
-        --ViewSourceEvent_toggle-size: 16px;
+        --ViewSourceEvent_toggle-size: 12px;

        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);
-
-        svg {
-            color: $accent;
-            width: var(--ViewSourceEvent_toggle-size);
-            height: var(--ViewSourceEvent_toggle-size);
-        }
+        background-color: $accent;
+        mask-image: url("$(res)/img/element-icons/maximise-expand.svg");

        .mx_EventTile:hover & {
            visibility: visible;
@@ -46,5 +47,8 @@ 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");
    }
 }
@@ -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("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+                    mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
                    background-color: $secondary-content;
                }

@@ -191,7 +191,7 @@ Please see LICENSE files in the repository root for full details.
                width: 12px;
                height: 12px;
                margin-right: 8px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
+                mask-image: url("$(res)/img/feather-customised/check.svg");
                mask-size: 100%;
                mask-repeat: no-repeat;
                background-color: $primary-content;
@@ -982,11 +982,11 @@ $left-gutter: 64px;
 }

 .mx_EventTile_collapseButton {
-    mask-image: url("@vector-im/compound-design-tokens/icons/collapse.svg");
+    mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
 }

 .mx_EventTile_expandButton {
-    mask-image: url("@vector-im/compound-design-tokens/icons/expand.svg");
+    mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
 }

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

 .mx_MessageComposer_buttonMenu::before {
-    mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
-    mask-size: 24px;
+    mask-image: url("$(res)/img/image-view/more.svg");
 }

 .mx_MessageComposer_sendMessage {
@@ -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("@vector-im/compound-design-tokens/icons/plus.svg");
+            mask-image: url("$(res)/img/element-icons/roomlist/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("@vector-im/compound-design-tokens/icons/plus.svg");
+    mask-image: url("$(res)/img/element-icons/plus.svg");
 }
@@ -127,7 +127,7 @@ Please see LICENSE files in the repository root for full details.
        }

        .mx_RoomSublist_auxButton::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/plus.svg");
+            mask-image: url("$(res)/img/element-icons/roomlist/plus.svg");
        }

        .mx_RoomSublist_menuButton::before {
@@ -41,9 +41,9 @@ Please see LICENSE files in the repository root for full details.
    position: absolute;
    width: 36px;
    height: 36px;
-    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
+    mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
    mask-repeat: no-repeat;
-    mask-size: 24px;
+    mask-size: 20px;
    mask-position: center;
    background: var(--cpd-color-icon-tertiary);
 }
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
    background-color: $voice-record-icon-color;
    mask-repeat: no-repeat;
    mask-size: contain;
-    mask-image: url("@vector-im/compound-design-tokens/icons/delete.svg");
+    mask-image: url("$(res)/img/element-icons/trashcan.svg");
 }

 .mx_VoiceRecordComposerTile_uploadingState {
@@ -35,6 +35,6 @@ Please see LICENSE files in the repository root for full details.
        top: 0;
        left: 0;
        background-color: $alert;
-        mask-image: url("@vector-im/compound-design-tokens/icons/warning.svg");
+        mask-image: url("$(res)/img/feather-customised/alert-triangle.svg");
    }
 }
@@ -67,9 +67,9 @@ Please see LICENSE files in the repository root for full details.
            bottom: 0;

            &::before {
-                width: 16px;
-                height: 16px;
-                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-up.svg");
+                width: 14px;
+                height: 14px;
+                mask-image: url("$(res)/img/element-icons/message/chevron-up.svg");
            }

            &.mx_LegacyCallViewButtons_dropdownButton_collapsed::before {
@@ -161,7 +161,7 @@ Please see LICENSE files in the repository root for full details.
        }

        &.mx_LegacyCallViewButtons_button_more::before {
-            mask-image: url("@vector-im/compound-design-tokens/icons/overflow-horizontal.svg");
+            mask-image: url("$(res)/img/voip/call-view/more.svg");
        }
        /* Stateless buttons */

@@ -0,0 +1,3 @@
+<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.88867 0.138672C1.36989 0.138672 0.138672 1.36989 0.138672 2.88867V15.1109C0.138672 15.395 0.299174 15.6547 0.553262 15.7817C0.80735 15.9088 1.11141 15.8813 1.33867 15.7109L4.36089 13.4442C4.57726 13.2819 4.84043 13.1942 5.11089 13.1942H13.1109C14.6297 13.1942 15.8609 11.963 15.8609 10.4442V2.88822C15.8609 1.36922 14.6295 0.138672 13.1109 0.138672H2.88867ZM3.69421 5.33301C3.69421 4.91879 4.03 4.58301 4.44421 4.58301H11.5553C11.9695 4.58301 12.3053 4.91879 12.3053 5.33301C12.3053 5.74722 11.9695 6.08301 11.5553 6.08301H4.44421C4.03 6.08301 3.69421 5.74722 3.69421 5.33301ZM4.44421 7.24976C4.03 7.24976 3.69421 7.58554 3.69421 7.99976C3.69421 8.41397 4.03 8.74976 4.44421 8.74976H7.99977C8.41398 8.74976 8.74977 8.41397 8.74977 7.99976C8.74977 7.58554 8.41398 7.24976 7.99977 7.24976H4.44421Z" fill="currentColor"/>
+</svg>
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="path-1-inside-1_1123_14017" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7093 21.9506C16.7941 23.2445 14.4853 24 12 24C9.29855 24 6.80558 23.1073 4.8 21.6009C1.88532 19.4116 0 15.926 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 16.1421 21.9013 19.7941 18.7093 21.9506ZM12 12.6C13.9882 12.6 15.6 10.8539 15.6 8.7C15.6 6.54609 13.9882 4.8 12 4.8C10.0118 4.8 8.4 6.54609 8.4 8.7C8.4 10.8539 10.0118 12.6 12 12.6ZM12 21.6C14.5944 21.6 16.9484 20.5709 18.6761 18.8986C17.6076 16.2607 15.0211 14.4 12 14.4C8.9789 14.4 6.39239 16.2607 5.32394 18.8986C7.05162 20.5709 9.40563 21.6 12 21.6Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7093 21.9506C16.7941 23.2445 14.4853 24 12 24C9.29855 24 6.80558 23.1073 4.8 21.6009C1.88532 19.4116 0 15.926 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 16.1421 21.9013 19.7941 18.7093 21.9506ZM12 12.6C13.9882 12.6 15.6 10.8539 15.6 8.7C15.6 6.54609 13.9882 4.8 12 4.8C10.0118 4.8 8.4 6.54609 8.4 8.7C8.4 10.8539 10.0118 12.6 12 12.6ZM12 21.6C14.5944 21.6 16.9484 20.5709 18.6761 18.8986C17.6076 16.2607 15.0211 14.4 12 14.4C8.9789 14.4 6.39239 16.2607 5.32394 18.8986C7.05162 20.5709 9.40563 21.6 12 21.6Z" fill="currentColor"/>
+<path d="M18.7093 21.9506L19.5643 23.2161L18.7093 21.9506ZM4.8 21.6009L3.88276 22.822H3.88276L4.8 21.6009ZM18.6761 18.8986L19.7383 19.996L20.4782 19.2797L20.0916 18.3252L18.6761 18.8986ZM5.32394 18.8986L3.90838 18.3252L3.52177 19.2797L4.26173 19.996L5.32394 18.8986ZM12 25.5273C14.7995 25.5273 17.4045 24.6752 19.5643 23.2161L17.8543 20.6851C16.1837 21.8137 14.1711 22.4727 12 22.4727V25.5273ZM3.88276 22.822C6.14374 24.5203 8.95648 25.5273 12 25.5273V22.4727C9.64061 22.4727 7.46743 21.6943 5.71724 20.3797L3.88276 22.822ZM-1.52727 12C-1.52727 16.4266 0.600567 20.3567 3.88276 22.822L5.71724 20.3797C3.17008 18.4665 1.52727 15.4253 1.52727 12H-1.52727ZM12 -1.52727C4.52909 -1.52727 -1.52727 4.52909 -1.52727 12H1.52727C1.52727 6.21607 6.21607 1.52727 12 1.52727V-1.52727ZM25.5273 12C25.5273 4.52909 19.4709 -1.52727 12 -1.52727V1.52727C17.7839 1.52727 22.4727 6.21607 22.4727 12H25.5273ZM19.5643 23.2161C23.1587 20.7878 25.5273 16.6707 25.5273 12H22.4727C22.4727 15.6135 20.6439 18.8004 17.8543 20.6851L19.5643 23.2161ZM14.0727 8.7C14.0727 10.1278 13.0319 11.0727 12 11.0727V14.1273C14.9445 14.1273 17.1273 11.58 17.1273 8.7H14.0727ZM12 6.32727C13.0319 6.32727 14.0727 7.27217 14.0727 8.7H17.1273C17.1273 5.82 14.9445 3.27273 12 3.27273V6.32727ZM9.92727 8.7C9.92727 7.27217 10.9681 6.32727 12 6.32727V3.27273C9.05549 3.27273 6.87273 5.82 6.87273 8.7H9.92727ZM12 11.0727C10.9681 11.0727 9.92727 10.1278 9.92727 8.7H6.87273C6.87273 11.58 9.05549 14.1273 12 14.1273V11.0727ZM17.6138 17.8012C16.1595 19.2089 14.1822 20.0727 12 20.0727V23.1273C15.0065 23.1273 17.7372 21.9329 19.7383 19.996L17.6138 17.8012ZM12 15.9273C14.3779 15.9273 16.4175 17.3908 17.2605 19.4719L20.0916 18.3252C18.7977 15.1306 15.6643 12.8727 12 12.8727V15.9273ZM6.7395 19.4719C7.58245 17.3908 9.62215 15.9273 12 15.9273V12.8727C8.33566 12.8727 5.20233 15.1306 3.90838 18.3252L6.7395 19.4719ZM12 20.0727C9.81778 20.0727 7.84046 19.2089 6.38615 17.8012L4.26173 19.996C6.26278 21.9329 8.99347 23.1273 12 23.1273V20.0727Z" fill="currentColor" mask="url(#path-1-inside-1_1123_14017)"/>
+</svg>
@@ -0,0 +1,5 @@
+<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>
@@ -0,0 +1,3 @@
+<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>
@@ -0,0 +1,3 @@
+<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/Show More
+++ b/Show More
Author	SHA1	Message	Date
ElementRobot	96ba5a02b9	[create-pull-request] automated change (#28212 ) Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>	2024-10-17 06:22:40 +00:00
renovate[bot]	705625da7d	Update browserslist (#28199 ) * Update browserslist * Update tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>	2024-10-16 15:02:08 +00:00
renovate[bot]	e859efe29e	Update dependency stylelint to v16.10.0 (#28201 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 14:57:10 +00:00
renovate[bot]	77c822a155	Update dependency eslint-plugin-unicorn to v56 (#28202 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 14:20:56 +00:00
renovate[bot]	898b6bdd2c	Update dependency typescript to v5.6.3 (#28198 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 14:13:22 +00:00
Florian Duros	f56f8148b7	Remove references to `MatrixClient.crypto` (#28204 ) * Remove `VerificationExplorer` * Remove `remakeolm` slash command * Remove call to `crypto.cancelAndResendAllOutgoingKeyRequests` * Remove crypto mock in `LoginWithQR-test.tsx` * Remove `StopGadWidgetDriver.sendToDevice` * Remove remaining mock	2024-10-16 14:13:14 +00:00
renovate[bot]	f26b51c0b6	Update dependency @formatjs/intl-segmenter to v11.5.9 (#28197 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 13:48:11 +00:00
renovate[bot]	5f7e8077cd	Update dependency @matrix-org/spec to v1.12.0 (#28200 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 13:45:23 +00:00
renovate[bot]	2a81dc40cd	Update dependency @types/react to v17.0.83 (#28138 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 13:35:45 +00:00
renovate[bot]	8d235bdb19	Update babel monorepo (#28196 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 13:26:42 +00:00
renovate[bot]	3b75e2a3fb	Update dependency @sentry/browser to v8.33.0 [SECURITY] (#28194 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-10-16 14:02:58 +01:00
Michael Telatynski	c05c429803	Absorb the matrix-react-sdk repository (#28192 ) Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com> Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <florian.duros@ormaz.fr> Co-authored-by: Kim Brose <kim.brose@nordeck.net> Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: R Midhun Suresh <hi@midhun.dev> Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com> Co-authored-by: ElementRobot <releases@riot.im> Co-authored-by: dbkr <dbkr@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io> Co-authored-by: Michael Weimann <michaelw@matrix.org> Co-authored-by: Timshel <Timshel@users.noreply.github.com> Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com> Co-authored-by: Will Hunt <will@half-shot.uk> Co-authored-by: Hubert Chathi <hubert@uhoreg.ca> Co-authored-by: Andrew Ferrazzutti <andrewf@element.io> Co-authored-by: Robin <robin@robin.town> Co-authored-by: Tulir Asokan <tulir@maunium.net>	2024-10-16 13:31:55 +01:00