Merge remote-tracking branch 'upstream/develop' into feature-surround-with

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

.eslintignore.errorfiles

@@ -1,7 +1,7 @@
 # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
 
 src/Markdown.js
-src/Velociraptor.js
+src/NodeAnimator.js
 src/components/structures/RoomDirectory.js
 src/components/views/rooms/MemberList.js
 src/ratelimitedfunc.js

.eslintrc.js

@@ -15,11 +15,10 @@ module.exports = {
         "prefer-promise-reject-errors": "off",
         "no-async-promise-executor": "off",
         "quotes": "off",
-        "indent": "off",
     },
 
     overrides: [{
-        "files": ["src/**/*.{ts,tsx}"],
+        "files": ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}"],
         "extends": ["matrix-org/ts"],
         "rules": {
             // We're okay being explicit at the moment
@@ -31,6 +30,24 @@ module.exports = {
 
             "quotes": "off",
             "no-extra-boolean-cast": "off",
+            "no-restricted-properties": [
+                "error",
+                ...buildRestrictedPropertiesOptions(
+                    ["window.innerHeight", "window.innerWidth", "window.visualViewport"],
+                    "Use UIStore to access window dimensions instead",
+                ),
+            ],
         },
     }],
 };
+
+function buildRestrictedPropertiesOptions(properties, message) {
+    return properties.map(prop => {
+        const [object, property] = prop.split(".");
+        return {
+            object,
+            property,
+            message,
+        };
+    });
+}

.github/workflows/develop.yml

@@ -0,0 +1,38 @@
+name: Develop
+on:
+    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: End-to-End tests
+              run: ./scripts/ci/end-to-end-tests.sh
+            - name: Archive logs
+              uses: actions/upload-artifact@v2
+              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' }}

.gitignore

@@ -2,6 +2,7 @@
 /*.log
 package-lock.json
 
+/coverage
 /node_modules
 /lib
 
@@ -13,3 +14,4 @@ package-lock.json
 /src/component-index.js
 
 .DS_Store
+*.tmp

.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,

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`!!**

__mocks__/empty.js

@@ -0,0 +1,2 @@
+// Yes, this is empty.
+module.exports = {};

babel.config.js

@@ -3,12 +3,15 @@ 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}],
@@ -18,6 +21,6 @@ module.exports = {
         "@babel/plugin-proposal-object-rest-spread",
         "@babel/plugin-transform-flow-comments",
         "@babel/plugin-syntax-dynamic-import",
-        "@babel/plugin-transform-runtime"
-    ]
+        "@babel/plugin-transform-runtime",
+    ],
 };

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.
 

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.

docs/room-list-store.md

@@ -6,7 +6,7 @@ It's so complicated it needs its own README.
 
 Legend:
 * Orange = External event.
-* Purple = Deterministic flow. 
+* Purple = Deterministic flow.
 * Green = Algorithm definition.
 * Red = Exit condition/point.
 * Blue = Process definition.
@@ -24,8 +24,8 @@ algorithm to call, instead of having all the logic in the room list store itself
 
 
 Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
-the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm, 
-later described in this document, heavily uses the list ordering behaviour to break the tag into categories. 
+the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm,
+later described in this document, heavily uses the list ordering behaviour to break the tag into categories.
 Each category then gets sorted by the appropriate tag sorting algorithm.
 
 ### Tag sorting algorithm: Alphabetical
@@ -36,7 +36,7 @@ useful.
 
 ### Tag sorting algorithm: Manual
 
-Manual sorting makes use of the `order` property present on all tags for a room, per the 
+Manual sorting makes use of the `order` property present on all tags for a room, per the
 [Matrix specification](https://matrix.org/docs/spec/client_server/r0.6.0#room-tagging). Smaller values
 of `order` cause rooms to appear closer to the top of the list.
 
@@ -74,7 +74,7 @@ relative (perceived) importance to the user:
   set to 'All Messages'.
 * **Bold**: The room has unread messages waiting for the user. Essentially this is a grey room without
   a badge/notification count (or 'Mentions Only'/'Muted').
-* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user 
+* **Idle**: No useful (see definition of useful above) activity has occurred in the room since the user
   last read it.
 
 Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
@@ -82,7 +82,7 @@ above bold, etc.
 
 Once the algorithm has determined which rooms belong in which categories, the tag sorting algorithm
 gets applied to each category in a sub-list fashion. This should result in the red rooms (for example)
-being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but 
+being sorted alphabetically amongst each other as well as the grey rooms sorted amongst each other, but
 collectively the tag will be sorted into categories with red being at the top.
 
 ## Sticky rooms
@@ -103,48 +103,62 @@ receive another notification which causes the room to move into the topmost posi
 above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
 the sticky room's position.
 
-Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries 
-and thus the user can see a shift in what kinds of rooms move around their selection. An example would 
-be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having 
-the rooms above it read on another device. This would result in 1 red room and 1 other kind of room 
+Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries
+and thus the user can see a shift in what kinds of rooms move around their selection. An example would
+be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having
+the rooms above it read on another device. This would result in 1 red room and 1 other kind of room
 above the sticky room as it will try to maintain 2 rooms above the sticky room.
 
 An exception for the sticky room placement is when there's suddenly not enough rooms to maintain the placement
 exactly. This typically happens if the user selects a room and leaves enough rooms where it cannot maintain
 the N required rooms above the sticky room. In this case, the sticky room will simply decrease N as needed.
-The N value will never increase while selection remains unchanged: adding a bunch of rooms after having 
+The N value will never increase while selection remains unchanged: adding a bunch of rooms after having
 put the sticky room in a position where it's had to decrease N will not increase N.
 
 ## Responsibilities of the store
 
-The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets 
-an object containing the tags it needs to worry about and the rooms within. The room list component will 
-decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with 
+The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets
+an object containing the tags it needs to worry about and the rooms within. The room list component will
+decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with
 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
-case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a 
+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.
 
 All filter conditions are considered "stable" by the consumers, meaning that the consumer does not
 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 
-of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible 
-for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get 
-defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the 
-user). Various list-specific utilities are also included, though they are expected to move somewhere 
-more general when needed. For example, the `membership` utilities could easily be moved elsewhere 
+The `RoomListStore` is the major coordinator of various algorithm implementations, which take care
+of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible
+for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get
+defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the
+user). Various list-specific utilities are also included, though they are expected to move somewhere
+more general when needed. For example, the `membership` utilities could easily be moved elsewhere
 as needed.
 
 The various bits throughout the room list store should also have jsdoc of some kind to help describe

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "3.13.1",
+  "version": "3.23.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -23,9 +23,7 @@
     "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": "./src/index.js",
   "matrix_src_main": "./src/index.js",
@@ -35,7 +33,7 @@
     "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",
@@ -51,15 +49,15 @@
     "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest",
-    "test:e2e": "./test/end-to-end-tests/run.sh --app-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.12.5",
     "await-lock": "^2.1.0",
-    "blueimp-canvas-to-blob": "^3.28.0",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
-    "cheerio": "^1.0.0-rc.5",
+    "cheerio": "^1.0.0-rc.9",
     "classnames": "^2.2.6",
     "commonmark": "^0.29.3",
     "counterpart": "^0.18.6",
@@ -81,28 +79,25 @@
     "linkifyjs": "^2.1.9",
     "lodash": "^4.17.20",
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
-    "matrix-widget-api": "^0.1.0-beta.13",
+    "matrix-widget-api": "^0.1.0-beta.14",
     "minimist": "^1.2.5",
+    "opus-recorder": "^8.0.3",
     "pako": "^2.0.3",
     "parse5": "^6.0.1",
     "png-chunks-extract": "^1.0.0",
-    "project-name-generator": "^2.1.9",
     "prop-types": "^15.7.2",
     "qrcode": "^1.4.4",
-    "qs": "^6.9.6",
     "re-resizable": "^6.9.0",
-    "react": "^16.14.0",
+    "react": "^17.0.2",
     "react-beautiful-dnd": "^4.0.1",
-    "react-dom": "^16.14.0",
+    "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"
   },
@@ -123,6 +118,7 @@
     "@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",
@@ -134,11 +130,12 @@
     "@types/modernizr": "^3.5.3",
     "@types/node": "^14.14.22",
     "@types/pako": "^1.0.1",
+    "@types/parse5": "^6.0.0",
     "@types/qrcode": "^1.3.5",
     "@types/react": "^16.9",
     "@types/react-dom": "^16.9.10",
     "@types/react-transition-group": "^4.4.0",
-    "@types/sanitize-html": "^1.27.0",
+    "@types/sanitize-html": "^2.3.1",
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.14.0",
     "@typescript-eslint/parser": "^4.14.0",
@@ -147,7 +144,7 @@
     "chokidar": "^3.5.1",
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "eslint": "7.18.0",
     "eslint-config-matrix-org": "^0.2.0",
     "eslint-plugin-babel": "^5.3.1",
@@ -158,10 +155,11 @@
     "jest": "^26.6.3",
     "jest-canvas-mock": "^2.3.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-fetch-mock": "^3.0.3",
     "matrix-mock-request": "^1.2.3",
-    "matrix-react-test-utils": "^0.2.2",
-    "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
-    "react-test-renderer": "^16.14.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",
@@ -185,10 +183,19 @@
     ],
     "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"
     },
     "transformIgnorePatterns": [
       "/node_modules/(?!matrix-js-sdk).+$"
+    ],
+    "collectCoverageFrom": [
+      "<rootDir>/src/**/*.{js,ts,tsx}"
+    ],
+    "coverageReporters": [
+      "text"
     ]
   }
 }

res/css/_common.scss

@@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e
 
 :root {
     font-size: 10px;
+
+    --transition-short: .1s;
+    --transition-standard: .3s;
+}
+
+@media (prefers-reduced-motion) {
+    :root {
+        --transition-short: 0;
+        --transition-standard: 0;
+    }
 }
 
 html {
@@ -35,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 {
@@ -279,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 {
@@ -303,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;
 }
 
@@ -315,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 {
@@ -395,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 {
@@ -489,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 {
@@ -606,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 {

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";
@@ -51,13 +54,16 @@
 @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";
@@ -70,6 +76,7 @@
 @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";
@@ -89,8 +96,10 @@
 @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";
@@ -106,17 +115,19 @@
 @import "./views/elements/_AddressSelector.scss";
 @import "./views/elements/_AddressTile.scss";
 @import "./views/elements/_DesktopBuildsNotice.scss";
-@import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_DesktopCapturerSourcePicker.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/_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";
@@ -154,6 +165,7 @@
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MVideoBody.scss";
+@import "./views/messages/_MVoiceMessageBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
@@ -168,6 +180,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";
@@ -192,7 +205,6 @@
 @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/_RoomBreadcrumbs.scss";
@@ -206,6 +218,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";
@@ -219,6 +232,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";
@@ -227,17 +241,25 @@
 @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/voice_messages/_PlayPauseButton.scss";
+@import "./views/voice_messages/_PlaybackContainer.scss";
+@import "./views/voice_messages/_Waveform.scss";
 @import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
+@import "./views/voip/_CallViewForRoom.scss";
 @import "./views/voip/_DialPad.scss";
 @import "./views/voip/_DialPadContextMenu.scss";
 @import "./views/voip/_DialPadModal.scss";

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;
-}

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;

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 {

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%);
@@ -134,6 +132,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,17 +170,10 @@ $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;

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%;
 }
 

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;

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;
 }

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 {

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,48 @@ 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;
+    }
+}
+
+@keyframes mx_RightPanel_indicator_pulse {
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
+    }
+
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba($pulse-color, 0);
+    }
+
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba($pulse-color, 0);
+    }
+}
+
 .mx_RightPanel_headerButton_highlight {
     &::before {
         background-color: $accent-color !important;
@@ -160,3 +203,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;
+    }
+}

res/css/structures/_RoomDirectory.scss

@@ -61,6 +61,39 @@ 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 {
@@ -138,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;
 }

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;

res/css/structures/_RoomStatusBar.scss

@@ -14,7 +14,7 @@ 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;
 }
@@ -68,6 +68,99 @@ 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: 28px; // 16px 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;
+            }
+
+            &.mx_RoomStatusBar_unsentCancelAllBtn::before {
+                mask-image: url('$(res)/img/element-icons/trashcan.svg');
+                width: 12px;
+                height: 16px;
+                top: calc(50% - 8px); // text sizes are dynamic
+            }
+
+            &.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');
+                    width: 18px;
+                    height: 18px;
+                    top: calc(50% - 9px); // text sizes are dynamic
+                }
+            }
+        }
+
+        .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;
@@ -103,7 +196,7 @@ limitations under the License.
 }
 
 .mx_MatrixChat_useCompactLayout {
-    .mx_RoomStatusBar {
+    .mx_RoomStatusBar:not(.mx_RoomStatusBar_unsentMessages) {
         min-height: 40px;
     }
 

res/css/structures/_RoomView.scss

@@ -20,35 +20,54 @@ 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 {
+        width: 0px;
+    }
+    to {
+        width: 32px;
+    }
+}
+
+.mx_RoomView_fileDropTarget_image {
+    animation: mx_RoomView_fileDropTarget_image_animation;
+    animation-duration: 0.5s;
+    margin-bottom: 16px;
 }
 
 .mx_RoomView_auxPanel {
@@ -117,7 +136,6 @@ limitations under the License.
 }
 
 .mx_RoomView_body {
-    position: relative; //for .mx_RoomView_auxPanel_fullHeight
     display: flex;
     flex-direction: column;
     flex: 1;
@@ -134,6 +152,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    contain: content;
 }
 
 .mx_RoomView_statusArea {
@@ -219,6 +238,7 @@ hr.mx_RoomView_myReadMarker {
     position: relative;
     top: -1px;
     z-index: 1;
+    will-change: width;
     transition: width 400ms easeinsine 1s, opacity 400ms easeinsine 1s;
     width: 99%;
     opacity: 1;
@@ -244,12 +264,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;

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;
     }
 }

res/css/structures/_SpacePanel.scss

@@ -0,0 +1,371 @@
+/*
+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;
+    overflow-y: auto;
+
+    .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_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;
+}

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;
+    }
+}

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;
+            }
+        }
+    }
+}

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.
@@ -158,6 +158,10 @@ limitations under the License.
             }
         }
 
+        .mx_Toast_detail {
+            color: $secondary-fg-color;
+        }
+
         .mx_Toast_deviceID {
             font-size: $font-10px;
         }

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');
 }

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,6 +117,32 @@ 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 {
@@ -128,7 +155,7 @@ limitations under the License.
 }
 
 .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

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;
+}

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;

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');

res/css/views/beta/_BetaCard.scss

@@ -0,0 +1,114 @@
+/*
+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;
+    display: flex;
+    box-sizing: border-box;
+
+    > 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_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_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);
+    box-shadow: 0 0 0 0 rgba($pulse-color, 1);
+    animation: mx_Beta_bluePulse 2s infinite;
+    animation-iteration-count: 20;
+}
+
+@keyframes mx_Beta_bluePulse {
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba($pulse-color, 0.7);
+    }
+
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba($pulse-color, 0);
+    }
+
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba($pulse-color, 0);
+    }
+}

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;

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;
+    }
+}

res/css/views/dialogs/_BetaFeedbackDialog.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+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.
@@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/**
- * Automatically focuses the captured reference when receiving a non-null
- * object. Useful in scenarios where componentDidMount does not have a
- * useful reference to an element, but one needs to focus the element on
- * first render. Example usage: ref={focusCapturedRef}
- * @param {function} ref The React reference to focus on, if not null
- */
-export function focusCapturedRef(ref) {
-    if (ref) {
-        ref.focus();
+.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;
     }
 }

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;
+    }
+}

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: scroll;
+
+        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;
+                    }
+                }
+            }
+        }
+    }
+}

res/css/views/dialogs/_HostSignupDialog.scss

@@ -19,6 +19,11 @@ limitations under the License.
     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;

res/css/views/dialogs/_InviteDialog.scss

@@ -17,6 +17,9 @@ limitations under the License.
 .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;
@@ -73,7 +76,7 @@ limitations under the License.
 }
 
 .mx_InviteDialog_section {
-    padding-bottom: 10px;
+    padding-bottom: 4px;
 
     h3 {
         font-size: $font-12px;
@@ -82,6 +85,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
@@ -90,6 +101,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;
@@ -142,6 +210,7 @@ limitations under the License.
 
     .mx_InviteDialog_roomTile_nameStack {
         display: inline-block;
+        overflow: hidden;
     }
 
     .mx_InviteDialog_roomTile_name {
@@ -157,6 +226,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;
@@ -212,22 +288,29 @@ limitations under the License.
 
 .mx_InviteDialog {
     // 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
+    display: flex;
+    flex-direction: column;
+
+    .mx_InviteDialog_content {
+        overflow: hidden;
+    }
 }
 
 .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;
+    height: calc(100% - 115px); // mx_InviteDialog's height minus some for the upper and lower elements
 }
 
-// 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 {

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;

res/css/views/dialogs/_SpaceSettingsDialog.scss

@@ -0,0 +1,55 @@
+/*
+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 {
+    width: 480px;
+    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_AccessibleButton_kind_danger {
+        margin-top: 28px;
+    }
+
+    .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;
+    }
+}

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;
+        }
+    }
+}

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,27 @@ 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");
+    }
+
+    .mx_AccessSecretStorageDialog_reset_link {
+        color: $warning-color;
+    }
+}
+
 .mx_AccessSecretStorageDialog_titleWithIcon::before {
     content: '';
     display: inline-block;
@@ -26,6 +46,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');
 }

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;
 }
 
@@ -74,12 +76,16 @@ limitations under the License.
     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;

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;
+    }
+}

res/css/views/elements/_FormButton.scss

@@ -33,4 +33,10 @@ limitations under the License.
         color: $notice-primary-color;
         background-color: $notice-primary-bg-color;
     }
+
+    &.mx_AccessibleButton_kind_secondary {
+        color: $secondary-fg-color;
+        border: 1px solid $secondary-fg-color;
+        background-color: unset;
+    }
 }

res/css/views/elements/_ImageView.scss

@@ -14,139 +14,107 @@ 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
- */
-
 .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;
 }
 
 .mx_ImageView_button {
-    font-size: $font-15px;
-    opacity: 0.5;
-    margin-top: 18px;
-    cursor: pointer;
+    margin-left: 24px;
+    display: block;
+
+    &::before {
+        content: '';
+        height: 22px;
+        width: 22px;
+        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 {
+    border-radius: 100%;
+    background: #21262c; // same on all themes
+    &::before {
+        width: 32px;
+        height: 32px;
+        mask-image: url('$(res)/img/image-view/close.svg');
+        mask-size: 40%;
+    }
 }

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;
+}

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;
+    }
+}

res/css/views/elements/_MiniAvatarUploader.scss

@@ -28,8 +28,7 @@ limitations under the License.
         top: 0;
     }
 
-    &::before, &::after {
-        content: '';
+    .mx_MiniAvatarUploader_indicator {
         position: absolute;
 
         height: 26px;
@@ -37,27 +36,22 @@ limitations under the License.
 
         right: -6px;
         bottom: -6px;
-    }
 
-    &::before {
         background-color: $primary-bg-color;
         border-radius: 50%;
         z-index: 1;
-    }
 
-    &::after {
-        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_cameraIcon {
+            height: 100%;
+            width: 100%;
 
-    &.mx_MiniAvatarUploader_busy::after {
-        background: url("$(res)/img/spinner.gif") no-repeat center;
-        background-size: 80%;
-        mask: unset;
+            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;
+        }
     }
 }
 

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;
     }

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;
+}

res/css/views/messages/_MFileBody.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.
@@ -16,6 +16,19 @@ limitations under the License.
 
 .mx_MFileBody_download {
     color: $accent-color;
+
+    .mx_MFileBody_download_icon {
+        // 12px instead of 14px to better match surrounding font size
+        width: 12px;
+        height: 12px;
+        mask-size: 12px;
+
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-image: url("$(res)/img/download.svg");
+        background-color: $accent-color;
+        display: inline-block;
+    }
 }
 
 .mx_MFileBody_download a {
@@ -45,3 +58,46 @@ limitations under the License.
      * big the content of the iframe is. */
     height: 1.5em;
 }
+
+.mx_MFileBody_info {
+    background-color: $message-body-panel-bg-color;
+    border-radius: 12px;
+    width: 243px; // same width as a playable voice message, accounting for padding
+    padding: 6px 12px;
+    color: $message-body-panel-fg-color;
+
+    .mx_MFileBody_info_icon {
+        background-color: $message-body-panel-icon-bg-color;
+        border-radius: 20px;
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        position: relative;
+        vertical-align: middle;
+        margin-right: 12px;
+
+        &::before {
+            content: '';
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: cover;
+            mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
+            background-color: $message-body-panel-icon-fg-color;
+            width: 13px;
+            height: 15px;
+
+            position: absolute;
+            top: 8px;
+            left: 9px;
+        }
+    }
+
+    .mx_MFileBody_info_filename {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        width: calc(100% - 32px - 12px); // 32px icon, 12px margin on the icon
+        vertical-align: middle;
+    }
+}

res/css/views/messages/_MVoiceMessageBody.scss

@@ -0,0 +1,19 @@
+/*
+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_MVoiceMessageBody {
+    display: inline-block; // makes the playback controls magically line up
+}

res/css/views/messages/_MessageActionBar.scss

@@ -20,11 +20,12 @@ limitations under the License.
     visibility: hidden;
     cursor: pointer;
     display: flex;
-    height: 24px;
+    height: 32px;
     line-height: $font-24px;
-    border-radius: 4px;
-    background: $message-action-bar-bg-color;
-    top: -26px;
+    border-radius: 8px;
+    background: $primary-bg-color;
+    border: 1px solid $input-border-color;
+    top: -32px;
     right: 8px;
     user-select: none;
     // Ensure the action bar appears above over things, like the read marker.
@@ -51,31 +52,19 @@ limitations under the License.
         white-space: nowrap;
         display: inline-block;
         position: relative;
-        border: 1px solid $message-action-bar-border-color;
-        margin-left: -1px;
+        margin: 2px;
 
         &:hover {
-            border-color: $message-action-bar-hover-border-color;
+            background: $roomlist-button-bg-color;
+            border-radius: 6px;
             z-index: 1;
         }
-
-        &:first-child {
-            border-radius: 3px 0 0 3px;
-        }
-
-        &:last-child {
-            border-radius: 0 3px 3px 0;
-        }
-
-        &:only-child {
-            border-radius: 3px;
-        }
     }
 }
 
-
 .mx_MessageActionBar_maskButton {
-    width: 27px;
+    width: 28px;
+    height: 28px;
 }
 
 .mx_MessageActionBar_maskButton::after {
@@ -85,9 +74,14 @@ limitations under the License.
     left: 0;
     height: 100%;
     width: 100%;
+    mask-size: 18px;
     mask-repeat: no-repeat;
     mask-position: center;
-    background-color: $message-action-bar-fg-color;
+    background-color: $secondary-fg-color;
+}
+
+.mx_MessageActionBar_maskButton:hover::after {
+    background-color: $primary-fg-color;
 }
 
 .mx_MessageActionBar_reactButton::after {
@@ -105,3 +99,11 @@ limitations under the License.
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/element-icons/context-menu.svg');
 }
+
+.mx_MessageActionBar_resendButton::after {
+    mask-image: url('$(res)/img/element-icons/retry.svg');
+}
+
+.mx_MessageActionBar_cancelButton::after {
+    mask-image: url('$(res)/img/element-icons/trashcan.svg');
+}

res/css/views/messages/_ReactionsRow.scss

@@ -17,18 +17,56 @@ limitations under the License.
 .mx_ReactionsRow {
     margin: 6px 0;
     color: $primary-fg-color;
+
+    .mx_ReactionsRow_addReactionButton {
+        position: relative;
+        display: inline-block;
+        visibility: hidden; // show on hover of the .mx_EventTile
+        width: 24px;
+        height: 24px;
+        vertical-align: middle;
+        margin-left: 4px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            height: 100%;
+            width: 100%;
+            mask-size: 16px;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: $tertiary-fg-color;
+            mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
+        }
+
+        &.mx_ReactionsRow_addReactionButton_active {
+            visibility: visible; // keep showing whilst the context menu is shown
+        }
+
+        &:hover, &.mx_ReactionsRow_addReactionButton_active {
+            &::before {
+                background-color: $primary-fg-color;
+            }
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_ReactionsRow_addReactionButton {
+    visibility: visible;
 }
 
 .mx_ReactionsRow_showAll {
     text-decoration: none;
-    font-size: $font-10px;
-    font-weight: 600;
-    margin-left: 6px;
-    vertical-align: top;
+    font-size: $font-12px;
+    line-height: $font-20px;
+    margin-left: 4px;
+    vertical-align: middle;
 
-    &:hover,
-    &:link,
-    &:visited {
-        color: $accent-color;
+    &:link, &:visited {
+        color: $tertiary-fg-color;
+    }
+
+    &:hover {
+        color: $primary-fg-color;
     }
 }

res/css/views/messages/_ReactionsRowButton.scss

@@ -16,14 +16,15 @@ limitations under the License.
 
 .mx_ReactionsRowButton {
     display: inline-flex;
-    line-height: $font-21px;
+    line-height: $font-20px;
     margin-right: 6px;
-    padding: 0 6px;
+    padding: 1px 6px;
     border: 1px solid $reaction-row-button-border-color;
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
     user-select: none;
+    vertical-align: middle;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;
@@ -34,6 +35,10 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+
     .mx_ReactionsRowButton_content {
         max-width: 100px;
         overflow: hidden;

res/css/views/messages/_SenderProfile.scss

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SenderProfile_name {
+.mx_SenderProfile_displayName {
     font-weight: 600;
 }
 
+.mx_SenderProfile_mxid {
+    font-weight: 600;
+    font-size: 1.1rem;
+    margin-left: 5px;
+    opacity: 0.5; // Match mx_TextualEvent
+}

res/css/views/right_panel/_EncryptionInfo.scss

@@ -14,13 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_UserInfo {
-    .mx_EncryptionInfo_spinner {
-        .mx_Spinner {
-            margin-top: 25px;
-            margin-bottom: 15px;
-        }
-
-        text-align: center;
+.mx_EncryptionInfo_spinner {
+    .mx_Spinner {
+        margin-top: 25px;
+        margin-bottom: 15px;
     }
+
+    text-align: center;
 }

res/css/views/right_panel/_PinnedMessagesCard.scss

@@ -0,0 +1,90 @@
+/*
+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_PinnedMessagesCard {
+    padding-top: 0;
+
+    .mx_BaseCard_header {
+        text-align: center;
+        margin-top: 0;
+        border-bottom: 1px solid $menu-border-color;
+
+        > h2 {
+            font-weight: $font-semi-bold;
+            font-size: $font-18px;
+            margin: 8px 0;
+        }
+
+        .mx_BaseCard_close {
+            margin-right: 6px;
+        }
+    }
+
+    .mx_PinnedMessagesCard_empty {
+        display: flex;
+        height: 100%;
+
+        > div {
+            height: max-content;
+            text-align: center;
+            margin: auto 40px;
+
+            .mx_PinnedMessagesCard_MessageActionBar {
+                pointer-events: none;
+                display: flex;
+                height: 32px;
+                line-height: $font-24px;
+                border-radius: 8px;
+                background: $primary-bg-color;
+                border: 1px solid $input-border-color;
+                padding: 1px;
+                width: max-content;
+                margin: 0 auto;
+                box-sizing: border-box;
+
+                .mx_MessageActionBar_maskButton {
+                    display: inline-block;
+                    position: relative;
+                }
+
+                .mx_MessageActionBar_optionsButton {
+                    background: $roomlist-button-bg-color;
+                    border-radius: 6px;
+                    z-index: 1;
+
+                    &::after {
+                        background-color: $primary-fg-color;
+                    }
+                }
+            }
+
+            > h2 {
+                font-weight: $font-semi-bold;
+                font-size: $font-15px;
+                line-height: $font-24px;
+                color: $primary-fg-color;
+                margin-top: 24px;
+                margin-bottom: 20px;
+            }
+
+            > span {
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $secondary-fg-color;
+            }
+        }
+    }
+}

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -36,6 +36,7 @@ limitations under the License.
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: pre-wrap;
         }
 
         .mx_RoomSummaryCard_avatar {

res/css/views/rooms/_AppsDrawer.scss

@@ -370,11 +370,6 @@ $MinWidth: 240px;
     display: none;
 }
 
-/* Avoid apptile iframes capturing mouse event focus when resizing */
-.mx_AppsDrawer_resizing iframe {
-    pointer-events: none;
-}
-
 .mx_AppsDrawer_resizing .mx_AppTile_persistedWrapper {
     z-index: 1;
 }

res/css/views/rooms/_AuxPanel.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .m_RoomView_auxPanel_stateViews {
     padding: 5px;
     padding-left: 19px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .m_RoomView_auxPanel_stateViews_span a {

res/css/views/rooms/_BasicMessageComposer.scss

@@ -66,6 +66,11 @@ limitations under the License.
                 }
             }
         }
+
+        &.mx_BasicMessageComposer_input_disabled {
+            // Ignore all user input to avoid accidentally triggering the composer
+            pointer-events: none;
+        }
     }
 
     .mx_BasicMessageComposer_AutoCompleteWrapper {

res/css/views/rooms/_EventTile.scss

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 $left-gutter: 64px;
+$hover-select-border: 4px;
 
 .mx_EventTile {
     max-width: 100%;
@@ -85,12 +86,11 @@ $left-gutter: 64px;
 }
 
 .mx_EventTile_isEditing .mx_MessageTimestamp {
-    visibility: hidden !important;
+    visibility: hidden;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
-    visibility: hidden;
     white-space: nowrap;
     left: 0px;
     text-align: center;
@@ -104,7 +104,7 @@ $left-gutter: 64px;
 .mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
     padding-left: $left-gutter;
-    border-radius: 4px;
+    border-radius: 8px;
 }
 
 .mx_RoomView_timeline_rr_enabled,
@@ -142,26 +142,8 @@ $left-gutter: 64px;
     line-height: 57px !important;
 }
 
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
-    visibility: visible;
-}
-
 .mx_EventTile_selected > div > a > .mx_MessageTimestamp {
-    left: 3px;
-    width: auto;
-}
-
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-// The first set is to handle the 'group layout' (default) and the second for the IRC layout
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
-.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
-    visibility: visible;
+    left: calc(-$hover-select-border);
 }
 
 .mx_EventTile:hover .mx_MessageActionBar,
@@ -176,7 +158,7 @@ $left-gutter: 64px;
  */
 .mx_EventTile_selected > .mx_EventTile_line {
     border-left: $accent-color 4px solid;
-    padding-left: 60px;
+    padding-left: calc($left-gutter - $hover-select-border);
     background-color: $event-selected-color;
 }
 
@@ -189,8 +171,12 @@ $left-gutter: 64px;
     }
 }
 
+.mx_EventTile_info .mx_EventTile_line {
+    padding-left: calc($left-gutter + 18px);
+}
+
 .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
-    padding-left: 78px;
+    padding-left: calc($left-gutter + 18px - $hover-select-border);
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
@@ -213,21 +199,30 @@ $left-gutter: 64px;
     color: $accent-fg-color;
 }
 
-.mx_EventTile_encrypting {
-    color: $event-encrypting-color !important;
-}
+.mx_EventTile_receiptSent,
+.mx_EventTile_receiptSending {
+    // We don't use `position: relative` on the element because then it won't line
+    // up with the other read receipts
 
-.mx_EventTile_sending {
-    color: $event-sending-color;
+    &::before {
+        background-color: $tertiary-fg-color;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 14px;
+        width: 14px;
+        height: 14px;
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
 }
-
-.mx_EventTile_sending .mx_UserPill,
-.mx_EventTile_sending .mx_RoomPill {
-    opacity: 0.5;
+.mx_EventTile_receiptSent::before {
+    mask-image: url('$(res)/img/element-icons/circle-sent.svg');
 }
-
-.mx_EventTile_notSent {
-    color: $event-notsent-color;
+.mx_EventTile_receiptSending::before {
+    mask-image: url('$(res)/img/element-icons/circle-sending.svg');
 }
 
 .mx_EventTile_contextual {
@@ -257,22 +252,23 @@ $left-gutter: 64px;
     display: inline-block;
     width: 14px;
     height: 14px;
-    top: 29px;
+    // This aligns the avatar with the last line of the
+    // message. We want to move it one line up - 2.2rem
+    top: -2.2rem;
     user-select: none;
     z-index: 1;
 }
 
-.mx_EventTile_continuation .mx_EventTile_readAvatars,
-.mx_EventTile_info .mx_EventTile_readAvatars,
-.mx_EventTile_emote .mx_EventTile_readAvatars {
-    top: 7px;
-}
-
 .mx_EventTile_readAvatars .mx_BaseAvatar {
     position: absolute;
     display: inline-block;
     height: $font-14px;
     width: $font-14px;
+
+    will-change: left, top;
+    transition:
+        left var(--transition-short) ease-out,
+        top var(--transition-standard) ease-out;
 }
 
 .mx_EventTile_readAvatarRemainder {
@@ -416,7 +412,7 @@ $left-gutter: 64px;
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    padding-left: 60px;
+    padding-left: calc($left-gutter - $hover-select-border);
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
@@ -434,7 +430,7 @@ $left-gutter: 64px;
 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unknown.mx_EventTile_info .mx_EventTile_line {
-    padding-left: 78px;
+    padding-left: calc($left-gutter + 18px - $hover-select-border);
 }
 
 /* End to end encryption stuff */
@@ -446,7 +442,7 @@ $left-gutter: 64px;
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > a > .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line > a > .mx_MessageTimestamp {
-    width: $MessageTimestamp_width_hover;
+    left: calc(-$hover-select-border);
 }
 
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@@ -531,14 +527,14 @@ $left-gutter: 64px;
     display: inline-block;
     visibility: hidden;
     cursor: pointer;
-    top: 6px;
-    right: 12px;
+    top: 8px;
+    right: 8px;
     width: 19px;
     height: 19px;
     background-color: $message-action-bar-fg-color;
 }
 .mx_EventTile_buttonBottom {
-    top: 31px;
+    top: 33px;
 }
 .mx_EventTile_copyButton {
     mask-image: url($copy-button-url);

res/css/views/rooms/_GroupLayout.scss

@@ -21,11 +21,7 @@ $left-gutter: 64px;
     .mx_EventTile {
         > .mx_SenderProfile {
             line-height: $font-20px;
-            padding-left: $left-gutter;
-        }
-
-        > .mx_EventTile_line {
-            padding-left: $left-gutter;
+            margin-left: $left-gutter;
         }
 
         > .mx_EventTile_avatar {
@@ -43,10 +39,6 @@ $left-gutter: 64px;
             line-height: $font-22px;
         }
     }
-
-    .mx_EventTile_info .mx_EventTile_line {
-        padding-left: calc($left-gutter + 18px);
-    }
 }
 
 /* Compact layout overrides */
@@ -105,16 +97,9 @@ $left-gutter: 64px;
         }
 
         .mx_EventTile_readAvatars {
-            top: 27px;
-        }
-
-        &.mx_EventTile_continuation .mx_EventTile_readAvatars,
-        &.mx_EventTile_emote .mx_EventTile_readAvatars {
-            top: 5px;
-        }
-
-        &.mx_EventTile_info .mx_EventTile_readAvatars {
-            top: 4px;
+            // This aligns the avatar with the last line of the
+            // message. We want to move it one line up - 2rem
+            top: -2rem;
         }
 
         .mx_EventTile_content .markdown-body {

res/css/views/rooms/_IRCLayout.scss

@@ -115,8 +115,7 @@ $irc-line-height: $font-18px;
         .mx_EventTile_line {
             .mx_EventTile_e2eIcon,
             .mx_TextualEvent,
-            .mx_MTextBody,
-            .mx_ReplyThread_wrapper_empty {
+            .mx_MTextBody {
                 display: inline-block;
             }
         }
@@ -177,17 +176,13 @@ $irc-line-height: $font-18px;
     .mx_SenderProfile_hover {
         background-color: $primary-bg-color;
         overflow: hidden;
+        display: flex;
 
-        > span {
-            display: flex;
-
-            > .mx_SenderProfile_name,
-            > .mx_SenderProfile_aux {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                min-width: var(--name-width);
-                text-align: end;
-            }
+        > .mx_SenderProfile_displayName {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            min-width: var(--name-width);
+            text-align: end;
         }
     }
 
@@ -212,12 +207,30 @@ $irc-line-height: $font-18px;
             background: transparent;
 
             > span {
-                > .mx_SenderProfile_name,
-                > .mx_SenderProfile_aux {
+                > .mx_SenderProfile_displayName {
                     min-width: inherit;
                 }
             }
         }
+
+        .mx_EventTile_emote {
+            > .mx_EventTile_avatar {
+                margin-left: initial;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            width: initial;
+        }
+
+        /**
+         * adding the icon back in the document flow
+         * if it's not present, there's no unwanted wasted space
+         */
+        .mx_EventTile_e2eIcon {
+            position: relative;
+            order: -1;
+        }
     }
 
     .mx_ProfileResizer {

res/css/views/rooms/_JumpToBottomButton.scss

@@ -52,6 +52,7 @@ limitations under the License.
 
 .mx_JumpToBottomButton_scrollDown {
     position: relative;
+    display: block;
     height: 38px;
     border-radius: 19px;
     box-sizing: border-box;

res/css/views/rooms/_MemberInfo.scss

@@ -19,6 +19,7 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
+    margin-top: 8px;
 }
 
 .mx_MemberInfo_name {

res/css/views/rooms/_MemberList.scss

@@ -44,6 +44,12 @@ limitations under the License.
     .mx_AutoHideScrollbar {
         flex: 1 1 0;
     }
+
+    .mx_RightPanel_scopeHeader {
+        // vertically align with position on other right panel cards
+        // to prevent it bouncing as user navigates right panel
+        margin-top: -8px;
+    }
 }
 
 .mx_GroupMemberList_query,

res/css/views/rooms/_MessageComposer.scss

@@ -227,16 +227,8 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
 }
 
-.mx_MessageComposer_hangup::before {
-    mask-image: url('$(res)/img/element-icons/call/hangup.svg');
-}
-
-.mx_MessageComposer_voicecall::before {
-    mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
-}
-
-.mx_MessageComposer_videocall::before {
-    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+.mx_MessageComposer_voiceMessage::before {
+    mask-image: url('$(res)/img/voip/mic-on-mask.svg');
 }
 
 .mx_MessageComposer_emoji::before {
@@ -247,6 +239,32 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
 }
 
+.mx_MessageComposer_sendMessage {
+    cursor: pointer;
+    position: relative;
+    margin-right: 6px;
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    background-color: $button-bg-color;
+
+    &::before {
+        position: absolute;
+        height: 16px;
+        width: 16px;
+        top: 8px;
+        left: 9px;
+
+        mask-image: url('$(res)/img/element-icons/send-message.svg');
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+
+        background-color: $button-fg-color;
+        content: '';
+    }
+}
+
 .mx_MessageComposer_formatting {
     cursor: pointer;
     margin: 0 11px;

res/css/views/rooms/_MessageComposerFormatBar.scss

@@ -60,6 +60,8 @@ limitations under the License.
         width: 27px;
         height: 24px;
         box-sizing: border-box;
+        background: none;
+        vertical-align: middle;
     }
 
     .mx_MessageComposerFormatBar_button::after {

res/css/views/rooms/_NewRoomIntro.scss

@@ -18,8 +18,8 @@ limitations under the License.
     margin: 40px 0 48px 64px;
 
     .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
-        &::before, &::after {
-            content: unset;
+        .mx_MiniAvatarUploader_indicator {
+            display: none;
         }
     }
 
@@ -33,8 +33,13 @@ limitations under the License.
 
         .mx_AccessibleButton {
             line-height: $font-24px;
+            display: inline-block;
 
-            &::before {
+            & + .mx_AccessibleButton {
+                margin-left: 12px;
+            }
+
+            &:not(.mx_AccessibleButton_kind_primary_outline)::before {
                 content: '';
                 display: inline-block;
                 background-color: $button-fg-color;

res/css/views/rooms/_PinnedEventTile.scss

@@ -16,62 +16,91 @@ limitations under the License.
 
 .mx_PinnedEventTile {
     min-height: 40px;
-    margin-bottom: 5px;
     width: 100%;
-    border-radius: 5px; // for the hover
-}
+    padding: 0 4px 12px;
 
-.mx_PinnedEventTile:hover {
-    background-color: $event-selected-color;
-}
+    display: grid;
+    grid-template-areas:
+        "avatar name remove"
+        "content content content"
+        "footer footer footer";
+    grid-template-rows: max-content auto max-content;
+    grid-template-columns: 24px auto 24px;
+    grid-row-gap: 12px;
+    grid-column-gap: 8px;
 
-.mx_PinnedEventTile .mx_PinnedEventTile_sender,
-.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
-    color: #868686;
-    font-size: 0.8em;
-    vertical-align: top;
-    display: inline-block;
-    padding-bottom: 3px;
-}
+    & + .mx_PinnedEventTile {
+        padding: 12px 4px;
+        border-top: 1px solid $menu-border-color;
+    }
 
-.mx_PinnedEventTile .mx_PinnedEventTile_timestamp {
-    padding-left: 15px;
-    display: none;
-}
+    .mx_PinnedEventTile_senderAvatar {
+        grid-area: avatar;
+    }
 
-.mx_PinnedEventTile .mx_PinnedEventTile_senderAvatar .mx_BaseAvatar {
-    float: left;
-    margin-right: 10px;
-}
+    .mx_PinnedEventTile_sender {
+        grid-area: name;
+        font-weight: $font-semi-bold;
+        font-size: $font-15px;
+        line-height: $font-24px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
 
-.mx_PinnedEventTile_actions {
-    float: right;
-    margin-right: 10px;
-    display: none;
-}
+    .mx_PinnedEventTile_unpinButton {
+        visibility: hidden;
+        grid-area: remove;
+        position: relative;
+        width: 24px;
+        height: 24px;
+        border-radius: 8px;
 
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
-    display: inline-block;
-}
+        &:hover {
+            background-color: $roomheader-addroom-bg-color;
+        }
 
-.mx_PinnedEventTile:hover .mx_PinnedEventTile_actions {
-    display: block;
-}
+        &::before {
+            content: "";
+            position: absolute;
+            //top: 0;
+            //left: 0;
+            height: inherit;
+            width: inherit;
+            background: $secondary-fg-color;
+            mask-position: center;
+            mask-size: 8px;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/image-view/close.svg');
+        }
+    }
 
-.mx_PinnedEventTile_unpinButton {
-    display: inline-block;
-    cursor: pointer;
-    margin-left: 10px;
-}
+    .mx_PinnedEventTile_message {
+        grid-area: content;
+    }
 
-.mx_PinnedEventTile_gotoButton {
-    display: inline-block;
-    font-size: 0.7em; // Smaller text to avoid conflicting with the layout
-}
+    .mx_PinnedEventTile_footer {
+        grid-area: footer;
+        font-size: 10px;
+        line-height: 12px;
 
-.mx_PinnedEventTile_message {
-    margin-left: 50px;
-    position: relative;
-    top: 0;
-    left: 0;
+        .mx_PinnedEventTile_timestamp {
+            font-size: inherit;
+            line-height: inherit;
+            color: $secondary-fg-color;
+        }
+
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            margin-left: 12px;
+            font-size: inherit;
+            line-height: inherit;
+        }
+    }
+
+    &:hover {
+        .mx_PinnedEventTile_unpinButton {
+            visibility: visible;
+        }
+    }
 }

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -32,14 +32,14 @@ limitations under the License.
     // first triggering the enter state with the newest breadcrumb off screen (-40px) then
     // sliding it into view.
     &.mx_RoomBreadcrumbs-enter {
-        margin-left: -40px; // 32px for the avatar, 8px for the margin
+        transform: translateX(-40px); // 32px for the avatar, 8px for the margin
     }
     &.mx_RoomBreadcrumbs-enter-active {
-        margin-left: 0;
+        transform: translateX(0);
 
         // Timing function is as-requested by design.
         // NOTE: The transition time MUST match the value passed to CSSTransition!
-        transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
+        transition: transform 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
     }
 
     .mx_RoomBreadcrumbs_placeholder {

res/css/views/rooms/_RoomHeader.scss

@@ -252,6 +252,19 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
 }
 
+.mx_RoomHeader_voiceCallButton::before {
+    mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
+
+    // The call button SVG is padded slightly differently, so match it up to the size
+    // of the other icons
+    mask-size: 20px;
+    mask-position: center;
+}
+
+.mx_RoomHeader_videoCallButton::before {
+    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+}
+
 .mx_RoomHeader_showPanel {
     height: 16px;
 }
@@ -264,24 +277,6 @@ limitations under the License.
     margin-top: 18px;
 }
 
-.mx_RoomHeader_pinnedButton::before {
-    mask-image: url('$(res)/img/element-icons/room/pin.svg');
-}
-
-.mx_RoomHeader_pinsIndicator {
-    position: absolute;
-    right: 0;
-    bottom: 4px;
-    width: 8px;
-    height: 8px;
-    border-radius: 8px;
-    background-color: $pinned-color;
-}
-
-.mx_RoomHeader_pinsIndicatorUnread {
-    background-color: $pinned-unread-color;
-}
-
 @media only screen and (max-width: 480px) {
     .mx_RoomHeader_wrapper {
         padding: 0;

res/css/views/rooms/_RoomList.scss

@@ -19,11 +19,17 @@ limitations under the License.
 }
 
 .mx_RoomList_iconPlus::before {
-    mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+    mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
+}
+.mx_RoomList_iconHash::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
 }
 .mx_RoomList_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
 }
+.mx_RoomList_iconBrowse::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+}
 .mx_RoomList_iconDialpad::before {
     mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
 }
@@ -31,29 +37,33 @@ limitations under the License.
 .mx_RoomList_explorePrompt {
     margin: 4px 12px 4px;
     padding-top: 12px;
-    border-top: 1px solid $tertiary-fg-color;
-    font-size: $font-13px;
+    border-top: 1px solid $input-border-color;
+    font-size: $font-14px;
 
     div:first-child {
         font-weight: $font-semi-bold;
+        line-height: $font-18px;
+        color: $primary-fg-color;
     }
 
     .mx_AccessibleButton {
-        color: $secondary-fg-color;
+        color: $primary-fg-color;
         position: relative;
-        padding: 0 0 0 24px;
+        padding: 8px 8px 8px 32px;
         font-size: inherit;
-        margin-top: 8px;
+        margin-top: 12px;
         display: block;
         text-align: start;
+        background-color: $roomlist-button-bg-color;
+        border-radius: 4px;
 
         &::before {
             content: '';
             width: 16px;
             height: 16px;
             position: absolute;
-            top: 0;
-            left: 0;
+            top: 8px;
+            left: 8px;
             background: $secondary-fg-color;
             mask-position: center;
             mask-size: contain;
@@ -67,5 +77,13 @@ limitations under the License.
         &.mx_RoomList_explorePrompt_explore::before {
             mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
         }
+
+        &.mx_RoomList_explorePrompt_spaceInvite::before {
+            mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        }
+
+        &.mx_RoomList_explorePrompt_spaceExplore::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+        }
     }
 }

res/css/views/rooms/_RoomSublist.scss

@@ -18,6 +18,10 @@ limitations under the License.
     margin-left: 8px;
     margin-bottom: 4px;
 
+    &.mx_RoomSublist_hidden {
+        display: none;
+    }
+
     .mx_RoomSublist_headerContainer {
         // Create a flexbox to make alignment easy
         display: flex;
@@ -37,7 +41,9 @@ limitations under the License.
         // The combined height must be set in the LeftPanel component for sticky headers
         // to work correctly.
         padding-bottom: 8px;
-        height: 24px;
+        // Allow the container to collapse on itself if its children
+        // are not in the normal document flow
+        max-height: 24px;
         color: $roomlist-header-color;
 
         .mx_RoomSublist_stickable {
@@ -55,8 +61,8 @@ limitations under the License.
             &.mx_RoomSublist_headerContainer_sticky {
                 position: fixed;
                 height: 32px; // to match the header container
-                // width set by JS
-                width: calc(100% - 22px);
+                // width set by JS because of a compat issue between Firefox and Chrome
+                width: calc(100% - 15px);
             }
 
             // We don't have a top style because the top is dependent on the room list header's
@@ -92,7 +98,7 @@ limitations under the License.
             position: relative;
             width: 24px;
             height: 24px;
-            border-radius: 32px;
+            border-radius: 8px;
 
             &::before {
                 content: '';
@@ -108,6 +114,11 @@ limitations under the License.
             }
         }
 
+        .mx_RoomSublist_auxButton:hover,
+        .mx_RoomSublist_menuButton:hover {
+            background: $roomlist-button-bg-color;
+        }
+
         // Hide the menu button by default
         .mx_RoomSublist_menuButton {
             visibility: hidden;
@@ -187,6 +198,7 @@ limitations under the License.
             // as the box model should be top aligned. Happens in both FF and Chromium
             display: flex;
             flex-direction: column;
+            align-self: stretch;
 
             mask-image: linear-gradient(0deg, transparent, black 4px);
         }
@@ -197,6 +209,9 @@ limitations under the License.
 
         .mx_RoomSublist_resizerHandles {
             flex: 0 0 4px;
+            display: flex;
+            justify-content: center;
+            width: 100%;
         }
 
         // Class name comes from the ResizableBox component
@@ -207,17 +222,12 @@ limitations under the License.
             border-radius: 3px;
 
             // Override styles from library
-            width: unset !important;
+            max-width: 64px;
             height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
 
             // This is positioned directly below the 'show more' button.
-            position: absolute;
+            position: relative !important;
             bottom: 0 !important; // override from library
-
-            // Together, these make the bar 64px wide
-            // These are also overridden from the library
-            left: calc(50% - 32px) !important;
-            right: calc(50% - 32px) !important;
         }
 
         &:hover, &.mx_RoomSublist_hasMenuOpen {

res/css/views/rooms/_RoomTile.scss

@@ -19,6 +19,10 @@ limitations under the License.
     margin-bottom: 4px;
     padding: 4px;
 
+    contain: content; // Not strict as it will break when resizing a sublist vertically
+    height: 40px;
+    box-sizing: border-box;
+
     // The tile is also a flexbox row itself
     display: flex;
 
@@ -189,6 +193,10 @@ limitations under the License.
         mask-image: url('$(res)/img/element-icons/settings.svg');
     }
 
+    .mx_RoomTile_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+    }
+
     .mx_RoomTile_iconSignOut::before {
         mask-image: url('$(res)/img/element-icons/leave.svg');
     }

res/css/views/rooms/_VoiceRecordComposerTile.scss

@@ -0,0 +1,98 @@
+/*
+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_VoiceRecordComposerTile_stop {
+    // 28px plus a 2px border makes this a 32px square (as intended)
+    width: 28px;
+    height: 28px;
+    border: 2px solid $voice-record-stop-border-color;
+    border-radius: 32px;
+    margin-right: 16px; // between us and the send button
+    position: relative;
+
+    &::after {
+        content: '';
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        top: 7px;
+        left: 7px;
+        border-radius: 2px;
+        background-color: $voice-record-stop-symbol-color;
+    }
+}
+
+.mx_VoiceRecordComposerTile_delete {
+    width: 14px; // w&h are size of icon
+    height: 18px;
+    vertical-align: middle;
+    margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
+    background-color: $voice-record-icon-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-image: url('$(res)/img/element-icons/trashcan.svg');
+}
+
+.mx_MessageComposer_row .mx_VoiceMessagePrimaryContainer {
+    // Note: remaining class properties are in the PlayerContainer CSS.
+
+    margin: 6px; // force the composer area to put a gutter around us
+    margin-right: 12px; // isolate from stop/send button
+
+    position: relative; // important for the live circle
+
+    &.mx_VoiceRecordComposerTile_recording {
+        // We are putting the circle in this padding, so we need +10px from the regular
+        // padding on the left side.
+        padding-left: 22px;
+
+        &::before {
+            animation: recording-pulse 2s infinite;
+
+            content: '';
+            background-color: $voice-record-live-circle-color;
+            width: 10px;
+            height: 10px;
+            position: absolute;
+            left: 12px; // 12px from the left edge for container padding
+            top: 18px; // vertically center (middle align with clock)
+            border-radius: 10px;
+        }
+    }
+}
+
+// The keyframes are slightly weird here to help make a ramping/punch effect
+// for the recording dot. We start and end at 100% opacity to help make the
+// dot feel a bit like a real lamp that is blinking: the animation ends up
+// spending a lot of its time showing a steady state without a fade effect.
+// This lamp effect extends into why the 0% opacity keyframe is not in the
+// midpoint: lamps take longer to turn off than they do to turn on, and the
+// extra frames give it a bit of a realistic punch for when the animation is
+// ramping back up to 100% opacity.
+//
+// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s
+// (intended to be used in a loop for 2s animation speed)
+@keyframes recording-pulse {
+    0% {
+        opacity: 1;
+    }
+    35% {
+        opacity: 0;
+    }
+    65% {
+        opacity: 1;
+    }
+}

res/css/views/settings/_SpellCheckLanguages.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 Travis Ralston
+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.
@@ -14,24 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_PinnedEventsPanel {
-    border-top: 1px solid $primary-hairline-color;
+.mx_ExistingSpellCheckLanguage {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
 }
 
-.mx_PinnedEventsPanel_body {
-    max-height: 300px;
-    overflow-y: auto;
-    padding-bottom: 15px;
+.mx_ExistingSpellCheckLanguage_language {
+    flex: 1;
+    margin-right: 10px;
 }
 
-.mx_PinnedEventsPanel_header {
-    margin: 0;
-    padding-top: 8px;
-    padding-bottom: 15px;
+.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
+    margin-top: 1em;
+    margin-bottom: 1em;
 }
 
-.mx_PinnedEventsPanel_cancel {
-    margin: 12px;
-    float: right;
-    display: inline-block;
+.mx_SpellCheckLanguages {
+    @mixin mx_Settings_fullWidthField;
 }

res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss

@@ -22,3 +22,34 @@ limitations under the License.
 .mx_HelpUserSettingsTab span.mx_AccessibleButton {
     word-break: break-word;
 }
+
+.mx_HelpUserSettingsTab code {
+    word-break: break-all;
+    user-select: all;
+}
+
+.mx_HelpUserSettingsTab_accessToken {
+    display: flex;
+    justify-content: space-between;
+    border-radius: 5px;
+    border: solid 1px $light-fg-color;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    padding: 10px;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy {
+    flex-shrink: 0;
+    cursor: pointer;
+    margin-left: 20px;
+    display: inherit;
+}
+
+.mx_HelpUserSettingsTab_accessToken_copy > 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;
+}

res/css/views/settings/tabs/user/_LabsUserSettingsTab.scss

@@ -0,0 +1,25 @@
+/*
+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_LabsUserSettingsTab {
+    .mx_SettingsTab_section {
+        margin-top: 32px;
+
+        .mx_SettingsFlag {
+            margin-right: 0; // remove right margin to align with beta cards
+        }
+    }
+}

res/css/views/spaces/_SpaceBasicSettings.scss

@@ -0,0 +1,86 @@
+/*
+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_SpaceBasicSettings {
+    .mx_Field {
+        margin: 32px 0;
+    }
+
+    .mx_SpaceBasicSettings_avatarContainer {
+        display: flex;
+        margin-top: 24px;
+
+        .mx_SpaceBasicSettings_avatar {
+            position: relative;
+            height: 80px;
+            width: 80px;
+            background-color: $tertiary-fg-color;
+            border-radius: 16px;
+        }
+
+        img.mx_SpaceBasicSettings_avatar {
+            width: 80px;
+            height: 80px;
+            object-fit: cover;
+            border-radius: 16px;
+        }
+
+        // only show it when the button is a div and not an img (has avatar)
+        div.mx_SpaceBasicSettings_avatar {
+            cursor: pointer;
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: 80px;
+                width: 80px;
+                top: 0;
+                left: 0;
+                background-color: #ffffff; // white icon fill
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 20px;
+                mask-image: url('$(res)/img/element-icons/camera.svg');
+            }
+        }
+
+        > input[type="file"] {
+            display: none;
+        }
+
+        > .mx_AccessibleButton_kind_link {
+            display: inline-block;
+            padding: 0;
+            margin: auto 16px;
+            color: #368bd6;
+        }
+
+        > .mx_SpaceBasicSettings_avatar_remove {
+            color: $notice-primary-color;
+        }
+    }
+
+    .mx_FormButton {
+        padding: 8px 22px;
+        margin-left: auto;
+        display: block;
+        width: min-content;
+    }
+
+    .mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+}

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -0,0 +1,101 @@
+/*
+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.
+*/
+
+$spacePanelWidth: 71px;
+
+.mx_SpaceCreateMenu_wrapper {
+    // background blur everything except SpacePanel
+    .mx_ContextualMenu_background {
+        background-color: $dialog-backdrop-color;
+        opacity: 0.6;
+        left: $spacePanelWidth;
+    }
+
+    .mx_ContextualMenu {
+        padding: 24px;
+        width: 480px;
+        box-sizing: border-box;
+        background-color: $primary-bg-color;
+        position: relative;
+
+        > div {
+            > h2 {
+                font-weight: $font-semi-bold;
+                font-size: $font-18px;
+                margin-top: 4px;
+            }
+
+            > p {
+                font-size: $font-15px;
+                color: $secondary-fg-color;
+                margin: 0;
+            }
+        }
+
+        // XXX remove this when spaces leaves Beta
+        .mx_BetaCard_betaPill {
+            position: absolute;
+            top: 24px;
+            right: 24px;
+        }
+
+        .mx_SpaceCreateMenuType {
+            @mixin SpacePillButton;
+        }
+
+        .mx_SpaceCreateMenuType_public::before {
+            mask-image: url('$(res)/img/globe.svg');
+        }
+        .mx_SpaceCreateMenuType_private::before {
+            mask-image: url('$(res)/img/element-icons/lock.svg');
+        }
+
+        .mx_SpaceCreateMenu_back {
+            width: 28px;
+            height: 28px;
+            position: relative;
+            background-color: $roomlist-button-bg-color;
+            border-radius: 14px;
+            margin-bottom: 12px;
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: 28px;
+                width: 28px;
+                top: 0;
+                left: 0;
+                background-color: $tertiary-fg-color;
+                transform: rotate(90deg);
+                mask-repeat: no-repeat;
+                mask-position: 2px 3px;
+                mask-size: 24px;
+                mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+            }
+        }
+
+        .mx_AccessibleButton_kind_primary {
+            padding: 8px 22px;
+            margin-left: auto;
+            display: block;
+            width: min-content;
+        }
+
+        .mx_AccessibleButton_disabled {
+            cursor: not-allowed;
+        }
+    }
+}

res/css/views/spaces/_SpacePublicShare.scss

@@ -0,0 +1,29 @@
+/*
+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_SpacePublicShare {
+    .mx_AccessibleButton {
+        @mixin SpacePillButton;
+
+        &.mx_SpacePublicShare_shareButton::before {
+            mask-image: url('$(res)/img/element-icons/link.svg');
+        }
+
+        &.mx_SpacePublicShare_inviteButton::before {
+            mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        }
+    }
+}

res/css/views/voice_messages/_PlayPauseButton.scss

@@ -0,0 +1,51 @@
+/*
+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;
+    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');
+    }
+}

res/css/views/voice_messages/_PlaybackContainer.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.
+*/
+
+// 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;
+    background-color: $voice-record-waveform-bg-color;
+    border-radius: 12px;
+
+    // Cheat at alignment a bit
+    display: flex;
+    align-items: center;
+
+    color: $voice-record-waveform-fg-color;
+    font-size: $font-14px;
+    line-height: $font-24px;
+
+    .mx_Waveform {
+        .mx_Waveform_bar {
+            background-color: $voice-record-waveform-incomplete-fg-color;
+
+            &.mx_Waveform_bar_100pct {
+                // Small animation to remove the mechanical feel of progress
+                transition: background-color 250ms ease;
+                background-color: $voice-record-waveform-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
+    }
+}

res/css/views/voice_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
+    }
+}

res/css/views/voip/_CallContainer.scss

@@ -98,5 +98,29 @@ limitations under the License.
                 line-height: $font-24px;
             }
         }
+
+        .mx_IncomingCallBox_iconButton {
+            position: absolute;
+            right: 8px;
+
+            &::before {
+                content: '';
+
+                height: 20px;
+                width: 20px;
+                background-color: $icon-button-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+                mask-position: center;
+            }
+        }
+
+        .mx_IncomingCallBox_silence::before {
+            mask-image: url('$(res)/img/voip/silence.svg');
+        }
+
+        .mx_IncomingCallBox_unSilence::before {
+            mask-image: url('$(res)/img/voip/un-silence.svg');
+        }
     }
 }

res/css/views/voip/_CallView.scss

@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_CallView {
     border-radius: 8px;
-    background-color: $voipcall-plinth-color;
+    background-color: $dark-panel-bg-color;
     padding-left: 8px;
     padding-right: 8px;
     // XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
@@ -27,9 +27,12 @@ limitations under the License.
 .mx_CallView_large {
     padding-bottom: 10px;
     margin: 5px 5px 5px 18px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
 
     .mx_CallView_voice {
-        height: 360px;
+        flex: 1;
     }
 }
 
@@ -37,7 +40,8 @@ limitations under the License.
     width: 320px;
     padding-bottom: 8px;
     margin-top: 10px;
-    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+    background-color: $voipcall-plinth-color;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
     border-radius: 8px;
 
     .mx_CallView_voice {
@@ -55,20 +59,23 @@ limitations under the License.
         }
     }
 
-    .mx_CallView_voice_holdText {
+    .mx_CallView_holdTransferContent {
         padding-top: 10px;
         padding-bottom: 25px;
     }
 }
 
-.mx_CallView_voice {
+.mx_CallView_content {
     position: relative;
     display: flex;
-    flex-direction: column;
+    border-radius: 8px;
+}
+
+.mx_CallView_voice {
     align-items: center;
     justify-content: center;
+    flex-direction: column;
     background-color: $inverted-bg-color;
-    border-radius: 8px;
 }
 
 .mx_CallView_voice_avatarsContainer {
@@ -82,7 +89,7 @@ limitations under the License.
     }
 }
 
-.mx_CallView_voice_hold {
+.mx_CallView_voice .mx_CallView_holdTransferContent {
     // This masks the avatar image so when it's blurred, the edge is still crisp
     .mx_CallView_voice_avatarContainer {
         border-radius: 2000px;
@@ -91,7 +98,7 @@ limitations under the License.
     }
 }
 
-.mx_CallView_voice_holdText {
+.mx_CallView_holdTransferContent {
     height: 20px;
     padding-top: 20px;
     padding-bottom: 15px;
@@ -104,9 +111,8 @@ limitations under the License.
 
 .mx_CallView_video {
     width: 100%;
-    position: relative;
+    height: 100%;
     z-index: 30;
-    border-radius: 8px;
     overflow: hidden;
 }
 
@@ -142,7 +148,7 @@ limitations under the License.
     }
 }
 
-.mx_CallView_video_holdContent {
+.mx_CallView_video .mx_CallView_holdTransferContent {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -177,6 +183,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     justify-content: left;
+    flex-shrink: 0;
 }
 
 .mx_CallView_header_callType {

res/css/views/voip/_CallViewForRoom.scss

@@ -0,0 +1,46 @@
+/*
+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_CallViewForRoom {
+    overflow: hidden;
+
+    .mx_CallViewForRoom_ResizeWrapper {
+        display: flex;
+        margin-bottom: 8px;
+
+        &:hover .mx_CallViewForRoom_ResizeHandle {
+            // Need to use important to override element style attributes
+            // set by re-resizable
+            width: 100% !important;
+
+            display: flex;
+            justify-content: center;
+
+            &::after {
+                content: '';
+                margin-top: 3px;
+
+                border-radius: 4px;
+
+                height: 4px;
+                width: 100%;
+                max-width: 64px;
+
+                background-color: $primary-fg-color;
+            }
+        }
+    }
+}

res/css/views/voip/_VideoFeed.scss

@@ -14,20 +14,37 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_VideoFeed_voice {
+    // We don't want to collide with the call controls that have 52px of height
+    padding-bottom: 52px;
+    background-color: $inverted-bg-color;
+}
+
+
 .mx_VideoFeed_remote {
     width: 100%;
-    background-color: #000;
-    z-index: 50;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.mx_VideoFeed_video {
+        background-color: #000;
+    }
 }
 
 .mx_VideoFeed_local {
-    width: 25%;
-    height: 25%;
+    max-width: 25%;
+    max-height: 25%;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 100;
     border-radius: 4px;
+
+    &.mx_VideoFeed_video {
+        background-color: transparent;
+    }
 }
 
 .mx_VideoFeed_mirror {