Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/fix/15536

Conflicts: src/components/views/rooms/SendMessageComposer.js
2021-07-16 11:24:46 +01:00 · 2021-07-16 11:24:46 +01:00 · 7a64adfc44
commit 7a64adfc44
parent ee8d1f51c2 b55f69a74c
1211 changed files with 99021 additions and 35489 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -1,4 +1,4 @@
 src/component-index.js
 test/end-to-end-tests/node_modules/
-test/end-to-end-tests/riot/
+test/end-to-end-tests/element/
 test/end-to-end-tests/synapse/
--- a/.eslintignore.errorfiles
+++ b/.eslintignore.errorfiles
@ -1,16 +0,0 @@
-# autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
-
-src/Markdown.js
-src/Velociraptor.js
-src/components/structures/RoomDirectory.js
-src/components/views/rooms/MemberList.js
-src/ratelimitedfunc.js
-src/utils/DMRoomMap.js
-src/utils/MultiInviter.js
-test/components/structures/MessagePanel-test.js
-test/components/views/dialogs/InteractiveAuthDialog-test.js
-test/mock-clock.js
-src/component-index.js
-test/end-to-end-tests/node_modules/
-test/end-to-end-tests/riot/
-test/end-to-end-tests/synapse/
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,7 +1,9 @@
 module.exports = {
-    extends: ["matrix-org", "matrix-org/react-legacy"],
-    parser: "babel-eslint",
-
+    plugins: ["matrix-org"],
+    extends: [
+        "plugin:matrix-org/babel",
+        "plugin:matrix-org/react",
+    ],
    env: {
        browser: true,
        node: true,
@ -15,20 +17,64 @@ module.exports = {
        "prefer-promise-reject-errors": "off",
        "no-async-promise-executor": "off",
        "quotes": "off",
-        "indent": "off",
-    },
+        "no-extra-boolean-cast": "off",

+        // Bind or arrow functions in props causes performance issues (but we
+        // currently use them in some places).
+        // It's disabled here, but we should using it sparingly.
+        "react/jsx-no-bind": "off",
+        "react/jsx-key": ["error"],
+
+        "no-restricted-properties": [
+            "error",
+            ...buildRestrictedPropertiesOptions(
+                ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                "Use UIStore to access window dimensions instead.",
+            ),
+            ...buildRestrictedPropertiesOptions(
+                ["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
+                "Use Media helper instead to centralise access for customisation.",
+            ),
+        ],
+    },
    overrides: [{
-        "files": ["src/**/*.{ts,tsx}"],
-        "extends": ["matrix-org/ts"],
-        "rules": {
+        files: [
+            "src/**/*.{ts,tsx}",
+            "test/**/*.{ts,tsx}",
+        ],
+        extends: [
+            "plugin:matrix-org/typescript",
+            "plugin:matrix-org/react",
+        ],
+        rules: {
+            // Things we do that break the ideal style
+            "prefer-promise-reject-errors": "off",
+            "quotes": "off",
+            "no-extra-boolean-cast": "off",
+
+            // Remove Babel things manually due to override limitations
+            "@babel/no-invalid-this": ["off"],
+
+            // We're okay being explicit at the moment
+            "@typescript-eslint/no-empty-interface": "off",
            // We disable this while we're transitioning
            "@typescript-eslint/no-explicit-any": "off",
            // We'd rather not do this but we do
            "@typescript-eslint/ban-ts-comment": "off",
-
-            "quotes": "off",
-            "no-extra-boolean-cast": "off",
        },
    }],
 };
+
+function buildRestrictedPropertiesOptions(properties, message) {
+    return properties.map(prop => {
+        let [object, property] = prop.split(".");
+        if (object === "*") {
+            object = undefined;
+        }
+        return {
+            object,
+            property,
+            message,
+        };
+    });
+}
--- a/.flowconfig
+++ b/.flowconfig
@ -1,6 +0,0 @@
-[include]
-src/**/*.js
-test/**/*.js
-
-[ignore]
-node_modules/
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,15 @@
+<!-- Please read https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md before submitting your pull request -->
+
+<!-- Include a Sign-Off as described in https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.md#sign-off -->
+
+<!-- To specify text for the changelog entry (otherwise the PR title will be used):
+Notes:
+
+Changes in this project generate changelog entries in element-web by default.
+To suppress this:
+
+element-web notes: none
+
+...or to specify different notes:
+element-web notes: <notes>
+-->
--- a/.github/workflows/develop.yml
+++ b/.github/workflows/develop.yml
@ -0,0 +1,44 @@
+name: Develop
+on:
+    # These tests won't work for non-develop branches at the moment as they
+    # won't pull in the right versions of other repos, so they're only enabled
+    # on develop.
+    push:
+        branches: [develop]
+    pull_request:
+        branches: [develop]
+jobs:
+    end-to-end:
+        runs-on: ubuntu-latest
+        container: vectorim/element-web-ci-e2etests-env:latest
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v2
+            - name: Prepare End-to-End tests
+              run: ./scripts/ci/prepare-end-to-end-tests.sh
+            - name: Run End-to-End tests
+              run: ./scripts/ci/run-end-to-end-tests.sh
+            - name: Archive logs
+              uses: actions/upload-artifact@v2
+              if: ${{ always() }}
+              with:
+                path: |
+                    test/end-to-end-tests/logs/**/*
+                    test/end-to-end-tests/synapse/installations/consent/homeserver.log
+                retention-days: 14
+            - name: Download previous benchmark data
+              uses: actions/cache@v1
+              with:
+                path: ./cache
+                key: ${{ runner.os }}-benchmark
+            - name: Store benchmark result
+              uses: matrix-org/github-action-benchmark@jsperfentry-1
+              with:
+                tool: 'jsperformanceentry'
+                output-file-path: test/end-to-end-tests/performance-entries.json
+                fail-on-alert: false
+                comment-on-alert: false
+                # Only temporary to monitor where failures occur
+                alert-comment-cc-users: '@gsouquet'
+                github-token: ${{ secrets.DEPLOY_GH_PAGES }}
+                auto-push: ${{ github.ref == 'refs/heads/develop' }}
--- a/.gitignore
+++ b/.gitignore
@ -2,6 +2,7 @@
 /*.log
 package-lock.json

+/coverage
 /node_modules
 /lib

@ -13,3 +14,7 @@ package-lock.json
 /src/component-index.js

 .DS_Store
+*.tmp
+
+.vscode
+.vscode/
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -4,6 +4,7 @@ module.exports = {
        "stylelint-scss",
    ],
    "rules": {
+        "color-hex-case": null,
        "indentation": 4,
        "comment-empty-line-before": null,
        "declaration-empty-line-before": null,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CONTRIBUTING.rst
+++ b/CONTRIBUTING.rst
--- a/README.md
+++ b/README.md
@ -28,7 +28,7 @@ Platform Targets:
 * WebRTC features (VoIP and Video calling) are only available in Chrome & Firefox.
 * Mobile Web is not currently a target platform - instead please use the native
   iOS (https://github.com/matrix-org/matrix-ios-kit) and Android
-   (https://github.com/matrix-org/matrix-android-sdk) SDKs.
+   (https://github.com/matrix-org/matrix-android-sdk2) SDKs.

 All code lands on the `develop` branch - `master` is only used for stable releases.
 **Please file PRs against `develop`!!**
--- a/mocks/FontManager.js
+++ b/mocks/FontManager.js
@ -0,0 +1,6 @@
+// Stub out FontManager for tests as it doesn't validate anything we don't already know given
+// our fixed test environment and it requires the installation of node-canvas.
+
+module.exports = {
+    fixupColorFonts: () => Promise.resolve(),
+};
--- a/mocks/empty.js
+++ b/mocks/empty.js
@ -0,0 +1,2 @@
+// Yes, this is empty.
+module.exports = {};
--- a/mocks/workerMock.js
+++ b/mocks/workerMock.js
@ -0,0 +1 @@
+module.exports = jest.fn();
--- a/babel.config.js
+++ b/babel.config.js
@ -3,12 +3,14 @@ module.exports = {
    "presets": [
        ["@babel/preset-env", {
            "targets": [
-                "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions"
+                "last 2 Chrome versions",
+                "last 2 Firefox versions",
+                "last 2 Safari versions",
+                "last 2 Edge versions",
            ],
        }],
        "@babel/preset-typescript",
-        "@babel/preset-flow",
-        "@babel/preset-react"
+        "@babel/preset-react",
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", {legacy: true}],
@ -16,8 +18,7 @@ module.exports = {
        "@babel/plugin-proposal-numeric-separator",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-object-rest-spread",
-        "@babel/plugin-transform-flow-comments",
        "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-transform-runtime"
-    ]
+        "@babel/plugin-transform-runtime",
+    ],
 };
--- a/code_style.md
+++ b/code_style.md
@ -35,12 +35,6 @@ General Style
 - lowerCamelCase for functions and variables.
 - Single line ternary operators are fine.
 - UPPER_SNAKE_CASE for constants
- Single quotes for strings by default, for consistency with most JavaScript styles:
-
-  ```javascript
-  "bad" // Bad
-  'good' // Good
-  ```
 - Use parentheses or `` ` `` instead of `\` for line continuation where ever possible
 - Open braces on the same line (consistent with Node):

@ -162,7 +156,14 @@ ECMAScript
  - Be careful mixing arrow functions and regular functions, eg. if one function in a promise chain is an
    arrow function, they probably all should be.
 - Apart from that, newer ES features should be used whenever the author deems them to be appropriate.
- Flow annotations are welcome and encouraged.
+
+TypeScript
+----------
+- TypeScript is preferred over the use of JavaScript
+- It's desirable to convert existing JavaScript files to TypeScript. TypeScript conversions should be done in small
+  chunks without functional changes to ease the review process.
+- Use full type definitions for function parameters and return values.
+- Avoid `any` types and `any` casts

 React
 -----
@ -201,6 +202,8 @@ React
    this.state = { counter: 0 };
  }
  ```
+- Prefer class components over function components and hooks (not a strict rule though)
+
 - Think about whether your component really needs state: are you duplicating
  information in component state that could be derived from the model?

--- a/docs/ciderEditor.md
+++ b/docs/ciderEditor.md
@ -21,14 +21,14 @@ caret nodes (more on that later).
 For these reasons it doesn't use `innerText`, `textContent` or anything similar.
 The model addresses any content in the editor within as an offset within this string.
 The caret position is thus also converted from a position in the DOM tree
-to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
+to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.ts`.

 Once the content string and caret offset is calculated, it is passed to the `update()`
 method of the model. The model first calculates the same content string of its current parts,
 basically just concatenating their text. It then looks for differences between
 the current and the new content string. The diffing algorithm is very basic,
 and assumes there is only one change around the caret offset,
-so this should be very inexpensive. See `diff.js` for details.
+so this should be very inexpensive. See `diff.ts` for details.

 The result of the diffing is the strings that were added and/or removed from
 the current content. These differences are then applied to the parts,
@ -51,7 +51,7 @@ which relate poorly to text input or changes, and don't need the `beforeinput` e
 which isn't broadly supported yet.

 Once the parts of the model are updated, the DOM of the editor is then reconciled
-with the new model state, see `renderModel` in `render.js` for this.
+with the new model state, see `renderModel` in `render.ts` for this.
 If the model didn't reject the input and didn't make any additional changes,
 this won't make any changes to the DOM at all, and should thus be fairly efficient.

--- a/docs/media-handling.md
+++ b/docs/media-handling.md
@ -0,0 +1,19 @@
+# Media handling
+
+Surely media should be as easy as just putting a URL into an `img` and calling it good, right?
+Not quite. Matrix uses something called a Matrix Content URI (better known as MXC URI) to identify
+content, which is then converted to a regular HTTPS URL on the homeserver. However, sometimes that
+URL can change depending on deployment considerations.
+
+The react-sdk features a [customisation endpoint](https://github.com/vector-im/element-web/blob/develop/docs/customisations.md)
+for media handling where all conversions from MXC URI to HTTPS URL happen. This is to ensure that
+those obscure deployments can route all their media to the right place.
+
+For development, there are currently two functions available: `mediaFromMxc` and `mediaFromContent`.
+The `mediaFromMxc` function should be self-explanatory. `mediaFromContent` takes an event content as
+a parameter and will automatically parse out the source media and thumbnail. Both functions return
+a `Media` object with a number of options on it, such as getting various common HTTPS URLs for the
+media.
+
+**It is extremely important that all media calls are put through this customisation endpoint.** So
+much so it's a lint rule to avoid accidental use of the wrong functions.
--- a/docs/room-list-store.md
+++ b/docs/room-list-store.md
@ -124,12 +124,19 @@ all kinds of filtering.

 ## Filtering

-Filters are provided to the store as condition classes, which are then passed along to the algorithm
-implementations. The implementations then get to decide how to actually filter the rooms, however in
-practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
+Filters are provided to the store as condition classes and have two major kinds: Prefilters and Runtime.

-The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
-as the old room list store does. When a filter condition changes, it emits an update which (in this
+Prefilters flush out rooms which shouldn't appear to the algorithm implementations. Typically this is
+due to some higher order room list filtering (such as spaces or tags) deliberately exposing a subset of
+rooms to the user. The algorithm implementations will not see a room being prefiltered out.
+
+Runtime filters are used for more dynamic filtering, such as the user filtering by room name. These
+filters are passed along to the algorithm implementations where those implementations decide how and
+when to apply the filter. In practice, the base `Algorithm` class ends up doing the heavy lifting for
+optimization reasons.
+
+The results of runtime filters get cached to avoid needlessly iterating over potentially thousands of
+rooms, as the old room list store does. When a filter condition changes, it emits an update which (in this
 case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a
 minor subset where possible to avoid over-iterating rooms.

@ -137,6 +144,13 @@ All filter conditions are considered "stable" by the consumers, meaning that the
 expect a change in the condition unless the condition says it has changed. This is intentional to
 maintain the caching behaviour described above.

+One might ask why we don't just use prefilter conditions for everything, and the answer is one of slight
+subtlety: in the cases of prefilters we are knowingly exposing the user to a workspace-style UX where
+room notifications are self-contained within that workspace. Runtime filters tend to not want to affect
+visible notification counts (as it doesn't want the room header to suddenly be confusing to the user as
+they type), and occasionally UX like "found 2/12 rooms" is desirable. If prefiltering were used instead,
+the notification counts would vary while the user was typing and "found 2/12" UX would not be possible.
+
 ## Class breakdowns

 The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
--- a/docs/widget-layouts.md
+++ b/docs/widget-layouts.md
@ -0,0 +1,60 @@
+# Widget layout support
+
+Rooms can have a default widget layout to auto-pin certain widgets, make the container different
+sizes, etc. These are defined through the `io.element.widgets.layout` state event (empty state key).
+
+Full example content:
+```json5
+{
+  "widgets": {
+    "first-widget-id": {
+      "container": "top",
+      "index": 0,
+      "width": 60,
+      "height": 40
+    },
+    "second-widget-id": {
+      "container": "right"
+    }
+  }
+}
+```
+
+As shown, there are two containers possible for widgets. These containers have different behaviour
+and interpret the other options differently. 
+
+## `top` container
+
+This is the "App Drawer" or any pinned widgets in a room. This is by far the most versatile container
+though does introduce potential usability issues upon members of the room (widgets take up space and
+therefore fewer messages can be shown).
+
+The `index` for a widget determines which order the widgets show up in from left to right. Widgets
+without an `index` will show up as the rightmost widgets. Tiebreaks (same `index` or multiple defined
+without an `index`) are resolved by comparing widget IDs. A maximum of 3 widgets can be in the top
+container - any which exceed this will be ignored (placed into the `right` container). Smaller numbers 
+represent leftmost widgets.
+
+The `width` is relative width within the container in percentage points. This will be clamped to a
+range of 0-100 (inclusive). The widgets will attempt to scale to relative proportions when more than
+100% space is allocated. For example, if 3 widgets are defined at 40% width each then the client will
+attempt to show them at 33% width each.
+
+Note that the client may impose minimum widths on the widgets, such as a 10% minimum to avoid pinning
+hidden widgets. In general, widgets defined in the 30-70% range each will be free of these restrictions.
+
+The `height` is not in fact applied per-widget but is recorded per-widget for potential future 
+capabilities in future containers. The top container will take the tallest `height` and use that for
+the height of the whole container, and thus all widgets in that container. The `height` is relative
+to the container, like with `width`, meaning that 100% will consume as much space as the client is
+willing to sacrifice to the widget container. Like with `width`, the client may impose minimums to avoid
+the container being uselessly small. Heights in the 30-100% range are generally acceptable. The height
+is also clamped to be within 0-100, inclusive.
+
+## `right` container
+
+This is the default container and has no special configuration. Widgets which overflow from the top
+container will be put in this container instead. Putting a widget in the right container does not
+automatically show it - it only mentions that widgets should not be in another container.
+
+The behaviour of this container may change in the future.
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "matrix-react-sdk",
-  "version": "3.7.1",
+  "version": "3.25.0",
  "description": "SDK for matrix.org using React",
  "author": "matrix.org",
  "repository": {
@ -23,18 +23,17 @@
    "package.json"
  ],
  "bin": {
-    "reskindex": "scripts/reskindex.js",
-    "matrix-gen-i18n": "scripts/gen-i18n.js",
-    "matrix-prune-i18n": "scripts/prune-i18n.js"
+    "reskindex": "scripts/reskindex.js"
  },
-  "main": "./lib/index.js",
-  "typings": "./lib/index.d.ts",
+  "main": "./src/index.js",
  "matrix_src_main": "./src/index.js",
+  "matrix_lib_main": "./lib/index.js",
+  "matrix_lib_typings": "./lib/index.d.ts",
  "scripts": {
-    "prepare": "yarn build",
+    "prepublishOnly": "yarn build",
    "i18n": "matrix-gen-i18n",
    "prunei18n": "matrix-prune-i18n",
-    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
+    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
    "reskindex": "node scripts/reskindex.js -h header",
    "reskindex:watch": "node scripts/reskindex.js -h header -w",
    "rethemendex": "res/css/rethemendex.sh",
@ -46,129 +45,136 @@
    "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
    "start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
    "lint": "yarn lint:types && yarn lint:js && yarn lint:style",
-    "lint:js": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
+    "lint:js": "eslint --max-warnings 0 src test",
    "lint:types": "tsc --noEmit --jsx react",
    "lint:style": "stylelint 'res/css/**/*.scss'",
    "test": "jest",
-    "test:e2e": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
+    "test:e2e": "./test/end-to-end-tests/run.sh --app-url http://localhost:8080",
+    "coverage": "yarn test --coverage"
  },
  "dependencies": {
-    "@babel/runtime": "^7.10.5",
-    "await-lock": "^2.0.1",
-    "blueimp-canvas-to-blob": "^3.27.0",
+    "@babel/runtime": "^7.12.5",
+    "await-lock": "^2.1.0",
+    "blurhash": "^1.1.3",
    "browser-encrypt-attachment": "^0.3.0",
    "browser-request": "^0.3.3",
+    "cheerio": "^1.0.0-rc.9",
    "classnames": "^2.2.6",
-    "commonmark": "^0.29.1",
+    "commonmark": "^0.29.3",
    "counterpart": "^0.18.6",
-    "diff-dom": "^4.1.6",
+    "diff-dom": "^4.2.2",
    "diff-match-patch": "^1.0.5",
-    "emojibase-data": "^5.0.1",
-    "emojibase-regex": "^4.0.1",
+    "emojibase-data": "^5.1.1",
+    "emojibase-regex": "^4.1.1",
    "escape-html": "^1.0.3",
-    "file-saver": "^1.3.8",
-    "filesize": "3.6.1",
+    "file-saver": "^2.0.5",
+    "filesize": "6.1.0",
    "flux": "2.1.1",
-    "focus-visible": "^5.1.0",
-    "fuse.js": "^2.7.4",
+    "focus-visible": "^5.2.0",
    "gfm.css": "^1.1.2",
    "glob-to-regexp": "^0.4.1",
-    "highlight.js": "^10.1.2",
-    "html-entities": "^1.3.1",
-    "is-ip": "^2.0.0",
+    "highlight.js": "^10.5.0",
+    "html-entities": "^1.4.0",
+    "is-ip": "^3.1.0",
+    "katex": "^0.12.0",
    "linkifyjs": "^2.1.9",
-    "lodash": "^4.17.19",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^0.1.0-beta.5",
+    "lodash": "^4.17.20",
+    "matrix-js-sdk": "12.0.1",
+    "matrix-widget-api": "^0.1.0-beta.15",
    "minimist": "^1.2.5",
-    "pako": "^1.0.11",
-    "parse5": "^5.1.1",
+    "opus-recorder": "^8.0.3",
+    "pako": "^2.0.3",
+    "parse5": "^6.0.1",
    "png-chunks-extract": "^1.0.0",
-    "project-name-generator": "^2.1.7",
    "prop-types": "^15.7.2",
    "qrcode": "^1.4.4",
-    "qs": "^6.9.4",
-    "re-resizable": "^6.5.4",
-    "react": "^16.13.1",
-    "react-beautiful-dnd": "^4.0.1",
-    "react-dom": "^16.13.1",
-    "react-focus-lock": "^2.4.1",
+    "re-resizable": "^6.9.0",
+    "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-blurhash": "^0.1.3",
+    "react-dom": "^17.0.2",
+    "react-focus-lock": "^2.5.0",
    "react-transition-group": "^4.4.1",
    "resize-observer-polyfill": "^1.5.1",
    "rfc4648": "^1.4.0",
-    "sanitize-html": "github:apostrophecms/sanitize-html#3c7f93f2058f696f5359e3e58d464161647226db",
+    "sanitize-html": "^2.3.2",
    "tar-js": "^0.3.0",
-    "text-encoding-utf-8": "^1.0.2",
    "url": "^0.11.0",
-    "velocity-animate": "^1.5.2",
    "what-input": "^5.2.10",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/core": "^7.10.5",
-    "@babel/parser": "^7.11.0",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-decorators": "^7.10.5",
-    "@babel/plugin-proposal-export-default-from": "^7.10.4",
-    "@babel/plugin-proposal-numeric-separator": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
-    "@babel/plugin-transform-flow-comments": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-flow": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
-    "@babel/preset-typescript": "^7.10.4",
-    "@babel/register": "^7.10.5",
-    "@babel/traverse": "^7.11.0",
-    "@peculiar/webcrypto": "^1.1.3",
-    "@types/classnames": "^2.2.10",
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/eslint-parser": "^7.12.10",
+    "@babel/eslint-plugin": "^7.12.10",
+    "@babel/parser": "^7.12.11",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-proposal-decorators": "^7.12.12",
+    "@babel/plugin-proposal-export-default-from": "^7.12.1",
+    "@babel/plugin-proposal-numeric-separator": "^7.12.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@babel/register": "^7.12.10",
+    "@babel/traverse": "^7.12.12",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
+    "@peculiar/webcrypto": "^1.1.4",
+    "@sinonjs/fake-timers": "^7.0.2",
+    "@types/classnames": "^2.2.11",
+    "@types/commonmark": "^0.27.4",
    "@types/counterpart": "^0.18.1",
+    "@types/css-font-loading-module": "^0.0.6",
+    "@types/diff-match-patch": "^1.0.32",
    "@types/flux": "^3.1.9",
+    "@types/jest": "^26.0.20",
    "@types/linkifyjs": "^2.1.3",
-    "@types/lodash": "^4.14.158",
+    "@types/lodash": "^4.14.168",
    "@types/modernizr": "^3.5.3",
-    "@types/node": "^12.12.51",
+    "@types/node": "^14.14.22",
    "@types/pako": "^1.0.1",
-    "@types/qrcode": "^1.3.4",
-    "@types/react": "^16.9",
-    "@types/react-dom": "^16.9.8",
+    "@types/parse5": "^6.0.0",
+    "@types/qrcode": "^1.3.5",
+    "@types/react": "^17.0.2",
+    "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-dom": "^17.0.2",
    "@types/react-transition-group": "^4.4.0",
-    "@types/sanitize-html": "^1.23.3",
+    "@types/sanitize-html": "^2.3.1",
    "@types/zxcvbn": "^4.4.0",
-    "@typescript-eslint/eslint-plugin": "^3.7.0",
-    "@typescript-eslint/parser": "^3.7.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^24.9.0",
-    "chokidar": "^3.4.1",
-    "concurrently": "^4.1.2",
+    "@typescript-eslint/eslint-plugin": "^4.17.0",
+    "@typescript-eslint/parser": "^4.17.0",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
+    "babel-jest": "^26.6.3",
+    "chokidar": "^3.5.1",
+    "concurrently": "^5.3.0",
    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "7.5.0",
-    "eslint-config-matrix-org": "^0.1.2",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^2.50.3",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^2.5.1",
-    "glob": "^5.0.15",
-    "jest": "^26.5.2",
+    "eslint": "7.18.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-matrix-org": "github:matrix-org/eslint-plugin-matrix-org#main",
+    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "glob": "^7.1.6",
+    "jest": "^26.6.3",
    "jest-canvas-mock": "^2.3.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
-    "lolex": "^5.1.2",
+    "jest-fetch-mock": "^3.0.3",
    "matrix-mock-request": "^1.2.3",
-    "matrix-react-test-utils": "^0.2.2",
-    "react-test-renderer": "^16.13.1",
-    "rimraf": "^2.7.1",
-    "stylelint": "^9.10.1",
-    "stylelint-config-standard": "^18.3.0",
+    "matrix-react-test-utils": "^0.2.3",
+    "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
+    "react-test-renderer": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "stylelint": "^13.9.0",
+    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
-    "typescript": "^3.9.7",
+    "typescript": "^4.1.3",
    "walk": "^2.3.14"
  },
  "jest": {
    "testEnvironment": "./__test-utils__/environment.js",
    "testMatch": [
-      "<rootDir>/test/**/*-test.js"
+      "<rootDir>/test/**/*-test.[jt]s?(x)"
    ],
    "setupFiles": [
      "jest-canvas-mock"
@ -178,10 +184,20 @@
    ],
    "moduleNameMapper": {
      "\\.(gif|png|svg|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
-      "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json"
+      "\\$webapp/i18n/languages.json": "<rootDir>/__mocks__/languages.json",
+      "decoderWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+      "decoderWorker\\.min\\.wasm": "<rootDir>/__mocks__/empty.js",
+      "waveWorker\\.min\\.js": "<rootDir>/__mocks__/empty.js",
+      "workers/(.+)\\.worker\\.ts": "<rootDir>/__mocks__/workerMock.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!matrix-js-sdk).+$"
+    ],
+    "collectCoverageFrom": [
+      "<rootDir>/src/**/*.{js,ts,tsx}"
+    ],
+    "coverageReporters": [
+      "text"
    ]
  }
 }
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@ -17,11 +17,27 @@ limitations under the License.
 */

@import "./_font-sizes.scss";
+@import "./_font-weights.scss";

 $hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic

+$EventTile_e2e_state_indicator_width: 4px;
+
+$MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
+$MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
+
 :root {
    font-size: 10px;
+
+    --transition-short: .1s;
+    --transition-standard: .3s;
+}
+
+@media (prefers-reduced-motion) {
+    :root {
+        --transition-short: 0;
+        --transition-standard: 0;
+    }
 }

 html {
@ -29,6 +45,8 @@ html {
       N.B. Breaks things when we have legitimate horizontal overscroll */
    height: 100%;
    overflow: hidden;
+    // Stop similar overscroll bounce in Firefox Nightly for macOS
+    overscroll-behavior: none;
 }

 body {
@ -59,6 +77,10 @@ pre, code {
    color: $accent-color;
 }

+.text-muted {
+    color: $muted-fg-color;
+}
+
 b {
    // On Firefox, the default weight for `<b>` is `bolder` which results in no bold
    // effect since we only have specific weights of our fonts available.
@ -165,7 +187,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
        border: 1px solid rgba($primary-fg-color, .1);
        // these things should probably not be defined globally
        margin: 9px;
-        flex: 0 0 auto;
    }

    .mx_textinput {
@ -270,6 +291,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {

 .mx_Dialog_staticWrapper .mx_Dialog {
    z-index: 4010;
+    contain: content;
 }

 .mx_Dialog_background {
@ -294,7 +316,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }

 .mx_Dialog_lightbox .mx_Dialog_background {
-    opacity: 0.85;
+    opacity: $lightbox-background-bg-opacity;
    background-color: $lightbox-background-bg-color;
 }

@ -306,6 +328,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
+    padding: 0;
 }

 .mx_Dialog_header {
@ -323,6 +346,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {

 .mx_Dialog_title {
    font-size: $font-22px;
+    font-weight: $font-semi-bold;
    line-height: $font-36px;
    color: $dialog-title-fg-color;
 }
@ -348,8 +372,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    background-color: $dialog-close-fg-color;
    cursor: pointer;
    position: absolute;
-    top: 4px;
-    right: 0px;
+    top: 10px;
+    right: 0;
 }

 .mx_Dialog_content {
@ -362,6 +386,11 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 .mx_Dialog_buttons {
    margin-top: 20px;
    text-align: right;
+
+    .mx_Dialog_buttons_additive {
+        // The consumer is responsible for positioning their elements.
+        float: left;
+    }
 }

 /* XXX: Our button style are a mess: buttons that happen to appear in dialogs get special styles applied
@ -380,6 +409,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    border: 1px solid $accent-color;
    color: $accent-color;
    background-color: $button-secondary-bg-color;
+    font-family: inherit;
 }

 .mx_Dialog button:last-child {
@ -474,54 +504,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    margin-top: 69px;
 }

-.mx_Beta {
-    color: red;
-    margin-right: 10px;
-    position: relative;
-    top: -3px;
-    background-color: white;
-    padding: 0 4px;
-    border-radius: 3px;
-    border: 1px solid darkred;
-    cursor: help;
-    transition-duration: 200ms;
-    font-size: smaller;
-    filter: opacity(0.5);
-}
-
-.mx_Beta:hover {
-    color: white;
-    border: 1px solid gray;
-    background-color: darkred;
-}
-
-.mx_TintableSvgButton {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-content: center;
-}
-
-.mx_TintableSvgButton object {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-}
-
-.mx_TintableSvgButton span {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    cursor: pointer;
-}
-
 // username colors
 // used by SenderProfile & RoomPreviewBar
 .mx_Username_color1 {
@ -591,6 +573,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    }
 }

+@define-mixin ProgressBarBgColour $colour {
+    background-color: $colour;
+    &::-webkit-progress-bar {
+        background-color: $colour;
+    }
+}
+
@define-mixin ProgressBarBorderRadius $radius {
    border-radius: $radius;
    &::-moz-progress-bar {
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -27,6 +27,9 @@
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
+@import "./structures/_SpacePanel.scss";
+@import "./structures/_SpaceRoomDirectory.scss";
+@import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@ -34,6 +37,11 @@
@import "./structures/_ViewSource.scss";
@import "./structures/auth/_CompleteSecurity.scss";
@import "./structures/auth/_Login.scss";
+@import "./views/audio_messages/_AudioPlayer.scss";
+@import "./views/audio_messages/_PlayPauseButton.scss";
+@import "./views/audio_messages/_PlaybackContainer.scss";
+@import "./views/audio_messages/_SeekBar.scss";
+@import "./views/audio_messages/_Waveform.scss";
@import "./views/auth/_AuthBody.scss";
@import "./views/auth/_AuthButtons.scss";
@import "./views/auth/_AuthFooter.scss";
@ -45,20 +53,21 @@
@import "./views/auth/_InteractiveAuthEntryComponents.scss";
@import "./views/auth/_LanguageSelector.scss";
@import "./views/auth/_PassphraseField.scss";
-@import "./views/auth/_ServerConfig.scss";
-@import "./views/auth/_ServerTypeSelector.scss";
@import "./views/auth/_Welcome.scss";
@import "./views/avatars/_BaseAvatar.scss";
@import "./views/avatars/_DecoratedRoomAvatar.scss";
@import "./views/avatars/_MemberStatusMessageAvatar.scss";
-@import "./views/avatars/_PulsedAvatar.scss";
@import "./views/avatars/_WidgetAvatar.scss";
+@import "./views/beta/_BetaCard.scss";
+@import "./views/context_menus/_CallContextMenu.scss";
@import "./views/context_menus/_IconizedContextMenu.scss";
@import "./views/context_menus/_MessageContextMenu.scss";
@import "./views/context_menus/_StatusMessageContextMenu.scss";
@import "./views/context_menus/_TagTileContextMenu.scss";
+@import "./views/dialogs/_AddExistingToSpaceDialog.scss";
@import "./views/dialogs/_AddressPickerDialog.scss";
@import "./views/dialogs/_Analytics.scss";
+@import "./views/dialogs/_BetaFeedbackDialog.scss";
@import "./views/dialogs/_BugReportDialog.scss";
@import "./views/dialogs/_ChangelogDialog.scss";
@import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
@ -71,26 +80,33 @@
@import "./views/dialogs/_DevtoolsDialog.scss";
@import "./views/dialogs/_EditCommunityPrototypeDialog.scss";
@import "./views/dialogs/_FeedbackDialog.scss";
+@import "./views/dialogs/_ForwardDialog.scss";
@import "./views/dialogs/_GroupAddressPicker.scss";
+@import "./views/dialogs/_HostSignupDialog.scss";
@import "./views/dialogs/_IncomingSasDialog.scss";
@import "./views/dialogs/_InviteDialog.scss";
@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
@import "./views/dialogs/_MessageEditHistoryDialog.scss";
@import "./views/dialogs/_ModalWidgetDialog.scss";
@import "./views/dialogs/_NewSessionReviewDialog.scss";
+@import "./views/dialogs/_RegistrationEmailPromptDialog.scss";
@import "./views/dialogs/_RoomSettingsDialog.scss";
@import "./views/dialogs/_RoomSettingsDialogBridges.scss";
@import "./views/dialogs/_RoomUpgradeDialog.scss";
@import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
@import "./views/dialogs/_ServerOfflineDialog.scss";
+@import "./views/dialogs/_ServerPickerDialog.scss";
@import "./views/dialogs/_SetEmailDialog.scss";
@import "./views/dialogs/_SettingsDialog.scss";
@import "./views/dialogs/_ShareDialog.scss";
@import "./views/dialogs/_SlashCommandHelpDialog.scss";
+@import "./views/dialogs/_SpaceSettingsDialog.scss";
@import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
@import "./views/dialogs/_TermsDialog.scss";
+@import "./views/dialogs/_UntrustedDeviceDialog.scss";
@import "./views/dialogs/_UploadConfirmDialog.scss";
@import "./views/dialogs/_UserSettingsDialog.scss";
+@import "./views/dialogs/_WidgetCapabilitiesPromptDialog.scss";
@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
@import "./views/dialogs/security/_AccessSecretStorageDialog.scss";
@import "./views/dialogs/security/_CreateCrossSigningDialog.scss";
@ -103,18 +119,21 @@
@import "./views/elements/_AddressSelector.scss";
@import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss";
+@import "./views/elements/_DesktopCapturerSourcePicker.scss";
+@import "./views/elements/_DialPadBackspaceButton.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss";
+@import "./views/elements/_FacePile.scss";
@import "./views/elements/_Field.scss";
-@import "./views/elements/_FormButton.scss";
-@import "./views/elements/_IconButton.scss";
@import "./views/elements/_ImageView.scss";
@import "./views/elements/_InfoTooltip.scss";
@import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_InviteReason.scss";
@import "./views/elements/_ManageIntegsButton.scss";
+@import "./views/elements/_MiniAvatarUploader.scss";
@import "./views/elements/_PowerSelector.scss";
@import "./views/elements/_ProgressBar.scss";
@import "./views/elements/_QRCode.scss";
@ -123,6 +142,8 @@
@import "./views/elements/_RichText.scss";
@import "./views/elements/_RoleButton.scss";
@import "./views/elements/_RoomAliasField.scss";
+@import "./views/elements/_SSOButtons.scss";
+@import "./views/elements/_ServerPicker.scss";
@import "./views/elements/_Slider.scss";
@import "./views/elements/_Spinner.scss";
@import "./views/elements/_StyledCheckbox.scss";
@ -139,14 +160,18 @@
@import "./views/groups/_GroupUserSettings.scss";
@import "./views/messages/_CreateEvent.scss";
@import "./views/messages/_DateSeparator.scss";
+@import "./views/messages/_EventTileBubble.scss";
@import "./views/messages/_MEmoteBody.scss";
@import "./views/messages/_MFileBody.scss";
@import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MImageReplyBody.scss";
@import "./views/messages/_MJitsiWidgetEvent.scss";
@import "./views/messages/_MNoticeBody.scss";
@import "./views/messages/_MStickerBody.scss";
@import "./views/messages/_MTextBody.scss";
@import "./views/messages/_MVideoBody.scss";
+@import "./views/messages/_MVoiceMessageBody.scss";
+@import "./views/messages/_MediaBody.scss";
@import "./views/messages/_MessageActionBar.scss";
@import "./views/messages/_MessageTimestamp.scss";
@import "./views/messages/_MjolnirBody.scss";
@ -161,6 +186,7 @@
@import "./views/messages/_common_CryptoEvent.scss";
@import "./views/right_panel/_BaseCard.scss";
@import "./views/right_panel/_EncryptionInfo.scss";
+@import "./views/right_panel/_PinnedMessagesCard.scss";
@import "./views/right_panel/_RoomSummaryCard.scss";
@import "./views/right_panel/_UserInfo.scss";
@import "./views/right_panel/_VerificationPanel.scss";
@ -177,16 +203,18 @@
@import "./views/rooms/_GroupLayout.scss";
@import "./views/rooms/_IRCLayout.scss";
@import "./views/rooms/_JumpToBottomButton.scss";
+@import "./views/rooms/_LinkPreviewGroup.scss";
@import "./views/rooms/_LinkPreviewWidget.scss";
@import "./views/rooms/_MemberInfo.scss";
@import "./views/rooms/_MemberList.scss";
@import "./views/rooms/_MessageComposer.scss";
@import "./views/rooms/_MessageComposerFormatBar.scss";
+@import "./views/rooms/_NewRoomIntro.scss";
@import "./views/rooms/_NotificationBadge.scss";
@import "./views/rooms/_PinnedEventTile.scss";
-@import "./views/rooms/_PinnedEventsPanel.scss";
@import "./views/rooms/_PresenceLabel.scss";
@import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_ReplyTile.scss";
@import "./views/rooms/_RoomBreadcrumbs.scss";
@import "./views/rooms/_RoomHeader.scss";
@import "./views/rooms/_RoomList.scss";
@ -198,6 +226,7 @@
@import "./views/rooms/_SendMessageComposer.scss";
@import "./views/rooms/_Stickers.scss";
@import "./views/rooms/_TopUnreadMessagesBar.scss";
+@import "./views/rooms/_VoiceRecordComposerTile.scss";
@import "./views/rooms/_WhoIsTypingTile.scss";
@import "./views/settings/_AvatarSetting.scss";
@import "./views/settings/_CrossSigningPanel.scss";
@ -211,6 +240,7 @@
@import "./views/settings/_SecureBackupPanel.scss";
@import "./views/settings/_SetIdServer.scss";
@import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_UpdateCheckButton.scss";
@import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
@ -219,14 +249,24 @@
@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
@import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
@import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
+@import "./views/settings/tabs/user/_LabsUserSettingsTab.scss";
@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
@import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
@import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
@import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
@import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
+@import "./views/spaces/_SpaceBasicSettings.scss";
+@import "./views/spaces/_SpaceCreateMenu.scss";
+@import "./views/spaces/_SpacePublicShare.scss";
@import "./views/terms/_InlineTermsAgreement.scss";
+@import "./views/toasts/_AnalyticsToast.scss";
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
@import "./views/verification/_VerificationShowSas.scss";
@import "./views/voip/_CallContainer.scss";
@import "./views/voip/_CallView.scss";
-@import "./views/voip/_VideoView.scss";
+@import "./views/voip/_CallViewForRoom.scss";
+@import "./views/voip/_CallPreview.scss";
+@import "./views/voip/_DialPad.scss";
+@import "./views/voip/_DialPadContextMenu.scss";
+@import "./views/voip/_DialPadModal.scss";
+@import "./views/voip/_VideoFeed.scss";
--- a/res/css/structures/_ContextualMenu.scss
+++ b/res/css/structures/_ContextualMenu.scss
@ -38,6 +38,7 @@ limitations under the License.
    position: absolute;
    font-size: $font-14px;
    z-index: 5001;
+    contain: content;
 }

 .mx_ContextualMenu_right {
@ -115,8 +116,3 @@ limitations under the License.
    border-top: 8px solid $menu-bg-color;
    border-right: 8px solid transparent;
 }
-
-.mx_ContextualMenu_spinner {
-    display: block;
-    margin: 0 auto;
-}
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@ -22,7 +22,6 @@ limitations under the License.
 }

 .mx_FilePanel .mx_RoomView_messageListWrapper {
-    margin-right: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
--- a/res/css/structures/_GroupFilterPanel.scss
+++ b/res/css/structures/_GroupFilterPanel.scss
@ -56,6 +56,12 @@ limitations under the License.
 .mx_GroupFilterPanel .mx_TagTile {
    // opacity: 0.5;
    position: relative;
+
+    .mx_BetaDot {
+        position: absolute;
+        right: -13px;
+        top: -11px;
+    }
 }

 .mx_GroupFilterPanel .mx_TagTile.mx_TagTile_prototype {
--- a/res/css/structures/_GroupView.scss
+++ b/res/css/structures/_GroupView.scss
@ -323,7 +323,7 @@ limitations under the License.
 }

 .mx_GroupView_featuredThing .mx_BaseAvatar {
-    /* To prevent misalignment with mx_TintableSvg (in addButton) */
+    /* To prevent misalignment with img (in addButton) */
    vertical-align: initial;
 }

--- a/res/css/structures/_HomePage.scss
+++ b/res/css/structures/_HomePage.scss
@ -26,9 +26,10 @@ limitations under the License.

 .mx_HomePage_default {
    text-align: center;
+    display: flex;

    .mx_HomePage_default_wrapper {
-        padding: 25vh 0 12px;
+        margin: auto;
    }

    img {
@ -50,56 +51,54 @@ limitations under the License.
        color: $muted-fg-color;
    }

+    .mx_MiniAvatarUploader {
+        margin: 0 auto;
+    }
+
    .mx_HomePage_default_buttons {
-        margin: 80px auto 0;
+        margin: 60px auto 0;
        width: fit-content;

        .mx_AccessibleButton {
            padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin

-            width: 104px; // 120px - 2* 8px
-            margin: 0 39px; // 55px - 2* 8px
+            width: 160px;
+            height: 132px;
+            margin: 20px;
            position: relative;
            display: inline-block;
            border-radius: 8px;
            vertical-align: top;
            word-break: break-word;
+            box-sizing: border-box;

            font-weight: 600;
            font-size: $font-15px;
            line-height: $font-20px;
-            color: $muted-fg-color;
-
-            &:hover {
-                color: $accent-color;
-                background: rgba($accent-color, 0.06);
-
-                &::before {
+            color: #fff; // on all themes
            background-color: $accent-color;
-                }
-            }

            &::before {
                top: 20px;
-                left: 40px; // (120px-40px)/2
+                left: 60px; // (160px-40px)/2
                width: 40px;
                height: 40px;

                content: '';
                position: absolute;
-                background-color: $muted-fg-color;
+                background-color: #fff; // on all themes
                mask-repeat: no-repeat;
                mask-size: contain;
            }

            &.mx_HomePage_button_sendDm::before {
-                mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+                mask-image: url('$(res)/img/element-icons/feedback.svg');
            }
            &.mx_HomePage_button_explore::before {
-                mask-image: url('$(res)/img/feather-customised/explore.svg');
+                mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
            }
            &.mx_HomePage_button_createGroup::before {
-                mask-image: url('$(res)/img/feather-customised/group.svg');
+                mask-image: url('$(res)/img/element-icons/community-members.svg');
            }
        }
    }
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@ -15,14 +15,17 @@ limitations under the License.
 */

 $groupFilterPanelWidth: 56px; // only applies in this file, used for calculations
+$roomListCollapsedWidth: 68px;

 .mx_LeftPanel {
    background-color: $roomlist-bg-color;
-    min-width: 260px;
+    // TODO decrease this once Spaces launches as it'll no longer need to include the 56px Community Panel
+    min-width: 206px;
    max-width: 50%;

    // Create a row-based flexbox for the GroupFilterPanel and the room list
    display: flex;
+    contain: content;

    .mx_LeftPanel_GroupFilterPanelContainer {
        flex-grow: 0;
@ -37,18 +40,12 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
        // GroupFilterPanel handles its own CSS
    }

-    &:not(.mx_LeftPanel_hasGroupFilterPanel) {
-        .mx_LeftPanel_roomListContainer {
-            width: 100%;
-        }
-    }
-
    // Note: The 'room list' in this context is actually everything that isn't the tag
    // panel, such as the menu options, breadcrumbs, filtering, etc
    .mx_LeftPanel_roomListContainer {
-        width: calc(100% - $groupFilterPanelWidth);
        background-color: $roomlist-bg-color;
-
+        flex: 1 0 0;
+        min-width: 0;
        // Create another flexbox (this time a column) for the room list components
        display: flex;
        flex-direction: column;
@ -74,6 +71,7 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
            // aligned correctly. This is also a row-based flexbox.
            display: flex;
            align-items: center;
+            contain: content;

            &.mx_IndicatorScrollbar_leftOverflow {
                mask-image: linear-gradient(90deg, transparent, black 5%);
@ -113,6 +111,29 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
                }
            }

+            .mx_LeftPanel_dialPadButton {
+                width: 32px;
+                height: 32px;
+                border-radius: 8px;
+                background-color: $roomlist-button-bg-color;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 8px;
+                    left: 8px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/element-icons/call/dialpad.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $secondary-fg-color;
+                }
+            }
+
            .mx_LeftPanel_exploreButton {
                width: 32px;
                height: 32px;
@ -134,6 +155,10 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
                    mask-repeat: no-repeat;
                    background: $secondary-fg-color;
                }
+
+                &.mx_LeftPanel_exploreButton_space::before {
+                    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+                }
            }
        }

@ -168,23 +193,27 @@ $groupFilterPanelWidth: 56px; // only applies in this file, used for calculation
    // These styles override the defaults for the minimized (66px) layout
    &.mx_LeftPanel_minimized {
        min-width: unset;
-
-        // We have to forcefully set the width to override the resizer's style attribute.
-        &.mx_LeftPanel_hasGroupFilterPanel {
-            width: calc(68px + $groupFilterPanelWidth) !important;
-        }
-        &:not(.mx_LeftPanel_hasGroupFilterPanel) {
-            width: 68px !important;
-        }
+        width: unset !important;

        .mx_LeftPanel_roomListContainer {
-            width: 68px;
+            width: $roomListCollapsedWidth;
+
+            .mx_LeftPanel_userHeader {
+                flex-direction: row;
+                justify-content: center;
+            }

            .mx_LeftPanel_filterContainer {
                // Organize the flexbox into a centered column layout
                flex-direction: column;
                justify-content: center;

+                .mx_LeftPanel_dialPadButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+
                .mx_LeftPanel_exploreButton {
                    margin-left: 0;
                    margin-top: 8px;
--- a/res/css/structures/_LeftPanelWidget.scss
+++ b/res/css/structures/_LeftPanelWidget.scss
@ -134,7 +134,7 @@ limitations under the License.
            mask-position: center;
            mask-size: contain;
            mask-repeat: no-repeat;
-            mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
+            mask-image: url('$(res)/img/feather-customised/maximise.svg');
            background: $muted-fg-color;
        }
    }
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@ -18,6 +18,7 @@ limitations under the License.
    display: flex;
    flex-direction: row;
    min-width: 0;
+    min-height: 0;
    height: 100%;
 }

--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@ -66,7 +66,7 @@ limitations under the License.
 }

 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
    background-color: $primary-bg-color;

    flex: 1 1 0;
--- a/res/css/structures/_MyGroups.scss
+++ b/res/css/structures/_MyGroups.scss
@ -17,6 +17,11 @@ limitations under the License.
 .mx_MyGroups {
    display: flex;
    flex-direction: column;
+
+    .mx_BetaCard {
+        margin: 0 72px;
+        max-width: 760px;
+    }
 }

 .mx_MyGroups .mx_RoomHeader_simpleHeader {
@ -30,7 +35,7 @@ limitations under the License.
    flex-wrap: wrap;
 }

-.mx_MyGroups > :not(.mx_RoomHeader) {
+.mx_MyGroups > :not(.mx_RoomHeader):not(.mx_BetaCard) {
    max-width: 960px;
    margin: 40px;
 }
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@ -82,7 +82,6 @@ limitations under the License.
    color: $primary-fg-color;
    font-size: $font-12px;
    display: inline;
-    padding-left: 0px;
 }

 .mx_NotificationPanel .mx_EventTile_senderDetails {
@ -103,6 +102,7 @@ limitations under the License.
    visibility: visible;
    position: initial;
    display: inline;
+    padding-left: 5px;
 }

 .mx_NotificationPanel .mx_EventTile_line {
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@ -25,6 +25,7 @@ limitations under the License.
    padding: 4px 0;
    box-sizing: border-box;
    height: 100%;
+    contain: strict;

    .mx_RoomView_MessageList {
        padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
@ -98,6 +99,76 @@ limitations under the License.
    mask-position: center;
 }

+$dot-size: 8px;
+$pulse-color: $pinned-unread-color;
+
+.mx_RightPanel_pinnedMessagesButton {
+    &::before {
+        mask-image: url('$(res)/img/element-icons/room/pin.svg');
+        mask-position: center;
+    }
+
+    .mx_RightPanel_pinnedMessagesButton_unreadIndicator {
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 4px;
+        width: $dot-size;
+        height: $dot-size;
+        border-radius: 50%;
+        transform: scale(1);
+        background: rgba($pulse-color, 1);
+        box-shadow: 0 0 0 0 rgba($pulse-color, 1);
+        animation: mx_RightPanel_indicator_pulse 2s infinite;
+        animation-iteration-count: 1;
+
+        &::after {
+            content: "";
+            position: absolute;
+            width: inherit;
+            height: inherit;
+            top: 0;
+            left: 0;
+            transform: scale(1);
+            transform-origin: center center;
+            animation-name: mx_RightPanel_indicator_pulse_shadow;
+            animation-duration: inherit;
+            animation-iteration-count: inherit;
+            border-radius: 50%;
+            background: rgba($pulse-color, 1);
+        }
+    }
+}
+
+@keyframes mx_RightPanel_indicator_pulse {
+    0% {
+        transform: scale(0.95);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
+@keyframes mx_RightPanel_indicator_pulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
 .mx_RightPanel_headerButton_highlight {
    &::before {
        background-color: $accent-color !important;
@ -160,3 +231,20 @@ limitations under the License.
        mask-position: center;
    }
 }
+
+.mx_RightPanel_scopeHeader {
+    margin: 24px;
+    text-align: center;
+    font-weight: $font-semi-bold;
+    font-size: $font-18px;
+    line-height: $font-22px;
+
+    .mx_BaseAvatar {
+        margin-right: 8px;
+        vertical-align: middle;
+    }
+
+    .mx_BaseAvatar_image {
+        border-radius: 8px;
+    }
+}
--- a/res/css/structures/_RoomDirectory.scss
+++ b/res/css/structures/_RoomDirectory.scss
@ -61,31 +61,59 @@ limitations under the License.
 .mx_RoomDirectory_tableWrapper {
    overflow-y: auto;
    flex: 1 1 0;
+
+    .mx_RoomDirectory_footer {
+        margin-top: 24px;
+        text-align: center;
+
+        > h5 {
+            margin: 0;
+            font-weight: $font-semi-bold;
+            font-size: $font-15px;
+            line-height: $font-18px;
+            color: $primary-fg-color;
+        }
+
+        > p {
+            margin: 40px auto 60px;
+            font-size: $font-14px;
+            line-height: $font-20px;
+            color: $secondary-fg-color;
+            max-width: 464px; // easier reading
+        }
+
+        > hr {
+            margin: 0;
+            border: none;
+            height: 1px;
+            background-color: $header-panel-bg-color;
+        }
+
+        .mx_RoomDirectory_newRoom {
+            margin: 24px auto 0;
+            width: max-content;
+        }
+    }
 }

 .mx_RoomDirectory_table {
-    font-size: $font-12px;
    color: $primary-fg-color;
-    width: 100%;
+    display: grid;
+    font-size: $font-12px;
+    grid-template-columns: max-content auto max-content max-content max-content;
+    row-gap: 24px;
    text-align: left;
-    table-layout: fixed;
+    width: 100%;
 }

 .mx_RoomDirectory_roomAvatar {
-    width: 32px;
-    padding-right: 14px;
-    vertical-align: top;
-}
-
-.mx_RoomDirectory_roomDescription {
-    padding-bottom: 16px;
+    padding: 2px 14px 0 0;
 }

 .mx_RoomDirectory_roomMemberCount {
+    align-self: center;
    color: $light-fg-color;
-    width: 60px;
-    padding: 0 10px;
-    text-align: center;
+    padding: 3px 10px 0;

    &::before {
        background-color: $light-fg-color;
@ -105,8 +133,7 @@ limitations under the License.
 }

 .mx_RoomDirectory_join, .mx_RoomDirectory_preview {
-    width: 80px;
-    text-align: center;
+    align-self: center;
    white-space: nowrap;
 }

@ -144,11 +171,6 @@ limitations under the License.
    color: $settings-grey-fg-color;
 }

-.mx_RoomDirectory_table tr {
-    padding-bottom: 10px;
-    cursor: pointer;
-}
-
 .mx_RoomDirectory .mx_RoomView_MessageList {
    padding: 0;
 }
--- a/res/css/structures/_RoomSearch.scss
+++ b/res/css/structures/_RoomSearch.scss
@ -22,7 +22,7 @@ limitations under the License.
    // keep border thickness consistent to prevent movement
    border: 1px solid transparent;
    height: 28px;
-    padding: 2px;
+    padding: 1px;

    // Create a flexbox for the icons (easier to manage)
    display: flex;
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@ -14,62 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_RoomStatusBar {
+.mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
    margin-left: 65px;
    min-height: 50px;
 }

-/* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
-.mx_RoomStatusBar_indicator {
-    padding-left: 17px;
-    padding-right: 12px;
-    margin-left: -73px;
-    margin-top: 15px;
-    float: left;
-    width: 24px;
-    text-align: center;
-}
-
-.mx_RoomStatusBar_callBar {
-    height: 50px;
-    line-height: $font-50px;
-}
-
-.mx_RoomStatusBar_placeholderIndicator span {
-    color: $primary-fg-color;
-    opacity: 0.5;
-    position: relative;
-    top: -4px;
-    /*
-    animation-duration: 1s;
-    animation-name: bounce;
-    animation-direction: alternate;
-    animation-iteration-count: infinite;
-    */
-}
-
-.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
-    animation-delay: 0.3s;
-}
-.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
-    animation-delay: 0.6s;
-}
-.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
-    animation-delay: 0.9s;
-}
-
-@keyframes bounce {
-    from {
-        opacity: 0.5;
-        top: 0;
-    }
-
-    to {
-        opacity: 0.2;
-        top: -3px;
-    }
-}
-
 .mx_RoomStatusBar_typingIndicatorAvatars {
    width: 52px;
    margin-top: -1px;
@ -119,6 +68,97 @@ limitations under the License.
    min-height: 58px;
 }

+.mx_RoomStatusBar_unsentMessages {
+    > div[role="alert"] {
+        // cheat some basic alignment
+        display: flex;
+        align-items: center;
+        min-height: 70px;
+        margin: 12px;
+        padding-left: 16px;
+        background-color: $header-panel-bg-color;
+        border-radius: 4px;
+    }
+
+    .mx_RoomStatusBar_unsentBadge {
+        margin-right: 12px;
+
+        .mx_NotificationBadge {
+            // Override sizing from the default badge
+            width: 24px !important;
+            height: 24px !important;
+            border-radius: 24px !important;
+
+            .mx_NotificationBadge_count {
+                font-size: $font-16px !important; // override default
+            }
+        }
+    }
+
+    .mx_RoomStatusBar_unsentTitle {
+        color: $warning-color;
+        font-size: $font-15px;
+    }
+
+    .mx_RoomStatusBar_unsentDescription {
+        font-size: $font-12px;
+    }
+
+    .mx_RoomStatusBar_unsentButtonBar {
+        flex-grow: 1;
+        text-align: right;
+        margin-right: 22px;
+        color: $muted-fg-color;
+
+        .mx_AccessibleButton {
+            padding: 5px 10px;
+            padding-left: 30px; // 18px for the icon, 2px margin to text, 10px regular padding
+            display: inline-block;
+            position: relative;
+
+            &:nth-child(2) {
+                border-left: 1px solid $resend-button-divider-color;
+            }
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 10px; // inset for regular button padding
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                width: 18px;
+                height: 18px;
+                top: 50%; // text sizes are dynamic
+                transform: translateY(-50%);
+            }
+
+            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
+                mask-image: url('$(res)/img/element-icons/trashcan.svg');
+            }
+
+            &.mx_RoomStatusBar_unsentResendAllBtn {
+                padding-left: 34px; // 28px from above, but +6px to account for the wider icon
+
+                &::before {
+                    mask-image: url('$(res)/img/element-icons/retry.svg');
+                }
+            }
+        }
+
+        .mx_InlineSpinner {
+            vertical-align: middle;
+            margin-right: 5px;
+            top: 1px; // just to help the vertical alignment be slightly better
+
+            & + span {
+                margin-right: 10px; // same margin/padding as the rightmost button
+            }
+        }
+    }
+}
+
 .mx_RoomStatusBar_connectionLostBar img {
    padding-left: 10px;
    padding-right: 10px;
@ -153,18 +193,8 @@ limitations under the License.
    display: block;
 }

-.mx_RoomStatusBar_isAlone {
-    height: 50px;
-    line-height: $font-50px;
-
-    color: $primary-fg-color;
-    opacity: 0.5;
-    overflow-y: hidden;
-    display: block;
-}
-
 .mx_MatrixChat_useCompactLayout {
-    .mx_RoomStatusBar {
+    .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
        min-height: 40px;
    }

@ -172,11 +202,6 @@ limitations under the License.
        margin-top: 10px;
    }

-    .mx_RoomStatusBar_callBar {
-        height: 40px;
-        line-height: $font-40px;
-    }
-
    .mx_RoomStatusBar_typingBar {
        height: 40px;
        line-height: $font-40px;
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@ -20,35 +20,55 @@ limitations under the License.
    flex-direction: column;
 }

+
+@keyframes mx_RoomView_fileDropTarget_animation {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 0.95;
+    }
+}
+
 .mx_RoomView_fileDropTarget {
    min-width: 0px;
    width: 100%;
+    height: 100%;
+
    font-size: $font-18px;
    text-align: center;

    pointer-events: none;

-    padding-left: 12px;
-    padding-right: 12px;
-    margin-left: -12px;
+    background-color: $primary-bg-color;
+    opacity: 0.95;

-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-
-    background-color: $droptarget-bg-color;
-    border: 2px #e1dddd solid;
-    border-bottom: none;
    position: absolute;
-    top: 52px;
-    bottom: 0px;
    z-index: 3000;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    animation: mx_RoomView_fileDropTarget_animation;
+    animation-duration: 0.5s;
 }

-.mx_RoomView_fileDropTargetLabel {
-    top: 50%;
-    width: 100%;
-    margin-top: -50px;
-    position: absolute;
+@keyframes mx_RoomView_fileDropTarget_image_animation {
+    from {
+        transform: scaleX(0);
+    }
+    to {
+        transform: scaleX(1);
+    }
+}
+
+.mx_RoomView_fileDropTarget_image {
+    width: 32px;
+    animation: mx_RoomView_fileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
 }

 .mx_RoomView_auxPanel {
@ -117,7 +137,6 @@ limitations under the License.
 }

 .mx_RoomView_body {
-    position: relative; //for .mx_RoomView_auxPanel_fullHeight
    display: flex;
    flex-direction: column;
    flex: 1;
@ -134,6 +153,7 @@ limitations under the License.
    flex: 1;
    display: flex;
    flex-direction: column;
+    contain: content;
 }

 .mx_RoomView_statusArea {
@ -219,7 +239,8 @@ hr.mx_RoomView_myReadMarker {
    position: relative;
    top: -1px;
    z-index: 1;
-    transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s;
+    will-change: width;
+    transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s;
    width: 99%;
    opacity: 1;
 }
@ -244,12 +265,6 @@ hr.mx_RoomView_myReadMarker {
    padding-top: 1px;
 }

-.mx_RoomView_inCall .mx_RoomView_statusAreaBox {
-    background-color: $accent-color;
-    color: $accent-fg-color;
-    position: relative;
-}
-
 .mx_RoomView_voipChevron {
    position: absolute;
    bottom: -11px;
--- a/res/css/structures/_ScrollPanel.scss
+++ b/res/css/structures/_ScrollPanel.scss
@ -21,6 +21,8 @@ limitations under the License.
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
-        overflow-y: hidden;
+
+        content-visibility: auto;
+        contain-intrinsic-size: 50px;
    }
 }
--- a/res/css/structures/_SpacePanel.scss
+++ b/res/css/structures/_SpacePanel.scss
@ -0,0 +1,376 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$topLevelHeight: 32px;
+$nestedHeight: 24px;
+$gutterSize: 16px;
+$activeBorderTransparentGap: 1px;
+
+$activeBackgroundColor: $roomtile-selected-bg-color;
+$activeBorderColor: $secondary-fg-color;
+
+.mx_SpacePanel {
+    flex: 0 0 auto;
+    background-color: $groupFilterPanel-bg-color;
+    padding: 0;
+    margin: 0;
+
+    // Create another flexbox so the Panel fills the container
+    display: flex;
+    flex-direction: column;
+
+    .mx_SpacePanel_spaceTreeWrapper {
+        flex: 1;
+        padding: 8px 8px 16px 0;
+    }
+
+    .mx_SpacePanel_toggleCollapse {
+        flex: 0 0 auto;
+        width: 40px;
+        height: 40px;
+        mask-position: center;
+        mask-size: 32px;
+        mask-repeat: no-repeat;
+        margin-left: $gutterSize;
+        margin-bottom: 12px;
+        background-color: $roomlist-header-color;
+        mask-image: url('$(res)/img/element-icons/expand-space-panel.svg');
+
+        &.expanded {
+            transform: scaleX(-1);
+        }
+    }
+
+    ul {
+        margin: 0;
+        list-style: none;
+        padding: 0;
+
+        > .mx_SpaceItem {
+            padding-left: 16px;
+        }
+    }
+
+    .mx_SpaceButton_toggleCollapse {
+        cursor: pointer;
+    }
+
+    .mx_SpaceItem_dragging {
+        .mx_SpaceButton_toggleCollapse {
+            visibility: hidden;
+        }
+    }
+
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        flex-grow: 1;
+    }
+
+    .mx_SpaceItem {
+        display: inline-flex;
+        flex-flow: wrap;
+
+        &.mx_SpaceItem_narrow {
+            align-self: baseline;
+        }
+    }
+
+    .mx_SpaceItem.collapsed {
+        & > .mx_SpaceButton > .mx_SpaceButton_toggleCollapse {
+            transform: rotate(-90deg);
+        }
+
+        & > .mx_SpaceTreeLevel {
+            display: none;
+        }
+    }
+
+    .mx_SpaceItem:not(.hasSubSpaces) > .mx_SpaceButton {
+        margin-left: $gutterSize;
+        min-width: 40px;
+    }
+
+    .mx_SpaceButton {
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        padding: 4px 4px 4px 0;
+        width: 100%;
+
+        &.mx_SpaceButton_active {
+            &:not(.mx_SpaceButton_narrow) .mx_SpaceButton_selectionWrapper {
+                background-color: $activeBackgroundColor;
+            }
+
+            &.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
+                padding: $activeBorderTransparentGap;
+                border: 3px $activeBorderColor solid;
+            }
+        }
+
+        .mx_SpaceButton_selectionWrapper {
+            position: relative;
+            display: flex;
+            flex: 1;
+            align-items: center;
+            border-radius: 12px;
+            padding: 4px;
+        }
+
+        &:not(.mx_SpaceButton_narrow) {
+            .mx_SpaceButton_selectionWrapper {
+                width: 100%;
+                padding-right: 16px;
+                overflow: hidden;
+            }
+        }
+
+        .mx_SpaceButton_name {
+            flex: 1;
+            margin-left: 8px;
+            white-space: nowrap;
+            display: block;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            padding-right: 8px;
+            font-size: $font-14px;
+            line-height: $font-18px;
+        }
+
+        .mx_SpaceButton_toggleCollapse {
+            width: $gutterSize;
+            height: 20px;
+            mask-position: center;
+            mask-size: 20px;
+            mask-repeat: no-repeat;
+            background-color: $roomlist-header-color;
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        }
+
+        .mx_SpaceButton_icon {
+            width: $topLevelHeight;
+            min-width: $topLevelHeight;
+            height: $topLevelHeight;
+            border-radius: 8px;
+            position: relative;
+
+            &::before {
+                position: absolute;
+                content: '';
+                width: $topLevelHeight;
+                height: $topLevelHeight;
+                top: 0;
+                left: 0;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                mask-size: 18px;
+            }
+        }
+
+        &.mx_SpaceButton_home .mx_SpaceButton_icon {
+            background-color: #ffffff;
+
+            &::before {
+                background-color: #3f3d3d;
+                mask-image: url('$(res)/img/element-icons/home.svg');
+            }
+        }
+
+        &.mx_SpaceButton_new .mx_SpaceButton_icon {
+            background-color: $accent-color;
+            transition: all .1s ease-in-out; // TODO transition
+
+            &::before {
+                background-color: #ffffff;
+                mask-image: url('$(res)/img/element-icons/plus.svg');
+                transition: all .2s ease-in-out; // TODO transition
+            }
+        }
+
+        &.mx_SpaceButton_newCancel .mx_SpaceButton_icon {
+            background-color: $icon-button-color;
+
+            &::before {
+                transform: rotate(45deg);
+            }
+        }
+
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+
+        .mx_SpaceButton_menuButton {
+            width: 20px;
+            min-width: 20px; // yay flex
+            height: 20px;
+            margin-top: auto;
+            margin-bottom: auto;
+            display: none;
+            position: absolute;
+            right: 4px;
+
+            &::before {
+                top: 2px;
+                left: 2px;
+                content: '';
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                mask-position: center;
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                mask-image: url('$(res)/img/element-icons/context-menu.svg');
+                background: $primary-fg-color;
+            }
+        }
+    }
+
+    .mx_SpacePanel_badgeContainer {
+        position: absolute;
+
+        // Create a flexbox to make aligning dot badges easier
+        display: flex;
+        align-items: center;
+
+        .mx_NotificationBadge {
+            margin: 0 2px; // centering
+        }
+
+        .mx_NotificationBadge_dot {
+            // make the smaller dot occupy the same width for centering
+            margin: 0 7px;
+        }
+    }
+
+    &.collapsed {
+        .mx_SpaceButton {
+            .mx_SpacePanel_badgeContainer {
+                right: 0;
+                top: 0;
+
+                .mx_NotificationBadge {
+                    background-clip: padding-box;
+                }
+
+                .mx_NotificationBadge_dot {
+                    margin: 0 -1px 0 0;
+                    border: 3px solid $groupFilterPanel-bg-color;
+                }
+
+                .mx_NotificationBadge_2char,
+                .mx_NotificationBadge_3char {
+                    margin: -5px -5px 0 0;
+                    border: 2px solid $groupFilterPanel-bg-color;
+                }
+            }
+
+            &.mx_SpaceButton_active .mx_SpacePanel_badgeContainer {
+                // when we draw the selection border we move the relative bounds of our parent
+                // so update our position within the bounds of the parent to maintain position overall
+                right: -3px;
+                top: -3px;
+            }
+        }
+    }
+
+    &:not(.collapsed) {
+        .mx_SpacePanel_badgeContainer {
+            position: absolute;
+            right: 4px;
+        }
+
+        .mx_SpaceButton:hover,
+        .mx_SpaceButton:focus-within,
+        .mx_SpaceButton_hasMenuOpen {
+            &:not(.mx_SpaceButton_home):not(.mx_SpaceButton_invite) {
+                // Hide the badge container on hover because it'll be a menu button
+                .mx_SpacePanel_badgeContainer {
+                    width: 0;
+                    height: 0;
+                    display: none;
+                }
+
+                .mx_SpaceButton_menuButton {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    /* root space buttons are bigger and not indented */
+    & > .mx_AutoHideScrollbar {
+        & > .mx_SpaceButton {
+            height: $topLevelHeight;
+
+            &.mx_SpaceButton_active::before {
+                height: $topLevelHeight;
+            }
+        }
+
+        & > ul {
+            padding-left: 0;
+        }
+    }
+}
+
+.mx_SpacePanel_contextMenu {
+    .mx_SpacePanel_contextMenu_header {
+        margin: 12px 16px 12px;
+        font-weight: $font-semi-bold;
+        font-size: $font-15px;
+        line-height: $font-18px;
+    }
+
+    .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
+        color: $accent-color;
+
+        .mx_SpacePanel_iconInvite::before {
+            background-color: $accent-color;
+            mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        }
+    }
+
+    .mx_SpacePanel_iconSettings::before {
+        mask-image: url('$(res)/img/element-icons/settings.svg');
+    }
+
+    .mx_SpacePanel_iconLeave::before {
+        mask-image: url('$(res)/img/element-icons/leave.svg');
+    }
+
+    .mx_SpacePanel_iconMembers::before {
+        mask-image: url('$(res)/img/element-icons/room/members.svg');
+    }
+
+    .mx_SpacePanel_iconPlus::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
+    }
+
+    .mx_SpacePanel_iconHash::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+    }
+
+    .mx_SpacePanel_iconExplore::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+    }
+}
+
+
+.mx_SpacePanel_sharePublicSpace {
+    margin: 0;
+}
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@ -0,0 +1,315 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
+    max-width: 960px;
+    height: 100%;
+}
+
+.mx_SpaceRoomDirectory {
+    height: 100%;
+    margin-bottom: 12px;
+    color: $primary-fg-color;
+    word-break: break-word;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_SpaceRoomDirectory,
+.mx_SpaceRoomView_landing {
+    .mx_Dialog_title {
+        display: flex;
+
+        .mx_BaseAvatar {
+            margin-right: 12px;
+            align-self: center;
+        }
+
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+
+        > div {
+            > h1 {
+                font-weight: $font-semi-bold;
+                font-size: $font-18px;
+                line-height: $font-22px;
+                margin: 0;
+            }
+
+            > div {
+                font-weight: 400;
+                color: $secondary-fg-color;
+                font-size: $font-15px;
+                line-height: $font-24px;
+            }
+        }
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
+
+    .mx_SearchBox {
+        margin: 24px 0 16px;
+    }
+
+    .mx_SpaceRoomDirectory_noResults {
+        text-align: center;
+
+        > div {
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-fg-color;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_listHeader {
+        display: flex;
+        min-height: 32px;
+        align-items: center;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $primary-fg-color;
+
+        .mx_AccessibleButton {
+            padding: 4px 12px;
+            font-weight: normal;
+
+            & + .mx_AccessibleButton {
+                margin-left: 16px;
+            }
+        }
+
+        .mx_AccessibleButton_kind_danger_outline,
+        .mx_AccessibleButton_kind_primary_outline {
+            padding: 3px 12px; // to account for the 1px border
+        }
+
+        > span {
+            margin-left: auto;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_error {
+        position: relative;
+        font-weight: $font-semi-bold;
+        color: $notice-primary-color;
+        font-size: $font-15px;
+        line-height: $font-18px;
+        margin: 20px auto 12px;
+        padding-left: 24px;
+        width: max-content;
+
+        &::before {
+            content: "";
+            position: absolute;
+            height: 16px;
+            width: 16px;
+            left: 0;
+            background-image: url("$(res)/img/element-icons/warning-badge.svg");
+        }
+    }
+}
+
+.mx_SpaceRoomDirectory_list {
+    margin-top: 16px;
+    padding-bottom: 40px;
+
+    .mx_SpaceRoomDirectory_roomCount {
+        > h3 {
+            display: inline;
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            line-height: $font-22px;
+            color: $primary-fg-color;
+        }
+
+        > span {
+            margin-left: 8px;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $secondary-fg-color;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_subspace {
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_subspace_toggle {
+        position: absolute;
+        left: -1px;
+        top: 10px;
+        height: 16px;
+        width: 16px;
+        border-radius: 4px;
+        background-color: $primary-bg-color;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 16px;
+            width: 16px;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: $tertiary-fg-color;
+            mask-size: 16px;
+            transform: rotate(270deg);
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        }
+
+        &.mx_SpaceRoomDirectory_subspace_toggle_shown::before {
+            transform: rotate(0deg);
+        }
+    }
+
+    .mx_SpaceRoomDirectory_subspace_children {
+        position: relative;
+        padding-left: 12px;
+    }
+
+    .mx_SpaceRoomDirectory_roomTile {
+        position: relative;
+        padding: 8px 16px;
+        border-radius: 8px;
+        min-height: 56px;
+        box-sizing: border-box;
+
+        display: grid;
+        grid-template-columns: 20px auto max-content;
+        grid-column-gap: 8px;
+        grid-row-gap: 6px;
+        align-items: center;
+
+        .mx_BaseAvatar {
+            grid-row: 1;
+            grid-column: 1;
+        }
+
+        .mx_SpaceRoomDirectory_roomTile_name {
+            font-weight: $font-semi-bold;
+            font-size: $font-15px;
+            line-height: $font-18px;
+            grid-row: 1;
+            grid-column: 2;
+
+            .mx_InfoTooltip {
+                display: inline;
+                margin-left: 12px;
+                color: $tertiary-fg-color;
+                font-size: $font-12px;
+                line-height: $font-15px;
+
+                .mx_InfoTooltip_icon {
+                    margin-right: 4px;
+                    position: relative;
+                    vertical-align: text-top;
+
+                    &::before {
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                    }
+                }
+            }
+        }
+
+        .mx_SpaceRoomDirectory_roomTile_info {
+            font-size: $font-14px;
+            line-height: $font-18px;
+            color: $secondary-fg-color;
+            grid-row: 2;
+            grid-column: 1/3;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+
+        .mx_SpaceRoomDirectory_actions {
+            text-align: right;
+            margin-left: 20px;
+            grid-column: 3;
+            grid-row: 1/3;
+
+            .mx_AccessibleButton {
+                line-height: $font-24px;
+                padding: 4px 16px;
+                display: inline-block;
+                visibility: hidden;
+            }
+
+            .mx_AccessibleButton_kind_danger_outline,
+            .mx_AccessibleButton_kind_primary_outline {
+                padding: 3px 16px; // to account for the 1px border
+            }
+
+            .mx_Checkbox {
+                display: inline-flex;
+                vertical-align: middle;
+                margin-left: 12px;
+            }
+        }
+
+        &:hover {
+            background-color: $groupFilterPanel-bg-color;
+
+            .mx_AccessibleButton {
+                visibility: visible;
+            }
+        }
+    }
+
+    .mx_SpaceRoomDirectory_roomTile,
+    .mx_SpaceRoomDirectory_subspace_children {
+        &::before {
+            content: "";
+            position: absolute;
+            background-color: $groupFilterPanel-bg-color;
+            width: 1px;
+            height: 100%;
+            left: 6px;
+            top: 0;
+        }
+    }
+
+    .mx_SpaceRoomDirectory_actions {
+        .mx_SpaceRoomDirectory_actionsText {
+            font-weight: normal;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+        }
+    }
+
+    > hr {
+        border: none;
+        height: 1px;
+        background-color: rgba(141, 151, 165, 0.2);
+        margin: 20px 0;
+    }
+
+    .mx_SpaceRoomDirectory_createRoom {
+        display: block;
+        margin: 16px auto 0;
+        width: max-content;
+    }
+}
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@ -0,0 +1,569 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$SpaceRoomViewInnerWidth: 428px;
+
+@define-mixin SpacePillButton {
+    position: relative;
+    padding: 16px 32px 16px 72px;
+    width: 432px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    border: 1px solid $input-border-color;
+    font-size: $font-15px;
+    margin: 20px 0;
+
+    > h3 {
+        font-weight: $font-semi-bold;
+        margin: 0 0 4px;
+    }
+
+    > span {
+        color: $secondary-fg-color;
+    }
+
+    &::before {
+        position: absolute;
+        content: '';
+        width: 32px;
+        height: 32px;
+        top: 24px;
+        left: 20px;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 24px;
+        background-color: $tertiary-fg-color;
+    }
+
+    &:hover {
+        border-color: $accent-color;
+
+        &::before {
+            background-color: $accent-color;
+        }
+
+        > span {
+            color: $primary-fg-color;
+        }
+    }
+}
+
+.mx_SpaceRoomView {
+    .mx_MainSplit > div:first-child {
+        padding: 80px 60px;
+        flex-grow: 1;
+        max-height: 100%;
+        overflow-y: auto;
+
+        h1 {
+            margin: 0;
+            font-size: $font-24px;
+            font-weight: $font-semi-bold;
+            color: $primary-fg-color;
+            width: max-content;
+        }
+
+        .mx_SpaceRoomView_description {
+            font-size: $font-15px;
+            color: $secondary-fg-color;
+            margin-top: 12px;
+            margin-bottom: 24px;
+            max-width: $SpaceRoomViewInnerWidth;
+        }
+
+        .mx_AddExistingToSpace {
+            max-width: $SpaceRoomViewInnerWidth;
+
+            .mx_AddExistingToSpace_content {
+                height: calc(100vh - 360px);
+                max-height: 400px;
+            }
+        }
+
+        &:not(.mx_SpaceRoomView_landing) .mx_SpaceFeedbackPrompt {
+            width: $SpaceRoomViewInnerWidth;
+        }
+
+        .mx_SpaceRoomView_buttons {
+            display: block;
+            margin-top: 44px;
+            width: $SpaceRoomViewInnerWidth;
+            text-align: right; // button alignment right
+
+            .mx_AccessibleButton_hasKind {
+                padding: 8px 22px;
+                margin-left: 16px;
+            }
+
+            input.mx_AccessibleButton {
+                border: none; // override default styles
+            }
+        }
+
+        .mx_Field {
+            max-width: $SpaceRoomViewInnerWidth;
+
+            & + .mx_Field {
+                margin-top: 28px;
+            }
+        }
+
+        .mx_SpaceRoomView_errorText {
+            font-weight: $font-semi-bold;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $notice-primary-color;
+            margin-bottom: 28px;
+        }
+
+        .mx_AccessibleButton_disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    .mx_SpaceRoomView_preview {
+        padding: 32px 24px !important; // override default padding from above
+        margin: auto;
+        max-width: 480px;
+        box-sizing: border-box;
+        box-shadow: 2px 15px 30px $dialog-shadow-color;
+        border-radius: 8px;
+        position: relative;
+
+        // XXX remove this when spaces leaves Beta
+        .mx_BetaCard_betaPill {
+            position: absolute;
+            right: 24px;
+            top: 32px;
+        }
+        // XXX remove this when spaces leaves Beta
+        .mx_SpaceRoomView_preview_spaceBetaPrompt {
+            font-weight: $font-semi-bold;
+            font-size: $font-14px;
+            line-height: $font-24px;
+            color: $primary-fg-color;
+            margin-top: 24px;
+            position: relative;
+            padding-left: 24px;
+
+            .mx_AccessibleButton_kind_link {
+                display: inline;
+                padding: 0;
+                font-size: inherit;
+                line-height: inherit;
+            }
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $font-24px;
+                width: 20px;
+                left: 0;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+                background-color: $secondary-fg-color;
+            }
+        }
+
+        .mx_SpaceRoomView_preview_inviter {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            font-size: $font-15px;
+
+            > div {
+                margin-left: 8px;
+
+                .mx_SpaceRoomView_preview_inviter_name {
+                    line-height: $font-18px;
+                }
+
+                .mx_SpaceRoomView_preview_inviter_mxid {
+                    line-height: $font-24px;
+                    color: $secondary-fg-color;
+                }
+            }
+        }
+
+        > .mx_BaseAvatar_image,
+        > .mx_BaseAvatar > .mx_BaseAvatar_image {
+            border-radius: 12px;
+        }
+
+        h1.mx_SpaceRoomView_preview_name {
+            margin: 20px 0 !important; // override default margin from above
+        }
+
+        .mx_SpaceRoomView_preview_topic {
+            font-size: $font-14px;
+            line-height: $font-22px;
+            color: $secondary-fg-color;
+            margin: 20px 0;
+            max-height: 160px;
+            overflow-y: auto;
+        }
+
+        .mx_SpaceRoomView_preview_joinButtons {
+            margin-top: 20px;
+
+            .mx_AccessibleButton {
+                width: 200px;
+                box-sizing: border-box;
+                padding: 14px 0;
+
+                & + .mx_AccessibleButton {
+                    margin-left: 20px;
+                }
+            }
+        }
+    }
+
+    .mx_SpaceRoomView_landing {
+        > .mx_BaseAvatar_image,
+        > .mx_BaseAvatar > .mx_BaseAvatar_image {
+            border-radius: 12px;
+        }
+
+        .mx_SpaceRoomView_landing_name {
+            margin: 24px 0 16px;
+            font-size: $font-15px;
+            color: $secondary-fg-color;
+
+            > span {
+                display: inline-block;
+            }
+
+            .mx_SpaceRoomView_landing_nameRow {
+                margin-top: 12px;
+
+                > h1 {
+                    display: inline-block;
+                }
+            }
+
+            .mx_SpaceRoomView_landing_inviter {
+                .mx_BaseAvatar {
+                    margin-right: 4px;
+                    vertical-align: middle;
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_landing_info {
+            display: flex;
+            align-items: center;
+
+            .mx_SpaceRoomView_info {
+                display: inline-block;
+                margin: 0 auto 0 0;
+            }
+
+            .mx_FacePile {
+                display: inline-block;
+                margin-right: 12px;
+
+                .mx_FacePile_faces {
+                    cursor: pointer;
+                }
+            }
+
+            .mx_SpaceRoomView_landing_inviteButton {
+                position: relative;
+                padding: 4px 18px 4px 40px;
+                line-height: $font-24px;
+                height: min-content;
+
+                &::before {
+                    position: absolute;
+                    content: "";
+                    left: 8px;
+                    height: 16px;
+                    width: 16px;
+                    background: #ffffff; // white icon fill
+                    mask-position: center;
+                    mask-size: 16px;
+                    mask-repeat: no-repeat;
+                    mask-image: url('$(res)/img/element-icons/room/invite.svg');
+                }
+            }
+
+            .mx_SpaceRoomView_landing_settingsButton {
+                position: relative;
+                margin-left: 16px;
+                width: 24px;
+                height: 24px;
+
+                &::before {
+                    position: absolute;
+                    content: "";
+                    left: 0;
+                    top: 0;
+                    height: 24px;
+                    width: 24px;
+                    background: $tertiary-fg-color;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    mask-image: url('$(res)/img/element-icons/settings.svg');
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_landing_topic {
+            font-size: $font-15px;
+            margin-top: 12px;
+            margin-bottom: 16px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
+        > hr {
+            border: none;
+            height: 1px;
+            background-color: $groupFilterPanel-bg-color;
+        }
+
+        .mx_SearchBox {
+            margin: 0 0 20px;
+        }
+
+        .mx_SpaceFeedbackPrompt {
+            margin-bottom: 16px;
+
+            // hide the HR as we have our own
+            & + hr {
+                display: none;
+            }
+        }
+    }
+
+    .mx_SpaceRoomView_privateScope {
+        > .mx_AccessibleButton {
+            @mixin SpacePillButton;
+        }
+
+        .mx_SpaceRoomView_privateScope_justMeButton::before {
+            mask-image: url('$(res)/img/element-icons/room/members.svg');
+        }
+
+        .mx_SpaceRoomView_privateScope_meAndMyTeammatesButton::before {
+            mask-image: url('$(res)/img/element-icons/community-members.svg');
+        }
+    }
+
+    .mx_SpaceRoomView_betaWarning {
+        padding: 12px 12px 12px 54px;
+        position: relative;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        width: 432px;
+        border-radius: 8px;
+        background-color: $info-plinth-bg-color;
+        color: $secondary-fg-color;
+        box-sizing: border-box;
+
+        > h3 {
+            font-weight: $font-semi-bold;
+            font-size: inherit;
+            line-height: inherit;
+            margin: 0;
+        }
+
+        > p {
+            font-size: inherit;
+            line-height: inherit;
+            margin: 0;
+        }
+
+        &::before {
+            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            content: '';
+            width: 20px;
+            height: 20px;
+            position: absolute;
+            top: 14px;
+            left: 14px;
+            background-color: $secondary-fg-color;
+        }
+    }
+
+    .mx_SpaceRoomView_inviteTeammates {
+        // XXX remove this when spaces leaves Beta
+        .mx_SpaceRoomView_inviteTeammates_betaDisclaimer {
+            padding: 58px 16px 16px;
+            position: relative;
+            border-radius: 8px;
+            background-color: $header-panel-bg-color;
+            max-width: $SpaceRoomViewInnerWidth;
+            margin: 20px 0 30px;
+            box-sizing: border-box;
+
+            .mx_BetaCard_betaPill {
+                position: absolute;
+                left: 16px;
+                top: 16px;
+            }
+        }
+
+        .mx_SpaceRoomView_inviteTeammates_buttons {
+            color: $secondary-fg-color;
+            margin-top: 28px;
+
+            .mx_AccessibleButton {
+                position: relative;
+                display: inline-block;
+                padding-left: 32px;
+                line-height: 24px; // to center icons
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    height: 24px;
+                    width: 24px;
+                    top: 0;
+                    left: 0;
+                    background-color: $secondary-fg-color;
+                    mask-repeat: no-repeat;
+                    mask-position: center;
+                    mask-size: contain;
+                }
+
+                & + .mx_AccessibleButton {
+                    margin-left: 32px;
+                }
+            }
+
+            .mx_SpaceRoomView_inviteTeammates_inviteDialogButton::before {
+                mask-image: url('$(res)/img/element-icons/room/invite.svg');
+            }
+        }
+    }
+}
+
+.mx_SpaceRoomView_info {
+    color: $secondary-fg-color;
+    font-size: $font-15px;
+    line-height: $font-24px;
+    margin: 20px 0;
+
+    .mx_SpaceRoomView_info_public,
+    .mx_SpaceRoomView_info_private {
+        padding-left: 20px;
+        position: relative;
+
+        &::before {
+            position: absolute;
+            content: "";
+            width: 20px;
+            height: 20px;
+            top: 0;
+            left: -2px;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            background-color: $tertiary-fg-color;
+        }
+    }
+
+    .mx_SpaceRoomView_info_public::before {
+        mask-size: 12px;
+        mask-image: url("$(res)/img/globe.svg");
+    }
+
+    .mx_SpaceRoomView_info_private::before {
+        mask-size: 14px;
+        mask-image: url("$(res)/img/element-icons/lock.svg");
+    }
+
+    .mx_AccessibleButton_kind_link {
+        color: inherit;
+        position: relative;
+        padding-left: 16px;
+
+        &::before {
+            content: "·"; // visual separator
+            position: absolute;
+            left: 6px;
+        }
+    }
+}
+
+.mx_SpaceFeedbackPrompt {
+    margin-top: 18px;
+    margin-bottom: 12px;
+
+    > hr {
+        border: none;
+        border-top: 1px solid $input-border-color;
+        margin-bottom: 12px;
+    }
+
+    > div {
+        display: flex;
+        flex-direction: row;
+        font-size: $font-15px;
+        line-height: $font-24px;
+
+        > span {
+            color: $secondary-fg-color;
+            position: relative;
+            padding-left: 32px;
+            font-size: inherit;
+            line-height: inherit;
+            margin-right: auto;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 2px;
+                height: 20px;
+                width: 20px;
+                background-color: $secondary-fg-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+                mask-position: center;
+            }
+        }
+
+        .mx_AccessibleButton_kind_link {
+            color: $accent-color;
+            position: relative;
+            padding: 0 0 0 24px;
+            margin-left: 8px;
+            font-size: inherit;
+            line-height: inherit;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                height: 16px;
+                width: 16px;
+                background-color: $accent-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
+                mask-position: center;
+            }
+        }
+    }
+}
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@ -1,6 +1,7 @@
 /*
 Copyright 2017 Travis Ralston
 Copyright 2019 New Vector Ltd
+Copyright 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -20,7 +21,6 @@ limitations under the License.
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: column;
-    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
@ -28,11 +28,93 @@ limitations under the License.
    margin-top: 8px;
 }

-.mx_TabbedView_tabLabels {
+.mx_TabbedView_tabsOnLeft {
+    flex-direction: column;
+    position: absolute;
+
+    .mx_TabbedView_tabLabels {
        width: 170px;
        max-width: 170px;
-    color: $tab-label-fg-color;
        position: fixed;
+    }
+
+    .mx_TabbedView_tabPanel {
+        margin-left: 240px; // 170px sidebar + 70px padding
+        flex-direction: column;
+    }
+
+    .mx_TabbedView_tabLabel_active {
+        background-color: $tab-label-active-bg-color;
+        color: $tab-label-active-fg-color;
+    }
+
+    .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
+        background-color: $tab-label-active-icon-bg-color;
+    }
+
+    .mx_TabbedView_maskedIcon {
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        margin-right: 16px;
+    }
+
+    .mx_TabbedView_maskedIcon::before {
+        mask-size: 16px;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+.mx_TabbedView_tabsOnTop {
+    flex-direction: column;
+
+    .mx_TabbedView_tabLabels {
+        display: flex;
+        margin-bottom: 8px;
+    }
+
+    .mx_TabbedView_tabLabel {
+        padding-left: 0px;
+        padding-right: 52px;
+
+        .mx_TabbedView_tabLabel_text {
+            font-size: 15px;
+            color: $tertiary-fg-color;
+        }
+    }
+
+    .mx_TabbedView_tabPanel {
+        flex-direction: row;
+    }
+
+    .mx_TabbedView_tabLabel_active {
+        color: $accent-color;
+        .mx_TabbedView_tabLabel_text {
+            color: $accent-color;
+        }
+    }
+
+    .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
+        background-color: $accent-color;
+    }
+
+    .mx_TabbedView_maskedIcon {
+        width: 22px;
+        height: 22px;
+        margin-left: 0px;
+        margin-right: 8px;
+    }
+
+    .mx_TabbedView_maskedIcon::before {
+        mask-size: 22px;
+        width: inherit;
+        height: inherit;
+    }
+}
+
+.mx_TabbedView_tabLabels {
+    color: $tab-label-fg-color;
 }

 .mx_TabbedView_tabLabel {
@ -46,43 +128,25 @@ limitations under the License.
    position: relative;
 }

-.mx_TabbedView_tabLabel_active {
-    background-color: $tab-label-active-bg-color;
-    color: $tab-label-active-fg-color;
-}
-
 .mx_TabbedView_maskedIcon {
-    margin-left: 8px;
-    margin-right: 16px;
-    width: 16px;
-    height: 16px;
    display: inline-block;
 }

 .mx_TabbedView_maskedIcon::before {
    display: inline-block;
-    background-color: $tab-label-icon-bg-color;
+    background-color: $icon-button-color;
    mask-repeat: no-repeat;
-    mask-size: 16px;
-    width: 16px;
-    height: 16px;
    mask-position: center;
    content: '';
 }

-.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
-    background-color: $tab-label-active-icon-bg-color;
-}
-
 .mx_TabbedView_tabLabel_text {
    vertical-align: middle;
 }

 .mx_TabbedView_tabPanel {
-    margin-left: 240px; // 170px sidebar + 70px padding
    flex-grow: 1;
    display: flex;
-    flex-direction: column;
    min-height: 0; // firefox
 }

--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -71,7 +71,7 @@ limitations under the License.
                &::before {
                    background-color: #ffffff;
                    mask-image: url('$(res)/img/e2e/normal.svg');
-                    mask-size: 90%;
+                    mask-size: 80%;
                }

                &::after {
@ -135,10 +135,14 @@ limitations under the License.
            float: right;
            display: flex;

-            .mx_FormButton {
+            .mx_AccessibleButton {
                min-width: 96px;
                box-sizing: border-box;
            }
+
+            .mx_AccessibleButton + .mx_AccessibleButton {
+                margin-left: 5px;
+            }
        }

        .mx_Toast_description {
@ -158,6 +162,10 @@ limitations under the License.
            }
        }

+        .mx_Toast_detail {
+            color: $secondary-fg-color;
+        }
+
        .mx_Toast_deviceID {
            font-size: $font-10px;
        }
--- a/res/css/structures/_UploadBar.scss
+++ b/res/css/structures/_UploadBar.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,47 +15,45 @@ limitations under the License.
 */

 .mx_UploadBar {
+    padding-left: 65px; // line up with the shield area in the composer
    position: relative;
+
+    .mx_ProgressBar {
+        width: calc(100% - 40px); // cheating at a right margin
+    }
 }

-.mx_UploadBar_uploadProgressOuter {
-    height: 5px;
-    margin-left: 63px;
-    margin-top: -1px;
-    padding-bottom: 5px;
-}
-
-.mx_UploadBar_uploadProgressInner {
-    background-color: $accent-color;
-    height: 5px;
-}
-
-.mx_UploadBar_uploadFilename {
+.mx_UploadBar_filename {
    margin-top: 5px;
-    margin-left: 65px;
-    opacity: 0.5;
-    color: $primary-fg-color;
-}
-
-.mx_UploadBar_uploadIcon {
-    float: left;
-    margin-top: 5px;
-    margin-left: 14px;
-}
-
-.mx_UploadBar_uploadCancel {
-    float: right;
-    margin-top: 5px;
-    margin-right: 10px;
+    color: $muted-fg-color;
    position: relative;
-    opacity: 0.6;
-    cursor: pointer;
-    z-index: 1;
+    padding-left: 22px; // 18px for icon, 4px for padding
+    font-size: $font-15px;
+    vertical-align: middle;
+
+    &::before {
+        content: "";
+        height: 18px;
+        width: 18px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        background-color: $muted-fg-color;
+        mask-image: url('$(res)/img/element-icons/upload.svg');
+    }
 }

-.mx_UploadBar_uploadBytes {
-    float: right;
-    margin-top: 5px;
-    margin-right: 30px;
-    color: $accent-color;
+.mx_UploadBar_cancel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 16px;
+    width: 16px;
+    margin-right: 16px; // align over rightmost button in composer
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: $muted-fg-color;
+    mask-image: url('$(res)/img/icons-close.svg');
 }
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@ -72,6 +72,7 @@ limitations under the License.
            position: relative; // to make default avatars work
            margin-right: 8px;
            height: 32px; // to remove the unknown 4px gap the browser puts below it
+            padding: 3px 0; // to align with and without using doubleName

            .mx_UserMenu_userAvatar {
                border-radius: 32px; // should match avatar size
@ -116,23 +117,45 @@ limitations under the License.
        .mx_UserMenu_headerButtons {
            // No special styles: the rest of the layout happens to make it work.
        }
+
+        .mx_UserMenu_dnd {
+            width: 24px;
+            height: 24px;
+            margin-right: 8px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                width: 24px;
+                height: 24px;
+                mask-position: center;
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                background: $muted-fg-color;
+            }
+
+            &.mx_UserMenu_dnd_noisy::before {
+                mask-image: url('$(res)/img/element-icons/notifications.svg');
+            }
+
+            &.mx_UserMenu_dnd_muted::before {
+                mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
+            }
+        }
    }

    &.mx_UserMenu_minimized {
-        .mx_UserMenu_userHeader {
-            .mx_UserMenu_row {
-                justify-content: center;
-            }
+        padding-right: 0px;

        .mx_UserMenu_userAvatarContainer {
-                margin-right: 0;
-            }
+            margin-right: 0px;
        }
    }
 }

 .mx_UserMenu_contextMenu {
-    width: 247px;
+    width: 258px;

    // These override the styles already present on the user menu rather than try to
    // define a new menu. They are specifically for the stacked menu when a community
@ -231,9 +254,29 @@ limitations under the License.
            justify-content: center;
        }

+        &.mx_UserMenu_contextMenu_guestPrompts,
        &.mx_UserMenu_contextMenu_hostingLink {
            padding-top: 0;
        }
+
+        &.mx_UserMenu_contextMenu_guestPrompts {
+            display: inline-block;
+
+            > span {
+                font-weight: 600;
+                display: block;
+
+                & + span {
+                    margin-top: 8px;
+                }
+            }
+
+            .mx_AccessibleButton_kind_link {
+                font-weight: normal;
+                font-size: inherit;
+                padding: 0;
+            }
+        }
    }

    .mx_IconizedContextMenu_icon {
@ -256,6 +299,9 @@ limitations under the License.
    .mx_UserMenu_iconHome::before {
        mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
    }
+    .mx_UserMenu_iconHosting::before {
+        mask-image: url('$(res)/img/element-icons/brands/element.svg');
+    }

    .mx_UserMenu_iconBell::before {
        mask-image: url('$(res)/img/element-icons/notifications.svg');
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_ViewSource_label_left {
-    float: left;
-}
-
-.mx_ViewSource_label_right {
-    float: right;
-}
-
-.mx_ViewSource_label_bottom {
+.mx_ViewSource_separator {
    clear: both;
    border-bottom: 1px solid #e5e5e5;
+    padding-top: 0.7em;
+    padding-bottom: 0.7em;
+}
+
+.mx_ViewSource_heading {
+    font-size: $font-17px;
+    font-weight: 400;
+    color: $primary-fg-color;
+    margin-top: 0.7em;
 }

 .mx_ViewSource pre {
@ -34,3 +35,7 @@ limitations under the License.
    word-wrap: break-word;
    white-space: pre-wrap;
 }
+
+.mx_ViewSource_details {
+    margin-top: 0.8em;
+}
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@ -26,50 +26,6 @@ limitations under the License.
    position: relative;
 }

-.mx_CompleteSecurity_clients {
-    width: max-content;
-    margin: 36px auto 0;
-
-    .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
-        position: relative;
-        width: 160px;
-        text-align: center;
-        padding-top: 64px;
-        display: inline-block;
-
-        &::before {
-            content: '';
-            position: absolute;
-            height: 48px;
-            width: 48px;
-            left: 56px;
-            top: 0;
-            background-color: $muted-fg-color;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-        }
-    }
-
-    .mx_CompleteSecurity_clients_desktop {
-        margin-right: 56px;
-    }
-
-    .mx_CompleteSecurity_clients_desktop::before {
-        mask-image: url('$(res)/img/feather-customised/monitor.svg');
-    }
-
-    .mx_CompleteSecurity_clients_mobile::before {
-        mask-image: url('$(res)/img/feather-customised/smartphone.svg');
-    }
-
-    p {
-        margin-top: 16px;
-        font-size: $font-12px;
-        color: $muted-fg-color;
-        text-align: center;
-    }
-}
-
 .mx_CompleteSecurity_heroIcon {
    width: 128px;
    height: 128px;
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@ -18,7 +18,7 @@ limitations under the License.
 .mx_Login_submit {
    @mixin mx_DialogButton;
    width: 100%;
-    margin-top: 35px;
+    margin-top: 24px;
    margin-bottom: 24px;
    box-sizing: border-box;
    text-align: center;
@ -33,12 +33,6 @@ limitations under the License.
    cursor: default;
 }

-.mx_AuthBody a.mx_Login_sso_link:link,
-.mx_AuthBody a.mx_Login_sso_link:hover,
-.mx_AuthBody a.mx_Login_sso_link:visited {
-    color: $button-primary-fg-color;
-}
-
 .mx_Login_loader {
    display: inline;
    position: relative;
@ -87,10 +81,13 @@ limitations under the License.
 }

 .mx_Login_underlinedServerName {
+    width: max-content;
    border-bottom: 1px dashed $accent-color;
 }

 div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    display: block;
+    margin: 0 auto;
    // style it as a link
    font-size: inherit;
    padding: 0;
--- a/res/css/views/audio_messages/_AudioPlayer.scss
+++ b/res/css/views/audio_messages/_AudioPlayer.scss
@ -0,0 +1,68 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AudioPlayer_container {
+    padding: 16px 12px 12px 12px;
+    max-width: 267px; // use max to make the control fit in the files/pinned panels
+
+    .mx_AudioPlayer_primaryContainer {
+        display: flex;
+
+        .mx_PlayPauseButton {
+            margin-right: 8px;
+        }
+
+        .mx_AudioPlayer_mediaInfo {
+            flex: 1;
+            overflow: hidden; // makes the ellipsis on the file name work
+
+            & > * {
+                display: block;
+            }
+
+            .mx_AudioPlayer_mediaName {
+                color: $primary-fg-color;
+                font-size: $font-15px;
+                line-height: $font-15px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                padding-bottom: 4px; // mimics the line-height differences in the Figma
+            }
+
+            .mx_AudioPlayer_byline {
+                font-size: $font-12px;
+                line-height: $font-12px;
+            }
+        }
+    }
+
+    .mx_AudioPlayer_seek {
+        display: flex;
+        align-items: center;
+
+        .mx_SeekBar {
+            flex: 1;
+        }
+
+        .mx_Clock {
+            width: $font-42px; // we're not using a monospace font, so fake it
+            min-width: $font-42px; // for flexbox
+            padding-left: 4px; // isolate from seek bar
+            text-align: right;
+        }
+    }
+}
--- a/res/css/views/audio_messages/_PlayPauseButton.scss
+++ b/res/css/views/audio_messages/_PlayPauseButton.scss
@ -0,0 +1,53 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PlayPauseButton {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    min-width: 32px; // for when the button is used in a flexbox
+    min-height: 32px; // for when the button is used in a flexbox
+    border-radius: 32px;
+    background-color: $voice-playback-button-bg-color;
+
+    &::before {
+        content: '';
+        position: absolute; // sizing varies by icon
+        background-color: $voice-playback-button-fg-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+    }
+
+    &.mx_PlayPauseButton_disabled::before {
+        opacity: 0.5;
+    }
+
+    &.mx_PlayPauseButton_play::before {
+        width: 13px;
+        height: 16px;
+        top: 8px; // center
+        left: 12px; // center
+        mask-image: url('$(res)/img/element-icons/play.svg');
+    }
+
+    &.mx_PlayPauseButton_pause::before {
+        width: 10px;
+        height: 12px;
+        top: 10px; // center
+        left: 11px; // center
+        mask-image: url('$(res)/img/element-icons/pause.svg');
+    }
+}
--- a/res/css/views/audio_messages/_PlaybackContainer.scss
+++ b/res/css/views/audio_messages/_PlaybackContainer.scss
@ -0,0 +1,56 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// Dev note: there's no actual component called <PlaybackContainer />. These classes
+// are shared amongst multiple voice message components.
+
+// Container for live recording and playback controls
+.mx_VoiceMessagePrimaryContainer {
+    // 7px top and bottom for visual design. 12px left & right, but the waveform (right)
+    // has a 1px padding on it that we want to account for.
+    padding: 7px 12px 7px 11px;
+
+    // Cheat at alignment a bit
+    display: flex;
+    align-items: center;
+
+    contain: content;
+
+    .mx_Waveform {
+        .mx_Waveform_bar {
+            background-color: $voice-record-waveform-incomplete-fg-color;
+            height: 100%;
+            /* Variable set by a JS component */
+            transform: scaleY(max(0.05, var(--barHeight)));
+
+            &.mx_Waveform_bar_100pct {
+                // Small animation to remove the mechanical feel of progress
+                transition: background-color 250ms ease;
+                background-color: $message-body-panel-fg-color;
+            }
+        }
+    }
+
+    .mx_Clock {
+        width: $font-42px; // we're not using a monospace font, so fake it
+        padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
+        padding-left: 8px; // isolate from recording circle / play control
+    }
+
+    &.mx_VoiceMessagePrimaryContainer_noWaveform {
+        max-width: 162px; // with all the padding this results in 185px wide
+    }
+}
--- a/res/css/views/audio_messages/_SeekBar.scss
+++ b/res/css/views/audio_messages/_SeekBar.scss
@ -0,0 +1,103 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// CSS inspiration from:
+// * https://www.w3schools.com/howto/howto_js_rangeslider.asp
+// * https://stackoverflow.com/a/28283806
+// * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+
+.mx_SeekBar {
+    // Dev note: we deliberately do not have the -ms-track (and friends) selectors because we don't
+    // need to support IE.
+
+    appearance: none; // default style override
+
+    width: 100%;
+    height: 1px;
+    background: $quaternary-fg-color;
+    outline: none; // remove blue selection border
+    position: relative; // for before+after pseudo elements later on
+
+    cursor: pointer;
+
+    &::-webkit-slider-thumb {
+        appearance: none; // default style override
+
+        // Dev note: This needs to be duplicated with the -moz-range-thumb selector
+        // because otherwise Edge (webkit) will fail to see the styles and just refuse
+        // to apply them.
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        background-color: $tertiary-fg-color;
+        cursor: pointer;
+    }
+
+    &::-moz-range-thumb {
+        width: 8px;
+        height: 8px;
+        border-radius: 8px;
+        background-color: $tertiary-fg-color;
+        cursor: pointer;
+
+        // Firefox adds a border on the thumb
+        border: none;
+    }
+
+    // This is for webkit support, but we can't limit the functionality of it to just webkit
+    // browsers. Firefox responds to webkit-prefixed values now, which means we can't use media
+    // or support queries to selectively apply the rule. An upside is that this CSS doesn't work
+    // in firefox, so it's just wasted CPU/GPU time.
+    &::before { // ::before to ensure it ends up under the thumb
+        content: '';
+        background-color: $tertiary-fg-color;
+
+        // Absolute positioning to ensure it overlaps with the existing bar
+        position: absolute;
+        top: 0;
+        left: 0;
+
+        // Sizing to match the bar
+        width: 100%;
+        height: 1px;
+
+        // And finally dynamic width without overly hurting the rendering engine.
+        transform-origin: 0 100%;
+        transform: scaleX(var(--fillTo));
+    }
+
+    // This is firefox's built-in support for the above, with 100% less hacks.
+    &::-moz-range-progress {
+        background-color: $tertiary-fg-color;
+        height: 1px;
+    }
+
+    &:disabled {
+        opacity: 0.5;
+    }
+
+    // Increase clickable area for the slider (approximately same size as browser default)
+    // We do it this way to keep the same padding and margins of the element, avoiding margin math.
+    // Source: https://front-back.com/expand-clickable-areas-for-a-better-touch-experience/
+    &::after {
+        content: '';
+        position: absolute;
+        top: -6px;
+        bottom: -6px;
+        left: 0;
+        right: 0;
+    }
+}
--- a/res/css/views/audio_messages/_Waveform.scss
+++ b/res/css/views/audio_messages/_Waveform.scss
@ -0,0 +1,40 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Waveform {
+    position: relative;
+    height: 30px; // tallest bar can only be 30px
+    top: 1px; // because of our border trick (see below), we're off by 1px of aligntment
+
+    display: flex;
+    align-items: center; // so the bars grow from the middle
+
+    overflow: hidden; // this is cheaper than a `max-height: calc(100% - 4px)` in the bar's CSS.
+
+    // A bar is meant to be a 2x2 circle when at zero height, and otherwise a 2px wide line
+    // with rounded caps.
+    .mx_Waveform_bar {
+        width: 0; // 0px width means we'll end up using the border as our width
+        border: 1px solid transparent; // transparent means we'll use the background colour
+        border-radius: 2px; // rounded end caps, based on the border
+        min-height: 0; // like the width, we'll rely on the border to give us height
+        max-height: 100%; // this makes the `height: 42%` work on the element
+        margin-left: 1px; // we want 2px between each bar, so 1px on either side for balance
+        margin-right: 1px;
+
+        // background color is handled by the parent components
+    }
+}
--- a/res/css/views/auth/_AuthBody.scss
+++ b/res/css/views/auth/_AuthBody.scss
@ -34,7 +34,11 @@ limitations under the License.
    h3 {
        font-size: $font-14px;
        font-weight: 600;
-        color: $authpage-primary-color;
+        color: $authpage-secondary-color;
+    }
+
+    h3.mx_AuthBody_centered {
+        text-align: center;
    }

    a:link,
@ -96,12 +100,6 @@ limitations under the License.
    }
 }

-.mx_AuthBody_editServerDetails {
-    padding-left: 1em;
-    font-size: $font-12px;
-    font-weight: normal;
-}
-
 .mx_AuthBody_fieldRow {
    display: flex;
    margin-bottom: 10px;
@ -146,6 +144,14 @@ limitations under the License.
    display: block;
    text-align: center;
    width: 100%;
+
+    > a {
+        font-weight: $font-semi-bold;
+    }
+}
+
+.mx_SSOButtons + .mx_AuthBody_changeFlow {
+    margin-top: 24px;
 }

 .mx_AuthBody_spinner {
--- a/res/css/views/auth/_AuthHeader.scss
+++ b/res/css/views/auth/_AuthHeader.scss
@ -18,7 +18,7 @@ limitations under the License.
    display: flex;
    flex-direction: column;
    width: 206px;
-    padding: 25px 40px;
+    padding: 25px 25px;
    box-sizing: border-box;
 }

--- a/res/css/views/auth/_AuthHeaderLogo.scss
+++ b/res/css/views/auth/_AuthHeaderLogo.scss
@ -17,7 +17,7 @@ limitations under the License.
 .mx_AuthHeaderLogo {
    margin-top: 15px;
    flex: 1;
-    padding: 0 10px;
+    padding: 0 25px;
 }

 .mx_AuthHeaderLogo img {
--- a/res/css/views/auth/_InteractiveAuthEntryComponents.scss
+++ b/res/css/views/auth/_InteractiveAuthEntryComponents.scss
@ -14,6 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_InteractiveAuthEntryComponents_emailWrapper {
+    padding-right: 100px;
+    position: relative;
+    margin-top: 32px;
+    margin-bottom: 32px;
+
+    &::before, &::after {
+        position: absolute;
+        width: 116px;
+        height: 116px;
+        content: "";
+        right: -10px;
+    }
+
+    &::before {
+        background-color: rgba(244, 246, 250, 0.91);
+        border-radius: 50%;
+        top: -20px;
+    }
+
+    &::after {
+        background-image: url('$(res)/img/element-icons/email-prompt.svg');
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        top: -25px;
+    }
+}
+
 .mx_InteractiveAuthEntryComponents_msisdnWrapper {
    text-align: center;
 }
@ -54,7 +83,10 @@ limitations under the License.
 }

 .mx_InteractiveAuthEntryComponents_termsPolicy {
-    display: block;
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
 }

 .mx_InteractiveAuthEntryComponents_passwordSection {
--- a/res/css/views/auth/_LanguageSelector.scss
+++ b/res/css/views/auth/_LanguageSelector.scss
@ -23,6 +23,7 @@ limitations under the License.
    font-size: $font-14px;
    font-weight: 600;
    color: $authpage-lang-color;
+    width: auto;
 }

 .mx_AuthBody_language .mx_Dropdown_arrow {
--- a/res/css/views/auth/_ServerTypeSelector.scss
+++ b/res/css/views/auth/_ServerTypeSelector.scss
@ -1,69 +0,0 @@
-/*
-Copyright 2019 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_ServerTypeSelector {
-    display: flex;
-    margin-bottom: 28px;
-}
-
-.mx_ServerTypeSelector_type {
-    margin: 0 5px;
-}
-
-.mx_ServerTypeSelector_type:first-child {
-    margin-left: 0;
-}
-
-.mx_ServerTypeSelector_type:last-child {
-    margin-right: 0;
-}
-
-.mx_ServerTypeSelector_label {
-    text-align: center;
-    font-weight: 600;
-    color: $authpage-primary-color;
-    margin: 8px 0;
-}
-
-.mx_ServerTypeSelector_type .mx_AccessibleButton {
-    padding: 10px;
-    border: 1px solid $input-border-color;
-    border-radius: 4px;
-}
-
-.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
-    border-color: $input-valid-border-color;
-}
-
-.mx_ServerTypeSelector_logo {
-    display: flex;
-    justify-content: center;
-    height: 18px;
-    margin-bottom: 12px;
-    font-weight: 600;
-    color: $authpage-primary-color;
-}
-
-.mx_ServerTypeSelector_logo > div {
-    display: flex;
-    width: 70%;
-    align-items: center;
-    justify-content: space-evenly;
-}
-
-.mx_ServerTypeSelector_description {
-    font-size: $font-10px;
-}
--- a/res/css/views/auth/_Welcome.scss
+++ b/res/css/views/auth/_Welcome.scss
@ -18,7 +18,6 @@ limitations under the License.
    display: flex;
    flex-direction: column;
    align-items: center;
-
    &.mx_WelcomePage_registrationDisabled {
        .mx_ButtonCreateAccount {
            display: none;
@ -27,6 +26,6 @@ limitations under the License.
 }

 .mx_Welcome .mx_AuthBody_language {
-    width: 120px;
+    width: 160px;
    margin-bottom: 10px;
 }
--- a/res/css/views/avatars/_BaseAvatar.scss
+++ b/res/css/views/avatars/_BaseAvatar.scss
@ -41,7 +41,7 @@ limitations under the License.

 .mx_BaseAvatar_image {
    object-fit: cover;
-    border-radius: 40px;
+    border-radius: 125px;
    vertical-align: top;
    background-color: $avatar-bg-color;
 }
--- a/res/css/views/avatars/_DecoratedRoomAvatar.scss
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
-.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
+.mx_DecoratedRoomAvatar, .mx_ExtraTile {
    position: relative;
+    contain: content;

    &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
        mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
--- a/res/css/views/beta/_BetaCard.scss
+++ b/res/css/views/beta/_BetaCard.scss
@ -0,0 +1,161 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BetaCard {
+    margin-bottom: 20px;
+    padding: 24px;
+    background-color: $settings-profile-placeholder-bg-color;
+    border-radius: 8px;
+    box-sizing: border-box;
+
+    .mx_BetaCard_columns {
+        display: flex;
+
+        > div {
+            .mx_BetaCard_title {
+                font-weight: $font-semi-bold;
+                font-size: $font-18px;
+                line-height: $font-22px;
+                color: $primary-fg-color;
+                margin: 4px 0 14px;
+
+                .mx_BetaCard_betaPill {
+                    margin-left: 12px;
+                }
+            }
+
+            .mx_BetaCard_caption {
+                font-size: $font-15px;
+                line-height: $font-20px;
+                color: $secondary-fg-color;
+                margin-bottom: 20px;
+            }
+
+            .mx_BetaCard_buttons .mx_AccessibleButton {
+                display: block;
+                margin: 12px 0;
+                padding: 7px 40px;
+                width: auto;
+            }
+
+            .mx_BetaCard_disclaimer {
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+                margin-top: 20px;
+            }
+        }
+
+        > img {
+            margin: auto 0 auto 20px;
+            width: 300px;
+            object-fit: contain;
+            height: 100%;
+        }
+    }
+
+    .mx_BetaCard_relatedSettings {
+        .mx_SettingsFlag {
+            margin: 16px 0 0;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            color: $primary-fg-color;
+
+            .mx_SettingsFlag_microcopy {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+            }
+        }
+    }
+}
+
+.mx_BetaCard_betaPill {
+    background-color: $accent-color-alt;
+    padding: 4px 10px;
+    border-radius: 8px;
+    text-transform: uppercase;
+    font-size: 12px;
+    line-height: 15px;
+    color: #FFFFFF;
+    display: inline-block;
+    vertical-align: text-bottom;
+
+    &.mx_BetaCard_betaPill_clickable {
+        cursor: pointer;
+    }
+}
+
+$pulse-color: $accent-color-alt;
+$dot-size: 12px;
+
+.mx_BetaDot {
+    border-radius: 50%;
+    margin: 10px;
+    height: $dot-size;
+    width: $dot-size;
+    transform: scale(1);
+    background: rgba($pulse-color, 1);
+    animation: mx_Beta_bluePulse 2s infinite;
+    animation-iteration-count: 20;
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        top: 0;
+        left: 0;
+        transform: scale(1);
+        transform-origin: center center;
+        animation-name: mx_Beta_bluePulse_shadow;
+        animation-duration: inherit;
+        animation-iteration-count: inherit;
+        border-radius: 50%;
+        background: rgba($pulse-color, 1);
+    }
+}
+
+@keyframes mx_Beta_bluePulse {
+    0% {
+        transform: scale(0.95);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
+@keyframes mx_Beta_bluePulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
--- a/res/css/views/context_menus/_CallContextMenu.scss
+++ b/res/css/views/context_menus/_CallContextMenu.scss
@ -0,0 +1,23 @@
+/*
+Copyright 2020 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallContextMenu_item {
+    width: 205px;
+    height: 40px;
+    padding-left: 16px;
+    line-height: 40px;
+    vertical-align: center;
+}
--- a/res/css/views/context_menus/_IconizedContextMenu.scss
+++ b/res/css/views/context_menus/_IconizedContextMenu.scss
@ -75,6 +75,11 @@ limitations under the License.
                background-color: $menu-selected-color;
            }

+            &.mx_AccessibleButton_disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
            img, .mx_IconizedContextMenu_icon { // icons
                width: 16px;
                min-width: 16px;
--- a/res/css/views/context_menus/_MessageContextMenu.scss
+++ b/res/css/views/context_menus/_MessageContextMenu.scss
@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2021 Michael Weimann <mail@michael-weimann.eu>

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,16 +16,69 @@ limitations under the License.
 */

 .mx_MessageContextMenu {
-    padding: 6px;
-}

-.mx_MessageContextMenu_field {
+    .mx_IconizedContextMenu_icon {
+        width: 16px;
+        height: 16px;
        display: block;
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-    white-space: nowrap;
-}

-.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
-    font-weight: bold;
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: block;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_MessageContextMenu_iconCollapse::before {
+        mask-image: url('$(res)/img/element-icons/message/chevron-up.svg');
+    }
+
+    .mx_MessageContextMenu_iconReport::before {
+        mask-image: url('$(res)/img/element-icons/warning-badge.svg');
+    }
+
+    .mx_MessageContextMenu_iconLink::before {
+        mask-image: url('$(res)/img/element-icons/link.svg');
+    }
+
+    .mx_MessageContextMenu_iconPermalink::before {
+        mask-image: url('$(res)/img/element-icons/room/share.svg');
+    }
+
+    .mx_MessageContextMenu_iconUnhidePreview::before {
+        mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
+    }
+
+    .mx_MessageContextMenu_iconForward::before {
+        mask-image: url('$(res)/img/element-icons/message/fwd.svg');
+    }
+
+    .mx_MessageContextMenu_iconRedact::before {
+        mask-image: url('$(res)/img/element-icons/trashcan.svg');
+    }
+
+    .mx_MessageContextMenu_iconResend::before {
+        mask-image: url('$(res)/img/element-icons/retry.svg');
+    }
+
+    .mx_MessageContextMenu_iconSource::before {
+        mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
+    }
+
+    .mx_MessageContextMenu_iconQuote::before {
+        mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
+    }
+
+    .mx_MessageContextMenu_iconPin::before {
+        mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
+    }
+
+    .mx_MessageContextMenu_iconUnpin::before {
+        mask-image: url('$(res)/img/element-icons/room/pin.svg');
+    }
 }
--- a/res/css/views/context_menus/_TagTileContextMenu.scss
+++ b/res/css/views/context_menus/_TagTileContextMenu.scss
@ -38,6 +38,15 @@ limitations under the License.
    mask-image: url('$(res)/img/element-icons/view-community.svg');
 }

+.mx_TagTileContextMenu_moveUp::before {
+    transform: rotate(180deg);
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+}
+
+.mx_TagTileContextMenu_moveDown::before {
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+}
+
 .mx_TagTileContextMenu_hideCommunity::before {
    mask-image: url('$(res)/img/element-icons/hide.svg');
 }
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@ -0,0 +1,281 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AddExistingToSpaceDialog_wrapper {
+    .mx_Dialog {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mx_AddExistingToSpace {
+    .mx_SearchBox {
+        // To match the space around the title
+        margin: 0 0 15px 0;
+        flex-grow: 0;
+    }
+
+    .mx_AddExistingToSpace_content {
+        flex-grow: 1;
+    }
+
+    .mx_AddExistingToSpace_noResults {
+        display: block;
+        margin-top: 24px;
+    }
+
+    .mx_AddExistingToSpace_section {
+        &:not(:first-child) {
+            margin-top: 24px;
+        }
+
+        > h3 {
+            margin: 0;
+            color: $secondary-fg-color;
+            font-size: $font-12px;
+            font-weight: $font-semi-bold;
+            line-height: $font-15px;
+        }
+
+        .mx_AddExistingToSpace_entry {
+            display: flex;
+            margin-top: 12px;
+
+            // we can't target .mx_BaseAvatar here as it'll break the decorated avatar styling
+            .mx_DecoratedRoomAvatar {
+                margin-right: 12px;
+            }
+
+            .mx_AddExistingToSpace_entry_name {
+                font-size: $font-15px;
+                line-height: 30px;
+                flex-grow: 1;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                margin-right: 12px;
+            }
+
+            .mx_Checkbox {
+                align-items: center;
+            }
+        }
+    }
+
+    .mx_AddExistingToSpace_section_spaces {
+        .mx_BaseAvatar {
+            margin-right: 12px;
+        }
+
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+        }
+    }
+
+    .mx_AddExistingToSpace_section_experimental {
+        position: relative;
+        border-radius: 8px;
+        margin: 12px 0;
+        padding: 8px 8px 8px 42px;
+        background-color: $header-panel-bg-color;
+
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $secondary-fg-color;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 10px;
+            top: calc(50% - 8px); // vertical centering
+            height: 16px;
+            width: 16px;
+            background-color: $secondary-fg-color;
+            mask-repeat: no-repeat;
+            mask-size: contain;
+            mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
+            mask-position: center;
+        }
+    }
+
+    .mx_AddExistingToSpace_footer {
+        display: flex;
+        margin-top: 20px;
+
+        > span {
+            flex-grow: 1;
+            font-size: $font-12px;
+            line-height: $font-15px;
+            color: $secondary-fg-color;
+
+            .mx_ProgressBar {
+                height: 8px;
+                width: 100%;
+
+                @mixin ProgressBarBorderRadius 8px;
+            }
+
+            .mx_AddExistingToSpace_progressText {
+                margin-top: 8px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
+            }
+
+            > * {
+                vertical-align: middle;
+            }
+        }
+
+        .mx_AddExistingToSpace_error {
+            padding-left: 12px;
+
+            > img {
+                align-self: center;
+            }
+
+            .mx_AddExistingToSpace_errorHeading {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $notice-primary-color;
+            }
+
+            .mx_AddExistingToSpace_errorCaption {
+                margin-top: 4px;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $primary-fg-color;
+            }
+        }
+
+        .mx_AccessibleButton {
+            display: inline-block;
+            align-self: center;
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 36px;
+        }
+
+        .mx_AddExistingToSpace_retryButton {
+            margin-left: 12px;
+            padding-left: 24px;
+            position: relative;
+
+            &::before {
+                content: '';
+                position: absolute;
+                background-color: $primary-fg-color;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/element-icons/retry.svg');
+                width: 18px;
+                height: 18px;
+                left: 0;
+            }
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+        }
+    }
+}
+
+.mx_AddExistingToSpaceDialog {
+    width: 480px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 80vh;
+
+    .mx_Dialog_title {
+        display: flex;
+
+        .mx_BaseAvatar_image {
+            border-radius: 8px;
+            margin: 0;
+            vertical-align: unset;
+        }
+
+        .mx_BaseAvatar {
+            display: inline-flex;
+            margin: auto 16px auto 5px;
+            vertical-align: middle;
+        }
+
+        > div {
+            > h1 {
+                font-weight: $font-semi-bold;
+                font-size: $font-18px;
+                line-height: $font-22px;
+                margin: 0;
+            }
+
+            .mx_AddExistingToSpaceDialog_onlySpace {
+                color: $secondary-fg-color;
+                font-size: $font-15px;
+                line-height: $font-24px;
+            }
+        }
+
+        .mx_Dropdown_input {
+            border: none;
+
+            > .mx_Dropdown_option {
+                padding-left: 0;
+                flex: unset;
+                height: unset;
+                color: $secondary-fg-color;
+                font-size: $font-15px;
+                line-height: $font-24px;
+
+                .mx_BaseAvatar {
+                    display: none;
+                }
+            }
+
+            .mx_Dropdown_menu {
+                .mx_AddExistingToSpaceDialog_dropdownOptionActive {
+                    color: $accent-color;
+                    padding-right: 32px;
+                    position: relative;
+
+                    &::before {
+                        content: '';
+                        width: 20px;
+                        height: 20px;
+                        top: 8px;
+                        right: 0;
+                        position: absolute;
+                        mask-position: center;
+                        mask-size: contain;
+                        mask-repeat: no-repeat;
+                        background-color: $accent-color;
+                        mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+                    }
+                }
+            }
+        }
+    }
+
+    .mx_AddExistingToSpace {
+        display: contents;
+    }
+}
--- a/res/css/views/dialogs/_BetaFeedbackDialog.scss
+++ b/res/css/views/dialogs/_BetaFeedbackDialog.scss
@ -0,0 +1,30 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BetaFeedbackDialog {
+    .mx_BetaFeedbackDialog_subheading {
+        color: $primary-fg-color;
+        font-size: $font-14px;
+        line-height: $font-20px;
+        margin-bottom: 24px;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+        font-size: inherit;
+        line-height: inherit;
+    }
+}
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@ -223,3 +223,54 @@ limitations under the License.
        content: ":";
    }
 }
+
+.mx_DevTools_SettingsExplorer {
+    table {
+        width: 100%;
+        table-layout: fixed;
+        border-collapse: collapse;
+
+        th {
+            // Colour choice: first one autocomplete gave me.
+            border-bottom: 1px solid $accent-color;
+            text-align: left;
+        }
+
+        td, th {
+            width: 360px; // "feels right" number
+
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        td + td, th + th {
+            width: auto;
+        }
+
+        tr:hover {
+            // Colour choice: first one autocomplete gave me.
+            background-color: $accent-color-50pct;
+        }
+    }
+
+    .mx_DevTools_SettingsExplorer_mutable {
+        background-color: $accent-color;
+    }
+
+    .mx_DevTools_SettingsExplorer_immutable {
+        background-color: $warning-color;
+    }
+
+    .mx_DevTools_SettingsExplorer_edit {
+        float: right;
+        margin-right: 16px;
+    }
+
+    .mx_DevTools_SettingsExplorer_warning {
+        border: 2px solid $warning-color;
+        border-radius: 4px;
+        padding: 4px;
+        margin-bottom: 8px;
+    }
+}
--- a/res/css/views/dialogs/_ForwardDialog.scss
+++ b/res/css/views/dialogs/_ForwardDialog.scss
@ -0,0 +1,159 @@
+/*
+Copyright 2021 Robin Townsend <robin@robin.town>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ForwardDialog {
+    width: 520px;
+    color: $primary-fg-color;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    min-height: 0;
+    height: 80vh;
+
+    > h3 {
+        margin: 0 0 6px;
+        color: $secondary-fg-color;
+        font-size: $font-12px;
+        font-weight: $font-semi-bold;
+        line-height: $font-15px;
+    }
+
+    > .mx_ForwardDialog_preview {
+        max-height: 30%;
+        flex-shrink: 0;
+        overflow-y: auto;
+
+        div {
+            pointer-events: none;
+        }
+
+        .mx_EventTile_msgOption {
+            display: none;
+        }
+
+        // When forwarding messages from encrypted rooms, EventTile will complain
+        // that our preview is unencrypted, which doesn't actually matter
+        .mx_EventTile_e2eIcon_unencrypted {
+            display: none;
+        }
+
+        // We also hide download links to not encourage users to try interacting
+        .mx_MFileBody_download {
+            display: none;
+        }
+    }
+
+    > hr {
+        width: 100%;
+        border: none;
+        border-top: 1px solid $input-border-color;
+        margin: 12px 0;
+    }
+
+    > .mx_ForwardList {
+        display: contents;
+
+        .mx_SearchBox {
+            // To match the space around the title
+            margin: 0 0 15px 0;
+            flex-grow: 0;
+        }
+
+        .mx_ForwardList_content {
+            flex-grow: 1;
+        }
+
+        .mx_ForwardList_noResults {
+            display: block;
+            margin-top: 24px;
+        }
+
+        .mx_ForwardList_results {
+            &:not(:first-child) {
+                margin-top: 24px;
+            }
+
+            .mx_ForwardList_entry {
+                display: flex;
+                justify-content: space-between;
+                height: 32px;
+                padding: 6px;
+                border-radius: 8px;
+
+                &:hover {
+                    background-color: $groupFilterPanel-bg-color;
+                }
+
+                .mx_ForwardList_roomButton {
+                    display: flex;
+                    margin-right: 12px;
+                    min-width: 0;
+
+                    .mx_DecoratedRoomAvatar {
+                        margin-right: 12px;
+                    }
+
+                    .mx_ForwardList_entry_name {
+                        font-size: $font-15px;
+                        line-height: 30px;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        margin-right: 12px;
+                    }
+                }
+
+                .mx_ForwardList_sendButton {
+                    position: relative;
+
+                    &:not(.mx_ForwardList_canSend) .mx_ForwardList_sendLabel {
+                        // Hide the "Send" label while preserving button size
+                        visibility: hidden;
+                    }
+
+                    .mx_ForwardList_sendIcon, .mx_NotificationBadge {
+                        position: absolute;
+                    }
+
+                    .mx_NotificationBadge {
+                        // Match the failed to send indicator's color with the disabled button
+                        background-color: $button-danger-disabled-fg-color;
+                    }
+
+                    &.mx_ForwardList_sending .mx_ForwardList_sendIcon {
+                        background-color: $button-primary-bg-color;
+                        mask-image: url('$(res)/img/element-icons/circle-sending.svg');
+                        mask-position: center;
+                        mask-repeat: no-repeat;
+                        mask-size: 14px;
+                        width: 14px;
+                        height: 14px;
+                    }
+
+                    &.mx_ForwardList_sent .mx_ForwardList_sendIcon {
+                        background-color: $button-primary-bg-color;
+                        mask-image: url('$(res)/img/element-icons/circle-sent.svg');
+                        mask-position: center;
+                        mask-repeat: no-repeat;
+                        mask-size: 14px;
+                        width: 14px;
+                        height: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/res/css/views/dialogs/_HostSignupDialog.scss
@ -0,0 +1,143 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_HostSignupDialog {
+    width: 90vw;
+    max-width: 580px;
+    height: 80vh;
+    max-height: 600px;
+    // Ensure dialog borders are always white as the HostSignupDialog
+    // does not yet support dark mode or theming in general.
+    // In the future we might want to pass the theme to the called
+    // iframe, should some hosting provider have that need.
+    background-color: #ffffff;
+
+    .mx_HostSignupDialog_info {
+        text-align: center;
+
+        .mx_HostSignupDialog_content_top {
+            margin-bottom: 24px;
+        }
+
+        .mx_HostSignupDialog_paragraphs {
+            text-align: left;
+            padding-left: 25%;
+            padding-right: 25%;
+        }
+
+        .mx_HostSignupDialog_buttons {
+            margin-bottom: 24px;
+            display: flex;
+            justify-content: center;
+
+            button {
+                padding: 12px;
+                margin: 0 16px;
+            }
+        }
+
+        .mx_HostSignupDialog_footer {
+            display: flex;
+            justify-content: center;
+            align-items: baseline;
+
+            img {
+                padding-right: 5px;
+            }
+        }
+    }
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background-color: #fff;
+        min-height: 540px;
+    }
+}
+
+.mx_HostSignupDialog_text_dark {
+    color: $primary-fg-color;
+}
+
+.mx_HostSignupDialog_text_light {
+    color: $secondary-fg-color;
+}
+
+.mx_HostSignup_maximize_button {
+    mask: url('$(res)/img/feather-customised/maximise.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+    width: 14px;
+    height: 14px;
+    background-color: $dialog-close-fg-color;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.mx_HostSignup_minimize_button {
+    mask: url('$(res)/img/feather-customised/minimise.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+    width: 14px;
+    height: 14px;
+    background-color: $dialog-close-fg-color;
+    cursor: pointer;
+    position: absolute;
+    top: 10px;
+    right: 25px;
+}
+
+.mx_HostSignup_persisted {
+    width: 90vw;
+    max-width: 580px;
+    height: 80vh;
+    max-height: 600px;
+    top: 0;
+    left: 0;
+    position: fixed;
+    display: none;
+}
+
+.mx_HostSignupDialog_minimized {
+    position: fixed;
+    bottom: 80px;
+    right: 26px;
+    width: 314px;
+    height: 217px;
+    overflow: hidden;
+
+    &.mx_Dialog {
+        padding: 12px;
+    }
+
+    .mx_Dialog_title {
+        text-align: left !important;
+        padding-left: 20px;
+        font-size: $font-15px;
+    }
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        background-color: #fff;
+    }
+}
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@ -14,9 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_InviteDialog_transferWrapper .mx_Dialog {
+    padding-bottom: 16px;
+}
+
 .mx_InviteDialog_addressBar {
    display: flex;
    flex-direction: row;
+    // Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
+    // for the user section gets weird.
+    margin: 8px 45px 0 0;

    .mx_InviteDialog_editor {
        flex: 1;
@ -27,37 +34,29 @@ limitations under the License.
        padding-left: 8px;
        overflow-x: hidden;
        overflow-y: auto;
+        display: flex;
+        flex-wrap: wrap;

        .mx_InviteDialog_userTile {
+            margin: 6px 6px 0 0;
            display: inline-block;
-            float: left;
-            position: relative;
-            top: 7px;
+            min-width: max-content; // prevent manipulation by flexbox
        }

-        // Using a textarea for this element, to circumvent autofill
-        // Mostly copied from AddressPickerDialog
-        textarea,
-        textarea:focus {
-            height: 34px;
-            line-height: $font-34px;
+        // Mostly copied from AddressPickerDialog; overrides bunch of our default text input styles
+        > input[type="text"] {
+            margin: 6px 0 !important;
+            height: 24px;
+            line-height: $font-24px;
            font-size: $font-14px;
            padding-left: 12px;
-            margin: 0 !important;
            border: 0 !important;
            outline: 0 !important;
            resize: none;
-            overflow: hidden;
            box-sizing: border-box;
-            word-wrap: nowrap;
-
-            // Roughly fill about 2/5ths of the available space. This is to try and 'fill' the
-            // remaining space after a bunch of pills, but is a bit hacky. Ideally we'd have
-            // support for "fill remaining width", but traditional tricks don't work with what
-            // we're pushing into this "field". Flexbox just makes things worse. The theory is
-            // that users won't need more than about 2/5ths of the input to find the person
-            // they're looking for.
-            width: 40%;
+            min-width: 40%;
+            flex: 1 !important;
+            color: $primary-fg-color !important;
        }
    }

@ -81,7 +80,7 @@ limitations under the License.
 }

 .mx_InviteDialog_section {
-    padding-bottom: 10px;
+    padding-bottom: 4px;

    h3 {
        font-size: $font-12px;
@ -90,6 +89,14 @@ limitations under the License.
        text-transform: uppercase;
    }

+    > p {
+        margin: 0;
+    }
+
+    > span {
+        color: $primary-fg-color;
+    }
+
    .mx_InviteDialog_subname {
        margin-bottom: 10px;
        margin-top: -10px; // HACK: Positioning with margins is bad
@ -98,6 +105,63 @@ limitations under the License.
    }
 }

+.mx_InviteDialog_section_hidden_suggestions_disclaimer {
+    padding: 8px 0 16px 0;
+    font-size: $font-14px;
+
+    > span {
+        color: $primary-fg-color;
+        font-weight: 600;
+    }
+
+    > p {
+        margin: 0;
+    }
+}
+
+.mx_InviteDialog_footer {
+    border-top: 1px solid $input-border-color;
+
+    > h3 {
+        margin: 12px 0;
+        font-size: $font-12px;
+        color: $muted-fg-color;
+        font-weight: bold;
+        text-transform: uppercase;
+    }
+
+    .mx_InviteDialog_footer_link {
+        display: flex;
+        justify-content: space-between;
+        border-radius: 4px;
+        border: solid 1px $light-fg-color;
+        padding: 8px;
+
+        > a {
+            text-decoration: none;
+            flex-shrink: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+
+    .mx_InviteDialog_footer_link_copy {
+        flex-shrink: 0;
+        cursor: pointer;
+        margin-left: 20px;
+        display: inherit;
+
+        > div {
+            mask-image: url($copy-button-url);
+            background-color: $message-action-bar-fg-color;
+            margin-left: 5px;
+            width: 20px;
+            height: 20px;
+            background-repeat: no-repeat;
+        }
+    }
+}
+
 .mx_InviteDialog_roomTile {
    cursor: pointer;
    padding: 5px 10px;
@ -148,6 +212,11 @@ limitations under the License.
        }
    }

+    .mx_InviteDialog_roomTile_nameStack {
+        display: inline-block;
+        overflow: hidden;
+    }
+
    .mx_InviteDialog_roomTile_name {
        font-weight: 600;
        font-size: $font-14px;
@ -161,6 +230,13 @@ limitations under the License.
        margin-left: 7px;
    }

+    .mx_InviteDialog_roomTile_name,
+    .mx_InviteDialog_roomTile_userId {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
    .mx_InviteDialog_roomTile_time {
        text-align: right;
        font-size: $font-12px;
@ -214,26 +290,165 @@ limitations under the License.
    }
 }

-.mx_InviteDialog {
+.mx_InviteDialog_other {
    // Prevent the dialog from jumping around randomly when elements change.
-    height: 590px;
+    height: 600px;
    padding-left: 20px; // the design wants some padding on the left
+
+    .mx_InviteDialog_userSections {
+        height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
+    }
+}
+
+.mx_InviteDialog_content {
+    height: calc(100% - 36px); // full height minus the size of the header
+    overflow: hidden;
+}
+
+.mx_InviteDialog_transfer {
+    width: 496px;
+    height: 466px;
+    flex-direction: column;
+
+    .mx_InviteDialog_content {
+        flex-direction: column;
+
+        .mx_TabbedView {
+            height: calc(100% - 60px);
+        }
+        overflow: visible;
+    }
+
+    .mx_InviteDialog_addressBar {
+        margin-top: 8px;
+    }
+
+    input[type="checkbox"] {
+        margin-right: 8px;
+    }
 }

 .mx_InviteDialog_userSections {
-    margin-top: 10px;
+    margin-top: 4px;
    overflow-y: auto;
-    padding-right: 45px;
-    height: 455px; // mx_InviteDialog's height minus some for the upper elements
+    padding: 0 45px 4px 0;
 }

-// Right margin for the design. We could apply this to the whole dialog, but then the scrollbar
-// for the user section gets weird.
-.mx_InviteDialog_helpText,
-.mx_InviteDialog_addressBar {
-    margin-right: 45px;
+.mx_InviteDialog_hasFooter .mx_InviteDialog_userSections {
+    height: calc(100% - 175px);
+}
+
+.mx_InviteDialog_helpText {
+    margin: 0;
 }

 .mx_InviteDialog_helpText .mx_AccessibleButton_kind_link {
    padding: 0;
 }
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    margin-top: 0;
+    border-color: $quaternary-fg-color;
+
+    input {
+        font-size: 18px;
+        font-weight: 600;
+        padding-top: 0;
+    }
+}
+
+.mx_InviteDialog_dialPad .mx_InviteDialog_dialPadField:focus-within {
+    border-color: $accent-color;
+}
+
+.mx_InviteDialog_dialPadField .mx_Field_postfix {
+    /* Remove border separator between postfix and field content */
+    border-left: none;
+}
+
+.mx_InviteDialog_dialPad {
+    width: 224px;
+    margin-top: 16px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_InviteDialog_dialPad .mx_DialPad {
+    row-gap: 16px;
+    column-gap: 48px;
+
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_InviteDialog_transferConsultConnect {
+    padding-top: 16px;
+    /* This wants a drop shadow the full width of the dialog, so relative-position it
+     * and make it wider, then compensate with padding
+     */
+    position: relative;
+    width: 496px;
+    left: -24px;
+    padding-left: 24px;
+    padding-right: 24px;
+    border-top: 1px solid $message-body-panel-bg-color;
+
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.mx_InviteDialog_transferConsultConnect_pushRight {
+    margin-left: auto;
+}
+
+.mx_InviteDialog_userDirectoryIcon::before {
+    mask-image: url('$(res)/img/voip/tab-userdirectory.svg');
+}
+
+.mx_InviteDialog_dialPadIcon::before {
+    mask-image: url('$(res)/img/voip/tab-dialpad.svg');
+}
+
+.mx_InviteDialog_multiInviterError {
+    > h4 {
+        font-size: $font-15px;
+        line-height: $font-24px;
+        color: $secondary-fg-color;
+        font-weight: normal;
+    }
+
+    > div {
+        .mx_InviteDialog_multiInviterError_entry {
+            margin-bottom: 24px;
+
+            .mx_InviteDialog_multiInviterError_entry_userProfile {
+                .mx_InviteDialog_multiInviterError_entry_name {
+                    margin-left: 6px;
+                    font-size: $font-15px;
+                    line-height: $font-24px;
+                    font-weight: $font-semi-bold;
+                    color: $primary-fg-color;
+                }
+
+                .mx_InviteDialog_multiInviterError_entry_userId {
+                    margin-left: 6px;
+                    font-size: $font-12px;
+                    line-height: $font-15px;
+                    color: $tertiary-fg-color;
+                }
+            }
+
+            .mx_InviteDialog_multiInviterError_entry_error {
+                margin-left: 32px;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $notice-primary-color;
+            }
+        }
+    }
+}
--- a/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
+++ b/res/css/views/dialogs/_RegistrationEmailPromptDialog.scss
@ -14,15 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import React from 'react';
+.mx_RegistrationEmailPromptDialog {
+    width: 417px;

-interface IProps {
+    .mx_Dialog_content {
+        margin-bottom: 24px;
+        color: $tertiary-fg-color;
+    }
+
+    .mx_Dialog_primary {
+        width: 100%;
+    }
 }
-
-const PulsedAvatar: React.FC<IProps> = (props) => {
-    return <div className="mx_PulsedAvatar">
-        {props.children}
-    </div>;
-};
-
-export default PulsedAvatar;
--- a/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
+++ b/res/css/views/dialogs/_RoomSettingsDialogBridges.scss
@ -89,24 +89,18 @@ limitations under the License.
            }
        }

-        .mx_showMore {
-            display: block;
-            text-align: left;
-            margin-top: 10px;
-        }
-
        .metadata {
            color: $muted-fg-color;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
            margin-bottom: 0;
-        }
-
-        .metadata.visible {
            overflow-y: visible;
            text-overflow: ellipsis;
            white-space: normal;
+            padding: 0;
+
+            > li {
+                padding: 0;
+                border: 0;
+            }
        }
    }
 }
--- a/res/css/views/dialogs/_ServerPickerDialog.scss
+++ b/res/css/views/dialogs/_ServerPickerDialog.scss
@ -0,0 +1,78 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ServerPickerDialog {
+    width: 468px;
+    box-sizing: border-box;
+
+    .mx_Dialog_content {
+        margin-bottom: 0;
+
+        > p {
+            color: $secondary-fg-color;
+            font-size: $font-14px;
+            margin: 16px 0;
+
+            &:first-of-type {
+                margin-bottom: 40px;
+            }
+
+            &:last-of-type {
+                margin: 0 24px 24px;
+            }
+        }
+
+        > h4 {
+            font-size: $font-15px;
+            font-weight: $font-semi-bold;
+            color: $secondary-fg-color;
+            margin-left: 8px;
+        }
+
+        > a {
+            color: $accent-color;
+            margin-left: 8px;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserverRadio {
+        input[type="radio"] + div {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserver {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-radius: unset;
+
+        > input {
+            padding-left: 0;
+        }
+
+        > label {
+            margin-left: 0;
+        }
+    }
+
+    .mx_AccessibleButton_kind_primary {
+        width: calc(100% - 64px);
+        margin: 0 8px;
+        padding: 15px 18px;
+    }
+}
--- a/res/css/views/dialogs/_SettingsDialog.scss
+++ b/res/css/views/dialogs/_SettingsDialog.scss
@ -15,7 +15,7 @@ limitations under the License.
 */

 // Not actually a component but things shared by settings components
-.mx_UserSettingsDialog, .mx_RoomSettingsDialog {
+.mx_UserSettingsDialog, .mx_RoomSettingsDialog, .mx_SpaceSettingsDialog {
    width: 90vw;
    max-width: 1000px;
    // set the height too since tabbed view scrolls itself.
--- a/res/css/views/dialogs/_ShareDialog.scss
+++ b/res/css/views/dialogs/_ShareDialog.scss
@ -50,7 +50,8 @@ limitations under the License.
    margin-left: 20px;
    display: inherit;
 }
-.mx_ShareDialog_matrixto_copy > div {
+.mx_ShareDialog_matrixto_copy::after {
+    content: "";
    mask-image: url($copy-button-url);
    background-color: $message-action-bar-fg-color;
    margin-left: 5px;
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss
@ -0,0 +1,100 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SpaceSettingsDialog {
+    color: $primary-fg-color;
+
+    .mx_SpaceSettings_errorText {
+        font-weight: $font-semi-bold;
+        font-size: $font-12px;
+        line-height: $font-15px;
+        color: $notice-primary-color;
+        margin-bottom: 28px;
+    }
+
+    .mx_ToggleSwitch {
+        display: inline-block;
+        vertical-align: middle;
+        margin-left: 16px;
+    }
+
+    .mx_SettingsTab_section {
+        .mx_SettingsTab_section_caption {
+            margin-top: 12px;
+            margin-bottom: 20px;
+        }
+
+        & + .mx_SettingsTab_subheading {
+            border-top: 1px solid $message-body-panel-bg-color;
+            margin-top: 0;
+            padding-top: 24px;
+        }
+
+        .mx_RadioButton {
+            margin-top: 8px;
+            margin-bottom: 4px;
+
+            .mx_RadioButton_content {
+                font-weight: $font-semi-bold;
+                line-height: $font-18px;
+                color: $primary-fg-color;
+            }
+
+            & + span {
+                font-size: $font-15px;
+                line-height: $font-18px;
+                color: $secondary-fg-color;
+                margin-left: 26px;
+            }
+        }
+
+        .mx_SettingsTab_showAdvanced {
+            margin: 16px 0;
+            padding: 0;
+        }
+
+        .mx_SettingsFlag {
+            margin-top: 24px;
+        }
+    }
+
+    .mx_SpaceSettingsDialog_buttons {
+        display: flex;
+        margin-top: 64px;
+
+        .mx_AccessibleButton {
+            display: inline-block;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            margin-left: auto;
+        }
+    }
+
+    .mx_AccessibleButton_hasKind {
+        padding: 8px 22px;
+    }
+
+    .mx_TabbedView_tabLabel {
+        .mx_SpaceSettingsDialog_generalIcon::before {
+            mask-image: url('$(res)/img/element-icons/settings.svg');
+        }
+
+        .mx_SpaceSettingsDialog_visibilityIcon::before {
+            mask-image: url('$(res)/img/element-icons/eye.svg');
+        }
+    }
+}
--- a/res/css/views/dialogs/_UntrustedDeviceDialog.scss
+++ b/res/css/views/dialogs/_UntrustedDeviceDialog.scss
@ -0,0 +1,26 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UntrustedDeviceDialog {
+    .mx_Dialog_title {
+        display: flex;
+        align-items: center;
+
+        .mx_E2EIcon {
+            margin-left: 0;
+        }
+    }
+}
--- a/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
+++ b/res/css/views/dialogs/_WidgetCapabilitiesPromptDialog.scss
@ -0,0 +1,75 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+.mx_WidgetCapabilitiesPromptDialog {
+    .text-muted {
+        font-size: $font-12px;
+    }
+
+    .mx_Dialog_content {
+        margin-bottom: 16px;
+    }
+
+    .mx_WidgetCapabilitiesPromptDialog_cap {
+        margin-top: 20px;
+        font-size: $font-15px;
+        line-height: $font-15px;
+
+        .mx_WidgetCapabilitiesPromptDialog_byline {
+            color: $muted-fg-color;
+            margin-left: 26px;
+            font-size: $font-12px;
+            line-height: $font-12px;
+        }
+    }
+
+    .mx_Dialog_buttons {
+        margin-top: 40px; // double normal
+    }
+
+    .mx_SettingsFlag {
+        line-height: calc($font-14px + 7px + 7px); // 7px top & bottom padding
+        color: $muted-fg-color;
+        font-size: $font-12px;
+
+        .mx_ToggleSwitch {
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 8px;
+
+            // downsize the switch + ball
+            width: $font-32px;
+            height: $font-15px;
+
+
+            &.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+                left: calc(100% - $font-15px);
+            }
+
+            .mx_ToggleSwitch_ball {
+                width: $font-15px;
+                height: $font-15px;
+                border-radius: $font-15px;
+            }
+        }
+
+        .mx_SettingsFlag_label {
+            display: inline-block;
+            vertical-align: middle;
+        }
+    }
+}
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
@ -1,6 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2018, 2019, 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,6 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_AccessSecretStorageDialog_reset {
+    position: relative;
+    padding-left: 24px; // 16px icon + 8px padding
+    margin-top: 7px; // vertical alignment to buttons
+
+    &::before {
+        content: "";
+        display: inline-block;
+        position: absolute;
+        height: 16px;
+        width: 16px;
+        left: 0;
+        top: 2px; // alignment
+        background-image: url("$(res)/img/element-icons/warning-badge.svg");
+        background-size: contain;
+    }
+
+    .mx_AccessSecretStorageDialog_reset_link {
+        color: $warning-color;
+    }
+}
+
 .mx_AccessSecretStorageDialog_titleWithIcon::before {
    content: '';
    display: inline-block;
@ -26,6 +47,13 @@ limitations under the License.
    background-color: $primary-fg-color;
 }

+.mx_AccessSecretStorageDialog_resetBadge::before {
+    // The image isn't capable of masking, so we use a background instead.
+    background-image: url("$(res)/img/element-icons/warning-badge.svg");
+    background-size: 24px;
+    background-color: transparent;
+}
+
 .mx_AccessSecretStorageDialog_secureBackupTitle::before {
    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
 }
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@ -26,7 +26,9 @@ limitations under the License.
    padding: 7px 18px;
    text-align: center;
    border-radius: 8px;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
    font-size: $font-14px;
 }

@ -70,16 +72,20 @@ limitations under the License.

 .mx_AccessibleButton_kind_danger_outline {
    color: $button-danger-bg-color;
-    background-color: $button-secondary-bg-color;
+    background-color: transparent;
    border: 1px solid $button-danger-bg-color;
 }

-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled,
-.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
    color: $button-danger-disabled-fg-color;
    background-color: $button-danger-disabled-bg-color;
 }

+.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-bg-color;
+    border-color: $button-danger-disabled-bg-color;
+}
+
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
    padding: 5px 12px;
    color: $button-danger-fg-color;
--- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss
+++ b/res/css/views/elements/_DesktopCapturerSourcePicker.scss
@ -0,0 +1,72 @@
+/*
+Copyright 2021 Šimon Brandner <simon.bra.ag@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_desktopCapturerSourcePicker {
+    overflow: hidden;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabels {
+    display: flex;
+    padding: 0 0 8px 0;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel,
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+    width: 100%;
+    text-align: center;
+    border-radius: 8px;
+    padding: 8px 0;
+    font-size: $font-13px;
+}
+
+.mx_desktopCapturerSourcePicker_tabLabel_selected {
+    background-color: $tab-label-active-bg-color;
+    color: $tab-label-active-fg-color;
+}
+
+.mx_desktopCapturerSourcePicker_panel {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: flex-start;
+    height: 500px;
+    overflow: overlay;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button {
+    display: flex;
+    flex-direction: column;
+    margin: 8px;
+    border-radius: 4px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_button:hover,
+.mx_desktopCapturerSourcePicker_stream_button:focus {
+    background: $roomtile-selected-bg-color;
+}
+
+.mx_desktopCapturerSourcePicker_stream_thumbnail {
+    margin: 4px;
+    width: 312px;
+}
+
+.mx_desktopCapturerSourcePicker_stream_name {
+    margin: 0 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 312px;
+}
--- a/res/css/views/elements/_DialPadBackspaceButton.scss
+++ b/res/css/views/elements/_DialPadBackspaceButton.scss
@ -0,0 +1,40 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_DialPadBackspaceButton {
+    position: relative;
+    height: 28px;
+    width: 28px;
+
+    &::before {
+        /* force this element to appear on the DOM */
+        content: "";
+
+        background-color: #8D97A5;
+        width: inherit;
+        height: inherit;
+        top: 0px;
+        left: 0px;
+        position: absolute;
+        display: inline-block;
+        vertical-align: middle;
+
+        mask-image: url('$(res)/img/element-icons/call/delete.svg');
+        mask-position: 8px;
+        mask-size: 20px;
+        mask-repeat: no-repeat;
+    }
+}
--- a/res/css/views/elements/_FacePile.scss
+++ b/res/css/views/elements/_FacePile.scss
@ -0,0 +1,65 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_FacePile {
+    .mx_FacePile_faces {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        vertical-align: middle;
+
+        > .mx_FacePile_face + .mx_FacePile_face {
+            margin-right: -8px;
+        }
+
+        .mx_BaseAvatar_image {
+            border: 1px solid $primary-bg-color;
+        }
+
+        .mx_BaseAvatar_initial {
+            margin: 1px; // to offset the border on the image
+        }
+
+        .mx_FacePile_more {
+            position: relative;
+            border-radius: 100%;
+            width: 30px;
+            height: 30px;
+            background-color: $groupFilterPanel-bg-color;
+
+            &::before {
+                content: "";
+                z-index: 1;
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: inherit;
+                width: inherit;
+                background: $tertiary-fg-color;
+                mask-position: center;
+                mask-size: 20px;
+                mask-repeat: no-repeat;
+                mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
+            }
+        }
+    }
+
+    .mx_FacePile_summary {
+        margin-left: 12px;
+        font-size: $font-14px;
+        line-height: $font-24px;
+        color: $tertiary-fg-color;
+    }
+}
--- a/res/css/views/elements/_IconButton.scss
+++ b/res/css/views/elements/_IconButton.scss
@ -1,55 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_IconButton {
-    width: 32px;
-    height: 32px;
-    border-radius: 100%;
-    background-color: $accent-bg-color;
-    // don't shrink or grow if in a flex container
-    flex: 0 0 auto;
-
-    &.mx_AccessibleButton_disabled {
-        background-color: none;
-
-        &::before {
-            background-color: lightgrey;
-        }
-    }
-
-    &:hover {
-        opacity: 90%;
-    }
-
-    &::before {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: 55%;
-        background-color: $accent-color;
-    }
-
-    &.mx_IconButton_icon_check::before {
-        mask-image: url('$(res)/img/feather-customised/check.svg');
-    }
-
-    &.mx_IconButton_icon_edit::before {
-        mask-image: url('$(res)/img/feather-customised/edit.svg');
-    }
-}
--- a/res/css/views/elements/_ImageView.scss
+++ b/res/css/views/elements/_ImageView.scss
@ -14,139 +14,113 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-/* This has got to be the most fragile piece of CSS ever written.
-   But empirically it works on Chrome/FF/Safari
- */
+$button-size: 32px;
+$icon-size: 22px;
+$button-gap: 24px;

 .mx_ImageView {
    display: flex;
    width: 100%;
    height: 100%;
-    align-items: center;
-}
-
-.mx_ImageView_lhs {
-    order: 1;
-    flex: 1 1 10%;
-    min-width: 60px;
-    // background-color: #080;
-    // height: 20px;
-}
-
-.mx_ImageView_content {
-    order: 2;
-    /* min-width hack needed for FF */
-    min-width: 0px;
-    height: 90%;
-    flex: 15 15 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.mx_ImageView_content img {
-    max-width: 100%;
-    /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
-    max-height: 100%;
-    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
-    object-fit: contain;
-    /* background-image: url('$(res)/img/trans.png'); */
-    pointer-events: all;
-}
-
-.mx_ImageView_labelWrapper {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    height: 100%;
-    overflow: auto;
-    pointer-events: all;
-}
-
-.mx_ImageView_label {
-    text-align: left;
-    display: flex;
-    justify-content: center;
    flex-direction: column;
-    padding-left: 30px;
-    padding-right: 30px;
-    min-height: 100%;
-    max-width: 240px;
+}
+
+.mx_ImageView_image_wrapper {
+    pointer-events: initial;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    overflow: hidden;
+}
+
+.mx_ImageView_image {
+    flex-shrink: 0;
+}
+
+.mx_ImageView_panel {
+    width: 100%;
+    height: 68px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.mx_ImageView_info_wrapper {
+    pointer-events: initial;
+    padding-left: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
    color: $lightbox-fg-color;
 }

-.mx_ImageView_cancel {
-    position: absolute;
-    // hack for mx_Dialog having a top padding of 40px
-    top: 40px;
-    right: 0px;
-    padding-top: 35px;
-    padding-right: 35px;
-    cursor: pointer;
+.mx_ImageView_info {
+    padding-left: 12px;
+    display: flex;
+    flex-direction: column;
 }

-.mx_ImageView_rotateClockwise {
-    position: absolute;
-    top: 40px;
-    right: 70px;
-    padding-top: 35px;
-    cursor: pointer;
+.mx_ImageView_info_sender {
+    font-weight: bold;
 }

-.mx_ImageView_rotateCounterClockwise {
-    position: absolute;
-    top: 40px;
-    right: 105px;
-    padding-top: 35px;
-    cursor: pointer;
-}
-
-.mx_ImageView_name {
-    font-size: $font-18px;
-    margin-bottom: 6px;
-    word-wrap: break-word;
-}
-
-.mx_ImageView_metadata {
-    font-size: $font-15px;
-    opacity: 0.5;
-}
-
-.mx_ImageView_download {
-    display: table;
-    margin-top: 24px;
-    margin-bottom: 6px;
-    border-radius: 5px;
-    background-color: $lightbox-bg-color;
-    font-size: $font-14px;
-    padding: 9px;
-    border: 1px solid $lightbox-border-color;
-}
-
-.mx_ImageView_size {
-    font-size: $font-11px;
-}
-
-.mx_ImageView_link {
-    color: $lightbox-fg-color !important;
-    text-decoration: none !important;
+.mx_ImageView_toolbar {
+    padding-right: 16px;
+    pointer-events: initial;
+    display: flex;
+    align-items: center;
+    gap: calc($button-gap - ($button-size - $icon-size));
 }

 .mx_ImageView_button {
-    font-size: $font-15px;
-    opacity: 0.5;
-    margin-top: 18px;
-    cursor: pointer;
+    padding: calc(($button-size - $icon-size) / 2);
+    display: block;
+
+    &::before {
+        content: '';
+        height: $icon-size;
+        width: $icon-size;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+        display: block;
+        background-color: $icon-button-color;
+    }
 }

-.mx_ImageView_shim {
-    height: 30px;
+.mx_ImageView_button_rotateCW::before {
+    mask-image: url('$(res)/img/image-view/rotate-cw.svg');
 }

-.mx_ImageView_rhs {
-    order: 3;
-    flex: 1 1 10%;
-    min-width: 300px;
-    // background-color: #800;
-    // height: 20px;
+.mx_ImageView_button_rotateCCW::before {
+    mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
+}
+
+.mx_ImageView_button_zoomOut::before {
+    mask-image: url('$(res)/img/image-view/zoom-out.svg');
+}
+
+.mx_ImageView_button_zoomIn::before {
+    mask-image: url('$(res)/img/image-view/zoom-in.svg');
+}
+
+.mx_ImageView_button_download::before {
+    mask-image: url('$(res)/img/image-view/download.svg');
+}
+
+.mx_ImageView_button_more::before {
+    mask-image: url('$(res)/img/image-view/more.svg');
+}
+
+.mx_ImageView_button_close {
+    padding: calc($button-size - $button-size);
+    border-radius: 100%;
+    background: #21262c; // same on all themes
+    &::before {
+        width: $button-size;
+        height: $button-size;
+        mask-image: url('$(res)/img/image-view/close.svg');
+        mask-size: 40%;
+    }
 }
--- a/res/css/views/elements/_InlineSpinner.scss
+++ b/res/css/views/elements/_InlineSpinner.scss
@ -18,7 +18,11 @@ limitations under the License.
    display: inline;
 }

-.mx_InlineSpinner_spin img {
+.mx_InlineSpinner img, .mx_InlineSpinner_icon {
    margin: 0px 6px;
    vertical-align: -3px;
 }
+
+.mx_InlineSpinner_icon {
+    display: inline-block;
+}
--- a/res/css/views/elements/_InviteReason.scss
+++ b/res/css/views/elements/_InviteReason.scss
@ -0,0 +1,57 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_InviteReason {
+    position: relative;
+    margin-bottom: 1em;
+
+    .mx_InviteReason_reason {
+        visibility: visible;
+    }
+
+    .mx_InviteReason_view {
+        display: none;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        color: $secondary-fg-color;
+
+        &::before {
+            content: "";
+            margin-right: 8px;
+            background-color: $secondary-fg-color;
+            mask-image: url('$(res)/img/feather-customised/eye.svg');
+            display: inline-block;
+            width: 18px;
+            height: 14px;
+        }
+    }
+}
+
+.mx_InviteReason_hidden {
+    .mx_InviteReason_reason {
+        visibility: hidden;
+    }
+
+    .mx_InviteReason_view {
+        display: flex;
+    }
+}
--- a/res/css/views/elements/_MiniAvatarUploader.scss
+++ b/res/css/views/elements/_MiniAvatarUploader.scss
@ -0,0 +1,60 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MiniAvatarUploader {
+    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: 0;
+    }
+
+    .mx_MiniAvatarUploader_indicator {
+        position: absolute;
+
+        height: 26px;
+        width: 26px;
+
+        right: -6px;
+        bottom: -6px;
+
+        background-color: $primary-bg-color;
+        border-radius: 50%;
+        z-index: 1;
+
+        .mx_MiniAvatarUploader_cameraIcon {
+            height: 100%;
+            width: 100%;
+
+            background-color: $secondary-fg-color;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/camera.svg');
+            mask-size: 16px;
+            z-index: 2;
+        }
+    }
+}
+
+.mx_MiniAvatarUploader_input {
+    display: none;
+}
--- a/res/css/views/elements/_ProgressBar.scss
+++ b/res/css/views/elements/_ProgressBar.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,15 +15,15 @@ limitations under the License.
 */

 progress.mx_ProgressBar {
-    height: 4px;
+    height: 6px;
    width: 60px;
-    border-radius: 10px;
    overflow: hidden;
    appearance: none;
-    border: 0;
+    border: none;

-    @mixin ProgressBarBorderRadius "10px";
-    @mixin ProgressBarColour $accent-color;
+    @mixin ProgressBarBorderRadius 6px;
+    @mixin ProgressBarColour $progressbar-fg-color;
+    @mixin ProgressBarBgColour $progressbar-bg-color;
    ::-webkit-progress-value {
        transition: width 1s;
    }
--- a/res/css/views/elements/_ReplyThread.scss
+++ b/res/css/views/elements/_ReplyThread.scss
@ -18,20 +18,46 @@ limitations under the License.
    margin-top: 0;
 }

-.mx_ReplyThread .mx_DateSeparator {
-    font-size: 1em !important;
-    margin-top: 0;
-    margin-bottom: 0;
-    padding-bottom: 1px;
-    bottom: -5px;
-}
-
 .mx_ReplyThread_show {
    cursor: pointer;
 }

 blockquote.mx_ReplyThread {
    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 8px;
    padding-left: 10px;
-    border-left: 4px solid $blockquote-bar-color;
+    border-left: 4px solid $button-bg-color;
+
+    &.mx_ReplyThread_color1 {
+        border-left-color: $username-variant1-color;
+    }
+
+    &.mx_ReplyThread_color2 {
+        border-left-color: $username-variant2-color;
+    }
+
+    &.mx_ReplyThread_color3 {
+        border-left-color: $username-variant3-color;
+    }
+
+    &.mx_ReplyThread_color4 {
+        border-left-color: $username-variant4-color;
+    }
+
+    &.mx_ReplyThread_color5 {
+        border-left-color: $username-variant5-color;
+    }
+
+    &.mx_ReplyThread_color6 {
+        border-left-color: $username-variant6-color;
+    }
+
+    &.mx_ReplyThread_color7 {
+        border-left-color: $username-variant7-color;
+    }
+
+    &.mx_ReplyThread_color8 {
+        border-left-color: $username-variant8-color;
+    }
 }
--- a/res/css/views/elements/_SSOButtons.scss
+++ b/res/css/views/elements/_SSOButtons.scss
@ -0,0 +1,74 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_SSOButtons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .mx_SSOButtons_row {
+        & + .mx_SSOButtons_row {
+            margin-top: 16px;
+        }
+    }
+
+    .mx_SSOButton {
+        position: relative;
+        width: 100%;
+        padding: 7px 32px;
+        text-align: center;
+        border-radius: 8px;
+        display: inline-block;
+        font-size: $font-14px;
+        font-weight: $font-semi-bold;
+        border: 1px solid $input-border-color;
+        color: $primary-fg-color;
+
+        > img {
+            object-fit: contain;
+            position: absolute;
+            left: 8px;
+            top: 4px;
+        }
+    }
+
+    .mx_SSOButton_default {
+        color: $button-primary-bg-color;
+        background-color: $button-secondary-bg-color;
+        border-color: $button-primary-bg-color;
+    }
+    .mx_SSOButton_default.mx_SSOButton_primary {
+        color: $button-primary-fg-color;
+        background-color: $button-primary-bg-color;
+    }
+
+    .mx_SSOButton_mini {
+        box-sizing: border-box;
+        width: 50px; // 48px + 1px border on all sides
+        height: 50px; // 48px + 1px border on all sides
+        min-width: 50px; // prevent crushing by the flexbox
+        padding: 12px;
+
+        > img {
+            left: 12px;
+            top: 12px;
+        }
+
+        & + .mx_SSOButton_mini {
+            margin-left: 16px;
+        }
+    }
+}
--- a/res/css/views/elements/_ServerPicker.scss
+++ b/res/css/views/elements/_ServerPicker.scss
@ -0,0 +1,88 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ServerPicker {
+    margin-bottom: 14px;
+    border-bottom: 1px solid rgba(141, 151, 165, 0.2);
+    display: grid;
+    grid-template-columns: auto min-content;
+    grid-template-rows: auto auto auto;
+    font-size: $font-14px;
+    line-height: $font-20px;
+
+    > h3 {
+        font-weight: $font-semi-bold;
+        margin: 0 0 20px;
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .mx_ServerPicker_help {
+        width: 20px;
+        height: 20px;
+        background-color: $icon-button-color;
+        border-radius: 10px;
+        grid-column: 2;
+        grid-row: 1;
+        margin-left: auto;
+        text-align: center;
+        color: #ffffff;
+        font-size: 16px;
+        position: relative;
+
+        &::before {
+            content: '';
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/i.svg');
+            background: #ffffff;
+        }
+    }
+
+    .mx_ServerPicker_server {
+        color: $authpage-primary-color;
+        grid-column: 1;
+        grid-row: 2;
+        margin-bottom: 16px;
+    }
+
+    .mx_ServerPicker_change {
+        padding: 0;
+        font-size: inherit;
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_ServerPicker_desc {
+        margin-top: -12px;
+        color: $tertiary-fg-color;
+        grid-column: 1 / 2;
+        grid-row: 3;
+        margin-bottom: 16px;
+    }
+}
+
+.mx_ServerPicker_helpDialog {
+    .mx_Dialog_content {
+        width: 456px;
+    }
+}
--- a/res/css/views/elements/_Spinner.scss
+++ b/res/css/views/elements/_Spinner.scss
@ -26,3 +26,19 @@ limitations under the License.
 .mx_MatrixChat_middlePanel .mx_Spinner {
    height: auto;
 }
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
+.mx_Spinner_icon {
+    background-color: $primary-fg-color;
+    mask: url('$(res)/img/spinner.svg');
+    mask-size: contain;
+    animation: 1.1s steps(12, end) infinite spin;
+}
--- a/res/css/views/messages/_CreateEvent.scss
+++ b/res/css/views/messages/_CreateEvent.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2020 The Matrix.org Foundation C.I.C.

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,25 +15,8 @@ limitations under the License.
 */

 .mx_CreateEvent {
-    background-color: $info-plinth-bg-color;
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-.mx_CreateEvent_image {
-    float: left;
-    margin-right: 20px;
-    width: 72px;
-    height: 34px;
-
-    background-color: $primary-fg-color;
-    mask: url('$(res)/img/room-continuation.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-}
-
-.mx_CreateEvent_header {
-    font-weight: bold;
+    &::before {
+        background-color: $composer-e2e-icon-color;
+        mask-image: url('$(res)/img/element-icons/chat-bubbles.svg');
+    }
 }
--- a/res/css/views/messages/_EventTileBubble.scss
+++ b/res/css/views/messages/_EventTileBubble.scss
@ -0,0 +1,60 @@
+/*
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EventTileBubble {
+    background-color: $dark-panel-bg-color;
+    padding: 10px;
+    border-radius: 8px;
+    margin: 10px auto;
+    max-width: 75%;
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr) min-content;
+
+    &::before, &::after {
+        position: relative;
+        grid-column: 1;
+        grid-row: 1 / 3;
+        width: 16px;
+        height: 16px;
+        content: "";
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        margin-top: 4px;
+    }
+
+    .mx_EventTileBubble_title, .mx_EventTileBubble_subtitle {
+        overflow-wrap: break-word;
+    }
+
+    .mx_EventTileBubble_title {
+        font-weight: 600;
+        font-size: $font-15px;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .mx_EventTileBubble_subtitle {
+        font-size: $font-12px;
+        grid-column: 2;
+        grid-row: 2;
+    }
+}
--- a/Show more
+++ b/Show more