Merge remote-tracking branch 'upstream/develop' into SuppressSpeechWhenSending

.eslintignore.errorfiles

@@ -1,37 +1,29 @@
 # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
 
-src/component-index.js
 src/components/structures/RoomDirectory.js
 src/components/structures/RoomStatusBar.js
 src/components/structures/RoomView.js
 src/components/structures/ScrollPanel.js
 src/components/structures/SearchBox.js
 src/components/structures/UploadBar.js
-src/components/views/avatars/BaseAvatar.js
 src/components/views/avatars/MemberAvatar.js
 src/components/views/create_room/RoomAlias.js
-src/components/views/dialogs/DeactivateAccountDialog.js
 src/components/views/dialogs/SetPasswordDialog.js
-src/components/views/dialogs/UnknownDeviceDialog.js
 src/components/views/elements/AddressSelector.js
 src/components/views/elements/DirectorySearchBox.js
 src/components/views/elements/MemberEventListSummary.js
 src/components/views/elements/UserSelector.js
-src/components/views/globals/MatrixToolbar.js
 src/components/views/globals/NewVersionBar.js
-src/components/views/globals/UpdateCheckBar.js
 src/components/views/messages/MFileBody.js
 src/components/views/messages/TextualBody.js
 src/components/views/room_settings/ColorSettings.js
 src/components/views/rooms/Autocomplete.js
 src/components/views/rooms/AuxPanel.js
 src/components/views/rooms/LinkPreviewWidget.js
-src/components/views/rooms/MemberDeviceInfo.js
 src/components/views/rooms/MemberInfo.js
 src/components/views/rooms/MemberList.js
 src/components/views/rooms/RoomList.js
 src/components/views/rooms/RoomPreviewBar.js
-src/components/views/rooms/SearchBar.js
 src/components/views/rooms/SearchResultTile.js
 src/components/views/settings/ChangeAvatar.js
 src/components/views/settings/ChangePassword.js
@@ -44,7 +36,6 @@ src/notifications/ContentRules.js
 src/notifications/PushRuleVectorState.js
 src/PlatformPeg.js
 src/rageshake/rageshake.js
-src/rageshake/submit-rageshake.js
 src/ratelimitedfunc.js
 src/Rooms.js
 src/Unread.js
@@ -60,7 +51,6 @@ test/components/views/dialogs/InteractiveAuthDialog-test.js
 test/mock-clock.js
 test/notifications/ContentRules-test.js
 test/notifications/PushRuleVectorState-test.js
-test/stores/RoomViewStore-test.js
 src/component-index.js
 test/end-to-end-tests/node_modules/
 test/end-to-end-tests/riot/

README.md

@@ -34,7 +34,7 @@ All code lands on the `develop` branch - `master` is only used for stable releas
 **Please file PRs against `develop`!!**
 
 Please follow the standard Matrix contributor's guide:
-https://github.com/matrix-org/synapse/tree/master/CONTRIBUTING.rst
+https://github.com/matrix-org/matrix-js-sdk/blob/develop/CONTRIBUTING.rst
 
 Please follow the Matrix JS/React code style as per:
 https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md
@@ -45,7 +45,7 @@ Code should be committed as follows:
    * In practice, `matrix-react-sdk` is still evolving so fast that the maintenance
      burden of customising and overriding these components for Riot can seriously
      impede development.  So right now, there should be very few (if any) customisations for Riot.
- * CSS: https://github.com/vector-im/riot-web/tree/master/src/skins/vector/css/matrix-react-sdk
+ * CSS: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/css
  * Theme specific CSS & resources: https://github.com/matrix-org/matrix-react-sdk/tree/master/res/themes
 
 React components in matrix-react-sdk are come in two different flavours:
@@ -133,8 +133,10 @@ Development
 
 Ensure you have the latest LTS version of Node.js installed.
 
-Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
+Using `yarn` instead of `npm` is recommended. Please see the Yarn 1 [install
-guide](https://yarnpkg.com/docs/install/) if you do not have it already.
+guide](https://classic.yarnpkg.com/docs/install) if you do not have it
+already. This project has not yet been migrated to Yarn 2, so please ensure
+`yarn --version` shows a version from the 1.x series.
 
 `matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
 latter and to ensure tests run against the develop branch of `matrix-js-sdk`,

code_style.md

@@ -4,7 +4,7 @@ Matrix JavaScript/ECMAScript Style Guide
 The intention of this guide is to make Matrix's JavaScript codebase clean,
 consistent with other popular JavaScript styles and consistent with the rest of
 the Matrix codebase. For reference, the Matrix Python style guide can be found
-at https://github.com/matrix-org/synapse/blob/master/docs/code_style.rst
+at https://github.com/matrix-org/synapse/blob/master/docs/code_style.md
 
 This document reflects how we would like Matrix JavaScript code to look, with
 acknowledgement that a significant amount of code is written to older
@@ -17,7 +17,7 @@ writing in modern ECMAScript and using a transpile step to generate the file
 that applications can then include. There are significant benefits in being
 able to use modern ECMAScript, although the tooling for doing so can be awkward
 for library code, especially with regard to translating source maps and line
-number throgh from the original code to the final application.
+number through from the original code to the final application.
 
 General Style
 -------------
@@ -151,6 +151,7 @@ General Style
   Don't set things to undefined. Reserve that value to mean "not yet set to anything."
   Boolean objects are verboten.
 - Use JSDoc
+- Use switch-case statements where there are 5 or more branches running against the same variable.
 
 ECMAScript
 ----------

docs/jitsi.md

@@ -0,0 +1,31 @@
+# Jitsi Wrapper
+
+**Note**: These are developer docs. Please consult your client's documentation for
+instructions on setting up Jitsi.
+
+The react-sdk wraps all Jitsi call widgets in a local wrapper called `jitsi.html`
+which takes several parameters:
+
+*Query string*:
+* `widgetId`: The ID of the widget. This is needed for communication back to the 
+  react-sdk.
+* `parentUrl`: The URL of the parent window. This is also needed for
+  communication back to the react-sdk.
+
+*Hash/fragment (formatted as a query string)*:
+* `conferenceDomain`: The domain to connect Jitsi Meet to.
+* `conferenceId`: The room or conference ID to connect Jitsi Meet to.
+* `isAudioOnly`: Boolean for whether this is a voice-only conference. May not
+  be present, should default to `false`.
+* `displayName`: The display name of the user viewing the widget. May not
+  be present or could be null.
+* `avatarUrl`: The HTTP(S) URL for the avatar of the user viewing the widget. May
+  not be present or could be null.
+* `userId`: The MXID of the user viewing the widget. May not be present or could
+  be null.
+
+The react-sdk will assume that `jitsi.html` is at the path of wherever it is currently
+being served. For example, `https://riot.im/develop/jitsi.html` or `vector://webapp/jitsi.html`.
+
+The `jitsi.html` wrapper can use the react-sdk's `WidgetApi` to communicate, making
+it easier to actually implement the feature.

docs/room-list-store.md

@@ -0,0 +1,151 @@
+# Room list sorting
+
+It's so complicated it needs its own README.
+
+![](img/RoomListStore2.png)
+
+Legend:
+* Orange = External event.
+* Purple = Deterministic flow. 
+* Green = Algorithm definition.
+* Red = Exit condition/point.
+* Blue = Process definition.
+
+## Algorithms involved
+
+There's two main kinds of algorithms involved in the room list store: list ordering and tag sorting.
+Throughout the code an intentional decision has been made to call them the List Algorithm and Sorting
+Algorithm respectively. The list algorithm determines the primary ordering of a given tag whereas the
+tag sorting defines how rooms within that tag get sorted, at the discretion of the list ordering.
+
+Behaviour of the overall room list (sticky rooms, etc) are determined by the generically-named Algorithm
+class. Here is where much of the coordination from the room list store is done to figure out which list
+algorithm to call, instead of having all the logic in the room list store itself.
+
+
+Tag sorting is effectively the comparator supplied to the list algorithm. This gives the list algorithm
+the power to decide when and how to apply the tag sorting, if at all. For example, the importance algorithm, 
+later described in this document, heavily uses the list ordering behaviour to break the tag into categories. 
+Each category then gets sorted by the appropriate tag sorting algorithm.
+
+### Tag sorting algorithm: Alphabetical
+
+When used, rooms in a given tag will be sorted alphabetically, where the alphabet's order is a problem
+for the browser. All we do is a simple string comparison and expect the browser to return something
+useful.
+
+### Tag sorting algorithm: Manual
+
+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.
+
+### Tag sorting algorithm: Recent
+
+Rooms get ordered by the timestamp of the most recent useful message. Usefulness is yet another algorithm
+in the room list system which determines whether an event type is capable of bubbling up in the room list.
+Normally events like room messages, stickers, and room security changes will be considered useful enough
+to cause a shift in time.
+
+Note that this is reliant on the event timestamps of the most recent message. Because Matrix is eventually
+consistent this means that from time to time a room might plummet or skyrocket across the tag due to the
+timestamp contained within the event (generated server-side by the sender's server).
+
+### List ordering algorithm: Natural
+
+This is the easiest of the algorithms to understand because it does essentially nothing. It imposes no
+behavioural changes over the tag sorting algorithm and is by far the simplest way to order a room list.
+Historically, it's been the only option in Riot and extremely common in most chat applications due to
+its relative deterministic behaviour.
+
+### List ordering algorithm: Importance
+
+On the other end of the spectrum, this is the most complicated algorithm which exists. There's major
+behavioural changes, and the tag sorting algorithm gets selectively applied depending on circumstances.
+
+Each tag which is not manually ordered gets split into 4 sections or "categories". Manually ordered tags
+simply get the manual sorting algorithm applied to them with no further involvement from the importance
+algorithm. There are 4 categories: Red, Grey, Bold, and Idle. Each has their own definition based off
+relative (perceived) importance to the user:
+
+* **Red**: The room has unread mentions waiting for the user.
+* **Grey**: The room has unread notifications waiting for the user. Notifications are simply unread
+  messages which cause a push notification or badge count. Typically, this is the default as rooms get
+  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 
+  last read it.
+
+Conveniently, each tag gets ordered by those categories as presented: red rooms appear above grey, grey
+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 
+collectively the tag will be sorted into categories with red being at the top.
+
+## Sticky rooms
+
+When the user visits a room, that room becomes 'sticky' in the list, regardless of ordering algorithm.
+From a code perspective, the underlying algorithm is not aware of a sticky room and instead the base class
+manages which room is sticky. This is to ensure that all algorithms handle it the same.
+
+The sticky flag is simply to say it will not move higher or lower down the list while it is active. For
+example, if using the importance algorithm, the room would naturally become idle once viewed and thus
+would normally fly down the list out of sight. The sticky room concept instead holds it in place, never
+letting it fly down until the user moves to another room.
+
+Only one room can be sticky at a time. Room updates around the sticky room will still hold the sticky
+room in place. The best example of this is the importance algorithm: if the user has 3 red rooms and
+selects the middle room, they will see exactly one room above their selection at all times. If they
+receive another notification which causes the room to move into the topmost position, the room that was
+above the sticky room will move underneath to allow for the new room to take the top slot, maintaining
+the sticky room's position.
+
+Though only applicable to the importance algorithm, the sticky room is not aware of category boundaries 
+and thus the user can see a shift in what kinds of rooms move around their selection. An example would 
+be the user having 4 red rooms, the user selecting the third room (leaving 2 above it), and then having 
+the rooms above it read on another device. This would result in 1 red room and 1 other kind of room 
+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 
+put the sticky room in a position where it's had to decrease N will not increase N.
+
+## Responsibilities of the store
+
+The store is responsible for the ordering, upkeep, and tracking of all rooms. The room list component simply gets 
+an object containing the tags it needs to worry about and the rooms within. The room list component will 
+decide which tags need rendering (as it commonly filters out empty tags in most cases), and will deal with 
+all kinds of filtering.
+
+## Filtering
+
+Filters are provided to the store as condition classes, which are then passed along to the algorithm
+implementations. The implementations then get to decide how to actually filter the rooms, however in
+practice the base `Algorithm` class deals with the filtering in a more optimized/generic way.
+
+The results of filters get cached to avoid needlessly iterating over potentially thousands of rooms,
+as the old room list store does. When a filter condition changes, it emits an update which (in this
+case) the `Algorithm` class will pick up and act accordingly. Typically, this also means filtering a 
+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.
+
+## Class breakdowns
+
+The `RoomListStore` is the major coordinator of various algorithm implementations, which take care 
+of the various `ListAlgorithm` and `SortingAlgorithm` options. The `Algorithm` class is responsible 
+for figuring out which tags get which rooms, as Matrix specifies them as a reverse map: tags get 
+defined on rooms and are not defined as a collection of rooms (unlike how they are presented to the 
+user). Various list-specific utilities are also included, though they are expected to move somewhere 
+more general when needed. For example, the `membership` utilities could easily be moved elsewhere 
+as needed.
+
+The various bits throughout the room list store should also have jsdoc of some kind to help describe
+what they do and how they work.

docs/scrolling.md

@@ -0,0 +1,28 @@
+# ScrollPanel
+
+## Updates
+
+During an onscroll event, we check whether we're getting close to the top or bottom edge of the loaded content. If close enough, we fire a request to load more through the callback passed in the `onFillRequest` prop. This returns a promise is passed down from `TimelinePanel`, where it will call paginate on the `TimelineWindow` and once the events are received back, update its state with the new events. This update trickles down to the `MessagePanel`, which rerenders all tiles and passed that to `ScrollPanel`. ScrollPanels `componentDidUpdate` method gets called, and we do the scroll housekeeping there (read below). Once the rerender has completed, the `setState` callback is called and we resolve the promise returned by `onFillRequest`. Now we check the DOM to see if we need more fill requests.
+
+## Prevent Shrinking
+
+ScrollPanel supports a mode to prevent it shrinking. This is used to prevent a jump when at the bottom of the timeline and people start and stop typing. It gets cleared automatically when 200px above the bottom of the timeline.
+
+
+## BACAT (Bottom-Aligned, Clipped-At-Top) scrolling
+
+BACAT scrolling implements a different way of restoring the scroll position in the timeline while tiles out of view are changing height or tiles are being added or removed. It was added in https://github.com/matrix-org/matrix-react-sdk/pull/2842.
+
+The motivation for the changes is having noticed that setting scrollTop while scrolling tends to not work well, with it interrupting ongoing scrolling and also querying scrollTop reporting outdated values and consecutive scroll adjustments cancelling each out previous ones. This seems to be worse on macOS than other platforms, presumably because of a higher resolution in scroll events there. Also see https://github.com/vector-im/riot-web/issues/528. The BACAT approach allows to only have to change the scroll offset when adding or removing tiles.
+
+The approach taken instead is to vertically align the timeline tiles to the bottom of the scroll container (using flexbox) and give the timeline inside the scroll container an explicit height, initially set to a multiple of the PAGE_SIZE (400px at time of writing) as needed by the content. When scrolled up, we can compensate for anything that grew below the viewport by changing the height of the timeline to maintain what's currently visible in the viewport without adjusting the scrollTop and hence without jumping.
+
+For anything above the viewport growing or shrinking, we don't need to do anything as the timeline is bottom-aligned. We do need to update the height manually to keep all content visible as more is loaded. To maintain scroll position after the portion above the viewport changes height, we need to set the scrollTop, as we cannot balance it out with more height changes. We do this 100ms after the user has stopped scrolling, so setting scrollTop has not nasty side-effects.
+
+As of https://github.com/matrix-org/matrix-react-sdk/pull/4166, we are scrolling to compensate for height changes by calling `scrollBy(0, x)` rather than reading and than setting `scrollTop`, as reading `scrollTop` can (again, especially on macOS) easily return values that are out of sync with what is on the screen, probably because scrolling can be done [off the main thread](https://wiki.mozilla.org/Platform/GFX/APZ) in some circumstances. This seems to further prevent jumps.
+
+### How does it work?
+
+`componentDidUpdate` is called when a tile in the timeline is updated (as we rerender the whole timeline) or tiles are added or removed (see Updates section before). From here, `checkScroll` is called, which calls `_restoreSavedScrollState`. Now, we increase the timeline height if something below the viewport grew by adjusting `this._bottomGrowth`. `bottomGrowth` is the height added to the timeline (on top of the height from the number of pages calculated at the last `_updateHeight` run) to compensate for growth below the viewport. This is cleared during the next run of `_updateHeight`. Remember that the tiles in the timeline are aligned to the bottom.
+
+From `_restoreSavedScrollState` we also call `_updateHeight` which waits until the user stops scrolling for 100ms and then recalculates the amount of pages of 400px the timeline should be sized to, to be able to show all of its (newly added) content. We have to adjust the scroll offset (which is why we wait until scrolling has stopped) now because the space above the viewport has likely changed.

docs/settings.md

@@ -51,6 +51,17 @@ Settings are the different options a user may set or experience in the applicati
 }
 ```
 
+Settings that support the config level can be set in the config file under the `settingDefaults` key (note that some settings, like the "theme" setting, are special cased in the config file):
+```json
+{
+  ...
+  "settingDefaults": {
+    "settingName": true
+  },
+  ...
+}
+```
+
 ### Getting values for a setting
 
 After importing `SettingsStore`, simply make a call to `SettingsStore.getValue`. The `roomId` parameter should always 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "2.1.1",
+  "version": "2.10.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -40,21 +40,22 @@
     "rethemendex": "res/css/rethemendex.sh",
     "clean": "rimraf lib",
     "build": "yarn clean && git rev-parse HEAD > git-revision.txt && yarn build:compile && yarn build:types",
-    "build:compile": "yarn reskindex && babel -d lib --verbose --extensions \".ts,.js\" src",
+    "build:compile": "yarn reskindex && babel -d lib --verbose --extensions \".ts,.js,.tsx\" src",
-    "build:types": "tsc --emitDeclarationOnly",
+    "build:types": "tsc --emitDeclarationOnly --jsx react",
     "start": "echo THIS IS FOR LEGACY PURPOSES ONLY. && yarn start:all",
     "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn start:build\" \"yarn reskindex:watch\"",
     "start:build": "babel src -w -s -d lib --verbose --extensions \".ts,.js\"",
     "lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
     "lint:js": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
     "lint:ts": "tslint --project ./tsconfig.json -t stylish",
-    "lint:types": "tsc --noEmit",
+    "lint:types": "tsc --noEmit --jsx react",
     "lint:style": "stylelint 'res/css/**/*.scss'",
     "test": "jest",
     "test:e2e": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
   },
   "dependencies": {
     "@babel/runtime": "^7.8.3",
+    "await-lock": "^2.0.1",
     "blueimp-canvas-to-blob": "^3.5.0",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
@@ -64,15 +65,14 @@
     "create-react-class": "^15.6.0",
     "diff-dom": "^4.1.3",
     "diff-match-patch": "^1.0.4",
-    "emojibase-data": "^4.0.2",
+    "emojibase-data": "^5.0.1",
-    "emojibase-regex": "^3.0.0",
+    "emojibase-regex": "^4.0.1",
     "escape-html": "^1.0.3",
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
     "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
-    "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
     "gfm.css": "^1.1.1",
     "glob-to-regexp": "^0.4.1",
     "highlight.js": "^9.15.8",
@@ -83,17 +83,18 @@
     "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "minimist": "^1.2.0",
     "pako": "^1.0.5",
+    "parse5": "^5.1.1",
     "png-chunks-extract": "^1.0.0",
+    "project-name-generator": "^2.1.7",
     "prop-types": "^15.5.8",
     "qrcode": "^1.4.4",
-    "qrcode-react": "^0.1.16",
     "qs": "^6.6.0",
+    "re-resizable": "^6.5.2",
     "react": "^16.9.0",
-    "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
     "react-dom": "^16.9.0",
     "react-focus-lock": "^2.2.1",
-    "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
+    "react-transition-group": "^4.4.1",
     "resize-observer-polyfill": "^1.5.0",
     "sanitize-html": "^1.18.4",
     "text-encoding-utf-8": "^1.0.1",
@@ -118,6 +119,19 @@
     "@babel/preset-typescript": "^7.7.4",
     "@babel/register": "^7.7.4",
     "@peculiar/webcrypto": "^1.0.22",
+    "@types/classnames": "^2.2.10",
+    "@types/counterpart": "^0.18.1",
+    "@types/flux": "^3.1.9",
+    "@types/linkifyjs": "^2.1.3",
+    "@types/lodash": "^4.14.152",
+    "@types/modernizr": "^3.5.3",
+    "@types/node": "^12.12.41",
+    "@types/qrcode": "^1.3.4",
+    "@types/react": "^16.9",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-transition-group": "^4.4.0",
+    "@types/sanitize-html": "^1.23.3",
+    "@types/zxcvbn": "^4.4.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "chokidar": "^3.3.1",
@@ -136,6 +150,7 @@
     "flow-parser": "^0.57.3",
     "glob": "^5.0.14",
     "jest": "^24.9.0",
+    "jest-canvas-mock": "^2.2.0",
     "lolex": "^5.1.2",
     "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.2.2",
@@ -155,6 +170,9 @@
     "testMatch": [
       "<rootDir>/test/**/*-test.js"
     ],
+    "setupFiles": [
+      "jest-canvas-mock"
+    ],
     "setupFilesAfterEnv": [
       "<rootDir>/test/setupTests.js"
     ],

release.sh

@@ -1,4 +1,4 @@
-#!/bin/sh
+#!/bin/bash
 #
 # Script to perform a release of matrix-react-sdk.
 #
@@ -11,6 +11,7 @@ cd `dirname $0`
 
 for i in matrix-js-sdk
 do
+    echo "Checking version of $i..."
     depver=`cat package.json | jq -r .dependencies[\"$i\"]`
     latestver=`yarn info -s $i dist-tags.next`
     if [ "$depver" != "$latestver" ]

res/css/_common.scss

@@ -16,6 +16,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@import "./_font-sizes.scss";
+
+:root {
+    font-size: 10px;
+}
+
 html {
     /* hack to stop overscroll bounce on OSX and iOS.
        N.B. Breaks things when we have legitimate horizontal overscroll */
@@ -25,7 +31,7 @@ html {
 
 body {
     font-family: $font-family;
-    font-size: 15px;
+    font-size: $font-15px;
     background-color: $primary-bg-color;
     color: $primary-fg-color;
     border: 0px;
@@ -42,10 +48,15 @@ pre, code {
     font-size: 100% !important;
 }
 
-.error, .warning {
+.error, .warning,
+.text-error, .text-warning {
     color: $warning-color;
 }
 
+.text-success {
+    color: $accent-color;
+}
+
 b {
     // On Firefox, the default weight for `<b>` is `bolder` which results in no bold
     // effect since we only have specific weights of our fonts available.
@@ -55,7 +66,7 @@ b {
 h2 {
     color: $primary-fg-color;
     font-weight: 400;
-    font-size: 18px;
+    font-size: $font-18px;
     margin-top: 16px;
     margin-bottom: 16px;
 }
@@ -71,7 +82,7 @@ input[type=search],
 input[type=password] {
     padding: 9px;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     min-width: 0;
 }
@@ -149,9 +160,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         background-color: transparent;
         color: $input-darker-fg-color;
         border-radius: 4px;
-        border: 1px solid $dialog-close-fg-color;
+        border: 1px solid rgba($primary-fg-color, .1);
-        // these things should probably not be defined
+        // these things should probably not be defined globally
-        // globally
         margin: 9px;
         flex: 0 0 auto;
     }
@@ -202,37 +212,6 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     transition: opacity 0.2s ease-in-out;
 }
 
-/* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
-   Stop the scrollbar view from pushing out the container's overall sizing, which causes
-   flexbox to adapt to the new size and cause the view to keep growing.
- */
-.gm-scrollbar-container .gm-scroll-view {
-    position: absolute;
-}
-
-/* Expand thumbs on hoverover */
-.gm-scrollbar {
-    border-radius: 5px !important;
-}
-.gm-scrollbar.-vertical {
-    width: 6px;
-    transition: width 120ms ease-out !important;
-}
-.gm-scrollbar.-vertical:hover,
-.gm-scrollbar.-vertical:active {
-    width: 8px;
-    transition: width 120ms ease-out !important;
-}
-.gm-scrollbar.-horizontal {
-    height: 6px;
-    transition: height 120ms ease-out !important;
-}
-.gm-scrollbar.-horizontal:hover,
-.gm-scrollbar.-horizontal:active {
-    height: 8px;
-    transition: height 120ms ease-out !important;
-}
-
 // These are magic constants which are excluded from tinting, to let themes
 // (which only have CSS, unlike skins) tell the app what their non-tinted
 // colourscheme is by inspecting the stylesheet DOM.
@@ -279,12 +258,12 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     color: $light-fg-color;
     z-index: 4012;
     font-weight: 300;
-    font-size: 15px;
+    font-size: $font-15px;
     position: relative;
     padding: 25px 30px 30px 30px;
     max-height: 80%;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
-    border-radius: 4px;
+    border-radius: 8px;
     overflow-y: auto;
 }
 
@@ -339,7 +318,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_titleImage {
-    vertical-align: middle;
+    vertical-align: sub;
     width: 25px;
     height: 25px;
     margin-left: -2px;
@@ -347,14 +326,17 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_Dialog_title {
-    font-size: 22px;
+    font-size: $font-22px;
-    line-height: 36px;
+    line-height: $font-36px;
     color: $dialog-title-fg-color;
 }
 
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
     text-align: center;
 }
+.mx_Dialog_header.mx_Dialog_headerWithCancel > .mx_Dialog_title {
+    margin-right: 20px; // leave space for the 'X' cancel button
+}
 
 .mx_Dialog_title.danger {
     color: $warning-color;
@@ -376,7 +358,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 .mx_Dialog_content {
     margin: 24px 0 68px;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $primary-fg-color;
     word-wrap: break-word;
 }
@@ -445,6 +427,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border-radius: 8px;
     padding: 0px;
     box-shadow: none;
+
+    /* Don't show scroll-bars on spinner dialogs */
+    overflow-x: hidden;
+    overflow-y: hidden;
 }
 
 // TODO: Review mx_GeneralButton usage to see if it can use a different class
@@ -472,7 +458,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 }
 
 .mx_TextInputDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
@@ -598,3 +584,111 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     // So it fits in the space provided by the page
     max-width: 120px;
 }
+
+// A context menu that largely fits the | [icon]    [label] | format.
+.mx_IconizedContextMenu {
+    min-width: 146px;
+
+    .mx_IconizedContextMenu_optionList {
+        & > * {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+        // the notFirst class is for cases where the optionList might be under a header of sorts.
+        &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
+            // This is a bit of a hack when we could just use a simple border-top property,
+            // however we have a (kinda) good reason for doing it this way: we need opacity.
+            // To get the right color, we need an opacity modifier which means we have to work
+            // around the problem. PostCSS doesn't support the opacity() function, and if we
+            // use something like postcss-functions we quickly run into an issue where the
+            // function we would define gets passed a CSS variable for custom themes, which
+            // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
+            //
+            // Therefore, we just hack in a line and border the thing ourselves
+            &::before {
+                border-top: 1px solid $primary-fg-color;
+                opacity: 0.1;
+                content: '';
+
+                // Counteract the padding problems (width: 100% ignores the 40px padding,
+                // unless we position it absolutely then it does the right thing).
+                width: 100%;
+                position: absolute;
+                left: 0;
+            }
+        }
+
+        // round the top corners of the top button for the hover effect to be bounded
+        &:first-child .mx_AccessibleButton:first-child {
+            border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
+        }
+
+        // round the bottom corners of the bottom button for the hover effect to be bounded
+        &:last-child .mx_AccessibleButton:last-child {
+            border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
+        }
+
+        .mx_AccessibleButton {
+            // pad the inside of the button so that the hover background is padded too
+            padding-top: 12px;
+            padding-bottom: 12px;
+            text-decoration: none;
+            color: $primary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            // Create a flexbox to more easily define the list items
+            display: flex;
+            align-items: center;
+
+            &:hover {
+                background-color: $menu-selected-color;
+            }
+
+            img, .mx_IconizedContextMenu_icon { // icons
+                width: 16px;
+                min-width: 16px;
+                max-width: 16px;
+            }
+
+            span.mx_IconizedContextMenu_label { // labels
+                padding-left: 14px;
+                width: 100%;
+                flex: 1;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    &.mx_IconizedContextMenu_compact {
+        .mx_IconizedContextMenu_optionList > * {
+            padding: 8px 16px 8px 11px;
+        }
+    }
+}
+
+@define-mixin ProgressBarColour $colour {
+    color: $colour;
+    &::-moz-progress-bar {
+        background-color: $colour;
+    }
+    &::-webkit-progress-value {
+        background-color: $colour;
+    }
+}
+
+@define-mixin ProgressBarBorderRadius $radius {
+    border-radius: $radius;
+    &::-moz-progress-bar {
+        border-radius: $radius;
+    }
+    &::-webkit-progress-bar,
+    &::-webkit-progress-value {
+        border-radius: $radius;
+    }
+}

res/css/_components.scss

@@ -1,5 +1,6 @@
 // autogenerated by rethemendex.sh
 @import "./_common.scss";
+@import "./_font-sizes.scss";
 @import "./structures/_AutoHideScrollbar.scss";
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
@@ -11,12 +12,14 @@
 @import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";
+@import "./structures/_LeftPanel2.scss";
 @import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NotificationPanel.scss";
 @import "./structures/_RightPanel.scss";
 @import "./structures/_RoomDirectory.scss";
+@import "./structures/_RoomSearch.scss";
 @import "./structures/_RoomStatusBar.scss";
 @import "./structures/_RoomSubList.scss";
 @import "./structures/_RoomView.scss";
@@ -27,6 +30,7 @@
 @import "./structures/_ToastContainer.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
+@import "./structures/_UserMenu.scss";
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_CompleteSecurity.scss";
 @import "./structures/auth/_Login.scss";
@@ -40,11 +44,14 @@
 @import "./views/auth/_CountryDropdown.scss";
 @import "./views/auth/_InteractiveAuthEntryComponents.scss";
 @import "./views/auth/_LanguageSelector.scss";
+@import "./views/auth/_PassphraseField.scss";
 @import "./views/auth/_ServerConfig.scss";
 @import "./views/auth/_ServerTypeSelector.scss";
 @import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
+@import "./views/avatars/_DecoratedRoomAvatar.scss";
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
+@import "./views/avatars/_PulsedAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
 @import "./views/context_menus/_RoomTileContextMenu.scss";
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
@@ -59,14 +66,14 @@
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
-@import "./views/dialogs/_DeviceVerifyDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
-@import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_InviteDialog.scss";
+@import "./views/dialogs/_KeyboardShortcutsDialog.scss";
 @import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_NewSessionReviewDialog.scss";
+@import "./views/dialogs/_RebrandDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialogBridges.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
@@ -79,7 +86,6 @@
 @import "./views/dialogs/_SlashCommandHelpDialog.scss";
 @import "./views/dialogs/_TabbedIntegrationManagerDialog.scss";
 @import "./views/dialogs/_TermsDialog.scss";
-@import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/_UploadConfirmDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
@@ -106,12 +112,16 @@
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
+@import "./views/elements/_QRCode.scss";
 @import "./views/elements/_ReplyThread.scss";
 @import "./views/elements/_ResizeHandle.scss";
 @import "./views/elements/_RichText.scss";
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_RoomAliasField.scss";
+@import "./views/elements/_Slider.scss";
 @import "./views/elements/_Spinner.scss";
+@import "./views/elements/_StyledCheckbox.scss";
+@import "./views/elements/_StyledRadioButton.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
 @import "./views/elements/_TextWithTooltip.scss";
 @import "./views/elements/_ToggleSwitch.scss";
@@ -119,7 +129,6 @@
 @import "./views/elements/_TooltipButton.scss";
 @import "./views/elements/_Validation.scss";
 @import "./views/emojipicker/_EmojiPicker.scss";
-@import "./views/globals/_MatrixToolbar.scss";
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
@@ -131,12 +140,14 @@
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
+@import "./views/messages/_MVideoBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
 @import "./views/messages/_MjolnirBody.scss";
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
 @import "./views/messages/_ReactionsRowButtonTooltip.scss";
+@import "./views/messages/_RedactedBody.scss";
 @import "./views/messages/_RoomAvatarEvent.scss";
 @import "./views/messages/_SenderProfile.scss";
 @import "./views/messages/_TextualEvent.scss";
@@ -156,28 +167,34 @@
 @import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_GroupLayout.scss";
+@import "./views/rooms/_IRCLayout.scss";
 @import "./views/rooms/_InviteOnlyIcon.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";
-@import "./views/rooms/_MemberDeviceInfo.scss";
 @import "./views/rooms/_MemberInfo.scss";
 @import "./views/rooms/_MemberList.scss";
 @import "./views/rooms/_MessageComposer.scss";
 @import "./views/rooms/_MessageComposerFormatBar.scss";
+@import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_RoomBreadcrumbs.scss";
+@import "./views/rooms/_RoomBreadcrumbs2.scss";
 @import "./views/rooms/_RoomDropTarget.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
+@import "./views/rooms/_RoomList2.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomRecoveryReminder.scss";
+@import "./views/rooms/_RoomSublist2.scss";
 @import "./views/rooms/_RoomTile.scss";
+@import "./views/rooms/_RoomTile2.scss";
+@import "./views/rooms/_RoomTileIcon.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
-@import "./views/rooms/_SearchableEntityList.scss";
 @import "./views/rooms/_SendMessageComposer.scss";
 @import "./views/rooms/_Stickers.scss";
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
@@ -186,6 +203,7 @@
 @import "./views/settings/_AvatarSetting.scss";
 @import "./views/settings/_CrossSigningPanel.scss";
 @import "./views/settings/_DevicesPanel.scss";
+@import "./views/settings/_E2eAdvancedPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_KeyBackupPanel.scss";
@@ -194,10 +212,12 @@
 @import "./views/settings/_ProfileSettings.scss";
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
+@import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";
 @import "./views/settings/tabs/room/_RolesRoomSettingsTab.scss";
 @import "./views/settings/tabs/room/_SecurityRoomSettingsTab.scss";
+@import "./views/settings/tabs/user/_AppearanceUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
@@ -207,6 +227,8 @@
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
 @import "./views/terms/_InlineTermsAgreement.scss";
 @import "./views/verification/_VerificationShowSas.scss";
+@import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallView.scss";
+@import "./views/voip/_CallView2.scss";
 @import "./views/voip/_IncomingCallbox.scss";
 @import "./views/voip/_VideoView.scss";

res/css/_font-sizes.scss

@@ -0,0 +1,72 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$font-1px: 0.1rem;
+$font-1-5px: 0.15rem;
+$font-2px: 0.2rem;
+$font-3px: 0.3rem;
+$font-4px: 0.4rem;
+$font-5px: 0.5rem;
+$font-6px: 0.6rem;
+$font-7px: 0.7rem;
+$font-8px: 0.8rem;
+$font-9px: 0.9rem;
+$font-10px: 1.0rem;
+$font-10-4px: 1.04rem;
+$font-11px: 1.1rem;
+$font-12px: 1.2rem;
+$font-13px: 1.3rem;
+$font-14px: 1.4rem;
+$font-15px: 1.5rem;
+$font-16px: 1.6rem;
+$font-17px: 1.7rem;
+$font-18px: 1.8rem;
+$font-19px: 1.9rem;
+$font-20px: 2.0rem;
+$font-21px: 2.1rem;
+$font-22px: 2.2rem;
+$font-23px: 2.3rem;
+$font-24px: 2.4rem;
+$font-25px: 2.5rem;
+$font-26px: 2.6rem;
+$font-27px: 2.7rem;
+$font-28px: 2.8rem;
+$font-29px: 2.9rem;
+$font-30px: 3.0rem;
+$font-31px: 3.1rem;
+$font-32px: 3.2rem;
+$font-33px: 3.3rem;
+$font-34px: 3.4rem;
+$font-35px: 3.5rem;
+$font-36px: 3.6rem;
+$font-37px: 3.7rem;
+$font-38px: 3.8rem;
+$font-39px: 3.9rem;
+$font-40px: 4.0rem;
+$font-41px: 4.1rem;
+$font-42px: 4.2rem;
+$font-43px: 4.3rem;
+$font-44px: 4.4rem;
+$font-45px: 4.5rem;
+$font-46px: 4.6rem;
+$font-47px: 4.7rem;
+$font-48px: 4.8rem;
+$font-49px: 4.9rem;
+$font-50px: 5.0rem;
+$font-51px: 5.1rem;
+$font-52px: 5.2rem;
+$font-88px: 8.8rem;
+$font-400px: 40rem;

res/css/structures/_AutoHideScrollbar.scss

@@ -14,69 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* This file has CSS for both native and non-native scrollbars in an order
+// make any scrollbar grey and thin
- * that's fairly logical to read but duplicates a selector to separate the
+html {
- * hiding/showing from the sizing.
- */
-/* stylelint-disable no-duplicate-selectors */
-
-/*
-1. for browsers that support native overlay auto-hiding scrollbars
-*/
-.mx_AutoHideScrollbar {
-    overflow-x: hidden;
-    overflow-y: auto;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-}
-/*
-2. webkit also supports overflow:overlay where the scrollbars don't take any space
-in the layout but they don't autohide, so do that only on hover
-*/
-body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar {
-    overflow-y: hidden;
-}
-
-body.mx_scrollbar_overlay_noautohide .mx_AutoHideScrollbar:hover {
-    overflow-y: overlay;
-}
-/*
-3. as a last fallback, compensate for the scrollbar taking up space in the layout
-by having giving the child element (.mx_AutoHideScrollbar_offset) a
-negative right margin of the width of the scrollbar when the container
-is overflowing. This is what Firefox ends up using. Overflow is detected
-in javascript, and adds the mx_AutoHideScrollbar_overflow class to the container.
-This only works in Firefox, which should be fine as this fallback is only needed there.
-*/
-body.mx_scrollbar_nooverlay {
-    .mx_AutoHideScrollbar {
-        overflow-y: hidden;
-    }
-
-    .mx_AutoHideScrollbar:hover {
-        overflow-y: auto;
-    }
-
-    /*
-    offset scrollbar width with negative margin-right
-
-    include before and after psuedo-elements here so they can
-    be used to do something interesting like scroll-indicating
-    gradients (see IndicatorScrollBar)
-    */
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
-        margin-right: calc(-1 * var(--scrollbar-width));
-    }
-}
-
-// style the native scrollbars ...
-// ... standard css scrollbars (firefox at time of writing)
-.mx_AutoHideScrollbar {
     scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+}
+// scrollbar-width is not inherited (but -color is, why?!),
+// so declare it on every element
+* {
     scrollbar-width: thin;
 }
-// or fallback for webkit browsers
+
 ::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -84,6 +31,37 @@ body.mx_scrollbar_nooverlay {
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: $scrollbar-thumb-color;
     border-radius: 3px;
+    background-color: $scrollbar-thumb-color;
+}
+
+// make auto-hide scrollbars not transparent again on hover
+.mx_AutoHideScrollbar:hover {
+    scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
+
+    &::-webkit-scrollbar {
+        background-color: $scrollbar-track-color;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: $scrollbar-thumb-color;
+    }
+}
+
+// make scrollbars transparent for autohide scrollbars
+.mx_AutoHideScrollbar {
+    overflow-x: hidden;
+    overflow-y: auto;
+    overflow-y: overlay;    // where supported
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+
+    &::-webkit-scrollbar {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+    }
+
+    scrollbar-color: transparent transparent;
 }

res/css/structures/_ContextualMenu.scss

@@ -31,12 +31,12 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border-radius: 4px;
+    border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
-    font-size: 14px;
+    font-size: $font-14px;
     z-index: 5001;
 }
 

res/css/structures/_CreateRoom.scss

@@ -26,7 +26,7 @@ limitations under the License.
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
     padding: 9px;
     margin-top: 6px;
 }

res/css/structures/_FilePanel.scss

@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MFileBody_download {
     display: flex;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $event-timestamp-color;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
     flex: 1 0 0;
-    font-size: 11px;
+    font-size: $font-11px;
     text-align: right;
     white-space: nowrap;
 }
@@ -80,7 +80,7 @@ limitations under the License.
     flex: 1 1 auto;
     line-height: initial;
     padding: 0px;
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }
@@ -90,7 +90,7 @@ limitations under the License.
     text-align: right;
     visibility: visible;
     position: initial;
-    font-size: 11px;
+    font-size: $font-11px;
     opacity: 1.0;
     color: $event-timestamp-color;
 }

res/css/structures/_GroupView.scss

@@ -29,12 +29,12 @@ limitations under the License.
     align-items: center;
     display: flex;
     padding-bottom: 10px;
+    padding-left: 19px;
 }
 
 .mx_GroupView_header_view {
     border-bottom: 1px solid $primary-hairline-color;
     padding-bottom: 0px;
-    padding-left: 19px;
     padding-right: 8px;
 }
 
@@ -63,11 +63,11 @@ limitations under the License.
 }
 
 .mx_GroupHeader_editButton::before {
-    mask-image: url('$(res)/img/feather-customised/settings.svg');
+    mask-image: url('$(res)/img/element-icons/settings.svg');
 }
 
 .mx_GroupHeader_shareButton::before {
-    mask-image: url('$(res)/img/icons-share.svg');
+    mask-image: url('$(res)/img/element-icons/room/share.svg');
 }
 
 .mx_GroupView_hostingSignup img {
@@ -134,7 +134,7 @@ limitations under the License.
     overflow: hidden;
     color: $primary-fg-color;
     font-weight: bold;
-    font-size: 22px;
+    font-size: $font-22px;
     padding-left: 19px;
     padding-right: 16px;
     /* why isn't text-overflow working? */
@@ -148,7 +148,7 @@ limitations under the License.
     max-height: 42px;
     color: $settings-grey-fg-color;
     font-weight: 300;
-    font-size: 13px;
+    font-size: $font-13px;
     padding-left: 19px;
     margin-right: 16px;
     overflow: hidden;
@@ -180,12 +180,9 @@ limitations under the License.
     line-height: 2em;
 }
 
-.mx_GroupView > .mx_MainSplit {
-    flex: 1;
-}
-
 .mx_GroupView_body {
     flex-grow: 1;
+    margin: 0 24px;
 }
 
 .mx_GroupView_rooms {
@@ -200,7 +197,7 @@ limitations under the License.
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
-    font-size: 13px;
+    font-size: $font-13px;
     margin-bottom: 10px;
 }
 
@@ -230,7 +227,7 @@ limitations under the License.
 .mx_GroupView_rooms_header_addRow_label {
     display: inline-block;
     vertical-align: top;
-    line-height: 24px;
+    line-height: $font-24px;
     padding-left: 28px;
     color: $accent-color;
 }
@@ -254,6 +251,7 @@ limitations under the License.
 .mx_GroupView_membershipSubSection {
     justify-content: space-between;
     display: flex;
+    padding-bottom: 8px;
 }
 
 .mx_GroupView_membershipSubSection .mx_Spinner {
@@ -262,7 +260,7 @@ limitations under the License.
 
 .mx_GroupView_membershipSection_description {
     /* To match textButton */
-    line-height: 34px;
+    line-height: $font-34px;
 }
 
 .mx_GroupView_membershipSection_description .mx_BaseAvatar {
@@ -341,8 +339,8 @@ limitations under the License.
     display: none;
 }
 
-.mx_GroupView_body .gm-scroll-view > * {
+.mx_GroupView_body .mx_AutoHideScrollbar > * {
-    margin: 11px 50px 0px 68px;
+    margin: 11px 50px 50px 68px;
 }
 
 .mx_GroupView_groupDesc textarea {
@@ -370,7 +368,7 @@ limitations under the License.
     padding: 40px 20px;
 }
 
-.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
+.mx_GroupView .mx_MemberInfo .mx_AutoHideScrollbar > :not(.mx_MemberInfo_avatar) {
     padding-left: 16px;
     padding-right: 16px;
 }

res/css/structures/_HomePage.scss

@@ -23,3 +23,84 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
 }
+
+.mx_HomePage_default {
+    text-align: center;
+
+    .mx_HomePage_default_wrapper {
+        padding: 25vh 0 12px;
+    }
+
+    img {
+        height: 48px;
+    }
+
+    h1 {
+        font-weight: 600;
+        font-size: $font-32px;
+        line-height: $font-44px;
+        margin-bottom: 4px;
+    }
+
+    h4 {
+        margin-top: 4px;
+        font-weight: 600;
+        font-size: $font-18px;
+        line-height: $font-25px;
+        color: $muted-fg-color;
+    }
+
+    .mx_HomePage_default_buttons {
+        margin: 80px auto 0;
+        width: fit-content;
+
+        .mx_AccessibleButton {
+            padding: 73px 8px 15px; // top: 20px top padding + 40px icon + 13px margin
+
+            width: 104px; // 120px - 2* 8px
+            margin: 0 39px; // 55px - 2* 8px
+            position: relative;
+            display: inline-block;
+            border-radius: 8px;
+            vertical-align: top;
+            word-break: break-word;
+
+            font-weight: 600;
+            font-size: $font-15px;
+            line-height: $font-20px;
+            color: $muted-fg-color;
+
+            &:hover {
+                color: $accent-color;
+                background: rgba($accent-color, 0.06);
+
+                &::before {
+                    background-color: $accent-color;
+                }
+            }
+
+            &::before {
+                top: 20px;
+                left: 40px; // (120px-40px)/2
+                width: 40px;
+                height: 40px;
+
+                content: '';
+                position: absolute;
+                background-color: $muted-fg-color;
+                mask-repeat: no-repeat;
+                mask-size: contain;
+            }
+
+            &.mx_HomePage_button_sendDm::before {
+                mask-image: url('$(res)/img/feather-customised/message-circle.svg');
+            }
+            &.mx_HomePage_button_explore::before {
+                mask-image: url('$(res)/img/feather-customised/explore.svg');
+            }
+            &.mx_HomePage_button_createGroup::before {
+                mask-image: url('$(res)/img/feather-customised/group.svg');
+            }
+        }
+    }
+}

res/css/structures/_LeftPanel.scss

@@ -19,6 +19,7 @@ limitations under the License.
     display: flex;
     /* LeftPanel 260px */
     min-width: 260px;
+    max-width: 50%;
     flex: 0 0 auto;
 }
 
@@ -147,7 +148,7 @@ limitations under the License.
     }
 
     .mx_AccessibleButton {
-        font-size: 14px;
+        font-size: $font-14px;
         margin: 4px 0 1px 9px;
         padding: 9px;
         padding-left: 42px;

res/css/structures/_LeftPanel2.scss

@@ -0,0 +1,197 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
+
+$tagPanelWidth: 56px; // only applies in this file, used for calculations
+
+.mx_LeftPanel2 {
+    background-color: $roomlist2-bg-color;
+    min-width: 260px;
+    max-width: 50%;
+
+    // Create a row-based flexbox for the TagPanel and the room list
+    display: flex;
+
+    .mx_LeftPanel2_tagPanelContainer {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: $tagPanelWidth;
+        height: 100%;
+
+        // Create another flexbox so the TagPanel fills the container
+        display: flex;
+
+        // TagPanel handles its own CSS
+    }
+
+    &:not(.mx_LeftPanel2_hasTagPanel) {
+        .mx_LeftPanel2_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_LeftPanel2_roomListContainer {
+        width: calc(100% - $tagPanelWidth);
+        background-color: $roomlist2-bg-color;
+
+        // Create another flexbox (this time a column) for the room list components
+        display: flex;
+        flex-direction: column;
+
+        .mx_LeftPanel2_userHeader {
+            /* 12px top, 12px sides, 20px bottom (using 13px bottom to account
+             * for internal whitespace in the breadcrumbs)
+             */
+            padding: 12px;
+            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+
+            // Create another flexbox column for the rows to stack within
+            display: flex;
+            flex-direction: column;
+        }
+
+        .mx_LeftPanel2_breadcrumbsContainer {
+            overflow-y: hidden;
+            overflow-x: scroll;
+            margin: 12px 12px 0 12px;
+            flex: 0 0 auto;
+            // Create yet another flexbox, this time within the row, to ensure items stay
+            // aligned correctly. This is also a row-based flexbox.
+            display: flex;
+            align-items: center;
+
+            &.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow {
+                mask-image: linear-gradient(90deg, black, black 95%, transparent);
+            }
+
+            &.mx_IndicatorScrollbar_rightOverflow.mx_IndicatorScrollbar_leftOverflow {
+                mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
+            }
+        }
+
+        .mx_LeftPanel2_filterContainer {
+            margin-left: 12px;
+            margin-right: 12px;
+
+            flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
+
+            // Create a flexbox to organize the inputs
+            display: flex;
+            align-items: center;
+
+            .mx_RoomSearch_expanded + .mx_LeftPanel2_exploreButton {
+                // Cheaty way to return the occupied space to the filter input
+                flex-basis: 0;
+                margin: 0;
+                width: 0;
+
+                // Don't forget to hide the masked ::before icon,
+                // using display:none or visibility:hidden would break accessibility
+                &::before {
+                    content: none;
+                }
+            }
+
+            .mx_LeftPanel2_exploreButton {
+                width: 28px;
+                height: 28px;
+                border-radius: 20px;
+                background-color: $roomlist2-button-bg-color;
+                position: relative;
+                margin-left: 8px;
+
+                &::before {
+                    content: '';
+                    position: absolute;
+                    top: 6px;
+                    left: 6px;
+                    width: 16px;
+                    height: 16px;
+                    mask-image: url('$(res)/img/feather-customised/compass.svg');
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background: $primary-fg-color;
+                }
+            }
+        }
+
+        .mx_LeftPanel2_roomListWrapper {
+            // Create a flexbox to ensure the containing items cause appropriate overflow.
+            display: flex;
+
+            flex-grow: 1;
+            overflow: hidden;
+            min-height: 0;
+            margin-top: 10px; // so we're not up against the search/filter
+
+            &.mx_LeftPanel2_roomListWrapper_stickyBottom {
+                padding-bottom: 32px;
+            }
+
+            &.mx_LeftPanel2_roomListWrapper_stickyTop {
+                padding-top: 32px;
+            }
+        }
+
+        .mx_LeftPanel2_actualRoomListContainer {
+            flex-grow: 1; // fill the available space
+            overflow-y: auto;
+            width: 100%;
+            max-width: 100%;
+            position: relative; // for sticky headers
+
+            // Create a flexbox to trick the layout engine
+            display: flex;
+        }
+    }
+
+    // These styles override the defaults for the minimized (66px) layout
+    &.mx_LeftPanel2_minimized {
+        min-width: unset;
+
+        // We have to forcefully set the width to override the resizer's style attribute.
+        &.mx_LeftPanel2_hasTagPanel {
+            width: calc(68px + $tagPanelWidth) !important;
+        }
+        &:not(.mx_LeftPanel2_hasTagPanel) {
+            width: 68px !important;
+        }
+
+        .mx_LeftPanel2_roomListContainer {
+            width: 68px;
+
+            .mx_LeftPanel2_filterContainer {
+                // Organize the flexbox into a centered column layout
+                flex-direction: column;
+                justify-content: center;
+
+                .mx_LeftPanel2_exploreButton {
+                    margin-left: 0;
+                    margin-top: 8px;
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+}

res/css/structures/_MainSplit.scss

@@ -18,6 +18,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     min-width: 0;
+    height: 100%;
 }
 
 // move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
@@ -25,3 +26,23 @@ limitations under the License.
     margin: 0 -10px 0 0;
     padding: 0 10px 0 0;
 }
+
+.mx_MainSplit > .mx_ResizeHandle_horizontal:hover {
+    position: relative;
+
+    &::before {
+        position: absolute;
+        left: 4px;
+        top: 50%;
+        transform: translate(0, -50%);
+
+        height: 30%;
+        width: 4px;
+        border-radius: 4px;
+
+        content: ' ';
+
+        background-color: $primary-fg-color;
+        opacity: 0.8;
+    }
+}

res/css/structures/_MatrixChat.scss

@@ -41,10 +41,6 @@ limitations under the License.
     height: 40px;
 }
 
-.mx_MatrixChat_toolbarShowing {
-    height: auto;
-}
-
 .mx_MatrixChat {
     width: 100%;
     height: 100%;
@@ -70,22 +66,35 @@ limitations under the License.
 }
 
 /* not the left panel, and not the resize handle, so the roomview/groupview/... */
-.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_ResizeHandle) {
+.mx_MatrixChat > :not(.mx_LeftPanel_container):not(.mx_LeftPanel2):not(.mx_ResizeHandle) {
     background-color: $primary-bg-color;
 
     flex: 1 1 0;
     min-width: 0;
 
-    /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
-       and https://github.com/vector-im/vector-web/issues/946.
-       Empirically this stops the MessagePanel's width exploding outwards when
-       gemini is in 'prevented' mode
-       */
-    overflow-x: auto;
-
     /* To fix https://github.com/vector-im/riot-web/issues/3298 where Safari
        needed height 100% all the way down to the HomePage. Height does not
        have to be auto, empirically.
     */
     height: 100%;
 }
+
+.mx_MatrixChat > .mx_ResizeHandle_horizontal:hover {
+    position: relative;
+
+    &::before {
+        position: absolute;
+        left: -2px;
+        top: 50%;
+        transform: translate(0, -50%);
+
+        height: 30%;
+        width: 4px;
+        border-radius: 4px;
+
+        content: ' ';
+
+        background-color: $primary-fg-color;
+        opacity: 0.8;
+    }
+}

res/css/structures/_MyGroups.scss

@@ -67,9 +67,6 @@ limitations under the License.
     }
 }
 
-
-
-
 .mx_MyGroups_headerCard_header {
     font-weight: bold;
     margin-bottom: 10px;
@@ -98,12 +95,17 @@ limitations under the License.
 
     display: flex;
     flex-direction: column;
+    overflow-y: auto;
+}
+
+.mx_MyGroups_scrollable {
+    overflow-y: inherit;
 }
 
 .mx_MyGroups_placeholder {
     background-color: $info-plinth-bg-color;
     color: $info-plinth-fg-color;
-    line-height: 400px;
+    line-height: $font-400px;
     border-radius: 10px;
     text-align: center;
 }
@@ -147,11 +149,11 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_name {
     margin: 0px;
-    font-size: 15px;
+    font-size: $font-15px;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
-    font-size: 13px;
+    font-size: $font-13px;
     opacity: 0.7;
 }
 
@@ -159,7 +161,7 @@ limitations under the License.
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
-    font-size: 13px;
+    font-size: $font-13px;
     max-height: 36px;
     overflow: hidden;
 }

res/css/structures/_NotificationPanel.scss

@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
-    font-size: 14px;
+    font-size: $font-14px;
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -54,7 +54,7 @@ limitations under the License.
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
     color: $primary-fg-color;
-    font-size: 12px;
+    font-size: $font-12px;
     display: inline;
     padding-left: 0px;
 }
@@ -63,6 +63,10 @@ limitations under the License.
     padding-left: 32px;
     padding-top: 8px;
     position: relative;
+
+    a {
+        display: flex;
+    }
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a,

res/css/structures/_RightPanel.scss

@@ -20,8 +20,16 @@ limitations under the License.
     flex: 0 0 auto;
     position: relative;
     min-width: 264px;
+    max-width: 50%;
     display: flex;
     flex-direction: column;
+    border-radius: 8px;
+    margin: 5px;
+    padding: 4px 0;
+
+    .mx_RoomView_MessageList {
+        padding: 14px 18px; // top and bottom is 4px smaller to balance with the padding set above
+    }
 }
 
 .mx_RightPanel_header {
@@ -43,20 +51,18 @@ limitations under the License.
 .mx_RightPanel_headerButton {
     cursor: pointer;
     flex: 0 0 auto;
-    vertical-align: top;
+    margin-left: 1px;
-    margin-left: 5px;
+    margin-right: 1px;
-    margin-right: 5px;
+    height: 32px;
-    text-align: center;
+    width: 32px;
-    border-bottom: 2px solid transparent;
-    height: 20px;
-    width: 20px;
     position: relative;
+    border-radius: 100%;
 
     &::before {
         content: '';
         position: absolute;
-        top: 0;
+        top: 6px; // center with parent of 32px
-        left: 0;
+        left: 6px; // center with parent of 32px
         height: 20px;
         width: 20px;
         background-color: $rightpanel-button-color;
@@ -66,37 +72,50 @@ limitations under the License.
 }
 
 .mx_RightPanel_membersButton::before {
-    mask-image: url('$(res)/img/feather-customised/user.svg');
+    mask-image: url('$(res)/img/element-icons/room/members.svg');
+    mask-position: center;
 }
 
 .mx_RightPanel_filesButton::before {
-    mask-image: url('$(res)/img/feather-customised/files.svg');
+    mask-image: url('$(res)/img/element-icons/room/files.svg');
+    mask-position: center;
 }
 
 .mx_RightPanel_notifsButton::before {
-    mask-image: url('$(res)/img/feather-customised/notifications.svg');
+    mask-image: url('$(res)/img/element-icons/notifications.svg');
+    mask-position: center;
 }
 
 .mx_RightPanel_groupMembersButton::before {
-    mask-image: url('$(res)/img/icons-people.svg');
+    mask-image: url('$(res)/img/element-icons/community-members.svg');
+    mask-position: center;
 }
 
 .mx_RightPanel_roomsButton::before {
-    mask-image: url('$(res)/img/icons-room-nobg.svg');
+    mask-image: url('$(res)/img/element-icons/community-rooms.svg');
+    mask-position: center;
 }
 
-.mx_RightPanel_headerButton_highlight::after {
+.mx_RightPanel_headerButton_highlight {
-    content: '';
+    background: rgba($accent-color, 0.25);
-    position: absolute;
+    // make the icon the accent color too
-    bottom: -6px;
+    &::before {
-    left: 0;
+        background-color: $accent-color;
-    right: 0;
+    }
-    height: 2px;
+}
-    background-color: $button-bg-color;
+
+.mx_RightPanel_headerButton:not(.mx_RightPanel_headerButton_highlight) {
+    &:hover {
+        background: rgba($accent-color, 0.1);
+
+        &::before {
+            background-color: $accent-color;
+        }
+    }
 }
 
 .mx_RightPanel_headerButton_badge {
-    font-size: 8px;
+    font-size: $font-8px;
     border-radius: 8px;
     color: $accent-fg-color;
     background-color: $accent-color;

res/css/structures/_RoomDirectory.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -45,9 +46,8 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_listheader {
-    display: flex;
+    display: block;
-    margin-top: 12px;
+    margin-top: 13px;
-    margin-bottom: 12px;
 }
 
 .mx_RoomDirectory_searchbox {
@@ -64,7 +64,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_table {
-    font-size: 14px;
+    font-size: $font-12px;
     color: $primary-fg-color;
     width: 100%;
     text-align: left;
@@ -112,6 +112,7 @@ limitations under the License.
 
 .mx_RoomDirectory_name {
     display: inline-block;
+    font-size: $font-18px;
     font-weight: 600;
 }
 
@@ -123,7 +124,7 @@ limitations under the License.
     border-radius: 10px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
     padding: 0 5px;
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
@@ -135,7 +136,7 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_alias {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $settings-grey-fg-color;
 }
 
@@ -148,8 +149,8 @@ limitations under the License.
     padding: 0;
 }
 
-.mx_RoomDirectory p {
+.mx_RoomDirectory > span {
-    font-size: 14px;
+    font-size: $font-15px;
     margin-top: 0;
 
     .mx_AccessibleButton {

res/css/structures/_RoomSearch.scss

@@ -0,0 +1,81 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// Note: this component expects to be contained within a flexbox
+.mx_RoomSearch {
+    flex: 1;
+    border-radius: 20px;
+    background-color: $roomlist2-button-bg-color;
+    height: 28px;
+    padding: 2px;
+
+    // Create a flexbox for the icons (easier to manage)
+    display: flex;
+    align-items: center;
+
+    .mx_RoomSearch_icon {
+        width: 16px;
+        height: 16px;
+        mask: url('$(res)/img/feather-customised/search-input.svg');
+        mask-repeat: no-repeat;
+        background: $primary-fg-color;
+        margin-left: 7px;
+    }
+
+    .mx_RoomSearch_input {
+        border: none !important; // !important to override default app-wide styles
+        flex: 1 !important; // !important to override default app-wide styles
+        color: $primary-fg-color !important; // !important to override default app-wide styles
+        padding: 0;
+        height: 100%;
+        width: 100%;
+        font-size: $font-12px;
+        line-height: $font-16px;
+
+        &:not(.mx_RoomSearch_inputExpanded)::placeholder {
+            color: $primary-fg-color !important; // !important to override default app-wide styles
+        }
+    }
+
+    &.mx_RoomSearch_expanded {
+        .mx_RoomSearch_clearButton {
+            width: 16px;
+            height: 16px;
+            mask-image: url('$(res)/img/feather-customised/x.svg');
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+            margin-right: 8px;
+        }
+    }
+
+    .mx_RoomSearch_clearButton {
+        width: 0;
+        height: 0;
+    }
+
+    &.mx_RoomSearch_minimized {
+        border-radius: 32px;
+        height: auto;
+        width: auto;
+        padding: 8px;
+
+        .mx_RoomSearch_icon {
+            margin-left: 0;
+        }
+    }
+}

res/css/structures/_RoomStatusBar.scss

@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_callBar {
     height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
@@ -94,7 +94,7 @@ limitations under the License.
     border-radius: 40px;
     width: 24px;
     height: 24px;
-    line-height: 24px;
+    line-height: $font-24px;
     font-size: 0.8em;
     vertical-align: top;
     text-align: center;
@@ -132,7 +132,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_connectionLostBar_desc {
     color: $primary-fg-color;
-    font-size: 13px;
+    font-size: $font-13px;
     opacity: 0.5;
     padding-bottom: 20px;
 }
@@ -145,7 +145,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingBar {
     height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -155,7 +155,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_isAlone {
     height: 50px;
-    line-height: 50px;
+    line-height: $font-50px;
 
     color: $primary-fg-color;
     opacity: 0.5;
@@ -174,11 +174,11 @@ limitations under the License.
 
     .mx_RoomStatusBar_callBar {
         height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
     }
 
     .mx_RoomStatusBar_typingBar {
         height: 40px;
-        line-height: 40px;
+        line-height: $font-40px;
     }
 }

res/css/structures/_RoomSubList.scss

@@ -68,15 +68,15 @@ limitations under the License.
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
+    font-size: $font-12px;
     margin-left: 8px;
 }
 
 .mx_RoomSubList_badge > div {
     flex: 0 0 auto;
-    border-radius: 8px;
+    border-radius: $font-16px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
     padding: 0 5px;
     color: $roomtile-badge-fg-color;
     background-color: $roomtile-name-color;
@@ -166,41 +166,22 @@ limitations under the License.
 
 // overflow indicators
 .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
-    &.mx_IndicatorScrollbar_topOverflow::before,
+    &.mx_IndicatorScrollbar_topOverflow::before {
-    &.mx_IndicatorScrollbar_bottomOverflow::after {
         position: sticky;
+        content: "";
+        top: 0;
         left: 0;
         right: 0;
         height: 8px;
-        content: "";
-        display: block;
         z-index: 100;
+        display: block;
         pointer-events: none;
-    }
-
-    &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
-        margin-top: -8px;
-    }
-    &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
-        margin-bottom: -8px;
-    }
-
-    &.mx_IndicatorScrollbar_topOverflow::before {
-        top: 0;
         transition: background-image 0.1s ease-in;
         background: linear-gradient(to top, $panel-gradient);
     }
 
-    /*
+
-    // for now, we remove the bottomOverflow entirely as we don't want to
+    &.mx_IndicatorScrollbar_topOverflow {
-    // lose the screen real-estate due to a bg-colored gradient, but we also
+        margin-top: -8px;
-    // don't want to use drop shadows and risk a confusing hierarchy of cards.
-    // so, instead, we hard-clip at the bottom but soft-clip at the top.
-    &.mx_IndicatorScrollbar_bottomOverflow::after {
-        bottom: 0;
-        transition: background-image 0.1s ease-in;
-        margin: 0px -8px;
-        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
     }
-    */
 }

res/css/structures/_RoomView.scss

@@ -23,7 +23,7 @@ limitations under the License.
 .mx_RoomView_fileDropTarget {
     min-width: 0px;
     width: 100%;
-    font-size: 18px;
+    font-size: $font-18px;
     text-align: center;
 
     pointer-events: none;
@@ -186,7 +186,7 @@ limitations under the License.
 
 .mx_RoomView_empty {
     flex: 1 1 auto;
-    font-size: 13px;
+    font-size: $font-13px;
     padding-left: 3em;
     padding-right: 3em;
     margin-right: 20px;
@@ -261,7 +261,7 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_voipButton {
     float: right;
     margin-right: 13px;
-    margin-top: 10px;
+    margin-top: 13px;
     cursor: pointer;
 }
 

res/css/structures/_TabbedView.scss

@@ -39,7 +39,7 @@ limitations under the License.
     cursor: pointer;
     display: block;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: $font-14px;
     min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
     margin-bottom: 6px;
     position: relative;

res/css/structures/_TagPanel.scss

@@ -23,6 +23,7 @@ limitations under the License.
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
+    min-height: 0;
 }
 
 .mx_TagPanel_items_selected {
@@ -32,7 +33,7 @@ limitations under the License.
 .mx_TagPanel .mx_TagPanel_clearButton_container {
     /* Constant height within flex mx_TagPanel */
     height: 70px;
-    width: 60px;
+    width: 56px;
 
     flex: none;
 
@@ -50,13 +51,14 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagPanel_divider {
     height: 0px;
-    width: 42px;
+    width: 34px;
     border-bottom: 1px solid $panel-divider-color;
     display: none;
 }
 
 .mx_TagPanel .mx_TagPanel_scroller {
     flex-grow: 1;
+    width: 100%;
 }
 
 .mx_TagPanel .mx_TagPanel_tagTileContainer {
@@ -64,15 +66,13 @@ limitations under the License.
     flex-direction: column;
     align-items: center;
 
-    height: 100%;
+    padding-top: 6px;
 }
 .mx_TagPanel .mx_TagPanel_tagTileContainer > div {
-    height: 40px;
+    margin: 6px 0;
-    padding: 10px 0 9px 0;
 }
 
 .mx_TagPanel .mx_TagTile {
-    margin: 9px 0;
     // opacity: 0.5;
     position: relative;
 }
@@ -84,8 +84,8 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile_plus {
     margin-bottom: 12px;
-    height: 40px;
+    height: 32px;
-    width: 40px;
+    width: 32px;
     border-radius: 20px;
     background-color: $roomheader-addroom-bg-color;
     position: relative;
@@ -108,13 +108,13 @@ limitations under the License.
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected::before {
     content: '';
-    height: 56px;
+    height: calc(100% + 16px);
     background-color: $accent-color;
     width: 5px;
     position: absolute;
     left: -15px;
     border-radius: 0 3px 3px 0;
-    top: -8px; // (56 - 40)/2
+    top: -8px; // (16px from height / 2)
 }
 
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
@@ -135,9 +135,9 @@ limitations under the License.
     top: -8px;
     border-radius: 8px;
     background-color: $neutral-badge-color;
-    color: #ffffff;
+    color: #000;
     font-weight: 600;
-    font-size: 10px;
+    font-size: $font-10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
@@ -155,7 +155,7 @@ limitations under the License.
     border-radius: 8px;
     color: $accent-fg-color;
     font-weight: 600;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 0 5px;
     background-color: $roomtile-name-color;
 }

res/css/structures/_ToastContainer.scss

@@ -28,8 +28,8 @@ limitations under the License.
         margin: 0 4px;
         grid-row: 2 / 4;
         grid-column: 1;
-        background-color: white;
+        background-color: $dark-panel-bg-color;
-        box-shadow: 0px 4px 12px $menu-box-shadow-color;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
     }
 
@@ -37,26 +37,28 @@ limitations under the License.
         grid-row: 1 / 3;
         grid-column: 1;
         color: $primary-fg-color;
-        background-color: $primary-bg-color;
+        background-color: $dark-panel-bg-color;
-        box-shadow: 0px 4px 12px $menu-box-shadow-color;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);
         border-radius: 8px;
         overflow: hidden;
         display: grid;
-        grid-template-columns: 20px 1fr;
+        grid-template-columns: 22px 1fr;
-        column-gap: 10px;
+        column-gap: 8px;
         row-gap: 4px;
         padding: 8px;
-        padding-right: 16px;
 
         &.mx_Toast_hasIcon {
-            &::after {
+            &::before, &::after {
                 content: "";
                 width: 22px;
                 height: 22px;
                 grid-column: 1;
                 grid-row: 1;
                 mask-size: 100%;
+                mask-position: center;
                 mask-repeat: no-repeat;
+                background-size: 100%;
+                background-repeat: no-repeat;
             }
 
             &.mx_Toast_icon_verification::after {
@@ -64,21 +66,63 @@ limitations under the License.
                 background-color: $primary-fg-color;
             }
 
-            &.mx_Toast_icon_verification_warning::after {
+            &.mx_Toast_icon_verification_warning {
-                background-image: url("$(res)/img/e2e/warning.svg");
+                // white infill for the hollow svg mask
+                &::before {
+                    background-color: #ffffff;
+                    mask-image: url('$(res)/img/e2e/normal.svg');
+                    mask-size: 90%;
+                }
+
+                &::after {
+                    mask-image: url("$(res)/img/e2e/warning.svg");
+                    background-color: $notice-primary-color;
+                }
             }
 
-            h2, .mx_Toast_body {
+            &.mx_Toast_icon_element_logo::after {
+                background-image: url("$(res)/img/element-logo.svg");
+            }
+
+            .mx_Toast_title, .mx_Toast_body {
                 grid-column: 2;
             }
         }
+        &:not(.mx_Toast_hasIcon) {
+            padding-left: 12px;
 
-        h2 {
+            .mx_Toast_title {
-            grid-column: 1 / 3;
+                grid-column: 1 / -1;
-            grid-row: 1;
+            }
-            margin: 0;
+        }
-            font-size: 15px;
+
-            font-weight: 600;
+        .mx_Toast_title,
+        .mx_Toast_description {
+            padding-right: 8px;
+        }
+
+        .mx_Toast_title {
+            width: 100%;
+            box-sizing: border-box;
+
+            h2 {
+                grid-column: 1 / 3;
+                grid-row: 1;
+                margin: 0;
+                font-size: $font-15px;
+                font-weight: 600;
+                display: inline;
+                width: auto;
+                vertical-align: middle;
+            }
+
+            span {
+                padding-left: 8px;
+                float: right;
+                font-size: $font-12px;
+                line-height: $font-22px;
+                color: $muted-fg-color;
+            }
         }
 
         .mx_Toast_body {
@@ -87,20 +131,34 @@ limitations under the License.
         }
 
         .mx_Toast_buttons {
+            float: right;
             display: flex;
+
+            .mx_FormButton {
+                min-width: 96px;
+                box-sizing: border-box;
+            }
         }
 
         .mx_Toast_description {
-            max-width: 400px;
+            max-width: 272px;
             overflow: hidden;
-            white-space: nowrap;
             text-overflow: ellipsis;
             margin: 4px 0 11px 0;
-            font-size: 12px;
+            font-size: $font-12px;
+
+            .mx_AccessibleButton_kind_link {
+                font-size: inherit;
+                padding: 0;
+            }
+
+            a {
+                text-decoration: none;
+            }
         }
 
         .mx_Toast_deviceID {
-            font-size: 10px;
+            font-size: $font-10px;
         }
     }
 }

res/css/structures/_TopLeftMenuButton.scss

@@ -32,7 +32,7 @@ limitations under the License.
 
 .mx_TopLeftMenuButton_name {
     margin: 0 7px;
-    font-size: 18px;
+    font-size: $font-18px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -43,7 +43,7 @@ limitations under the License.
     margin: 0 7px;
     mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
-    width: 10px;
+    width: $font-22px;
     height: 6px;
     background-color: $roomsublist-label-fg-color;
 }

res/css/structures/_UserMenu.scss

@@ -0,0 +1,201 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserMenu {
+
+    // to make the ... button sort of aligned with the explore button below
+    padding-right: 6px;
+
+    .mx_UserMenu_headerButtons {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+            mask-image: url('$(res)/img/element-icons/context-menu.svg');
+        }
+    }
+
+    .mx_UserMenu_row {
+        // Create a row-based flexbox to ensure items stay aligned correctly.
+        display: flex;
+        align-items: center;
+
+        .mx_UserMenu_userAvatarContainer {
+            position: relative; // to make default avatars work
+            margin-right: 8px;
+            height: 32px; // to remove the unknown 4px gap the browser puts below it
+
+            .mx_UserMenu_userAvatar {
+                border-radius: 32px; // should match avatar size
+                object-fit: cover;
+            }
+        }
+
+        .mx_UserMenu_userName {
+            font-weight: 600;
+            font-size: $font-15px;
+            line-height: $font-20px;
+            flex: 1;
+
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .mx_UserMenu_headerButtons {
+            // No special styles: the rest of the layout happens to make it work.
+        }
+    }
+
+    &.mx_UserMenu_minimized {
+        .mx_UserMenu_userHeader {
+            .mx_UserMenu_row {
+                justify-content: center;
+            }
+
+            .mx_UserMenu_userAvatarContainer {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+.mx_UserMenu_contextMenu {
+    width: 247px;
+
+    .mx_UserMenu_contextMenu_redRow {
+        .mx_AccessibleButton {
+            padding-top: 16px;
+            padding-bottom: 16px;
+            color: $warning-color !important; // !important to override styles from context menu
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $warning-color;
+        }
+    }
+
+    .mx_UserMenu_contextMenu_header {
+        padding: 20px;
+
+        // Create a flexbox to organize the header a bit easier
+        display: flex;
+        align-items: center;
+
+        .mx_UserMenu_contextMenu_name {
+            // Create another flexbox of columns to handle large user IDs
+            display: flex;
+            flex-direction: column;
+            width: calc(100% - 40px); // 40px = 32px theme button + 8px margin to theme button
+
+            * {
+                // Automatically grow all subelements to fit the container
+                flex: 1;
+                width: 100%;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .mx_UserMenu_contextMenu_displayName {
+                font-weight: bold;
+                font-size: $font-15px;
+                line-height: $font-20px;
+            }
+
+            .mx_UserMenu_contextMenu_userId {
+                font-size: $font-15px;
+                line-height: $font-24px;
+            }
+        }
+
+        .mx_UserMenu_contextMenu_themeButton {
+            min-width: 32px;
+            max-width: 32px;
+            width: 32px;
+            height: 32px;
+            margin-left: 8px;
+            border-radius: 32px;
+            background-color: $theme-button-bg-color;
+            cursor: pointer;
+
+            // to make alignment easier, create flexbox for the image
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    .mx_IconizedContextMenu_icon {
+        width: 16px;
+        height: 16px;
+        display: block;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: block;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_UserMenu_iconHome::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
+    }
+
+    .mx_UserMenu_iconBell::before {
+        mask-image: url('$(res)/img/element-icons/notifications.svg');
+    }
+
+    .mx_UserMenu_iconLock::before {
+        mask-image: url('$(res)/img/element-icons/security.svg');
+    }
+
+    .mx_UserMenu_iconSettings::before {
+        mask-image: url('$(res)/img/element-icons/settings.svg');
+    }
+
+    .mx_UserMenu_iconArchive::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/archived.svg');
+    }
+
+    .mx_UserMenu_iconMessage::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/feedback.svg');
+    }
+
+    .mx_UserMenu_iconSignOut::before {
+        mask-image: url('$(res)/img/element-icons/leave.svg');
+    }
+}

res/css/structures/_ViewSource.scss

@@ -29,7 +29,7 @@ limitations under the License.
 
 .mx_ViewSource pre {
     text-align: left;
-    font-size: 12px;
+    font-size: $font-12px;
     padding: 0.5em 1em 0.5em 1em;
     word-wrap: break-word;
     white-space: pre-wrap;

res/css/structures/auth/_CompleteSecurity.scss

@@ -26,6 +26,50 @@ 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;
@@ -34,12 +78,17 @@ limitations under the License.
 }
 
 .mx_CompleteSecurity_body {
-    font-size: 15px;
+    font-size: $font-15px;
+}
+
+.mx_CompleteSecurity_waiting {
+    color: $notice-secondary-color;
 }
 
 .mx_CompleteSecurity_actionRow {
     display: flex;
     justify-content: flex-end;
+    margin-top: $font-28px;
 
     .mx_AccessibleButton {
         margin-inline-start: 18px;

res/css/structures/auth/_Login.scss

@@ -89,3 +89,13 @@ limitations under the License.
 .mx_Login_underlinedServerName {
     border-bottom: 1px dashed $accent-color;
 }
+
+div.mx_AccessibleButton_kind_link.mx_Login_forgot {
+    // style it as a link
+    font-size: inherit;
+    padding: 0;
+
+    &.mx_AccessibleButton_disabled {
+        cursor: not-allowed;
+    }
+}

res/css/views/auth/_AuthBody.scss

@@ -17,7 +17,7 @@ limitations under the License.
 
 .mx_AuthBody {
     width: 500px;
-    font-size: 12px;
+    font-size: $font-12px;
     color: $authpage-secondary-color;
     background-color: $authpage-body-bg-color;
     border-radius: 0 4px 4px 0;
@@ -25,14 +25,14 @@ limitations under the License.
     box-sizing: border-box;
 
     h2 {
-        font-size: 24px;
+        font-size: $font-24px;
         font-weight: 600;
         margin-top: 8px;
         color: $authpage-primary-color;
     }
 
     h3 {
-        font-size: 14px;
+        font-size: $font-14px;
         font-weight: 600;
         color: $authpage-primary-color;
     }
@@ -98,7 +98,7 @@ limitations under the License.
 
 .mx_AuthBody_editServerDetails {
     padding-left: 1em;
-    font-size: 12px;
+    font-size: $font-12px;
     font-weight: normal;
 }
 
@@ -119,6 +119,29 @@ limitations under the License.
     margin-right: 0;
 }
 
+.mx_AuthBody_paddedFooter {
+    height: 80px; // height of the submit button + register link
+    padding-top: 28px;
+    text-align: center;
+
+    .mx_AuthBody_paddedFooter_title {
+        margin-top: 16px;
+        font-size: $font-15px;
+        line-height: $font-24px;
+
+        .mx_InlineSpinner img {
+            vertical-align: sub;
+            margin-right: 5px;
+        }
+    }
+
+    .mx_AuthBody_paddedFooter_subtitle {
+        margin-top: 8px;
+        font-size: $font-10px;
+        line-height: $font-14px;
+    }
+}
+
 .mx_AuthBody_changeFlow {
     display: block;
     text-align: center;
@@ -129,26 +152,11 @@ limitations under the License.
     margin: 1em 0;
 }
 
-.mx_AuthBody_passwordScore {
+@media only screen and (max-width: 480px) {
-    width: 100%;
+    .mx_AuthBody {
-    appearance: none;
+        border-radius: 4px;
-    height: 4px;
+        width: auto;
-    border: 0;
+        max-width: 500px;
-    border-radius: 2px;
+        padding: 10px;
-    position: absolute;
-    top: -12px;
-
-    &::-moz-progress-bar {
-        border-radius: 2px;
-        background-color: $accent-color;
-    }
-
-    &::-webkit-progress-bar,
-    &::-webkit-progress-value {
-        border-radius: 2px;
-    }
-
-    &::-webkit-progress-value {
-        background-color: $accent-color;
     }
 }

res/css/views/auth/_AuthButtons.scss

@@ -43,7 +43,7 @@ limitations under the License.
 
     cursor: pointer;
 
-    font-size: 15px;
+    font-size: $font-15px;
     padding: 0 11px;
     word-break: break-word;
 }

res/css/views/auth/_AuthFooter.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_AuthFooter {
     text-align: center;
     width: 100%;
-    font-size: 14px;
+    font-size: $font-14px;
     opacity: 0.72;
     padding: 20px 0;
     background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

res/css/views/auth/_AuthHeader.scss

@@ -21,3 +21,9 @@ limitations under the License.
     padding: 25px 40px;
     box-sizing: border-box;
 }
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthHeader {
+        display: none;
+    }
+}

res/css/views/auth/_AuthHeaderLogo.scss

@@ -23,3 +23,9 @@ limitations under the License.
 .mx_AuthHeaderLogo img {
     width: 100%;
 }
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthHeaderLogo {
+        display: none;
+    }
+}

res/css/views/auth/_AuthPage.scss

@@ -29,3 +29,9 @@ limitations under the License.
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
     background-color: $authpage-modal-bg-color;
 }
+
+@media only screen and (max-width: 480px) {
+    .mx_AuthPage_modal {
+        margin-top: 0;
+    }
+}

res/css/views/auth/_CompleteSecurityBody.scss

@@ -24,13 +24,13 @@ limitations under the License.
     box-sizing: border-box;
 
     h2 {
-        font-size: 24px;
+        font-size: $font-24px;
         font-weight: 600;
         margin-top: 0;
     }
 
     h3 {
-        font-size: 14px;
+        font-size: $font-14px;
         font-weight: 600;
     }
 

res/css/views/auth/_InteractiveAuthEntryComponents.scss

@@ -60,3 +60,14 @@ limitations under the License.
 .mx_InteractiveAuthEntryComponents_passwordSection {
     width: 300px;
 }
+
+.mx_InteractiveAuthEntryComponents_sso_buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    margin-top: 20px;
+
+    .mx_AccessibleButton {
+        margin-left: 5px;
+    }
+}

res/css/views/auth/_LanguageSelector.scss

@@ -20,7 +20,7 @@ limitations under the License.
 
 .mx_AuthBody_language .mx_Dropdown_input {
     border: none;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: 600;
     color: $authpage-lang-color;
 }

res/css/views/auth/_PassphraseField.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$PassphraseStrengthHigh: $accent-color;
+$PassphraseStrengthMedium: $username-variant5-color;
+$PassphraseStrengthLow: $notice-primary-color;
+
+progress.mx_PassphraseField_progress {
+    appearance: none;
+    width: 100%;
+    border: 0;
+    height: 4px;
+    position: absolute;
+    top: -12px;
+
+    @mixin ProgressBarBorderRadius "2px";
+    @mixin ProgressBarColour $PassphraseStrengthLow;
+    &[value="2"], &[value="3"] {
+        @mixin ProgressBarColour $PassphraseStrengthMedium;
+    }
+    &[value="4"] {
+        @mixin ProgressBarColour $PassphraseStrengthHigh;
+    }
+}

res/css/views/auth/_ServerTypeSelector.scss

@@ -65,5 +65,5 @@ limitations under the License.
 }
 
 .mx_ServerTypeSelector_description {
-    font-size: 10px;
+    font-size: $font-10px;
 }

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -0,0 +1,34 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
+.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
+    position: relative;
+
+    .mx_RoomTileIcon {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+
+    .mx_NotificationBadge, .mx_RoomTile2_badgeContainer {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 18px;
+        width: 18px;
+    }
+}

res/css/views/avatars/_MemberStatusMessageAvatar.scss

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_MessageComposer_avatar .mx_BaseAvatar {
     padding: 2px;
     border: 1px solid transparent;
-    border-radius: 15px;
+    border-radius: 100%;
 }
 
 .mx_MessageComposer_avatar .mx_BaseAvatar_initial {

res/css/views/avatars/_PulsedAvatar.scss

@@ -0,0 +1,30 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PulsedAvatar {
+    @keyframes shadow-pulse {
+        0% {
+            box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
+        }
+        100% {
+            box-shadow: 0 0 0 6px rgba($accent-color, 0);
+        }
+    }
+
+    img {
+        animation: shadow-pulse 1s infinite;
+    }
+}

res/css/views/context_menus/_MessageContextMenu.scss

@@ -19,6 +19,7 @@ limitations under the License.
 }
 
 .mx_MessageContextMenu_field {
+    display: block;
     padding: 3px 6px 3px 6px;
     cursor: pointer;
     white-space: nowrap;

res/css/views/context_menus/_RoomTileContextMenu.scss

@@ -38,7 +38,7 @@ limitations under the License.
     white-space: nowrap;
     display: flex;
     align-items: center;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
 .mx_RoomTileContextMenu_tag_field.mx_RoomTileContextMenu_tag_fieldSet {

res/css/views/context_menus/_StatusMessageContextMenu.scss

@@ -44,7 +44,7 @@ input.mx_StatusMessageContextMenu_message {
 .mx_StatusMessageContextMenu_clear {
     @mixin mx_DialogButton;
     align-self: start;
-    font-size: 12px;
+    font-size: $font-12px;
     padding: 6px 1em;
     border: 1px solid transparent;
     margin-right: 10px;

res/css/views/context_menus/_TagTileContextMenu.scss

@@ -15,25 +15,31 @@ limitations under the License.
 */
 
 .mx_TagTileContextMenu_item {
-    padding-top: 8px;
+    padding: 8px;
     padding-right: 20px;
-    padding-bottom: 8px;
     cursor: pointer;
     white-space: nowrap;
     display: flex;
     align-items: center;
-    line-height: 16px;
+    line-height: $font-16px;
 }
 
-.mx_TagTileContextMenu_item object {
+.mx_TagTileContextMenu_item::before {
-    pointer-events: none;
+    content: '';
+    height: 15px;
+    width: 15px;
+    background-color: currentColor;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    margin-right: 8px;
 }
 
+.mx_TagTileContextMenu_viewCommunity::before {
+    mask-image: url('$(res)/img/element-icons/view-community.svg');
+}
 
-.mx_TagTileContextMenu_item_icon {
+.mx_TagTileContextMenu_hideCommunity::before {
-    padding-right: 8px;
+    mask-image: url('$(res)/img/element-icons/hide.svg');
-    padding-left: 4px;
-    display: inline-block;
 }
 
 .mx_TagTileContextMenu_separator {

res/css/views/context_menus/_TopLeftMenu.scss

@@ -19,12 +19,12 @@ limitations under the License.
     border-radius: 4px;
 
     .mx_TopLeftMenu_greyedText {
-        font-size: 12px;
+        font-size: $font-12px;
         opacity: 0.5;
     }
 
     .mx_TopLeftMenu_upgradeLink {
-        font-size: 12px;
+        font-size: $font-12px;
 
         img {
             margin-left: 5px;
@@ -72,10 +72,10 @@ limitations under the License.
         .mx_AccessibleButton::after {
             mask-repeat: no-repeat;
             mask-position: 0 center;
-            mask-size: 16px;
+            mask-size: $font-16px;
             position: absolute;
-            width: 16px;
+            width: $font-16px;
-            height: 16px;
+            height: $font-16px;
             content: "";
             top: 5px;
             left: 14px;

res/css/views/dialogs/_AddressPickerDialog.scss

@@ -28,7 +28,7 @@ limitations under the License.
 .mx_AddressPickerDialog_input,
 .mx_AddressPickerDialog_input:focus {
     height: 26px;
-    font-size: 14px;
+    font-size: $font-14px;
     font-family: $font-family;
     padding-left: 12px;
     padding-right: 12px;
@@ -50,7 +50,7 @@ limitations under the License.
 .mx_AddressPickerDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 1px;

res/css/views/dialogs/_ConfirmUserActionDialog.scss

@@ -26,22 +26,22 @@ limitations under the License.
 }
 
 .mx_ConfirmUserActionDialog_name {
-    font-size: 18px;
+    font-size: $font-18px;
 }
 
 .mx_ConfirmUserActionDialog_userId {
-    font-size: 13px;
+    font-size: $font-13px;
 }
 
 .mx_ConfirmUserActionDialog_reasonField {
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
 
     border-radius: 3px;
     border: solid 1px $input-border-color;
-    line-height: 36px;
+    line-height: $font-36px;
     padding-left: 16px;
     padding-right: 16px;
     padding-top: 1px;

res/css/views/dialogs/_CreateGroupDialog.scss

@@ -25,7 +25,7 @@ limitations under the License.
 }
 
 .mx_CreateGroupDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
@@ -44,7 +44,7 @@ limitations under the License.
 .mx_CreateGroupDialog_prefix,
 .mx_CreateGroupDialog_suffix {
     padding: 0px 5px;
-    line-height: 37px;
+    line-height: $font-37px;
     background-color: $input-darker-bg-color;
     border: 1px solid $input-border-color;
     text-align: center;

res/css/views/dialogs/_CreateRoomDialog.scss

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_CreateRoomDialog_details {
+    margin-top: 15px;
+
     .mx_CreateRoomDialog_details_summary {
         outline: none;
         list-style: none;
@@ -49,7 +51,7 @@ limitations under the License.
 }
 
 .mx_CreateRoomDialog_input {
-    font-size: 15px;
+    font-size: $font-15px;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;
@@ -71,11 +73,19 @@ limitations under the License.
 }
 
 .mx_CreateRoomDialog {
-
     &.mx_Dialog_fixedWidth {
         width: 450px;
     }
 
+    .mx_Dialog_content {
+        margin-bottom: 40px;
+    }
+
+    p,
+    .mx_Field_input label {
+        color: $muted-fg-color;
+    }
+
     .mx_SettingsFlag {
         display: flex;
     }
@@ -90,5 +100,18 @@ limitations under the License.
         flex: 0 0 auto;
         margin-left: 30px;
     }
+
+    .mx_CreateRoomDialog_topic {
+        margin-bottom: 36px;
+    }
+
+    .mx_Dialog_content > .mx_SettingsFlag {
+        margin-top: 24px;
+    }
+
+    p {
+        margin: 0 85px 0 0;
+        font-size: $font-12px;
+    }
 }
 

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -68,11 +68,11 @@ limitations under the License.
     width: 240px;
     color: $input-fg-color;
     font-family: $font-family;
-    font-size: 16px;
+    font-size: $font-16px;
 }
 
 .mx_DevTools_textarea {
-    font-size: 12px;
+    font-size: $font-12px;
     max-width: 684px;
     min-height: 250px;
     padding: 10px;

res/css/views/dialogs/_GroupAddressPicker.scss

@@ -18,8 +18,3 @@ limitations under the License.
     margin-top: 10px;
     display: flex;
 }
-
-.mx_GroupAddressPicker_checkboxContainer input[type="checkbox"] {
-    /* Stop flex from shrinking the checkbox */
-    width: 20px;
-}

res/css/views/dialogs/_InviteDialog.scss

@@ -40,8 +40,8 @@ limitations under the License.
         textarea,
         textarea:focus {
             height: 34px;
-            line-height: 34px;
+            line-height: $font-34px;
-            font-size: 14px;
+            font-size: $font-14px;
             padding-left: 12px;
             margin: 0 !important;
             border: 0 !important;
@@ -65,7 +65,7 @@ limitations under the License.
         min-width: 48px;
         margin-left: 10px;
         height: 25px;
-        line-height: 25px;
+        line-height: $font-25px;
     }
 
     .mx_InviteDialog_buttonAndSpinner {
@@ -84,7 +84,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     h3 {
-        font-size: 12px;
+        font-size: $font-12px;
         color: $muted-fg-color;
         font-weight: bold;
         text-transform: uppercase;
@@ -143,23 +143,23 @@ limitations under the License.
 
     .mx_InviteDialog_roomTile_name {
         font-weight: 600;
-        font-size: 14px;
+        font-size: $font-14px;
         color: $primary-fg-color;
         margin-left: 7px;
     }
 
     .mx_InviteDialog_roomTile_userId {
-        font-size: 12px;
+        font-size: $font-12px;
         color: $muted-fg-color;
         margin-left: 7px;
     }
 
     .mx_InviteDialog_roomTile_time {
         text-align: right;
-        font-size: 12px;
+        font-size: $font-12px;
         color: $muted-fg-color;
         float: right;
-        line-height: 36px; // Height of the avatar to keep the time vertically aligned
+        line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
     }
 
     .mx_InviteDialog_roomTile_highlight {
@@ -176,7 +176,7 @@ limitations under the License.
         border-radius: 12px;
         display: inline-block;
         height: 24px;
-        line-height: 24px;
+        line-height: $font-24px;
         padding-left: 8px;
         padding-right: 8px;
         color: #ffffff; // this is fine without a var because it's for both themes

res/css/views/dialogs/_KeyboardShortcutsDialog.scss

@@ -0,0 +1,65 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_KeyboardShortcutsDialog {
+    display: flex;
+    flex-wrap: wrap;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    margin-bottom: -50px;
+    max-height: 1100px; // XXX: this may need adjusting when adding new shortcuts
+
+    .mx_KeyboardShortcutsDialog_category {
+        width: 33.3333%; // 3 columns
+        margin: 0 0 40px;
+
+        & > div {
+            padding-left: 5px;
+        }
+    }
+
+    h3 {
+        margin: 0 0 10px;
+    }
+
+    h5 {
+        margin: 15px 0 5px;
+        font-weight: normal;
+    }
+
+    kbd {
+        padding: 5px;
+        border-radius: 4px;
+        background-color: $reaction-row-button-bg-color;
+        margin-right: 5px;
+        min-width: 20px;
+        text-align: center;
+        display: inline-block;
+        border: 1px solid $kbd-border-color;
+        box-shadow: 0 2px $kbd-border-color;
+        margin-bottom: 4px;
+        text-transform: capitalize;
+
+        & + kbd {
+            margin-left: 5px;
+        }
+    }
+
+    .mx_KeyboardShortcutsDialog_inline div {
+        display: inline;
+    }
+}

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -35,7 +35,7 @@ limitations under the License.
 
 .mx_MessageEditHistoryDialog_edits {
     list-style-type: none;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 0;
     color: $primary-fg-color;
 
@@ -60,7 +60,7 @@ limitations under the License.
     }
 
     .mx_MessageActionBar .mx_AccessibleButton {
-        font-size: 10px;
+        font-size: $font-10px;
         padding: 0 8px;
     }
 }

res/css/views/dialogs/_NewSessionReviewDialog.scss

@@ -32,6 +32,6 @@ limitations under the License.
 }
 
 .mx_NewSessionReviewDialog_deviceID {
-    font-size: 12px;
+    font-size: $font-12px;
     color: $notice-secondary-color;
 }

res/css/views/dialogs/_RebrandDialog.scss

@@ -0,0 +1,63 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RebrandDialog {
+    text-align: center;
+
+    a:link,
+    a:hover,
+    a:visited {
+        @mixin mx_Dialog_link;
+    }
+
+    .mx_Dialog_buttons {
+        margin-top: 43px;
+        text-align: center;
+    }
+}
+
+.mx_RebrandDialog_body {
+    width: 550px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.mx_RebrandDialog_logoContainer {
+    margin-top: 35px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_RebrandDialog_logo {
+    margin-left: 28px;
+    margin-right: 28px;
+    width: 64px;
+    height: 64px;
+}
+
+.mx_RebrandDialog_chevron::after {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    mask-position: center;
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    background-color: $muted-fg-color;
+    mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
+}

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -18,15 +18,19 @@ limitations under the License.
 // ==========================================================
 
 .mx_RoomSettingsDialog_settingsIcon::before {
-    mask-image: url('$(res)/img/feather-customised/settings.svg');
+    mask-image: url('$(res)/img/element-icons/settings.svg');
 }
 
 .mx_RoomSettingsDialog_securityIcon::before {
-    mask-image: url('$(res)/img/feather-customised/lock.svg');
+    mask-image: url('$(res)/img/element-icons/security.svg');
 }
 
 .mx_RoomSettingsDialog_rolesIcon::before {
-    mask-image: url('$(res)/img/feather-customised/users-sm.svg');
+    mask-image: url('$(res)/img/element-icons/room/settings/roles.svg');
+}
+
+.mx_RoomSettingsDialog_notificationsIcon::before {
+    mask-image: url('$(res)/img/element-icons/notifications.svg');
 }
 
 .mx_RoomSettingsDialog_bridgesIcon::before {
@@ -35,7 +39,7 @@ limitations under the License.
 }
 
 .mx_RoomSettingsDialog_warningIcon::before {
-    mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+    mask-image: url('$(res)/img/element-icons/room/settings/advanced.svg');
 }
 
 .mx_RoomSettingsDialog .mx_Dialog_title {

res/css/views/dialogs/_SetEmailDialog.scss

@@ -20,7 +20,7 @@ limitations under the License.
     padding: 9px;
     color: $input-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
     width: 100%;
     max-width: 280px;
     margin-bottom: 10px;

res/css/views/dialogs/_SetMxIdDialog.scss

@@ -29,7 +29,7 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
     width: 100%;
     max-width: 280px;
 }

res/css/views/dialogs/_SetPasswordDialog.scss

@@ -20,7 +20,7 @@ limitations under the License.
     padding: 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
-    font-size: 15px;
+    font-size: $font-15px;
     max-width: 280px;
     margin-bottom: 10px;
 }

res/css/views/dialogs/_ShareDialog.scss

@@ -55,6 +55,7 @@ limitations under the License.
     margin-left: 5px;
     width: 20px;
     height: 20px;
+    background-repeat: none;
 }
 
 .mx_ShareDialog_split {
@@ -64,9 +65,6 @@ limitations under the License.
 
 .mx_ShareDialog_qrcode_container {
     float: left;
-    background-color: #ffffff;
-    padding: 5px; // makes qr code more readable in dark theme
-    border-radius: 5px;
     height: 256px;
     width: 256px;
     margin-right: 64px;

res/css/views/dialogs/_TermsDialog.scss

@@ -31,7 +31,7 @@ limitations under the License.
 }
 
 .mx_TermsDialog_termsTable {
-    font-size: 12px;
+    font-size: $font-12px;
     width: 100%;
 }
 

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -1,55 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
-.mx_Dialog_unknownDevice .mx_Dialog {
-    // ideally we'd shrink the height to fit when needed, but in practice this
-    // is a pain in the ass. plus might as well make the dialog big given how
-    // important it is.
-    height: 100%;
-}
-
-.mx_UnknownDeviceDialog {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_UnknownDeviceDialog ul {
-    list-style: none;
-    padding: 0;
-}
-// userid
-.mx_UnknownDeviceDialog p {
-    font-weight: bold;
-    font-size: 16px;
-}
-
-.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
-    flex-direction: row !important;
-}
-
-.mx_UnknownDeviceDialog .mx_Dialog_content {
-    margin-bottom: 24px;
-}
-
-.mx_UnknownDeviceDialog_deviceList > li {
-    padding: 4px;
-}
-
-.mx_UnknownDeviceDialog_deviceList > li > * {
-    padding-bottom: 0;
-}

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -18,37 +18,41 @@ limitations under the License.
 // ==========================================================
 
 .mx_UserSettingsDialog_settingsIcon::before {
-    mask-image: url('$(res)/img/feather-customised/settings.svg');
+    mask-image: url('$(res)/img/element-icons/settings.svg');
+}
+
+.mx_UserSettingsDialog_appearanceIcon::before {
+    mask-image: url('$(res)/img/element-icons/settings/appearance.svg');
 }
 
 .mx_UserSettingsDialog_voiceIcon::before {
-    mask-image: url('$(res)/img/feather-customised/phone.svg');
+    mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
 }
 
 .mx_UserSettingsDialog_bellIcon::before {
-    mask-image: url('$(res)/img/feather-customised/notifications.svg');
+    mask-image: url('$(res)/img/element-icons/notifications.svg');
 }
 
 .mx_UserSettingsDialog_preferencesIcon::before {
-    mask-image: url('$(res)/img/feather-customised/sliders.svg');
+    mask-image: url('$(res)/img/element-icons/settings/preference.svg');
 }
 
 .mx_UserSettingsDialog_securityIcon::before {
-    mask-image: url('$(res)/img/feather-customised/lock.svg');
+    mask-image: url('$(res)/img/element-icons/security.svg');
 }
 
 .mx_UserSettingsDialog_helpIcon::before {
-    mask-image: url('$(res)/img/feather-customised/help-circle.svg');
+    mask-image: url('$(res)/img/element-icons/settings/help.svg');
 }
 
 .mx_UserSettingsDialog_labsIcon::before {
-    mask-image: url('$(res)/img/feather-customised/flag.svg');
+    mask-image: url('$(res)/img/element-icons/settings/lab-flags.svg');
 }
 
 .mx_UserSettingsDialog_mjolnirIcon::before {
-    mask-image: url('$(res)/img/feather-customised/face.svg');
+    mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
 
 .mx_UserSettingsDialog_flairIcon::before {
-    mask-image: url('$(res)/img/feather-customised/flair.svg');
+    mask-image: url('$(res)/img/element-icons/settings/flair.svg');
 }

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -35,17 +35,6 @@ limitations under the License.
     align-items: flex-start;
 }
 
-.mx_CreateKeyBackupDialog_passPhraseHelp {
-    flex: 1;
-    height: 85px;
-    margin-left: 20px;
-    font-size: 80%;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseHelp progress {
-    width: 100%;
-}
-
 .mx_CreateKeyBackupDialog_passPhraseInput {
     flex: none;
     width: 250px;

res/css/views/dialogs/keybackup/_RestoreKeyBackupDialog.scss

@@ -32,3 +32,9 @@ limitations under the License.
     padding: 10px;
 }
 
+.mx_RestoreKeyBackupDialog_content > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}

res/css/views/dialogs/secretstorage/_AccessSecretStorageDialog.scss

@@ -15,20 +15,79 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_AccessSecretStorageDialog_titleWithIcon::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-fg-color;
+}
+
+.mx_AccessSecretStorageDialog_secureBackupTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
+.mx_AccessSecretStorageDialog_securePhraseTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
 .mx_AccessSecretStorageDialog_keyStatus {
     height: 30px;
 }
 
-.mx_AccessSecretStorageDialog_primaryContainer {
+.mx_AccessSecretStorageDialog_passPhraseInput {
-    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
-    padding: 20px;
-}
-
-.mx_AccessSecretStorageDialog_passPhraseInput,
-.mx_AccessSecretStorageDialog_recoveryKeyInput {
     width: 300px;
     border: 1px solid $accent-color;
     border-radius: 5px;
     padding: 10px;
 }
 
+.mx_AccessSecretStorageDialog_recoveryKeyEntry {
+    display: flex;
+    align-items: center;
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
+    flex-grow: 1;
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
+    margin: 16px;
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
+    &::before {
+        content: "";
+        display: inline-block;
+        vertical-align: bottom;
+        width: 20px;
+        height: 20px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 20px;
+        margin-right: 5px;
+    }
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid {
+    color: $input-valid-border-color;
+    &::before {
+        mask-image: url('$(res)/img/feather-customised/check.svg');
+        background-color: $input-valid-border-color;
+    }
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid {
+    color: $input-invalid-border-color;
+    &::before {
+        mask-image: url('$(res)/img/feather-customised/x.svg');
+        background-color: $input-invalid-border-color;
+    }
+}
+
+.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
+    display: none;
+}

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -48,6 +48,29 @@ limitations under the License.
     margin-bottom: 1em;
 }
 
+.mx_CreateSecretStorageDialog_titleWithIcon::before {
+    content: '';
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_secureBackupTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
+.mx_CreateSecretStorageDialog_securePhraseTitle::before {
+    mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
+    text-align: center;
+}
+
 .mx_CreateSecretStorageDialog_primaryContainer {
     /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
     padding-top: 20px;
@@ -59,6 +82,36 @@ limitations under the License.
     display: block;
 }
 
+.mx_CreateSecretStorageDialog_primaryContainer .mx_RadioButton {
+    margin-bottom: 16px;
+    padding: 11px;
+}
+
+.mx_CreateSecretStorageDialog_optionTitle {
+    color: $dialog-title-fg-color;
+    font-weight: 600;
+    font-size: $font-18px;
+    padding-bottom: 10px;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    position: relative;
+    top: 5px;
+    background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+    mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+    mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
 .mx_CreateSecretStorageDialog_passPhraseContainer {
     display: flex;
     align-items: flex-start;
@@ -68,49 +121,47 @@ limitations under the License.
     margin-top: 0px;
 }
 
-.mx_CreateSecretStorageDialog_passPhraseHelp {
-    flex: 1;
-    height: 64px;
-    margin-left: 20px;
-    font-size: 80%;
-}
-
-.mx_CreateSecretStorageDialog_passPhraseHelp progress {
-    width: 100%;
-}
-
 .mx_CreateSecretStorageDialog_passPhraseMatch {
     width: 200px;
     margin-left: 20px;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyHeader {
-    margin-bottom: 1em;
-}
-
 .mx_CreateSecretStorageDialog_recoveryKeyContainer {
-    display: flex;
+    width: 380px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKey {
-    width: 262px;
+    font-weight: bold;
+    text-align: center;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
-    margin-right: 12px;
+    border-radius: 6px;
+    word-spacing: 1em;
+    margin-bottom: 20px;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons {
-    flex: 1;
     display: flex;
+    justify-content: space-between;
     align-items: center;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
-    margin-right: 10px;
+    width: 160px;
-}
+    padding-left: 0px;
-
+    padding-right: 0px;
-.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
-    flex: 1;
     white-space: nowrap;
 }
+
+.mx_CreateSecretStorageDialog_continueSpinner {
+    margin-top: 33px;
+    text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+    width: 20px;
+    height: 20px;
+}

res/css/views/directory/_NetworkDropdown.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,70 +15,152 @@ limitations under the License.
 */
 
 .mx_NetworkDropdown {
+    height: 32px;
     position: relative;
-}
+    width: max-content;
+    padding-right: 32px;
+    margin-left: auto;
+    margin-right: 9px;
+    margin-top: 12px;
 
-.mx_NetworkDropdown_input {
+    .mx_AccessibleButton {
-    position: relative;
+        width: max-content;
-    border-radius: 3px;
+    }
-    border: 1px solid $strong-input-border-color;
-    font-weight: 300;
-    font-size: 13px;
-    user-select: none;
-}
-
-.mx_NetworkDropdown_arrow {
-    border-color: $primary-fg-color transparent transparent;
-    border-style: solid;
-    border-width: 5px 5px 0;
-    display: block;
-    height: 0;
-    position: absolute;
-    right: 10px;
-    top: 16px;
-    width: 0;
-}
-
-.mx_NetworkDropdown_networkoption {
-    height: 37px;
-    line-height: 37px;
-    padding-left: 8px;
-    padding-right: 8px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.mx_NetworkDropdown_networkoption img {
-    margin: 5px;
-    width: 25px;
-    vertical-align: middle;
-}
-
-input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus {
-    border: 0;
-    padding-top: 0;
-    padding-bottom: 0;
 }
 
 .mx_NetworkDropdown_menu {
-    position: absolute;
+    min-width: 204px;
-    left: -1px;
-    right: -1px;
-    top: 100%;
-    z-index: 2;
     margin: 0;
-    padding: 0px;
+    box-sizing: border-box;
-    border-radius: 3px;
+    border-radius: 4px;
-    border: 1px solid $accent-color;
+    border: 1px solid $dialog-close-fg-color;
     background-color: $primary-bg-color;
-}
+    max-height: calc(100vh - 20px); // allow 10px padding on both top and bottom
-
+    overflow-y: auto;
-.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
-    background-color: $focus-bg-color;
 }
 
 .mx_NetworkDropdown_menu_network {
     font-weight: bold;
 }
 
+.mx_NetworkDropdown_server {
+    padding: 12px 0;
+    border-bottom: 1px solid $input-darker-fg-color;
+
+    .mx_NetworkDropdown_server_title {
+        padding: 0 10px;
+        font-size: $font-15px;
+        font-weight: 600;
+        line-height: $font-20px;
+        margin-bottom: 4px;
+        position: relative;
+
+        // remove server button
+        .mx_AccessibleButton {
+            position: absolute;
+            display: inline;
+            right: 10px;
+            height: 16px;
+            width: 16px;
+            margin-top: 2px;
+
+            &::after {
+                content: "";
+                position: absolute;
+                width: 16px;
+                height: 16px;
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: contain;
+                mask-image: url('$(res)/img/feather-customised/x.svg');
+                background-color: $notice-primary-color;
+            }
+        }
+    }
+
+    .mx_NetworkDropdown_server_subtitle {
+        padding: 0 10px;
+        font-size: $font-10px;
+        line-height: $font-14px;
+        margin-top: -4px;
+        margin-bottom: 4px;
+        color: $muted-fg-color;
+    }
+
+    .mx_NetworkDropdown_server_network {
+        font-size: $font-12px;
+        line-height: $font-16px;
+        padding: 4px 10px;
+        cursor: pointer;
+        position: relative;
+
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &[aria-checked=true]::after {
+            content: "";
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            right: 10px;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: contain;
+            mask-image: url('$(res)/img/feather-customised/check.svg');
+            background-color: $input-valid-border-color;
+        }
+    }
+}
+
+.mx_NetworkDropdown_server_add,
+.mx_NetworkDropdown_server_network {
+    &:hover {
+        background-color: $header-panel-bg-color;
+    }
+}
+
+.mx_NetworkDropdown_server_add {
+    padding: 16px 10px 16px 32px;
+    position: relative;
+    border-radius: 0 0 4px 4px;
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        left: 7px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        mask-image: url('$(res)/img/feather-customised/plus.svg');
+        background-color: $muted-fg-color;
+    }
+}
+
+.mx_NetworkDropdown_handle {
+    position: relative;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        right: -28px; // - (24 + 4)
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        background-color: $primary-fg-color;
+    }
+
+    .mx_NetworkDropdown_handle_server {
+        color: $muted-fg-color;
+        font-size: $font-12px;
+    }
+}
+
+.mx_NetworkDropdown_dialog .mx_Dialog {
+    width: 45vw;
+}

res/css/views/elements/_AccessibleButton.scss

@@ -27,7 +27,7 @@ limitations under the License.
     text-align: center;
     border-radius: 4px;
     display: inline-block;
-    font-size: 14px;
+    font-size: $font-14px;
 }
 
 .mx_AccessibleButton_kind_primary {
@@ -36,12 +36,20 @@ limitations under the License.
     font-weight: 600;
 }
 
+.mx_AccessibleButton_kind_primary_outline {
+    color: $button-primary-bg-color;
+    background-color: $button-secondary-bg-color;
+    border: 1px solid $button-primary-bg-color;
+    font-weight: 600;
+}
+
 .mx_AccessibleButton_kind_secondary {
     color: $accent-color;
     font-weight: 600;
 }
 
-.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
+.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
     opacity: 0.4;
 }
 
@@ -60,7 +68,14 @@ limitations under the License.
     background-color: $button-danger-bg-color;
 }
 
-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_danger_outline {
+    color: $button-danger-bg-color;
+    background-color: $button-secondary-bg-color;
+    border: 1px solid $button-danger-bg-color;
+}
+
+.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;
 }

res/css/views/elements/_AddressSelector.scss

@@ -23,6 +23,7 @@ limitations under the License.
     border-radius: 3px;
     border: solid 1px $accent-color;
     cursor: pointer;
+    z-index: 1;
 }
 
 .mx_AddressSelector.mx_AddressSelector_empty {

res/css/views/elements/_AddressTile.scss

@@ -19,9 +19,9 @@ limitations under the License.
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
     border: solid 1px $input-border-color;
-    line-height: 26px;
+    line-height: $font-26px;
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: normal;
     margin-right: 4px;
 }

res/css/views/elements/_DirectorySearchBox.scss

@@ -18,7 +18,6 @@ limitations under the License.
     display: flex;
     padding-left: 9px;
     padding-right: 9px;
-    margin: 0 5px 0 0 !important;
 }
 
 .mx_DirectorySearchBox_joinButton {
@@ -33,7 +32,7 @@ limitations under the License.
     background-repeat: no-repeat;
     text-indent: 18px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
     user-select: none;
     cursor: pointer;
 }

res/css/views/elements/_Dropdown.scss

@@ -29,10 +29,14 @@ limitations under the License.
     position: relative;
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
-    font-size: 12px;
+    font-size: $font-12px;
     user-select: none;
 }
 
+.mx_Dropdown_input.mx_AccessibleButton_disabled {
+    cursor: not-allowed;
+}
+
 .mx_Dropdown_input:focus {
     border-color: $input-focused-border-color;
 }
@@ -53,7 +57,7 @@ limitations under the License.
 
 .mx_Dropdown_option {
     height: 35px;
-    line-height: 35px;
+    line-height: $font-35px;
     padding-left: 8px;
     padding-right: 8px;
 }
@@ -63,6 +67,8 @@ limitations under the License.
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
+    display: inline-flex;
+    align-items: center;
 }
 
 .mx_Dropdown_option div {
@@ -71,12 +77,18 @@ limitations under the License.
     white-space: nowrap;
 }
 
-.mx_Dropdown_option img {
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
     margin: 5px;
     width: 16px;
     vertical-align: middle;
 }
 
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
 input.mx_Dropdown_option,
 input.mx_Dropdown_option:focus {
     font-weight: normal;

res/css/views/elements/_EditableItemList.scss

@@ -20,14 +20,21 @@ limitations under the License.
 }
 
 .mx_EditableItem {
+    display: flex;
     margin-bottom: 5px;
-    margin-left: 15px;
 }
 
 .mx_EditableItem_delete {
+    order: 3;
     margin-right: 5px;
     cursor: pointer;
     vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    mask-image: url('$(res)/img/feather-customised/cancel.svg');
+    mask-repeat: no-repeat;
+    background-color: $warning-color;
+    mask-size: 100%;
 }
 
 .mx_EditableItem_email {
@@ -36,12 +43,22 @@ limitations under the License.
 
 .mx_EditableItem_promptText {
     margin-right: 10px;
+    order: 2;
 }
 
 .mx_EditableItem_confirmBtn {
     margin-right: 5px;
 }
 
+.mx_EditableItem_item {
+    flex: auto 1 0;
+    order: 1;
+    width: calc(100% - 14px); // leave space for the remove button
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
 .mx_EditableItemList_label {
     margin-bottom: 5px;
 }
+

res/css/views/elements/_EventListSummary.scss

@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_TextualEvent.mx_EventListSummary_summary {
-    font-size: 14px;
+    font-size: $font-14px;
     display: inline-flex;
 }
 
@@ -27,7 +27,7 @@ limitations under the License.
     display: inline-block;
     margin-right: 8px;
     padding-top: 8px;
-    line-height: 12px;
+    line-height: $font-12px;
 }
 
 .mx_EventListSummary_avatars .mx_BaseAvatar {
@@ -46,19 +46,19 @@ limitations under the License.
 .mx_EventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
-    line-height: 30px;
+    line-height: $font-30px;
 }
 
 .mx_MatrixChat_useCompactLayout {
     .mx_EventListSummary {
-        font-size: 13px;
+        font-size: $font-13px;
         .mx_EventTile_line {
-            line-height: 20px;
+            line-height: $font-20px;
         }
     }
 
     .mx_EventListSummary_line {
-        line-height: 22px;
+        line-height: $font-22px;
     }
 
     .mx_EventListSummary_toggle {
@@ -66,6 +66,6 @@ limitations under the License.
     }
 
     .mx_TextualEvent.mx_EventListSummary_summary {
-        font-size: 13px;
+        font-size: $font-13px;
     }
 }

res/css/views/elements/_Field.scss

@@ -40,7 +40,7 @@ limitations under the License.
 .mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     border: none;
     // Even without a border here, we still need this avoid overlapping the rounded
     // corners on the field above.
@@ -102,7 +102,7 @@ limitations under the License.
         background-color 0.25s ease-out 0.1s;
     color: $primary-fg-color;
     background-color: transparent;
-    font-size: 14px;
+    font-size: $font-14px;
     position: absolute;
     left: 0px;
     top: 0px;
@@ -126,7 +126,7 @@ limitations under the License.
         color 0.25s ease-out 0s,
         top 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
-    font-size: 10px;
+    font-size: $font-10px;
     top: -13px;
     padding: 0 2px;
     background-color: $field-focused-label-bg-color;

res/css/views/elements/_FormButton.scss

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 .mx_FormButton {
-    line-height: 16px;
+    line-height: $font-16px;
     padding: 5px 15px;
-    font-size: 12px;
+    font-size: $font-12px;
     height: min-content;
 
     &:not(:last-child) {

res/css/views/elements/_ImageView.scss

@@ -102,13 +102,13 @@ limitations under the License.
 }
 
 .mx_ImageView_name {
-    font-size: 18px;
+    font-size: $font-18px;
     margin-bottom: 6px;
     word-wrap: break-word;
 }
 
 .mx_ImageView_metadata {
-    font-size: 15px;
+    font-size: $font-15px;
     opacity: 0.5;
 }
 
@@ -118,13 +118,13 @@ limitations under the License.
     margin-bottom: 6px;
     border-radius: 5px;
     background-color: $lightbox-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 9px;
     border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
-    font-size: 11px;
+    font-size: $font-11px;
 }
 
 .mx_ImageView_link {
@@ -133,7 +133,7 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    font-size: 15px;
+    font-size: $font-15px;
     opacity: 0.5;
     margin-top: 18px;
     cursor: pointer;

res/css/views/elements/_InlineSpinner.scss

@@ -18,7 +18,7 @@ limitations under the License.
     display: inline;
 }
 
-.mx_InlineSpinner img {
+.mx_InlineSpinner_spin img {
     margin: 0px 6px;
     vertical-align: -3px;
 }

res/css/views/elements/_InteractiveTooltip.scss

@@ -24,7 +24,7 @@ limitations under the License.
     background-color: $interactive-tooltip-bg-color;
     color: $interactive-tooltip-fg-color;
     position: absolute;
-    font-size: 10px;
+    font-size: $font-10px;
     font-weight: 600;
     padding: 6px;
     z-index: 5001;

res/css/views/elements/_ProgressBar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ProgressBar {
+progress.mx_ProgressBar {
-    height: 5px;
+    height: 4px;
-    border: 1px solid $progressbar-color;
+    width: 60px;
-}
+    border-radius: 10px;
+    overflow: hidden;
+    appearance: none;
+    border: 0;
 
-.mx_ProgressBar_fill {
+    @mixin ProgressBarBorderRadius "10px";
-    height: 100%;
+    @mixin ProgressBarColour $accent-color;
-    background-color: $progressbar-color;
+    ::-webkit-progress-value {
+        transition: width 1s;
+    }
+    ::-moz-progress-bar {
+        transition: padding-bottom 1s;
+        padding-bottom: var(--value);
+        transform-origin: 0 0;
+        transform: rotate(-90deg) translateX(-15px);
+        padding-left: 15px;
+
+        height: 0;
+    }
 }

res/css/views/elements/_QRCode.scss

@@ -0,0 +1,21 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_QRCode {
+    img {
+        border-radius: 8px;
+    }
+}

res/css/views/elements/_RichText.scss

@@ -6,11 +6,33 @@
 .mx_RoomPill,
 .mx_GroupPill,
 .mx_AtRoomPill {
-    border-radius: 16px;
+    display: inline-flex;
-    display: inline-block;
+    align-items: center;
-    height: 20px;
+    vertical-align: middle;
-    line-height: 20px;
+    border-radius: $font-16px;
-    padding-left: 5px;
+    line-height: $font-15px;
+    padding-left: 0;
+}
+
+a.mx_Pill {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: calc(100% - 1ch);
+}
+
+.mx_Pill {
+    padding: $font-1px;
+    padding-right: 0.4em;
+    vertical-align: text-top;
+    line-height: $font-17px;
+}
+
+/* More specific to override `.markdown-body a` color */
+.mx_EventTile_content .markdown-body a.mx_GroupPill,
+.mx_GroupPill {
+    color: $accent-fg-color;
+    background-color: $rte-group-pill-color;
 }
 
 /* More specific to override `.markdown-body a` text-decoration */
@@ -23,7 +45,6 @@
 .mx_UserPill {
     color: $primary-fg-color;
     background-color: $other-user-pill-bg-color;
-    padding-right: 5px;
 }
 
 .mx_UserPill_selected {
@@ -37,7 +58,6 @@
 .mx_MessageComposer_input .mx_AtRoomPill {
     color: $accent-fg-color;
     background-color: $mention-user-pill-bg-color;
-    padding-right: 5px;
 }
 
 /* More specific to override `.markdown-body a` color */
@@ -47,15 +67,6 @@
 .mx_GroupPill {
     color: $accent-fg-color;
     background-color: $rte-room-pill-color;
-    padding-right: 5px;
-}
-
-/* More specific to override `.markdown-body a` color */
-.mx_EventTile_content .markdown-body a.mx_GroupPill,
-.mx_GroupPill {
-    color: $accent-fg-color;
-    background-color: $rte-group-pill-color;
-    padding-right: 5px;
 }
 
 .mx_EventTile_body .mx_UserPill,
@@ -69,8 +80,10 @@
 .mx_GroupPill .mx_BaseAvatar,
 .mx_AtRoomPill .mx_BaseAvatar {
     position: relative;
-    left: -3px;
+    display: inline-flex;
-    top: 2px;
+    align-items: center;
+    border-radius: 10rem;
+    margin-right: 0.24rem;
 }
 
 .mx_Markdown_BOLD {

res/css/views/elements/_Slider.scss

@@ -0,0 +1,99 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Slider {
+    position: relative;
+    margin: 0px;
+    flex-grow: 1;
+}
+
+.mx_Slider_dotContainer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.mx_Slider_bar {
+    display: flex;
+    box-sizing: border-box;
+    position: absolute;
+    height: 1em;
+    width: 100%;
+    padding: 0 0.5em; // half the width of a dot.
+    align-items: center;
+}
+
+.mx_Slider_bar > hr {
+    width: 100%;
+    height: 0.4em;
+    background-color: $slider-background-color;
+    border: 0;
+}
+
+.mx_Slider_selection {
+    display: flex;
+    align-items: center;
+    width: calc(100% - 1em); // 2 * half the width of a dot
+    height: 1em;
+    position: absolute;
+    pointer-events: none;
+}
+
+.mx_Slider_selectionDot {
+    position: absolute;
+    width: 1.1em;
+    height: 1.1em;
+    background-color: $slider-selection-color;
+    border-radius: 50%;
+    box-shadow: 0 0 6px lightgrey;
+    z-index: 10;
+}
+
+.mx_Slider_selection > hr {
+    margin: 0;
+    border: 0.2em solid $slider-selection-color;
+}
+
+.mx_Slider_dot {
+    height: 1em;
+    width: 1em;
+    border-radius: 50%;
+    background-color: $slider-background-color;
+    z-index: 0;
+}
+
+.mx_Slider_dotActive {
+    background-color: $slider-selection-color;
+}
+
+.mx_Slider_dotValue {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: $slider-background-color;
+}
+
+// The following is a hack to center the labels without adding
+// any width to the slider's dots.
+.mx_Slider_labelContainer {
+    width: 1em;
+}
+
+.mx_Slider_label {
+    position: relative;
+    width: fit-content;
+    left: -50%;
+}

res/css/views/elements/_StyledCheckbox.scss

@@ -0,0 +1,84 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+
+.mx_Checkbox {
+    $size: $font-16px;
+    $border-size: $font-1-5px;
+    $border-radius: $font-4px;
+
+    display: flex;
+    align-items: flex-start;
+
+    input[type=checkbox] {
+        appearance: none;
+        margin: 0;
+        padding: 0;
+
+        & + label {
+            display: flex;
+            align-items: center;
+
+            flex-grow: 1;
+        }
+
+        & + label > .mx_Checkbox_background {
+            display: inline-flex;
+            position: relative;
+
+            flex-shrink: 0;
+
+            height: $size;
+            width: $size;
+            size: 0.5rem;
+
+            border: $border-size solid rgba($muted-fg-color, 0.5);
+            box-sizing: border-box;
+            border-radius: $border-radius;
+
+            img {
+                display: none;
+
+                height: 100%;
+                width: 100%;
+                filter: invert(100%);
+            }
+        }
+
+        &:checked + label > .mx_Checkbox_background {
+            background: $accent-color;
+            border-color: $accent-color;
+
+            img {
+                display: block;
+            }
+        }
+
+        & + label > *:not(.mx_Checkbox_background) {
+            margin-left: 10px;
+        }
+
+        &:disabled + label {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        &:checked:disabled + label > .mx_Checkbox_background {
+            background-color: $accent-color;
+            border-color: $accent-color;
+        }
+    }
+}