Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into t3chguy/a11y/composer-list-autocomplete

Conflicts: src/components/structures/LoggedInView.tsx src/components/views/rooms/BasicMessageComposer.tsx src/editor/autocomplete.ts
2021-05-11 10:59:22 +01:00 · 2021-05-11 10:59:22 +01:00 · 60d3da2441
commit 60d3da2441
parent 9463fda1c1 f74d4769ca
717 changed files with 34517 additions and 8522 deletions
--- a/.eslintignore.errorfiles
+++ b/.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
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -15,7 +15,6 @@ module.exports = {
        "prefer-promise-reject-errors": "off",
        "no-async-promise-executor": "off",
        "quotes": "off",
        "indent": "off",
    },
    overrides: [{
--- a/.gitignore
+++ b/.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
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -4,6 +4,7 @@ module.exports = {
        "stylelint-scss",
    ],
    "rules": {
        "color-hex-case": null,
        "indentation": 4,
        "comment-empty-line-before": null,
        "declaration-empty-line-before": null,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,620 @@
 Changes in [3.20.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.20.0) (2021-05-10)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.20.0-rc.1...v3.20.0)
 * Upgrade to JS SDK 10.1.0
 * [Release] Don't use the event's metadata to calc the scale of an image
   [\#6004](https://github.com/matrix-org/matrix-react-sdk/pull/6004)
 Changes in [3.20.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.20.0-rc.1) (2021-05-04)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.19.0...v3.20.0-rc.1)
 * Upgrade to JS SDK 10.1.0-rc.1
 * Translations update from Weblate
   [\#5966](https://github.com/matrix-org/matrix-react-sdk/pull/5966)
 * Fix more space panel layout and hover behaviour issues
   [\#5965](https://github.com/matrix-org/matrix-react-sdk/pull/5965)
 * Fix edge case with space panel alignment with subspaces on ff
   [\#5964](https://github.com/matrix-org/matrix-react-sdk/pull/5964)
 * Fix saving room pill part to history
   [\#5951](https://github.com/matrix-org/matrix-react-sdk/pull/5951)
 * Generate room preview even when minimized
   [\#5948](https://github.com/matrix-org/matrix-react-sdk/pull/5948)
 * Another change from recovery passphrase to Security Phrase
   [\#5934](https://github.com/matrix-org/matrix-react-sdk/pull/5934)
 * Sort rooms in the add existing to space dialog based on recency
   [\#5943](https://github.com/matrix-org/matrix-react-sdk/pull/5943)
 * Inhibit sending RR when context switching to a room
   [\#5944](https://github.com/matrix-org/matrix-react-sdk/pull/5944)
 * Prevent room list keyboard handling from landing focus on hidden nodes
   [\#5950](https://github.com/matrix-org/matrix-react-sdk/pull/5950)
 * Make the text filter search all spaces instead of just the selected one
   [\#5942](https://github.com/matrix-org/matrix-react-sdk/pull/5942)
 * Enable indent rule and fix indent
   [\#5931](https://github.com/matrix-org/matrix-react-sdk/pull/5931)
 * Prevent peeking members from reacting
   [\#5946](https://github.com/matrix-org/matrix-react-sdk/pull/5946)
 * Disallow inline display maths
   [\#5939](https://github.com/matrix-org/matrix-react-sdk/pull/5939)
 * Space creation prompt user to add existing rooms for "Just Me" spaces
   [\#5923](https://github.com/matrix-org/matrix-react-sdk/pull/5923)
 * Add test coverage collection script
   [\#5937](https://github.com/matrix-org/matrix-react-sdk/pull/5937)
 * Fix joining room using via servers regression
   [\#5936](https://github.com/matrix-org/matrix-react-sdk/pull/5936)
 * Revert "Fixes the two Todays problem in Redaction"
   [\#5938](https://github.com/matrix-org/matrix-react-sdk/pull/5938)
 * Handle encoded matrix URLs
   [\#5903](https://github.com/matrix-org/matrix-react-sdk/pull/5903)
 * Render ignored users setting regardless of if there are any
   [\#5860](https://github.com/matrix-org/matrix-react-sdk/pull/5860)
 * Fix inserting trailing colon after mention/pill
   [\#5830](https://github.com/matrix-org/matrix-react-sdk/pull/5830)
 * Fixes the two Todays problem in Redaction
   [\#5917](https://github.com/matrix-org/matrix-react-sdk/pull/5917)
 * Fix page up/down scrolling only half a page
   [\#5920](https://github.com/matrix-org/matrix-react-sdk/pull/5920)
 * Voice messages: Composer controls
   [\#5935](https://github.com/matrix-org/matrix-react-sdk/pull/5935)
 * Support MSC3086 asserted identity
   [\#5886](https://github.com/matrix-org/matrix-react-sdk/pull/5886)
 * Handle possible edge case with getting stuck in "unsent messages" bar
   [\#5930](https://github.com/matrix-org/matrix-react-sdk/pull/5930)
 * Fix suggested rooms not showing up regression from room list optimisation
   [\#5932](https://github.com/matrix-org/matrix-react-sdk/pull/5932)
 * Broadcast language change to ElectronPlatform
   [\#5913](https://github.com/matrix-org/matrix-react-sdk/pull/5913)
 * Fix VoIP PIP frame color
   [\#5701](https://github.com/matrix-org/matrix-react-sdk/pull/5701)
 * Convert some Flow-typed files to TypeScript
   [\#5912](https://github.com/matrix-org/matrix-react-sdk/pull/5912)
 * Initial SpaceStore tests work
   [\#5906](https://github.com/matrix-org/matrix-react-sdk/pull/5906)
 * Fix issues with space hierarchy in layout and with incompatible servers
   [\#5926](https://github.com/matrix-org/matrix-react-sdk/pull/5926)
 * Scale all mxc thumbs using device pixel ratio for hidpi
   [\#5928](https://github.com/matrix-org/matrix-react-sdk/pull/5928)
 * Fix add existing to space dialog no longer showing rooms for public spaces
   [\#5918](https://github.com/matrix-org/matrix-react-sdk/pull/5918)
 * Disable spaces context switching for when exploring a space
   [\#5924](https://github.com/matrix-org/matrix-react-sdk/pull/5924)
 * Autofocus search box in the add existing to space dialog
   [\#5921](https://github.com/matrix-org/matrix-react-sdk/pull/5921)
 * Use label element in add existing to space dialog for easier hit target
   [\#5922](https://github.com/matrix-org/matrix-react-sdk/pull/5922)
 * Dynamic max and min zoom in the new ImageView
   [\#5916](https://github.com/matrix-org/matrix-react-sdk/pull/5916)
 * Improve message error states
   [\#5897](https://github.com/matrix-org/matrix-react-sdk/pull/5897)
 * Check for null room in `VisibilityProvider`
   [\#5914](https://github.com/matrix-org/matrix-react-sdk/pull/5914)
 * Add unit tests for various collection-based utility functions
   [\#5910](https://github.com/matrix-org/matrix-react-sdk/pull/5910)
 * Spaces visual fixes
   [\#5909](https://github.com/matrix-org/matrix-react-sdk/pull/5909)
 * Remove reliance on DOM API to generated message preview
   [\#5908](https://github.com/matrix-org/matrix-react-sdk/pull/5908)
 * Expand upon voice message event & include overall waveform
   [\#5888](https://github.com/matrix-org/matrix-react-sdk/pull/5888)
 * Use floats for image background opacity
   [\#5905](https://github.com/matrix-org/matrix-react-sdk/pull/5905)
 * Show invites to spaces at the top of the space panel
   [\#5902](https://github.com/matrix-org/matrix-react-sdk/pull/5902)
 * Improve edge cases with spaces context switching
   [\#5899](https://github.com/matrix-org/matrix-react-sdk/pull/5899)
 * Fix spaces notification dots wrongly including upgraded (hidden) rooms
   [\#5900](https://github.com/matrix-org/matrix-react-sdk/pull/5900)
 * Iterate the spaces face pile design
   [\#5898](https://github.com/matrix-org/matrix-react-sdk/pull/5898)
 * Fix alignment issue with nested spaces being cut off wrong
   [\#5890](https://github.com/matrix-org/matrix-react-sdk/pull/5890)
 Changes in [3.19.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0) (2021-04-26)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.19.0-rc.1...v3.19.0)
 * Upgrade to JS SDK 10.0.0
 * [Release] Dynamic max and min zoom in the new ImageView
   [\#5927](https://github.com/matrix-org/matrix-react-sdk/pull/5927)
 * [Release] Add a WheelEvent normalization function
   [\#5911](https://github.com/matrix-org/matrix-react-sdk/pull/5911)
 * Add a WheelEvent normalization function
   [\#5904](https://github.com/matrix-org/matrix-react-sdk/pull/5904)
 * [Release] Use floats for image background opacity
   [\#5907](https://github.com/matrix-org/matrix-react-sdk/pull/5907)
 Changes in [3.19.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.19.0-rc.1) (2021-04-21)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0...v3.19.0-rc.1)
 * Upgrade to JS SDK 10.0.0-rc.1
 * Translations update from Weblate
   [\#5896](https://github.com/matrix-org/matrix-react-sdk/pull/5896)
 * Fix sticky tags header in room list
   [\#5895](https://github.com/matrix-org/matrix-react-sdk/pull/5895)
 * Fix spaces filtering sometimes lagging behind or behaving oddly
   [\#5893](https://github.com/matrix-org/matrix-react-sdk/pull/5893)
 * Fix issue with spaces context switching looping and breaking
   [\#5894](https://github.com/matrix-org/matrix-react-sdk/pull/5894)
 * Improve RoomList render time when filtering
   [\#5874](https://github.com/matrix-org/matrix-react-sdk/pull/5874)
 * Avoid being stuck in a space
   [\#5891](https://github.com/matrix-org/matrix-react-sdk/pull/5891)
 * [Spaces] Context switching
   [\#5795](https://github.com/matrix-org/matrix-react-sdk/pull/5795)
 * Warn when you attempt to leave room that you are the only member of
   [\#5415](https://github.com/matrix-org/matrix-react-sdk/pull/5415)
 * Ensure PersistedElement are unmounted on application logout
   [\#5884](https://github.com/matrix-org/matrix-react-sdk/pull/5884)
 * Add missing space in seshat dialog and the corresponding string
   [\#5866](https://github.com/matrix-org/matrix-react-sdk/pull/5866)
 * A tiny change to make the Add existing rooms dialog a little nicer
   [\#5885](https://github.com/matrix-org/matrix-react-sdk/pull/5885)
 * Remove weird margin from the file panel
   [\#5889](https://github.com/matrix-org/matrix-react-sdk/pull/5889)
 * Trigger lazy loading when filtering using spaces
   [\#5882](https://github.com/matrix-org/matrix-react-sdk/pull/5882)
 * Fix typo in method call in add existing to space dialog
   [\#5883](https://github.com/matrix-org/matrix-react-sdk/pull/5883)
 * New Image View fixes/improvements
   [\#5872](https://github.com/matrix-org/matrix-react-sdk/pull/5872)
 * Limit voice recording length
   [\#5871](https://github.com/matrix-org/matrix-react-sdk/pull/5871)
 * Clean up add existing to space dialog and include DMs in it too
   [\#5881](https://github.com/matrix-org/matrix-react-sdk/pull/5881)
 * Fix unknown slash command error exploding
   [\#5853](https://github.com/matrix-org/matrix-react-sdk/pull/5853)
 * Switch to a spec conforming email validation Regexp
   [\#5852](https://github.com/matrix-org/matrix-react-sdk/pull/5852)
 * Cleanup unused state in MessageComposer
   [\#5877](https://github.com/matrix-org/matrix-react-sdk/pull/5877)
 * Pulse animation for voice messages recording state
   [\#5869](https://github.com/matrix-org/matrix-react-sdk/pull/5869)
 * Don't include invisible rooms in notify summary
   [\#5875](https://github.com/matrix-org/matrix-react-sdk/pull/5875)
 * Properly disable composer access when recording a voice message
   [\#5870](https://github.com/matrix-org/matrix-react-sdk/pull/5870)
 * Stabilise starting a DM with multiple people flow
   [\#5862](https://github.com/matrix-org/matrix-react-sdk/pull/5862)
 * Render msgOption only if showReadReceipts is enabled
   [\#5864](https://github.com/matrix-org/matrix-react-sdk/pull/5864)
 * Labs: Add quick/cheap "do not disturb" flag
   [\#5873](https://github.com/matrix-org/matrix-react-sdk/pull/5873)
 * Fix ReadReceipts animations
   [\#5836](https://github.com/matrix-org/matrix-react-sdk/pull/5836)
 * Add tooltips to message previews
   [\#5859](https://github.com/matrix-org/matrix-react-sdk/pull/5859)
 * IRC Layout fix layout spacing in replies
   [\#5855](https://github.com/matrix-org/matrix-react-sdk/pull/5855)
 * Move user to welcome_page if continuing with previous session
   [\#5849](https://github.com/matrix-org/matrix-react-sdk/pull/5849)
 * Improve image view
   [\#5521](https://github.com/matrix-org/matrix-react-sdk/pull/5521)
 * Add a button to reset personal encryption state during login
   [\#5819](https://github.com/matrix-org/matrix-react-sdk/pull/5819)
 * Fix js-sdk import in SlashCommands
   [\#5850](https://github.com/matrix-org/matrix-react-sdk/pull/5850)
 * Fix useRoomPowerLevels hook
   [\#5854](https://github.com/matrix-org/matrix-react-sdk/pull/5854)
 * Prevent state events being rendered with invalid state keys
   [\#5851](https://github.com/matrix-org/matrix-react-sdk/pull/5851)
 * Give server ACLs a name in 'roles & permissions' tab
   [\#5838](https://github.com/matrix-org/matrix-react-sdk/pull/5838)
 * Don't hide notification badge on the home space button as it has no menu
   [\#5845](https://github.com/matrix-org/matrix-react-sdk/pull/5845)
 * User Info hide disambiguation as we always show MXID anyway
   [\#5843](https://github.com/matrix-org/matrix-react-sdk/pull/5843)
 * Improve kick state to not show if the target was not joined to begin with
   [\#5846](https://github.com/matrix-org/matrix-react-sdk/pull/5846)
 * Fix space store wrongly switching to a non-space filter
   [\#5844](https://github.com/matrix-org/matrix-react-sdk/pull/5844)
 * Tweak appearance of invite reason
   [\#5847](https://github.com/matrix-org/matrix-react-sdk/pull/5847)
 * Update Inter font to v3.18
   [\#5840](https://github.com/matrix-org/matrix-react-sdk/pull/5840)
 * Enable sharing historical keys on invite
   [\#5839](https://github.com/matrix-org/matrix-react-sdk/pull/5839)
 * Add ability to hide post-login encryption setup with customisation point
   [\#5834](https://github.com/matrix-org/matrix-react-sdk/pull/5834)
 * Use LaTeX and TeX delimiters by default
   [\#5515](https://github.com/matrix-org/matrix-react-sdk/pull/5515)
 * Clone author's deps fork for Netlify previews
   [\#5837](https://github.com/matrix-org/matrix-react-sdk/pull/5837)
 * Show drop file UI only if dragging a file
   [\#5827](https://github.com/matrix-org/matrix-react-sdk/pull/5827)
 * Ignore punctuation when filtering rooms
   [\#5824](https://github.com/matrix-org/matrix-react-sdk/pull/5824)
 * Resizable CallView
   [\#5710](https://github.com/matrix-org/matrix-react-sdk/pull/5710)
 Changes in [3.18.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0) (2021-04-12)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.18.0-rc.1...v3.18.0)
 * Upgrade to JS SDK 9.11.0
 * [Release] Tweak appearance of invite reason
   [\#5848](https://github.com/matrix-org/matrix-react-sdk/pull/5848)
 Changes in [3.18.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.18.0-rc.1) (2021-04-07)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0...v3.18.0-rc.1)
 * Upgrade to JS SDK 9.11.0-rc.1
 * Translations update from Weblate
   [\#5832](https://github.com/matrix-org/matrix-react-sdk/pull/5832)
 * Add fake fallback thumbnail URL for encrypted videos
   [\#5826](https://github.com/matrix-org/matrix-react-sdk/pull/5826)
 * Fix broken "Go to Home View" shortcut on macOS
   [\#5818](https://github.com/matrix-org/matrix-react-sdk/pull/5818)
 * Remove status area UI defects when in-call
   [\#5828](https://github.com/matrix-org/matrix-react-sdk/pull/5828)
 * Fix viewing invitations when the inviter has no avatar set
   [\#5829](https://github.com/matrix-org/matrix-react-sdk/pull/5829)
 * Restabilize room list ordering with prefiltering on spaces/communities
   [\#5825](https://github.com/matrix-org/matrix-react-sdk/pull/5825)
 * Show invite reasons
   [\#5694](https://github.com/matrix-org/matrix-react-sdk/pull/5694)
 * Require strong password in forgot password form
   [\#5744](https://github.com/matrix-org/matrix-react-sdk/pull/5744)
 * Attended transfer
   [\#5798](https://github.com/matrix-org/matrix-react-sdk/pull/5798)
 * Make user autocomplete query search beyond prefix
   [\#5822](https://github.com/matrix-org/matrix-react-sdk/pull/5822)
 * Add reset option for corrupted event index store
   [\#5806](https://github.com/matrix-org/matrix-react-sdk/pull/5806)
 * Prevent Re-request encryption keys from appearing under redacted messages
   [\#5816](https://github.com/matrix-org/matrix-react-sdk/pull/5816)
 * Keybindings follow up
   [\#5815](https://github.com/matrix-org/matrix-react-sdk/pull/5815)
 * Increase default visible tiles for room sublists
   [\#5821](https://github.com/matrix-org/matrix-react-sdk/pull/5821)
 * Change copy to point to native node modules docs in element desktop
   [\#5817](https://github.com/matrix-org/matrix-react-sdk/pull/5817)
 * Show waveform and timer in voice messages
   [\#5801](https://github.com/matrix-org/matrix-react-sdk/pull/5801)
 * Label unlabeled avatar button in event panel
   [\#5585](https://github.com/matrix-org/matrix-react-sdk/pull/5585)
 * Fix the theme engine breaking with some web theming extensions
   [\#5810](https://github.com/matrix-org/matrix-react-sdk/pull/5810)
 * Add /spoiler command
   [\#5696](https://github.com/matrix-org/matrix-react-sdk/pull/5696)
 * Don't specify sample rates for voice messages
   [\#5802](https://github.com/matrix-org/matrix-react-sdk/pull/5802)
 * Tweak security key error handling
   [\#5812](https://github.com/matrix-org/matrix-react-sdk/pull/5812)
 * Add user settings for warn before exit
   [\#5793](https://github.com/matrix-org/matrix-react-sdk/pull/5793)
 * Decouple key bindings from event handling
   [\#5720](https://github.com/matrix-org/matrix-react-sdk/pull/5720)
 * Fixing spaces papercuts
   [\#5792](https://github.com/matrix-org/matrix-react-sdk/pull/5792)
 * Share keys for historical messages when inviting users to encrypted rooms
   [\#5763](https://github.com/matrix-org/matrix-react-sdk/pull/5763)
 * Fix upload bar not populating when starting uploads
   [\#5804](https://github.com/matrix-org/matrix-react-sdk/pull/5804)
 * Fix crash on login when using social login
   [\#5803](https://github.com/matrix-org/matrix-react-sdk/pull/5803)
 * Convert AccessSecretStorageDialog to TypeScript
   [\#5805](https://github.com/matrix-org/matrix-react-sdk/pull/5805)
 * Tweak cross-signing copy
   [\#5807](https://github.com/matrix-org/matrix-react-sdk/pull/5807)
 * Fix password change popup message
   [\#5791](https://github.com/matrix-org/matrix-react-sdk/pull/5791)
 * View Source: make Event ID go below Event ID
   [\#5790](https://github.com/matrix-org/matrix-react-sdk/pull/5790)
 * Fix line numbers when missing trailing newline
   [\#5800](https://github.com/matrix-org/matrix-react-sdk/pull/5800)
 * Remember reply when switching rooms
   [\#5796](https://github.com/matrix-org/matrix-react-sdk/pull/5796)
 * Fix edge case with redaction grouper messing up continuations
   [\#5797](https://github.com/matrix-org/matrix-react-sdk/pull/5797)
 * Only show the ask anyway modal for explicit user lookup failures
   [\#5785](https://github.com/matrix-org/matrix-react-sdk/pull/5785)
 * Improve error reporting when EventIndex fails on a supported environment
   [\#5787](https://github.com/matrix-org/matrix-react-sdk/pull/5787)
 * Tweak and fix some space features
   [\#5789](https://github.com/matrix-org/matrix-react-sdk/pull/5789)
 * Support replying with a message command
   [\#5686](https://github.com/matrix-org/matrix-react-sdk/pull/5686)
 * Labs feature: Early implementation of voice messages
   [\#5769](https://github.com/matrix-org/matrix-react-sdk/pull/5769)
 Changes in [3.17.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0) (2021-03-29)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.17.0-rc.1...v3.17.0)
 * Upgrade to JS SDK 9.10.0
 * [Release] Tweak cross-signing copy
   [\#5808](https://github.com/matrix-org/matrix-react-sdk/pull/5808)
 * [Release] Fix crash on login when using social login
   [\#5809](https://github.com/matrix-org/matrix-react-sdk/pull/5809)
 * [Release] Fix edge case with redaction grouper messing up continuations
   [\#5799](https://github.com/matrix-org/matrix-react-sdk/pull/5799)
 Changes in [3.17.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.17.0-rc.1) (2021-03-25)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0...v3.17.0-rc.1)
 * Upgrade to JS SDK 9.10.0-rc.1
 * Translations update from Weblate
   [\#5788](https://github.com/matrix-org/matrix-react-sdk/pull/5788)
 * Track next event [tile] over group boundaries
   [\#5784](https://github.com/matrix-org/matrix-react-sdk/pull/5784)
 * Fixing the minor UI issues in the email discovery
   [\#5780](https://github.com/matrix-org/matrix-react-sdk/pull/5780)
 * Don't overwrite callback with undefined if no customization provided
   [\#5783](https://github.com/matrix-org/matrix-react-sdk/pull/5783)
 * Fix redaction event list summaries breaking sender profiles
   [\#5781](https://github.com/matrix-org/matrix-react-sdk/pull/5781)
 * Fix CIDER formatting buttons on Safari
   [\#5782](https://github.com/matrix-org/matrix-react-sdk/pull/5782)
 * Improve discovery of rooms in a space
   [\#5776](https://github.com/matrix-org/matrix-react-sdk/pull/5776)
 * Spaces improve creation journeys
   [\#5777](https://github.com/matrix-org/matrix-react-sdk/pull/5777)
 * Make buttons in verify dialog respect the system font
   [\#5778](https://github.com/matrix-org/matrix-react-sdk/pull/5778)
 * Collapse redactions into an event list summary
   [\#5728](https://github.com/matrix-org/matrix-react-sdk/pull/5728)
 * Added invite option to room's context menu
   [\#5648](https://github.com/matrix-org/matrix-react-sdk/pull/5648)
 * Add an optional config option to make the welcome page the login page
   [\#5658](https://github.com/matrix-org/matrix-react-sdk/pull/5658)
 * Fix username showing instead of display name in Jitsi widgets
   [\#5770](https://github.com/matrix-org/matrix-react-sdk/pull/5770)
 * Convert a bunch more js-sdk imports to absolute paths
   [\#5774](https://github.com/matrix-org/matrix-react-sdk/pull/5774)
 * Remove forgotten rooms from the room list once forgotten
   [\#5775](https://github.com/matrix-org/matrix-react-sdk/pull/5775)
 * Log error when failing to list usermedia devices
   [\#5771](https://github.com/matrix-org/matrix-react-sdk/pull/5771)
 * Fix weird timeline jumps
   [\#5772](https://github.com/matrix-org/matrix-react-sdk/pull/5772)
 * Replace type declaration in Registration.tsx
   [\#5773](https://github.com/matrix-org/matrix-react-sdk/pull/5773)
 * Add possibility to delay rageshake persistence in app startup
   [\#5767](https://github.com/matrix-org/matrix-react-sdk/pull/5767)
 * Fix left panel resizing and lower min-width improving flexibility
   [\#5764](https://github.com/matrix-org/matrix-react-sdk/pull/5764)
 * Work around more cases where a rageshake server might not be present
   [\#5766](https://github.com/matrix-org/matrix-react-sdk/pull/5766)
 * Iterate space panel visually and functionally
   [\#5761](https://github.com/matrix-org/matrix-react-sdk/pull/5761)
 * Make some dispatches async
   [\#5765](https://github.com/matrix-org/matrix-react-sdk/pull/5765)
 * fix: make room directory correct when using a homeserver with explicit port
   [\#5762](https://github.com/matrix-org/matrix-react-sdk/pull/5762)
 * Hangup all calls on logout
   [\#5756](https://github.com/matrix-org/matrix-react-sdk/pull/5756)
 * Remove now-unused assets and CSS from CompleteSecurity step
   [\#5757](https://github.com/matrix-org/matrix-react-sdk/pull/5757)
 * Add details and summary to allowed HTML tags
   [\#5760](https://github.com/matrix-org/matrix-react-sdk/pull/5760)
 * Support a media handling customisation endpoint
   [\#5714](https://github.com/matrix-org/matrix-react-sdk/pull/5714)
 * Edit button on View Source dialog that takes you to devtools ->
   SendCustomEvent
   [\#5718](https://github.com/matrix-org/matrix-react-sdk/pull/5718)
 * Show room alias in plain/formatted body
   [\#5748](https://github.com/matrix-org/matrix-react-sdk/pull/5748)
 * Allow pills on the beginning of a part string
   [\#5754](https://github.com/matrix-org/matrix-react-sdk/pull/5754)
 * [SK-3] Decorate easy components with replaceableComponent
   [\#5734](https://github.com/matrix-org/matrix-react-sdk/pull/5734)
 * Use fsync in reskindex to ensure file is written to disk
   [\#5753](https://github.com/matrix-org/matrix-react-sdk/pull/5753)
 * Remove unused common CSS classes
   [\#5752](https://github.com/matrix-org/matrix-react-sdk/pull/5752)
 * Rebuild space previews with new designs
   [\#5751](https://github.com/matrix-org/matrix-react-sdk/pull/5751)
 * Rework cross-signing login flow
   [\#5727](https://github.com/matrix-org/matrix-react-sdk/pull/5727)
 * Change read receipt drift to be non-fractional
   [\#5745](https://github.com/matrix-org/matrix-react-sdk/pull/5745)
 Changes in [3.16.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0) (2021-03-15)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0-rc.2...v3.16.0)
 * Upgrade to JS SDK 9.9.0
 * [Release] Change read receipt drift to be non-fractional
   [\#5746](https://github.com/matrix-org/matrix-react-sdk/pull/5746)
 * [Release] Properly gate SpaceRoomView behind labs
   [\#5750](https://github.com/matrix-org/matrix-react-sdk/pull/5750)
 Changes in [3.16.0-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0-rc.2) (2021-03-10)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.16.0-rc.1...v3.16.0-rc.2)
 * Fixed incorrect build output in rc.1
 Changes in [3.16.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.16.0-rc.1) (2021-03-10)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.15.0...v3.16.0-rc.1)
 * Upgrade to JS SDK 9.9.0-rc.1
 * Translations update from Weblate
   [\#5743](https://github.com/matrix-org/matrix-react-sdk/pull/5743)
 * Document behaviour of showReadReceipts=false for sent receipts
   [\#5739](https://github.com/matrix-org/matrix-react-sdk/pull/5739)
 * Tweak sent marker code style
   [\#5741](https://github.com/matrix-org/matrix-react-sdk/pull/5741)
 * Fix sent markers disappearing for edits/reactions
   [\#5737](https://github.com/matrix-org/matrix-react-sdk/pull/5737)
 * Ignore to-device decryption in the room list store
   [\#5740](https://github.com/matrix-org/matrix-react-sdk/pull/5740)
 * Spaces suggested rooms support
   [\#5736](https://github.com/matrix-org/matrix-react-sdk/pull/5736)
 * Add tooltips to sent/sending receipts
   [\#5738](https://github.com/matrix-org/matrix-react-sdk/pull/5738)
 * Remove a bunch of useless 'use strict' definitions
   [\#5735](https://github.com/matrix-org/matrix-react-sdk/pull/5735)
 * [SK-1] Fix types for replaceableComponent
   [\#5732](https://github.com/matrix-org/matrix-react-sdk/pull/5732)
 * [SK-2] Make debugging skinning problems easier
   [\#5733](https://github.com/matrix-org/matrix-react-sdk/pull/5733)
 * Support sending invite reasons with /invite command
   [\#5695](https://github.com/matrix-org/matrix-react-sdk/pull/5695)
 * Fix clicking on the avatar for opening member info requires pixel-perfect
   accuracy
   [\#5717](https://github.com/matrix-org/matrix-react-sdk/pull/5717)
 * Display decrypted and encrypted event source on the same dialog
   [\#5713](https://github.com/matrix-org/matrix-react-sdk/pull/5713)
 * Fix units of TURN server expiry time
   [\#5730](https://github.com/matrix-org/matrix-react-sdk/pull/5730)
 * Display room name in pills instead of address
   [\#5624](https://github.com/matrix-org/matrix-react-sdk/pull/5624)
 * Refresh UI for file uploads
   [\#5723](https://github.com/matrix-org/matrix-react-sdk/pull/5723)
 * UI refresh for uploaded files
   [\#5719](https://github.com/matrix-org/matrix-react-sdk/pull/5719)
 * Improve message sending states to match new designs
   [\#5699](https://github.com/matrix-org/matrix-react-sdk/pull/5699)
 * Add clipboard write permission for widgets
   [\#5725](https://github.com/matrix-org/matrix-react-sdk/pull/5725)
 * Fix widget resizing
   [\#5722](https://github.com/matrix-org/matrix-react-sdk/pull/5722)
 * Option for audio streaming
   [\#5707](https://github.com/matrix-org/matrix-react-sdk/pull/5707)
 * Show a specific error for hs_disabled
   [\#5576](https://github.com/matrix-org/matrix-react-sdk/pull/5576)
 * Add Edge to the targets list
   [\#5721](https://github.com/matrix-org/matrix-react-sdk/pull/5721)
 * File drop UI fixes and improvements
   [\#5505](https://github.com/matrix-org/matrix-react-sdk/pull/5505)
 * Fix Bottom border of state counters is white on the dark theme
   [\#5715](https://github.com/matrix-org/matrix-react-sdk/pull/5715)
 * Trim spurious whitespace of nicknames
   [\#5332](https://github.com/matrix-org/matrix-react-sdk/pull/5332)
 * Ensure HostSignupDialog border colour matches light theme
   [\#5716](https://github.com/matrix-org/matrix-react-sdk/pull/5716)
 * Don't place another call if there's already one ongoing
   [\#5712](https://github.com/matrix-org/matrix-react-sdk/pull/5712)
 * Space room hierarchies
   [\#5706](https://github.com/matrix-org/matrix-react-sdk/pull/5706)
 * Iterate Space view and right panel
   [\#5705](https://github.com/matrix-org/matrix-react-sdk/pull/5705)
 * Add a scroll to bottom on message sent setting
   [\#5692](https://github.com/matrix-org/matrix-react-sdk/pull/5692)
 * Add .tmp files to gitignore
   [\#5708](https://github.com/matrix-org/matrix-react-sdk/pull/5708)
 * Initial Space Room View and Creation UX
   [\#5704](https://github.com/matrix-org/matrix-react-sdk/pull/5704)
 * Add multi language spell check
   [\#5452](https://github.com/matrix-org/matrix-react-sdk/pull/5452)
 * Fix tetris effect (holes) in read receipts
   [\#5697](https://github.com/matrix-org/matrix-react-sdk/pull/5697)
 * Fixed edit for markdown images
   [\#5703](https://github.com/matrix-org/matrix-react-sdk/pull/5703)
 * Iterate Space Panel
   [\#5702](https://github.com/matrix-org/matrix-react-sdk/pull/5702)
 * Fix read receipts for compact layout
   [\#5700](https://github.com/matrix-org/matrix-react-sdk/pull/5700)
 * Space Store and Space Panel for Room List filtering
   [\#5689](https://github.com/matrix-org/matrix-react-sdk/pull/5689)
 * Log when turn creds expire
   [\#5691](https://github.com/matrix-org/matrix-react-sdk/pull/5691)
 * Null check for maxHeight in call view
   [\#5690](https://github.com/matrix-org/matrix-react-sdk/pull/5690)
 * Autocomplete invited users
   [\#5687](https://github.com/matrix-org/matrix-react-sdk/pull/5687)
 * Add send message button
   [\#5535](https://github.com/matrix-org/matrix-react-sdk/pull/5535)
 * Move call buttons to the room header
   [\#5693](https://github.com/matrix-org/matrix-react-sdk/pull/5693)
 * Use the default SSSS key if the default is set
   [\#5638](https://github.com/matrix-org/matrix-react-sdk/pull/5638)
 * Initial Spaces feature flag
   [\#5668](https://github.com/matrix-org/matrix-react-sdk/pull/5668)
 * Clean up code edge cases and add helpers
   [\#5667](https://github.com/matrix-org/matrix-react-sdk/pull/5667)
 * Clean up widgets when leaving the room
   [\#5684](https://github.com/matrix-org/matrix-react-sdk/pull/5684)
 * Fix read receipts?
   [\#5567](https://github.com/matrix-org/matrix-react-sdk/pull/5567)
 * Fix MAU usage alerts
   [\#5678](https://github.com/matrix-org/matrix-react-sdk/pull/5678)
 Changes in [3.15.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.15.0) (2021-03-01)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.15.0-rc.1...v3.15.0)
 ## Security notice
 matrix-react-sdk 3.15.0 fixes a moderate severity issue (CVE-2021-21320) where
 the user content sandbox can be abused to trick users into opening unexpected
 documents after several user interactions. The content can be opened with a
 `blob` origin from the Matrix client, so it is possible for a malicious document
 to access user messages and secrets. Thanks to @keerok for responsibly
 disclosing this via Matrix's Security Disclosure Policy.
 ## All changes
 * Upgrade to JS SDK 9.8.0
 Changes in [3.15.0-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.15.0-rc.1) (2021-02-24)
 ===============================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.14.0...v3.15.0-rc.1)
 * Upgrade to JS SDK 9.8.0-rc.1
 * Translations update from Weblate
   [\#5683](https://github.com/matrix-org/matrix-react-sdk/pull/5683)
 * Fix object diffing when objects have different keys
   [\#5681](https://github.com/matrix-org/matrix-react-sdk/pull/5681)
 * Add <code> if it's missing
   [\#5673](https://github.com/matrix-org/matrix-react-sdk/pull/5673)
 * Add email only if the verification is complete
   [\#5629](https://github.com/matrix-org/matrix-react-sdk/pull/5629)
 * Fix portrait videocalls
   [\#5676](https://github.com/matrix-org/matrix-react-sdk/pull/5676)
 * Tweak code block icon positions
   [\#5643](https://github.com/matrix-org/matrix-react-sdk/pull/5643)
 * Revert "Improve URL preview formatting and image upload thumbnail size"
   [\#5677](https://github.com/matrix-org/matrix-react-sdk/pull/5677)
 * Fix context menu leaving visible area
   [\#5644](https://github.com/matrix-org/matrix-react-sdk/pull/5644)
 * Jitsi conferences names, take 3
   [\#5675](https://github.com/matrix-org/matrix-react-sdk/pull/5675)
 * Update isUserOnDarkTheme to take use_system_theme in account
   [\#5670](https://github.com/matrix-org/matrix-react-sdk/pull/5670)
 * Discard some dead code
   [\#5665](https://github.com/matrix-org/matrix-react-sdk/pull/5665)
 * Add developer tool to explore and edit settings
   [\#5664](https://github.com/matrix-org/matrix-react-sdk/pull/5664)
 * Use and create new room helpers
   [\#5663](https://github.com/matrix-org/matrix-react-sdk/pull/5663)
 * Clear message previews when the maximum limit is reached for history
   [\#5661](https://github.com/matrix-org/matrix-react-sdk/pull/5661)
 * VoIP virtual rooms, mk II
   [\#5639](https://github.com/matrix-org/matrix-react-sdk/pull/5639)
 * Disable chat effects when reduced motion preferred
   [\#5660](https://github.com/matrix-org/matrix-react-sdk/pull/5660)
 * Improve URL preview formatting and image upload thumbnail size
   [\#5637](https://github.com/matrix-org/matrix-react-sdk/pull/5637)
 * Fix border radius when the panel is collapsed
   [\#5641](https://github.com/matrix-org/matrix-react-sdk/pull/5641)
 * Use a more generic layout setting - useIRCLayout → layout
   [\#5571](https://github.com/matrix-org/matrix-react-sdk/pull/5571)
 * Remove redundant lockOrigin parameter from usercontent
   [\#5657](https://github.com/matrix-org/matrix-react-sdk/pull/5657)
 * Set ICE candidate pool size option
   [\#5655](https://github.com/matrix-org/matrix-react-sdk/pull/5655)
 * Prepare to encrypt when a call arrives
   [\#5654](https://github.com/matrix-org/matrix-react-sdk/pull/5654)
 * Use config for host signup branding
   [\#5650](https://github.com/matrix-org/matrix-react-sdk/pull/5650)
 * Use randomly generated conference names for Jitsi
   [\#5649](https://github.com/matrix-org/matrix-react-sdk/pull/5649)
 * Modified regex to account for an immediate new line after slash commands
   [\#5647](https://github.com/matrix-org/matrix-react-sdk/pull/5647)
 * Fix codeblock scrollbar color for non-Firefox
   [\#5642](https://github.com/matrix-org/matrix-react-sdk/pull/5642)
 * Fix codeblock scrollbar colors
   [\#5630](https://github.com/matrix-org/matrix-react-sdk/pull/5630)
 * Added loading and disabled the button while searching for server
   [\#5634](https://github.com/matrix-org/matrix-react-sdk/pull/5634)
 Changes in [3.14.0](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.14.0) (2021-02-16)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v3.14.0-rc.1...v3.14.0)
--- a/README.md
+++ b/README.md
@ -28,7 +28,7 @@ Platform Targets:
 * WebRTC features (VoIP and Video calling) are only available in Chrome & Firefox.
 * Mobile Web is not currently a target platform - instead please use the native
   iOS (https://github.com/matrix-org/matrix-ios-kit) and Android
-   (https://github.com/matrix-org/matrix-android-sdk) SDKs.
+   (https://github.com/matrix-org/matrix-android-sdk2) SDKs.
 All code lands on the `develop` branch - `master` is only used for stable releases.
 **Please file PRs against `develop`!!**
--- a/babel.config.js
+++ b/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",
-    ]
+    ],
 };
--- a/docs/ciderEditor.md
+++ b/docs/ciderEditor.md
@ -21,14 +21,14 @@ caret nodes (more on that later).
 For these reasons it doesn't use `innerText`, `textContent` or anything similar.
 The model addresses any content in the editor within as an offset within this string.
 The caret position is thus also converted from a position in the DOM tree
-to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
+to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.ts`.
 Once the content string and caret offset is calculated, it is passed to the `update()`
 method of the model. The model first calculates the same content string of its current parts,
 basically just concatenating their text. It then looks for differences between
 the current and the new content string. The diffing algorithm is very basic,
 and assumes there is only one change around the caret offset,
-so this should be very inexpensive. See `diff.js` for details.
+so this should be very inexpensive. See `diff.ts` for details.
 The result of the diffing is the strings that were added and/or removed from
 the current content. These differences are then applied to the parts,
@ -51,7 +51,7 @@ which relate poorly to text input or changes, and don't need the `beforeinput` e
 which isn't broadly supported yet.
 Once the parts of the model are updated, the DOM of the editor is then reconciled
-with the new model state, see `renderModel` in `render.js` for this.
+with the new model state, see `renderModel` in `render.ts` for this.
 If the model didn't reject the input and didn't make any additional changes,
 this won't make any changes to the DOM at all, and should thus be fairly efficient.
--- a/docs/media-handling.md
+++ b/docs/media-handling.md
@ -0,0 +1,19 @@
 # Media handling
 Surely media should be as easy as just putting a URL into an `img` and calling it good, right?
 Not quite. Matrix uses something called a Matrix Content URI (better known as MXC URI) to identify
 content, which is then converted to a regular HTTPS URL on the homeserver. However, sometimes that
 URL can change depending on deployment considerations.
 The react-sdk features a [customisation endpoint](https://github.com/vector-im/element-web/blob/develop/docs/customisations.md)
 for media handling where all conversions from MXC URI to HTTPS URL happen. This is to ensure that
 those obscure deployments can route all their media to the right place.
 For development, there are currently two functions available: `mediaFromMxc` and `mediaFromContent`.
 The `mediaFromMxc` function should be self-explanatory. `mediaFromContent` takes an event content as
 a parameter and will automatically parse out the source media and thumbnail. Both functions return
 a `Media` object with a number of options on it, such as getting various common HTTPS URLs for the
 media.
 **It is extremely important that all media calls are put through this customisation endpoint.** So
 much so it's a lint rule to avoid accidental use of the wrong functions.
--- a/docs/room-list-store.md
+++ b/docs/room-list-store.md
@ -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, 
+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. 
+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 
+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 
+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 
+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 
+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 
+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 
+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 
+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
+Filters are provided to the store as condition classes and have two major kinds: Prefilters and Runtime.
 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.
-The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
+Prefilters flush out rooms which shouldn't appear to the algorithm implementations. Typically this is
-as the old room list store does. When a filter condition changes, it emits an update which (in this
+due to some higher order room list filtering (such as spaces or tags) deliberately exposing a subset of
-case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a 
+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 
+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 
+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 
+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 
+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 
+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 
+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
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "matrix-react-sdk",
-  "version": "3.14.0",
+  "version": "3.20.0",
  "description": "SDK for matrix.org using React",
  "author": "matrix.org",
  "repository": {
@ -23,9 +23,7 @@
    "package.json"
  ],
  "bin": {
-    "reskindex": "scripts/reskindex.js",
+    "reskindex": "scripts/reskindex.js"
    "matrix-gen-i18n": "scripts/gen-i18n.js",
    "matrix-prune-i18n": "scripts/prune-i18n.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,7 +49,8 @@
    "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",
@ -59,7 +58,7 @@
    "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",
@ -83,6 +82,7 @@
    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
    "matrix-widget-api": "^0.1.0-beta.13",
    "minimist": "^1.2.5",
    "opus-recorder": "^8.0.3",
    "pako": "^2.0.3",
    "parse5": "^6.0.1",
    "png-chunks-extract": "^1.0.0",
@ -97,11 +97,10 @@
    "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"
  },
@ -133,11 +132,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",
@ -157,8 +157,10 @@
    "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",
    "matrix-web-i18n": "github:matrix-org/matrix-web-i18n",
    "olm": "https://packages.matrix.org/npm/olm/olm-3.2.1.tgz",
    "react-test-renderer": "^16.14.0",
    "rimraf": "^3.0.2",
@ -188,6 +190,12 @@
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!matrix-js-sdk).+$"
    ],
    "collectCoverageFrom": [
      "<rootDir>/src/**/*.{js,ts,tsx}"
    ],
    "coverageReporters": [
      "text"
    ]
  }
 }
--- a/res/css/_common.scss
+++ b/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 {
@ -303,7 +313,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 +325,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 +406,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 +501,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 +570,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
    }
 }
@define-mixin ProgressBarBgColour $colour {
    background-color: $colour;
    &::-webkit-progress-bar {
        background-color: $colour;
    }
 }
@define-mixin ProgressBarBorderRadius $radius {
    border-radius: $radius;
    &::-moz-progress-bar {
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@ -27,6 +27,9 @@
@import "./structures/_RoomView.scss";
@import "./structures/_ScrollPanel.scss";
@import "./structures/_SearchBox.scss";
@import "./structures/_SpacePanel.scss";
@import "./structures/_SpaceRoomDirectory.scss";
@import "./structures/_SpaceRoomView.scss";
@import "./structures/_TabbedView.scss";
@import "./structures/_ToastContainer.scss";
@import "./structures/_UploadBar.scss";
@ -56,6 +59,7 @@
@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/_BugReportDialog.scss";
@ -89,6 +93,7 @@
@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/_UploadConfirmDialog.scss";
@ -106,17 +111,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 +161,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";
@ -206,6 +214,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 +228,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";
@ -232,12 +242,19 @@
@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";
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@ -22,7 +22,6 @@ limitations under the License.
 }
 .mx_FilePanel .mx_RoomView_messageListWrapper {
    margin-right: 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
--- a/res/css/structures/_LeftPanel.scss
+++ b/res/css/structures/_LeftPanel.scss
@ -15,10 +15,12 @@ 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
@ -37,18 +39,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;
@ -134,6 +130,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 +168,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;
-
+        width: unset !important;
        // 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;
        }
        .mx_LeftPanel_roomListContainer {
-            width: 68px;
+            width: $roomListCollapsedWidth;
            .mx_LeftPanel_userHeader {
                flex-direction: row;
--- a/res/css/structures/_MainSplit.scss
+++ b/res/css/structures/_MainSplit.scss
@ -18,6 +18,7 @@ limitations under the License.
    display: flex;
    flex-direction: row;
    min-width: 0;
    min-height: 0;
    height: 100%;
 }
--- a/res/css/structures/_MatrixChat.scss
+++ b/res/css/structures/_MatrixChat.scss
@ -66,7 +66,7 @@ limitations under the License.
 }
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel):not(.mx_SpacePanel):not(.mx_ResizeHandle) {
    background-color: $primary-bg-color;
    flex: 1 1 0;
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@ -160,3 +160,20 @@ limitations under the License.
        mask-position: center;
    }
 }
 .mx_RightPanel_scopeHeader {
    margin: 24px;
    text-align: center;
    font-weight: $font-semi-bold;
    font-size: $font-18px;
    line-height: $font-22px;
    .mx_BaseAvatar {
        margin-right: 8px;
        vertical-align: middle;
    }
    .mx_BaseAvatar_image {
        border-radius: 8px;
    }
 }
--- a/res/css/structures/_RoomSearch.scss
+++ b/res/css/structures/_RoomSearch.scss
@ -22,7 +22,7 @@ limitations under the License.
    // keep border thickness consistent to prevent movement
    border: 1px solid transparent;
    height: 28px;
-    padding: 2px;
+    padding: 1px;
    // Create a flexbox for the icons (easier to manage)
    display: flex;
--- a/res/css/structures/_RoomStatusBar.scss
+++ b/res/css/structures/_RoomStatusBar.scss
@ -14,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;
    }
--- a/res/css/structures/_RoomView.scss
+++ b/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;
+    background-color: $primary-bg-color;
-    padding-right: 12px;
+    opacity: 0.95;
    margin-left: -12px;
    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 {
+@keyframes mx_RoomView_fileDropTarget_image_animation {
-    top: 50%;
+    from {
-    width: 100%;
+        width: 0px;
-    margin-top: -50px;
+    }
-    position: absolute;
+    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;
@ -244,12 +262,6 @@ hr.mx_RoomView_myReadMarker {
    padding-top: 1px;
 }
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox {
    background-color: $accent-color;
    color: $accent-fg-color;
    position: relative;
 }
 .mx_RoomView_voipChevron {
    position: absolute;
    bottom: -11px;
--- a/res/css/structures/_ScrollPanel.scss
+++ b/res/css/structures/_ScrollPanel.scss
@ -21,6 +21,5 @@ limitations under the License.
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow-y: hidden;
    }
 }
--- a/res/css/structures/_SpacePanel.scss
+++ b/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;
 }
--- a/res/css/structures/_SpaceRoomDirectory.scss
+++ b/res/css/structures/_SpaceRoomDirectory.scss
@ -0,0 +1,315 @@
 /*
 Copyright 2021 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_SpaceRoomDirectory_dialogWrapper > .mx_Dialog {
    max-width: 960px;
    height: 100%;
 }
 .mx_SpaceRoomDirectory {
    height: 100%;
    margin-bottom: 12px;
    color: $primary-fg-color;
    word-break: break-word;
    display: flex;
    flex-direction: column;
 }
 .mx_SpaceRoomDirectory,
 .mx_SpaceRoomView_landing {
    .mx_Dialog_title {
        display: flex;
        .mx_BaseAvatar {
            margin-right: 12px;
            align-self: center;
        }
        .mx_BaseAvatar_image {
            border-radius: 8px;
        }
        > div {
            > h1 {
                font-weight: $font-semi-bold;
                font-size: $font-18px;
                line-height: $font-22px;
                margin: 0;
            }
            > div {
                font-weight: 400;
                color: $secondary-fg-color;
                font-size: $font-15px;
                line-height: $font-24px;
            }
        }
    }
    .mx_AccessibleButton_kind_link {
        padding: 0;
    }
    .mx_SearchBox {
        margin: 24px 0 16px;
    }
    .mx_SpaceRoomDirectory_noResults {
        text-align: center;
        > div {
            font-size: $font-15px;
            line-height: $font-24px;
            color: $secondary-fg-color;
        }
    }
    .mx_SpaceRoomDirectory_listHeader {
        display: flex;
        min-height: 32px;
        align-items: center;
        font-size: $font-15px;
        line-height: $font-24px;
        color: $primary-fg-color;
        .mx_AccessibleButton {
            padding: 4px 12px;
            font-weight: normal;
            & + .mx_AccessibleButton {
                margin-left: 16px;
            }
        }
        .mx_AccessibleButton_kind_danger_outline,
        .mx_AccessibleButton_kind_primary_outline {
            padding: 3px 12px; // to account for the 1px border
        }
        > span {
            margin-left: auto;
        }
    }
    .mx_SpaceRoomDirectory_error {
        position: relative;
        font-weight: $font-semi-bold;
        color: $notice-primary-color;
        font-size: $font-15px;
        line-height: $font-18px;
        margin: 20px auto 12px;
        padding-left: 24px;
        width: max-content;
        &::before {
            content: "";
            position: absolute;
            height: 16px;
            width: 16px;
            left: 0;
            background-image: url("$(res)/img/element-icons/warning-badge.svg");
        }
    }
 }
 .mx_SpaceRoomDirectory_list {
    margin-top: 16px;
    padding-bottom: 40px;
    .mx_SpaceRoomDirectory_roomCount {
        > h3 {
            display: inline;
            font-weight: $font-semi-bold;
            font-size: $font-18px;
            line-height: $font-22px;
            color: $primary-fg-color;
        }
        > span {
            margin-left: 8px;
            font-size: $font-15px;
            line-height: $font-24px;
            color: $secondary-fg-color;
        }
    }
    .mx_SpaceRoomDirectory_subspace {
        .mx_BaseAvatar_image {
            border-radius: 8px;
        }
    }
    .mx_SpaceRoomDirectory_subspace_toggle {
        position: absolute;
        left: -1px;
        top: 10px;
        height: 16px;
        width: 16px;
        border-radius: 4px;
        background-color: $primary-bg-color;
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 16px;
            width: 16px;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: $tertiary-fg-color;
            mask-size: 16px;
            transform: rotate(270deg);
            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
        }
        &.mx_SpaceRoomDirectory_subspace_toggle_shown::before {
            transform: rotate(0deg);
        }
    }
    .mx_SpaceRoomDirectory_subspace_children {
        position: relative;
        padding-left: 12px;
    }
    .mx_SpaceRoomDirectory_roomTile {
        position: relative;
        padding: 8px 16px;
        border-radius: 8px;
        min-height: 56px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: 20px auto max-content;
        grid-column-gap: 8px;
        grid-row-gap: 6px;
        align-items: center;
        .mx_BaseAvatar {
            grid-row: 1;
            grid-column: 1;
        }
        .mx_SpaceRoomDirectory_roomTile_name {
            font-weight: $font-semi-bold;
            font-size: $font-15px;
            line-height: $font-18px;
            grid-row: 1;
            grid-column: 2;
            .mx_InfoTooltip {
                display: inline;
                margin-left: 12px;
                color: $tertiary-fg-color;
                font-size: $font-12px;
                line-height: $font-15px;
                .mx_InfoTooltip_icon {
                    margin-right: 4px;
                    position: relative;
                    vertical-align: text-top;
                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                    }
                }
            }
        }
        .mx_SpaceRoomDirectory_roomTile_info {
            font-size: $font-14px;
            line-height: $font-18px;
            color: $secondary-fg-color;
            grid-row: 2;
            grid-column: 1/3;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }
        .mx_SpaceRoomDirectory_actions {
            text-align: right;
            margin-left: 20px;
            grid-column: 3;
            grid-row: 1/3;
            .mx_AccessibleButton {
                line-height: $font-24px;
                padding: 4px 16px;
                display: inline-block;
                visibility: hidden;
            }
            .mx_AccessibleButton_kind_danger_outline,
            .mx_AccessibleButton_kind_primary_outline {
                padding: 3px 16px; // to account for the 1px border
            }
            .mx_Checkbox {
                display: inline-flex;
                vertical-align: middle;
                margin-left: 12px;
            }
        }
        &:hover {
            background-color: $groupFilterPanel-bg-color;
            .mx_AccessibleButton {
                visibility: visible;
            }
        }
    }
    .mx_SpaceRoomDirectory_roomTile,
    .mx_SpaceRoomDirectory_subspace_children {
        &::before {
            content: "";
            position: absolute;
            background-color: $groupFilterPanel-bg-color;
            width: 1px;
            height: 100%;
            left: 6px;
            top: 0;
        }
    }
    .mx_SpaceRoomDirectory_actions {
        .mx_SpaceRoomDirectory_actionsText {
            font-weight: normal;
            font-size: $font-12px;
            line-height: $font-15px;
            color: $secondary-fg-color;
        }
    }
    > hr {
        border: none;
        height: 1px;
        background-color: rgba(141, 151, 165, 0.2);
        margin: 20px 0;
    }
    .mx_SpaceRoomDirectory_createRoom {
        display: block;
        margin: 16px auto 0;
        width: max-content;
    }
 }
--- a/res/css/structures/_SpaceRoomView.scss
+++ b/res/css/structures/_SpaceRoomView.scss
@ -0,0 +1,393 @@
 /*
 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;
            }
        }
        .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;
            }
        }
        .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;
        .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;
        }
        > hr {
            border: none;
            height: 1px;
            background-color: $groupFilterPanel-bg-color;
        }
        .mx_SearchBox {
            margin: 0 0 20px;
        }
    }
    .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_inviteTeammates {
        .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;
        }
    }
 }
--- a/res/css/structures/_ToastContainer.scss
+++ b/res/css/structures/_ToastContainer.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019-2021 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -158,6 +158,10 @@ limitations under the License.
            }
        }
        .mx_Toast_detail {
            color: $secondary-fg-color;
        }
        .mx_Toast_deviceID {
            font-size: $font-10px;
        }
--- a/res/css/structures/_UploadBar.scss
+++ b/res/css/structures/_UploadBar.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,47 +15,45 @@ limitations under the License.
 */
 .mx_UploadBar {
    padding-left: 65px; // line up with the shield area in the composer
    position: relative;
    .mx_ProgressBar {
        width: calc(100% - 40px); // cheating at a right margin
    }
 }
-.mx_UploadBar_uploadProgressOuter {
+.mx_UploadBar_filename {
    height: 5px;
    margin-left: 63px;
    margin-top: -1px;
    padding-bottom: 5px;
 }
 .mx_UploadBar_uploadProgressInner {
    background-color: $accent-color;
    height: 5px;
 }
 .mx_UploadBar_uploadFilename {
    margin-top: 5px;
-    margin-left: 65px;
+    color: $muted-fg-color;
    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;
    position: relative;
-    opacity: 0.6;
+    padding-left: 22px; // 18px for icon, 4px for padding
-    cursor: pointer;
+    font-size: $font-15px;
-    z-index: 1;
+    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 {
+.mx_UploadBar_cancel {
-    float: right;
+    position: absolute;
-    margin-top: 5px;
+    top: 0;
-    margin-right: 30px;
+    right: 0;
-    color: $accent-color;
+    height: 16px;
    width: 16px;
    margin-right: 16px; // align over rightmost button in composer
    mask-repeat: no-repeat;
    mask-position: center;
    background-color: $muted-fg-color;
    mask-image: url('$(res)/img/icons-close.svg');
 }
--- a/res/css/structures/_UserMenu.scss
+++ b/res/css/structures/_UserMenu.scss
@ -72,6 +72,7 @@ limitations under the License.
            position: relative; // to make default avatars work
            margin-right: 8px;
            height: 32px; // to remove the unknown 4px gap the browser puts below it
            padding: 3px 0; // to align with and without using doubleName
            .mx_UserMenu_userAvatar {
                border-radius: 32px; // should match avatar size
@ -116,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 {
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-.mx_ViewSource_label_left {
+.mx_ViewSource_separator {
    float: left;
 }
 .mx_ViewSource_label_right {
    float: right;
 }
 .mx_ViewSource_label_bottom {
    clear: both;
    border-bottom: 1px solid #e5e5e5;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
 }
 .mx_ViewSource_heading {
    font-size: $font-17px;
    font-weight: 400;
    color: $primary-fg-color;
    margin-top: 0.7em;
 }
 .mx_ViewSource pre {
@ -34,3 +35,7 @@ limitations under the License.
    word-wrap: break-word;
    white-space: pre-wrap;
 }
 .mx_ViewSource_details {
    margin-top: 0.8em;
 }
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@ -26,50 +26,6 @@ limitations under the License.
    position: relative;
 }
 .mx_CompleteSecurity_clients {
    width: max-content;
    margin: 36px auto 0;
    .mx_CompleteSecurity_clients_desktop, .mx_CompleteSecurity_clients_mobile {
        position: relative;
        width: 160px;
        text-align: center;
        padding-top: 64px;
        display: inline-block;
        &::before {
            content: '';
            position: absolute;
            height: 48px;
            width: 48px;
            left: 56px;
            top: 0;
            background-color: $muted-fg-color;
            mask-repeat: no-repeat;
            mask-size: contain;
        }
    }
    .mx_CompleteSecurity_clients_desktop {
        margin-right: 56px;
    }
    .mx_CompleteSecurity_clients_desktop::before {
        mask-image: url('$(res)/img/feather-customised/monitor.svg');
    }
    .mx_CompleteSecurity_clients_mobile::before {
        mask-image: url('$(res)/img/feather-customised/smartphone.svg');
    }
    p {
        margin-top: 16px;
        font-size: $font-12px;
        color: $muted-fg-color;
        text-align: center;
    }
 }
 .mx_CompleteSecurity_heroIcon {
    width: 128px;
    height: 128px;
--- a/res/css/views/avatars/_DecoratedRoomAvatar.scss
+++ b/res/css/views/avatars/_DecoratedRoomAvatar.scss
@ -14,8 +14,7 @@ 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_ExtraTile {
 .mx_DecoratedRoomAvatar, .mx_TemporaryTile {
    position: relative;
    &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
--- a/res/css/views/context_menus/_IconizedContextMenu.scss
+++ b/res/css/views/context_menus/_IconizedContextMenu.scss
@ -75,6 +75,11 @@ limitations under the License.
                background-color: $menu-selected-color;
            }
            &.mx_AccessibleButton_disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }
            img, .mx_IconizedContextMenu_icon { // icons
                width: 16px;
                min-width: 16px;
--- a/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
+++ b/res/css/views/dialogs/_AddExistingToSpaceDialog.scss
@ -0,0 +1,250 @@
 /*
 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;
            .mx_BaseAvatar {
                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_image {
            border-radius: 8px;
        }
    }
 }
 .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;
    }
    .mx_AddExistingToSpaceDialog_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_AddExistingToSpaceDialog_progressText {
                margin-top: 8px;
                font-size: $font-15px;
                line-height: $font-24px;
                color: $primary-fg-color;
            }
            > * {
                vertical-align: middle;
            }
        }
        .mx_AddExistingToSpaceDialog_error {
            padding-left: 12px;
            > img {
                align-self: center;
            }
            .mx_AddExistingToSpaceDialog_errorHeading {
                font-weight: $font-semi-bold;
                font-size: $font-15px;
                line-height: $font-18px;
                color: $notice-primary-color;
            }
            .mx_AddExistingToSpaceDialog_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_AddExistingToSpaceDialog_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;
        }
    }
 }
--- a/res/css/views/dialogs/_DevtoolsDialog.scss
+++ b/res/css/views/dialogs/_DevtoolsDialog.scss
@ -223,3 +223,54 @@ limitations under the License.
        content: ":";
    }
 }
 .mx_DevTools_SettingsExplorer {
    table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        th {
            // Colour choice: first one autocomplete gave me.
            border-bottom: 1px solid $accent-color;
            text-align: left;
        }
        td, th {
            width: 360px; // "feels right" number
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        td + td, th + th {
            width: auto;
        }
        tr:hover {
            // Colour choice: first one autocomplete gave me.
            background-color: $accent-color-50pct;
        }
    }
    .mx_DevTools_SettingsExplorer_mutable {
        background-color: $accent-color;
    }
    .mx_DevTools_SettingsExplorer_immutable {
        background-color: $warning-color;
    }
    .mx_DevTools_SettingsExplorer_edit {
        float: right;
        margin-right: 16px;
    }
    .mx_DevTools_SettingsExplorer_warning {
        border: 2px solid $warning-color;
        border-radius: 4px;
        padding: 4px;
        margin-bottom: 8px;
    }
 }
--- a/res/css/views/dialogs/_HostSignupDialog.scss
+++ b/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;
--- a/res/css/views/dialogs/_SpaceSettingsDialog.scss
+++ b/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;
    }
 }
--- a/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
+++ b/res/css/views/dialogs/security/_AccessSecretStorageDialog.scss
@ -1,6 +1,5 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019, 2021 The Matrix.org Foundation C.I.C.
 Copyright 2019 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -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');
 }
--- a/res/css/views/elements/_AccessibleButton.scss
+++ b/res/css/views/elements/_AccessibleButton.scss
@ -26,7 +26,9 @@ limitations under the License.
    padding: 7px 18px;
    text-align: center;
    border-radius: 8px;
-    display: inline-block;
+    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: $font-14px;
 }
@ -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.mx_AccessibleButton_disabled {
 .mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
    color: $button-danger-disabled-fg-color;
    background-color: $button-danger-disabled-bg-color;
 }
 .mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
    color: $button-danger-disabled-bg-color;
    border-color: $button-danger-disabled-bg-color;
 }
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
    padding: 5px 12px;
    color: $button-danger-fg-color;
--- a/res/css/views/elements/_FacePile.scss
+++ b/res/css/views/elements/_FacePile.scss
@ -0,0 +1,65 @@
 /*
 Copyright 2021 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_FacePile {
    .mx_FacePile_faces {
        display: inline-flex;
        flex-direction: row-reverse;
        vertical-align: middle;
        > .mx_FacePile_face + .mx_FacePile_face {
            margin-right: -8px;
        }
        .mx_BaseAvatar_image {
            border: 1px solid $primary-bg-color;
        }
        .mx_BaseAvatar_initial {
            margin: 1px; // to offset the border on the image
        }
        .mx_FacePile_more {
            position: relative;
            border-radius: 100%;
            width: 30px;
            height: 30px;
            background-color: $groupFilterPanel-bg-color;
            &::before {
                content: "";
                z-index: 1;
                position: absolute;
                top: 0;
                left: 0;
                height: inherit;
                width: inherit;
                background: $tertiary-fg-color;
                mask-position: center;
                mask-size: 20px;
                mask-repeat: no-repeat;
                mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
            }
        }
    }
    .mx_FacePile_summary {
        margin-left: 12px;
        font-size: $font-14px;
        line-height: $font-24px;
        color: $tertiary-fg-color;
    }
 }
--- a/res/css/views/elements/_FormButton.scss
+++ b/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;
    }
 }
--- a/res/css/views/elements/_ImageView.scss
+++ b/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%;
+.mx_ImageView_image_wrapper {
-    max-width: 240px;
+    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
 }
 .mx_ImageView_image {
    pointer-events: all;
    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: all;
    padding-left: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: $lightbox-fg-color;
 }
-.mx_ImageView_cancel {
+.mx_ImageView_info {
-    position: absolute;
+    padding-left: 12px;
-    // hack for mx_Dialog having a top padding of 40px
+    display: flex;
-    top: 40px;
+    flex-direction: column;
    right: 0px;
    padding-top: 35px;
    padding-right: 35px;
    cursor: pointer;
 }
-.mx_ImageView_rotateClockwise {
+.mx_ImageView_info_sender {
-    position: absolute;
+    font-weight: bold;
    top: 40px;
    right: 70px;
    padding-top: 35px;
    cursor: pointer;
 }
-.mx_ImageView_rotateCounterClockwise {
+.mx_ImageView_toolbar {
-    position: absolute;
+    padding-right: 16px;
-    top: 40px;
+    pointer-events: all;
-    right: 105px;
+    display: flex;
-    padding-top: 35px;
+    align-items: center;
    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_button {
-    font-size: $font-15px;
+    margin-left: 24px;
-    opacity: 0.5;
+    display: block;
-    margin-top: 18px;
+
-    cursor: pointer;
+    &::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 {
+.mx_ImageView_button_rotateCW::before {
-    height: 30px;
+    mask-image: url('$(res)/img/image-view/rotate-cw.svg');
 }
-.mx_ImageView_rhs {
+.mx_ImageView_button_rotateCCW::before {
-    order: 3;
+    mask-image: url('$(res)/img/image-view/rotate-ccw.svg');
-    flex: 1 1 10%;
+}
-    min-width: 300px;
+
-    // background-color: #800;
+.mx_ImageView_button_zoomOut::before {
-    // height: 20px;
+    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%;
    }
 }
--- a/res/css/views/elements/_InviteReason.scss
+++ b/res/css/views/elements/_InviteReason.scss
@ -0,0 +1,57 @@
 /*
 Copyright 2021 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_InviteReason {
    position: relative;
    margin-bottom: 1em;
    .mx_InviteReason_reason {
        visibility: visible;
    }
    .mx_InviteReason_view {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: $secondary-fg-color;
        &::before {
            content: "";
            margin-right: 8px;
            background-color: $secondary-fg-color;
            mask-image: url('$(res)/img/feather-customised/eye.svg');
            display: inline-block;
            width: 18px;
            height: 14px;
        }
    }
 }
 .mx_InviteReason_hidden {
    .mx_InviteReason_reason {
        visibility: hidden;
    }
    .mx_InviteReason_view {
        display: flex;
    }
 }
--- a/res/css/views/elements/_ProgressBar.scss
+++ b/res/css/views/elements/_ProgressBar.scss
@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -15,15 +15,15 @@ limitations under the License.
 */
 progress.mx_ProgressBar {
-    height: 4px;
+    height: 6px;
    width: 60px;
    border-radius: 10px;
    overflow: hidden;
    appearance: none;
-    border: 0;
+    border: none;
-    @mixin ProgressBarBorderRadius "10px";
+    @mixin ProgressBarBorderRadius 6px;
-    @mixin ProgressBarColour $accent-color;
+    @mixin ProgressBarColour $progressbar-fg-color;
    @mixin ProgressBarBgColour $progressbar-bg-color;
    ::-webkit-progress-value {
        transition: width 1s;
    }
--- a/res/css/views/messages/_MFileBody.scss
+++ b/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;
    }
 }
--- a/res/css/views/messages/_MVideoBody.scss
+++ b/res/css/views/messages/_MVideoBody.scss
@ -17,7 +17,7 @@ limitations under the License.
 span.mx_MVideoBody {
    video.mx_MVideoBody {
        max-width: 100%;
-        max-height: 300px;
+        height: auto;
        border-radius: 4px;
    }
 }
--- a/res/css/views/messages/_MVoiceMessageBody.scss
+++ b/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
 }
--- a/res/css/views/messages/_MessageActionBar.scss
+++ b/res/css/views/messages/_MessageActionBar.scss
@ -105,3 +105,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');
 }
--- a/res/css/views/messages/_ReactionsRowButton.scss
+++ b/res/css/views/messages/_ReactionsRowButton.scss
@ -34,6 +34,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;
--- a/res/css/views/right_panel/_EncryptionInfo.scss
+++ b/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_EncryptionInfo_spinner {
+    .mx_Spinner {
-        .mx_Spinner {
+        margin-top: 25px;
-            margin-top: 25px;
+        margin-bottom: 15px;
            margin-bottom: 15px;
        }
        text-align: center;
    }
    text-align: center;
 }
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/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;
 }
--- a/res/css/views/rooms/_AuxPanel.scss
+++ b/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 {
--- a/res/css/views/rooms/_BasicMessageComposer.scss
+++ b/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 {
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@ -159,6 +159,7 @@ $left-gutter: 64px;
 .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_ReplyThread .mx_EventTile > 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;
@ -213,21 +214,30 @@ $left-gutter: 64px;
    color: $accent-fg-color;
 }
-.mx_EventTile_encrypting {
+.mx_EventTile_receiptSent,
-    color: $event-encrypting-color !important;
+.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 {
+    &::before {
-    color: $event-sending-color;
+        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_receiptSent::before {
-.mx_EventTile_sending .mx_UserPill,
+    mask-image: url('$(res)/img/element-icons/circle-sent.svg');
 .mx_EventTile_sending .mx_RoomPill {
    opacity: 0.5;
 }
-
+.mx_EventTile_receiptSending::before {
-.mx_EventTile_notSent {
+    mask-image: url('$(res)/img/element-icons/circle-sending.svg');
    color: $event-notsent-color;
 }
 .mx_EventTile_contextual {
@ -257,22 +267,22 @@ $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;
    transition:
        left var(--transition-short) ease-out,
        top var(--transition-standard) ease-out;
 }
 .mx_EventTile_readAvatarRemainder {
@ -531,14 +541,14 @@ $left-gutter: 64px;
    display: inline-block;
    visibility: hidden;
    cursor: pointer;
-    top: 6px;
+    top: 8px;
-    right: 12px;
+    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);
--- a/res/css/views/rooms/_GroupLayout.scss
+++ b/res/css/views/rooms/_GroupLayout.scss
@ -21,7 +21,7 @@ $left-gutter: 64px;
    .mx_EventTile {
        > .mx_SenderProfile {
            line-height: $font-20px;
-            padding-left: $left-gutter;
+            margin-left: $left-gutter;
        }
        > .mx_EventTile_line {
@ -105,16 +105,9 @@ $left-gutter: 64px;
        }
        .mx_EventTile_readAvatars {
-            top: 27px;
+            // This aligns the avatar with the last line of the
-        }
+            // message. We want to move it one line up - 2rem
-
+            top: -2rem;
        &.mx_EventTile_continuation .mx_EventTile_readAvatars,
        &.mx_EventTile_emote .mx_EventTile_readAvatars {
            top: 5px;
        }
        &.mx_EventTile_info .mx_EventTile_readAvatars {
            top: 4px;
        }
        .mx_EventTile_content .markdown-body {
--- a/res/css/views/rooms/_IRCLayout.scss
+++ b/res/css/views/rooms/_IRCLayout.scss
@ -181,8 +181,7 @@ $irc-line-height: $font-18px;
        > span {
            display: flex;
-            > .mx_SenderProfile_name,
+            > .mx_SenderProfile_name {
            > .mx_SenderProfile_aux {
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: var(--name-width);
@ -212,12 +211,30 @@ $irc-line-height: $font-18px;
            background: transparent;
            > span {
-                > .mx_SenderProfile_name,
+                > .mx_SenderProfile_name {
                > .mx_SenderProfile_aux {
                    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 {
--- a/res/css/views/rooms/_LinkPreviewWidget.scss
+++ b/res/css/views/rooms/_LinkPreviewWidget.scss
@ -19,8 +19,6 @@ limitations under the License.
    margin-right: 15px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    max-width: 360px;
    border-left: 4px solid $preview-widget-bar-color;
    color: $preview-widget-fg-color;
 }
@ -57,9 +55,6 @@ limitations under the License.
    cursor: pointer;
    width: 18px;
    height: 18px;
    padding: 0px 5px 5px 5px;
    margin-left: auto;
    margin-right: 0px;
    img {
        flex: 0 0 40px;
--- a/res/css/views/rooms/_MemberInfo.scss
+++ b/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 {
--- a/res/css/views/rooms/_MemberList.scss
+++ b/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,
--- a/res/css/views/rooms/_MessageComposer.scss
+++ b/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 {
+.mx_MessageComposer_voiceMessage::before {
-    mask-image: url('$(res)/img/element-icons/call/hangup.svg');
+    mask-image: url('$(res)/img/voip/mic-on-mask.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_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;
--- a/res/css/views/rooms/_MessageComposerFormatBar.scss
+++ b/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 {
--- a/res/css/views/rooms/_NewRoomIntro.scss
+++ b/res/css/views/rooms/_NewRoomIntro.scss
@ -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;
--- a/res/css/views/rooms/_RoomHeader.scss
+++ b/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;
 }
--- a/res/css/views/rooms/_RoomList.scss
+++ b/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;
+    border-top: 1px solid $input-border-color;
-    font-size: $font-13px;
+    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;
+            top: 8px;
-            left: 0;
+            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');
        }
    }
 }
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/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 {
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@ -189,6 +189,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');
    }
--- a/res/css/views/rooms/_VoiceRecordComposerTile.scss
+++ b/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;
    }
 }
--- a/res/css/views/settings/_SpellCheckLanguages.scss
+++ b/res/css/views/settings/_SpellCheckLanguages.scss
@ -0,0 +1,35 @@
 /*
 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_ExistingSpellCheckLanguage {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
 }
 .mx_ExistingSpellCheckLanguage_language {
    flex: 1;
    margin-right: 10px;
 }
 .mx_GeneralUserSettingsTab_spellCheckLanguageInput {
    margin-top: 1em;
    margin-bottom: 1em;
 }
 .mx_SpellCheckLanguages {
    @mixin mx_Settings_fullWidthField;
 }
--- a/res/css/views/settings/tabs/user/_HelpUserSettingsTab.scss
+++ b/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;
 }
--- a/res/css/views/spaces/_SpaceBasicSettings.scss
+++ b/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;
    }
 }
--- a/res/css/views/spaces/_SpaceCreateMenu.scss
+++ b/res/css/views/spaces/_SpaceCreateMenu.scss
@ -0,0 +1,93 @@
 /*
 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;
        > 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;
            }
        }
        .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: $theme-button-bg-color;
            border-radius: 14px;
            margin-bottom: 12px;
            &::before {
                content: "";
                position: absolute;
                height: 28px;
                width: 28px;
                top: 0;
                left: 0;
                background-color: $muted-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;
        }
    }
 }
--- a/res/css/views/spaces/_SpacePublicShare.scss
+++ b/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');
        }
    }
 }
--- a/res/css/views/voice_messages/_PlayPauseButton.scss
+++ b/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');
    }
 }
--- a/res/css/views/voice_messages/_PlaybackContainer.scss
+++ b/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: 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
    }
 }
--- a/res/css/views/voice_messages/_Waveform.scss
+++ b/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
    }
 }
--- a/res/css/views/voip/_CallView.scss
+++ b/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 {
--- a/res/css/views/voip/_CallViewForRoom.scss
+++ b/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;
            }
        }
    }
 }
--- a/res/css/views/voip/_VideoFeed.scss
+++ b/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;
+    height: 100%;
-    z-index: 50;
+    display: flex;
    justify-content: center;
    align-items: center;
    &.mx_VideoFeed_video {
        background-color: #000;
    }
 }
 .mx_VideoFeed_local {
-    width: 25%;
+    max-width: 25%;
-    height: 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 {
--- a/res/fonts/Inter/Inter-Bold.woff
+++ b/res/fonts/Inter/Inter-Bold.woff
--- a/res/fonts/Inter/Inter-Bold.woff2
+++ b/res/fonts/Inter/Inter-Bold.woff2
--- a/res/fonts/Inter/Inter-BoldItalic.woff
+++ b/res/fonts/Inter/Inter-BoldItalic.woff
--- a/res/fonts/Inter/Inter-BoldItalic.woff2
+++ b/res/fonts/Inter/Inter-BoldItalic.woff2
--- a/res/fonts/Inter/Inter-Italic.woff
+++ b/res/fonts/Inter/Inter-Italic.woff
--- a/res/fonts/Inter/Inter-Italic.woff2
+++ b/res/fonts/Inter/Inter-Italic.woff2
--- a/res/fonts/Inter/Inter-Medium.woff
+++ b/res/fonts/Inter/Inter-Medium.woff
--- a/res/fonts/Inter/Inter-Medium.woff2
+++ b/res/fonts/Inter/Inter-Medium.woff2
--- a/res/fonts/Inter/Inter-MediumItalic.woff
+++ b/res/fonts/Inter/Inter-MediumItalic.woff
--- a/res/fonts/Inter/Inter-MediumItalic.woff2
+++ b/res/fonts/Inter/Inter-MediumItalic.woff2
--- a/res/fonts/Inter/Inter-Regular.woff
+++ b/res/fonts/Inter/Inter-Regular.woff
--- a/res/fonts/Inter/Inter-Regular.woff2
+++ b/res/fonts/Inter/Inter-Regular.woff2
--- a/res/fonts/Inter/Inter-SemiBold.woff
+++ b/res/fonts/Inter/Inter-SemiBold.woff
--- a/res/fonts/Inter/Inter-SemiBold.woff2
+++ b/res/fonts/Inter/Inter-SemiBold.woff2
--- a/res/fonts/Inter/Inter-SemiBoldItalic.woff
+++ b/res/fonts/Inter/Inter-SemiBoldItalic.woff
--- a/res/fonts/Inter/Inter-SemiBoldItalic.woff2
+++ b/res/fonts/Inter/Inter-SemiBoldItalic.woff2
--- a/res/img/cancel-white.svg
+++ b/res/img/cancel-white.svg
@ -1,10 +0,0 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
    <title>Slice 1</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
    </g>
 </svg>
--- a/res/img/element-icons/circle-sending.svg
+++ b/res/img/element-icons/circle-sending.svg
@ -0,0 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <circle cx="8" cy="8" r="7.5" stroke="#8D99A5"/>
 </svg>
--- a/res/img/element-icons/circle-sent.svg
+++ b/res/img/element-icons/circle-sent.svg
@ -0,0 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z" fill="#8D99A5"/>
 <path d="M11.8697 4.95309C11.6784 4.7576 11.3597 4.74731 11.1578 4.93251L6.62066 9.04804L4.95244 7.91627C4.7293 7.77223 4.42116 7.77223 4.20865 7.95742C3.95363 8.1632 3.93238 8.5336 4.14489 8.78053L6.06813 10.9206C6.1 10.9515 6.13188 10.9926 6.17438 11.0132C6.53565 11.3013 7.07756 11.2498 7.37508 10.9L7.40695 10.8589L11.891 5.60128C12.0397 5.41608 12.0397 5.13828 11.8697 4.95309Z" fill="#8D99A5"/>
 </svg>
--- a/res/img/element-icons/expand-space-panel.svg
+++ b/res/img/element-icons/expand-space-panel.svg
@ -0,0 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7701 16.617H22.3721L18.614 20.3751C18.3137 20.6754 18.3137 21.1683 18.614 21.4686C18.9143 21.769 19.3995 21.769 19.6998 21.4686L24.7747 16.3937C25.0751 16.0934 25.0751 15.6082 24.7747 15.3079L19.7075 10.2253C19.4072 9.92492 18.922 9.92492 18.6217 10.2253C18.3214 10.5256 18.3214 11.0107 18.6217 11.3111L22.3721 15.0768H13.7701C13.3465 15.0768 13 15.4234 13 15.8469C13 16.2705 13.3465 16.617 13.7701 16.617Z" fill="#86888A"/>
 <rect x="7" y="10" width="1.5" height="12" rx="0.75" fill="#86888A"/>
 </svg>
--- a/res/img/element-icons/link.svg
+++ b/res/img/element-icons/link.svg
@ -0,0 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.5285 6.54089L13.0273 6.04207C14.4052 4.66426 16.6259 4.65104 17.9874 6.01253C19.349 7.37402 19.3357 9.59466 17.9579 10.9725L15.5878 13.3425C14.21 14.7203 11.9893 14.7335 10.6277 13.372M11.4717 17.4589L10.9727 17.9579C9.59481 19.3357 7.37409 19.349 6.01256 17.9875C4.65102 16.626 4.66426 14.4053 6.04211 13.0275L8.41203 10.6577C9.78988 9.27988 12.0106 9.26665 13.3721 10.6281" stroke="black" stroke-width="2" stroke-linecap="round"/>
 </svg>
--- a/res/img/element-icons/lock.svg
+++ b/res/img/element-icons/lock.svg
@ -0,0 +1,3 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M15.1113 2.6665C11.1839 2.6665 8.00016 5.85026 8.00016 9.77762V13.3332L7.3335 13.3332C6.22893 13.3332 5.3335 14.2286 5.3335 15.3332V27.3332C5.3335 28.4377 6.22893 29.3332 7.3335 29.3332H24.6668C25.7714 29.3332 26.6668 28.4377 26.6668 27.3332V15.3332C26.6668 14.2286 25.7714 13.3332 24.6668 13.3332L24.0002 13.3332V9.77762C24.0002 5.85026 20.8164 2.6665 16.8891 2.6665H15.1113ZM20.4446 13.3332V9.77762C20.4446 7.81394 18.8527 6.22206 16.8891 6.22206H15.1113C13.1476 6.22206 11.5557 7.81394 11.5557 9.77762V13.3332H20.4446Z" fill="#8E99A4"/>
 </svg>
--- a/res/img/element-icons/pause.svg
+++ b/res/img/element-icons/pause.svg
@ -0,0 +1,4 @@
 <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0 1C0 0.447715 0.447715 0 1 0H2C2.55228 0 3 0.447715 3 1V11C3 11.5523 2.55228 12 2 12H1C0.447715 12 0 11.5523 0 11V1Z" fill="#737D8C"/>
 <path d="M7 1C7 0.447715 7.44772 0 8 0H9C9.55228 0 10 0.447715 10 1V11C10 11.5523 9.55228 12 9 12H8C7.44772 12 7 11.5523 7 11V1Z" fill="#737D8C"/>
 </svg>
--- a/Show more
+++ b/Show more