Merge remote-tracking branch 'origin/develop' into t3chguy/clear_notifications

.babelrc

@@ -13,7 +13,6 @@
         ],
         "transform-class-properties",
         "transform-object-rest-spread",
-        "transform-async-to-bluebird",
         "transform-runtime",
         "add-module-exports",
         "syntax-dynamic-import"

.buildkite/pipeline.yaml

@@ -1,7 +1,12 @@
 steps:
   - label: ":eslint: Lint"
     command:
-      - "yarn install"
+      # TODO: Remove hacky chmod for BuildKite
+      - "echo '--- Setup'"
+      - "chmod +x ./scripts/ci/*.sh"
+      - "chmod +x ./scripts/*"
+      - "echo '--- Install js-sdk'"
+      - "./scripts/ci/install-deps.sh"
       - "yarn lintwithexclusions"
       - "yarn stylelint"
     plugins:
@@ -10,9 +15,9 @@ steps:
 
   - label: ":chains: End-to-End Tests"
     agents:
-      # We use a medium sized instance instead of the normal small ones because
+      # We use a xlarge sized instance instead of the normal small ones because
       # e2e tests otherwise take +-8min
-      queue: "medium"
+      queue: "xlarge"
     command:
       # TODO: Remove hacky chmod for BuildKite
       - "echo '--- Setup'"
@@ -80,6 +85,16 @@ steps:
           image: "node:10"
           propagate-environment: true
 
+  - label: "🌐 i18n"
+    command:
+      - "echo '--- Fetching Dependencies'"
+      - "yarn install"
+      - "echo '+++ Testing i18n output'"
+      - "yarn diff-i18n"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:10"
+
   - wait
 
   - label: "🐴 Trigger riot-web"

.eslintignore.errorfiles

@@ -1,10 +1,6 @@
 # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
 
 src/component-index.js
-src/components/structures/BottomLeftMenu.js
-src/components/structures/CreateRoom.js
-src/components/structures/MessagePanel.js
-src/components/structures/NotificationPanel.js
 src/components/structures/RoomDirectory.js
 src/components/structures/RoomStatusBar.js
 src/components/structures/RoomView.js
@@ -19,58 +15,39 @@ 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/ImageView.js
 src/components/views/elements/MemberEventListSummary.js
-src/components/views/elements/TintableSvg.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/RoomAvatarEvent.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/EntityTile.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/MessageComposer.js
-src/components/views/rooms/PinnedEventTile.js
 src/components/views/rooms/RoomList.js
 src/components/views/rooms/RoomPreviewBar.js
-src/components/views/rooms/SearchableEntityList.js
 src/components/views/rooms/SearchBar.js
 src/components/views/rooms/SearchResultTile.js
-src/components/views/rooms/TopUnreadMessagesBar.js
+src/components/views/rooms/SlateMessageComposer.js
-src/components/views/rooms/UserTile.js
 src/components/views/settings/ChangeAvatar.js
 src/components/views/settings/ChangePassword.js
 src/components/views/settings/DevicesPanel.js
-src/components/views/settings/IntegrationsManager.js
 src/components/views/settings/Notifications.js
-src/GroupAddressPicker.js
 src/HtmlUtils.js
 src/ImageUtils.js
-src/languageHandler.js
-src/linkify-matrix.js
 src/Markdown.js
-src/MatrixClientPeg.js
 src/notifications/ContentRules.js
 src/notifications/PushRuleVectorState.js
-src/notifications/VectorPushRulesDefinitions.js
-src/Notifier.js
 src/PlatformPeg.js
-src/Presence.js
 src/rageshake/rageshake.js
 src/rageshake/submit-rageshake.js
 src/ratelimitedfunc.js
-src/Roles.js
 src/Rooms.js
-src/ScalarAuthClient.js
-src/UiEffects.js
 src/Unread.js
 src/utils/DecryptFile.js
 src/utils/DirectoryUtils.js
@@ -78,16 +55,10 @@ src/utils/DMRoomMap.js
 src/utils/FormattingUtils.js
 src/utils/MultiInviter.js
 src/utils/Receipt.js
-src/VectorConferenceHandler.js
 src/Velociraptor.js
-src/WhoIsTyping.js
-src/wrappers/withMatrixClient.js
 test/components/structures/MessagePanel-test.js
-test/components/structures/ScrollPanel-test.js
-test/components/structures/TimelinePanel-test.js
 test/components/views/dialogs/InteractiveAuthDialog-test.js
 test/components/views/rooms/MessageComposerInput-test.js
-test/components/views/rooms/RoomSettings-test.js
 test/mock-clock.js
 test/notifications/ContentRules-test.js
 test/notifications/PushRuleVectorState-test.js

.eslintrc.js

@@ -12,6 +12,7 @@ module.exports = {
     extends: [matrixJsSdkPath + "/.eslintrc.js"],
     plugins: [
       "react",
+      "react-hooks",
       "flowtype",
       "babel"
     ],
@@ -104,6 +105,9 @@ module.exports = {
 
         // crashes currently: https://github.com/eslint/eslint/issues/6274
         "generator-star-spacing": "off",
+
+        "react-hooks/rules-of-hooks": "error",
+        "react-hooks/exhaustive-deps": "warn",
     },
     settings: {
         flowtype: {

.github/FUNDING.yml

@@ -0,0 +1,2 @@
+patreon: matrixdotorg
+liberapay: matrixdotorg

.stylelintrc.js

@@ -1,5 +1,8 @@
 module.exports = {
     "extends": "stylelint-config-standard",
+    "plugins": [
+        "stylelint-scss",
+    ],
     "rules": {
         "indentation": 4,
         "comment-empty-line-before": null,
@@ -11,5 +14,11 @@ module.exports = {
         "number-no-trailing-zeros": null,
         "number-leading-zero": null,
         "selector-list-comma-newline-after": null,
+        "at-rule-no-unknown": null,
+        "no-descending-specificity": null,
+        "scss/at-rule-no-unknown": [true, {
+            // https://github.com/vector-im/riot-web/issues/10544
+            "ignoreAtRules": ["define-mixin"],
+        }],
     }
 }

README.md

@@ -168,3 +168,8 @@ Ensure you've followed the above development instructions and then:
 ```bash
 yarn test
 ```
+
+## End-to-End tests
+
+Make sure you've got your Riot development server running (by doing `yarn start` in riot-web), and then in this project, run `yarn run e2etests`.
+See `test/end-to-end-tests/README.md` for more information.

code_style.md

@@ -22,7 +22,7 @@ number throgh from the original code to the final application.
 General Style
 -------------
 - 4 spaces to indent, for consistency with Matrix Python.
-- 120 columns per line, but try to keep JavaScript code around the 80 column mark.
+- 120 columns per line, but try to keep JavaScript code around the 90 column mark.
   Inline JSX in particular can be nicer with more columns per line.
 - No trailing whitespace at end of lines.
 - Don't indent empty lines.
@@ -34,7 +34,7 @@ General Style
 - UpperCamelCase for class and type names
 - lowerCamelCase for functions and variables.
 - Single line ternary operators are fine.
-- UPPER_CAMEL_CASE for constants
+- UPPER_SNAKE_CASE for constants
 - Single quotes for strings by default, for consistency with most JavaScript styles:
 
   ```javascript

docs/ciderEditor.md

@@ -0,0 +1,71 @@
+# The CIDER (Contenteditable-Input-Diff-Error-Reconcile) editor
+
+The CIDER editor is a custom editor written for Riot.
+Most of the code can be found in the `/editor/` directory of the `matrix-react-sdk` project.
+It is used to power the composer main composer (both to send and edit messages), and might be used for other usecases where autocomplete is desired (invite box, ...).
+
+## High-level overview.
+
+The editor is backed by a model that contains parts.
+A part has some text and a type (plain text, pill, ...). When typing in the editor,
+the model validates the input and updates the parts.
+The parts are then reconciled with the DOM.
+
+## Inner workings
+
+When typing in the `contenteditable` element, the `input` event fires and
+the DOM of the editor is turned into a string. The way this is done has
+some logic to it to deal with adding newlines for block elements, to make sure
+the caret offset is calculated in the same way as the content string, and to ignore
+caret nodes (more on that later).
+For these reasons it doesn't use `innerText`, `textContent` or anything similar.
+The model addresses any content in the editor within as an offset within this string.
+The caret position is thus also converted from a position in the DOM tree
+to an offset in the content string. This happens in `getCaretOffsetAndText` in `dom.js`.
+
+Once the content string and caret offset is calculated, it is passed to the `update()`
+method of the model. The model first calculates the same content string of its current parts,
+basically just concatenating their text. It then looks for differences between
+the current and the new content string. The diffing algorithm is very basic,
+and assumes there is only one change around the caret offset,
+so this should be very inexpensive. See `diff.js` for details.
+
+The result of the diffing is the strings that were added and/or removed from
+the current content. These differences are then applied to the parts,
+where parts can apply validation logic to these changes.
+
+For example, if you type an @ in some plain text, the plain text part rejects
+that character, and this character is then presented to the part creator,
+which will turn it into a pill candidate part.
+Pill candidate parts are what opens the auto completion, and upon picking a completion,
+replace themselves with an actual pill which can't be edited anymore.
+
+The diffing is needed to preserve state in the parts apart from their text
+(which is the only thing the model receives from the DOM), e.g. to build
+the model incrementally. Any text that didn't change is assumed
+to leave the parts it intersects alone.
+
+The benefit of this is that we can use the `input` event, which is broadly supported,
+to find changes in the editor. We don't have to rely on keyboard events,
+which relate poorly to text input or changes, and don't need the `beforeinput` event,
+which isn't broadly supported yet.
+
+Once the parts of the model are updated, the DOM of the editor is then reconciled
+with the new model state, see `renderModel` in `render.js` for this.
+If the model didn't reject the input and didn't make any additional changes,
+this won't make any changes to the DOM at all, and should thus be fairly efficient.
+
+For the browser to allow the user to place the caret between two pills,
+or between a pill and the start and end of the line, we need some extra DOM nodes.
+These DOM nodes are called caret nodes, and contain an invisble character, so
+the caret can be placed into them. The model is unaware of caret nodes, and they
+are only added to the DOM during the render phase. Likewise, when calculating
+the content string, caret nodes need to be ignored, as they would confuse the model.
+
+As part of the reconciliation, the caret position is also adjusted to any changes
+the model made to the input. The caret is passed around in two formats.
+The model receives the caret *offset* within the content string (which includes
+an atNodeEnd flag to make it unambiguous if it is at a part and or the next part start).
+The model converts this to a caret *position* internally, which has a partIndex
+and an offset within the part text, which is more natural to work with.
+From there on, the caret *position* is used, also during reconciliation.

docs/features/README.md

@@ -0,0 +1,6 @@
+# Feature documention
+
+The idea of this folder is to document the features we support in different parts of the app.
+In case anyone needs to work on a given part, and isn't aware of all the features in the area,
+they will hopefully get an idea for all the supported functionality to know what to take into account
+when making changes.

docs/features/composer.md

@@ -0,0 +1,37 @@
+# Composer Features
+## Auto Complete
+
+ - Hitting tab tries to auto-complete the word before the caret as a room member
+    - If no matching name is found, a visual bell is shown
+ - @ + a letter opens auto complete for members starting with the given letter
+    - When inserting a user pill at the start in the composer, a colon and space is appended to the pill
+    - When inserting a user pill anywhere else in composer, only a space is appended to the pill
+ - # + a letter opens auto complete for rooms starting with the given letter
+ - : open auto complete for emoji
+ - Pressing arrow-up/arrow-down while the autocomplete is open navigates between auto complete options
+ - Pressing tab while the autocomplete is open goes to the next autocomplete option,
+    wrapping around at the end after reverting to the typed text first.
+
+## Formatting
+
+ - When selecting text, a formatting bar appears above the selection.
+ - The formatting bar allows to format the selected test as:
+    bold, italic, strikethrough, a block quote, and a code block (inline if no linebreak is selected).
+ - Formatting is applied as markdown syntax.
+ - Hitting ctrl/cmd+B also marks the selected text as bold
+ - Hitting ctrl/cmd+I also marks the selected text as italic
+ - Hitting ctrl/cmd+> also marks the selected text as a blockquote
+
+## Misc
+
+ - When hitting the arrow-up button while having the caret at the start in the composer,
+    the last message sent by the syncing user is edited.
+ - Clicking a display name on an event in the timeline inserts a user pill into the composer
+ - Emoticons (like :-), >:-), :-/, ...) are replaced by emojis while typing if the relevant setting is enabled
+ - Typing in the composer sends typing notifications in the room
+ - Pressing ctrl/mod+z and ctrl/mod+y undoes/redoes modifications
+ - Pressing shift+enter inserts a line break
+ - Pressing enter sends the message.
+ - Choosing "Quote" in the context menu of an event inserts a quote of the event body in the composer.
+ - Choosing "Reply" in the context menu of an event shows a preview above the composer to reply to.
+ - Pressing alt+arrow up/arrow down navigates in previously sent messages, putting them in the composer.

docs/settings.md

@@ -15,7 +15,7 @@ order of prioirty, are:
 * `room-account` - The current user's account, but only when in a specific room
 * `account` - The current user's account
 * `room` - A specific room (setting for all members of the room)
-* `config` - Values are defined by `config.json`
+* `config` - Values are defined by the `settingDefaults` key (usually) in `config.json`
 * `default` - The hardcoded default for the settings
 
 Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure 

karma.conf.js

@@ -28,7 +28,7 @@ process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
 
 function fileExists(name) {
     try {
-        fs.statSync(gsCss);
+        fs.statSync(name);
         return true;
     } catch (e) {
         return false;
@@ -166,7 +166,7 @@ module.exports = function (config) {
                                  ]
                     },
                     {
-                        test: /\.(gif|png|svg|ttf)$/,
+                        test: /\.(gif|png|svg|ttf|woff2)$/,
                         loader: 'file-loader',
                     },
                 ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "1.1.0",
+  "version": "1.7.4",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -40,6 +40,7 @@
     "rethemendex": "res/css/rethemendex.sh",
     "i18n": "matrix-gen-i18n",
     "prunei18n": "matrix-prune-i18n",
+    "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && ./scripts/gen-i18n.js && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
     "build": "yarn reskindex && yarn start:init",
     "build:watch": "babel src -w --skip-initial-build -d lib --source-maps --copy-files",
     "emoji-data-strip": "node scripts/emoji-data-strip.js",
@@ -49,38 +50,45 @@
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
     "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
-    "stylelint": "stylelint res/css/**/*.scss",
+    "stylelint": "stylelint 'res/css/**/*.scss'",
     "clean": "rimraf lib",
     "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt",
     "test": "karma start --single-run=true --browsers VectorChromeHeadless",
-    "test-multi": "karma start"
+    "test-multi": "karma start",
+    "e2etests": "./test/end-to-end-tests/run.sh --riot-url http://localhost:8080"
   },
   "dependencies": {
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-runtime": "^6.26.0",
-    "bluebird": "^3.5.0",
     "blueimp-canvas-to-blob": "^3.5.0",
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
     "commonmark": "^0.28.1",
     "counterpart": "^0.18.0",
-    "emojione": "2.2.7",
+    "create-react-class": "^15.6.0",
+    "diff-dom": "^4.1.3",
+    "diff-match-patch": "^1.0.4",
+    "emojibase-data": "^4.0.2",
+    "emojibase-regex": "^3.0.0",
+    "escape-html": "^1.0.3",
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
     "focus-trap-react": "^3.0.5",
+    "focus-visible": "^5.0.2",
     "fuse.js": "^2.2.0",
-    "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#b302279",
+    "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
     "gfm.css": "^1.1.1",
     "glob": "^5.0.14",
-    "highlight.js": "9.14.2",
+    "glob-to-regexp": "^0.4.1",
+    "highlight.js": "^9.15.8",
     "is-ip": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.6",
-    "lodash": "^4.13.1",
+    "lodash": "^4.17.14",
-    "lolex": "2.3.2",
+    "lolex": "4.2",
-    "matrix-js-sdk": "1.1.0",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
     "png-chunks-extract": "^1.0.0",
@@ -88,11 +96,11 @@
     "qrcode-react": "^0.1.16",
     "qs": "^6.6.0",
     "querystring": "^0.2.0",
-    "react": "^15.6.0",
+    "react": "^16.9.0",
-    "react-addons-css-transition-group": "15.3.2",
+    "react-addons-css-transition-group": "15.6.2",
     "react-beautiful-dnd": "^4.0.1",
-    "react-dom": "^15.6.0",
+    "react-dom": "^16.9.0",
-    "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#5e97aef",
+    "react-gemini-scrollbar": "github:matrix-org/react-gemini-scrollbar#9cf17f63b7c0b0ec5f31df27da0f82f7238dc594",
     "resize-observer-polyfill": "^1.5.0",
     "sanitize-html": "^1.18.4",
     "slate": "^0.41.2",
@@ -111,7 +119,6 @@
     "babel-eslint": "^10.0.1",
     "babel-loader": "^7.1.5",
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-async-to-bluebird": "^1.1.1",
     "babel-plugin-transform-builtin-extend": "^1.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -127,7 +134,9 @@
     "eslint-config-google": "^0.7.1",
     "eslint-plugin-babel": "^5.2.1",
     "eslint-plugin-flowtype": "^2.30.0",
+    "eslint-plugin-jest": "^23.0.4",
     "eslint-plugin-react": "^7.7.0",
+    "eslint-plugin-react-hooks": "^2.0.1",
     "estree-walker": "^0.5.0",
     "expect": "^24.1.0",
     "file-loader": "^3.0.1",
@@ -143,15 +152,16 @@
     "karma-summary-reporter": "^1.5.1",
     "karma-webpack": "^4.0.0-beta.0",
     "matrix-mock-request": "^1.2.3",
-    "matrix-react-test-utils": "^0.1.1",
+    "matrix-react-test-utils": "^0.2.2",
     "mocha": "^5.0.5",
-    "react-addons-test-utils": "^15.4.0",
+    "react-test-renderer": "^16.9.0",
     "require-json": "0.0.1",
     "rimraf": "^2.4.3",
     "sinon": "^5.0.7",
     "source-map-loader": "^0.2.3",
     "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
+    "stylelint-scss": "^3.9.0",
     "walk": "^2.3.9",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.1"

res/css/_common.scss

@@ -30,6 +30,16 @@ body {
     color: $primary-fg-color;
     border: 0px;
     margin: 0px;
+
+    // needed to match the designs correctly on macOS
+    // see https://github.com/vector-im/riot-web/issues/11425
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+pre, code {
+    font-family: $monospace-font-family;
+    font-size: 100% !important;
 }
 
 .error, .warning {
@@ -99,15 +109,23 @@ input[type=text], input[type=password], textarea {
     color: $primary-fg-color;
 }
 
+/* Required by Firefox */
+textarea {
+    font-family: $font-family;
+    color: $primary-fg-color;
+}
+
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
     outline: none;
     box-shadow: none;
 }
 
-/* Required by Firefox */
+// This is used to hide the standard outline added by browsers for
-textarea {
+// accessible (focusable) components. Not intended for buttons, but
-    font-family: $font-family;
+// should be used on things like focusable containers where the outline
-    color: $primary-fg-color;
+// is usually not helping anyone.
+*:focus:not(.focus-visible) {
+    outline: none;
 }
 
 // .mx_textinput is a container for a text input
@@ -116,6 +134,13 @@ textarea {
 // appear to be part of the input
 
 .mx_Dialog, .mx_MatrixChat {
+    .mx_textinput > input[type=text],
+    .mx_textinput > input[type=search] {
+        border: none;
+        flex: 1;
+        color: $primary-fg-color;
+    }
+
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
@@ -134,13 +159,6 @@ textarea {
     .mx_textinput {
         display: flex;
         align-items: center;
-
-        > input[type=text],
-        > input[type=search] {
-            border: none;
-            flex: 1;
-            color: $primary-fg-color;
-        }
     }
 
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
@@ -153,14 +171,12 @@ textarea {
 /*** panels ***/
 .dark-panel {
     background-color: $dark-panel-bg-color;
-}
 
-.dark-panel {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
-        background-color: $input-darker-bg-color;
+        background-color: $primary-bg-color;
         border: none;
     }
 }
@@ -196,25 +212,25 @@ textarea {
 
 /* Expand thumbs on hoverover */
 .gm-scrollbar {
-    border-radius: 5px ! important;
+    border-radius: 5px !important;
 }
 .gm-scrollbar.-vertical {
     width: 6px;
-    transition: width 120ms ease-out ! important;
+    transition: width 120ms ease-out !important;
 }
 .gm-scrollbar.-vertical:hover,
 .gm-scrollbar.-vertical:active {
     width: 8px;
-    transition: width 120ms ease-out ! important;
+    transition: width 120ms ease-out !important;
 }
 .gm-scrollbar.-horizontal {
     height: 6px;
-    transition: height 120ms ease-out ! important;
+    transition: height 120ms ease-out !important;
 }
 .gm-scrollbar.-horizontal:hover,
 .gm-scrollbar.-horizontal:active {
     height: 8px;
-    transition: height 120ms ease-out ! important;
+    transition: height 120ms ease-out !important;
 }
 
 // These are magic constants which are excluded from tinting, to let themes
@@ -258,14 +274,6 @@ textarea {
     justify-content: center;
 }
 
-/* Spinner Dialog overide */
-.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
-    width: auto;
-    border-radius: 8px;
-    padding: 0px;
-    box-shadow: none;
-}
-
 .mx_Dialog {
     background-color: $primary-bg-color;
     color: $light-fg-color;
@@ -327,7 +335,7 @@ textarea {
 
 .mx_Dialog_header {
     position: relative;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 .mx_Dialog_title {
@@ -377,7 +385,7 @@ textarea {
 
     // flip colours for the secondary ones
     font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    border: 1px solid $accent-color;
     color: $accent-color;
     background-color: $button-secondary-bg-color;
 }
@@ -394,7 +402,7 @@ textarea {
     filter: brightness($focus-brightness);
 }
 
-.mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
+.mx_Dialog button.mx_Dialog_primary, .mx_Dialog input[type="submit"].mx_Dialog_primary {
     color: $accent-fg-color;
     background-color: $accent-color;
     min-width: 156px;
@@ -412,6 +420,14 @@ textarea {
     opacity: 0.7;
 }
 
+/* Spinner Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+    width: auto;
+    border-radius: 8px;
+    padding: 0px;
+    box-shadow: none;
+}
+
 // TODO: Review mx_GeneralButton usage to see if it can use a different class
 // These classes were brought in from the old UserSettings and are included here to avoid
 // breaking the app.
@@ -445,25 +461,6 @@ textarea {
     background-color: $primary-bg-color;
 }
 
-.mx_emojione {
-    height: 1em;
-    vertical-align: middle;
-}
-
-.mx_emojione_selected {
-    background-color: $accent-color;
-}
-
-::-moz-selection {
-    background-color: $accent-color;
-    color: $selection-fg-color;
-}
-
-::selection {
-    background-color: $accent-color;
-    color: $selection-fg-color;
-}
-
 .mx_textButton {
     @mixin mx_DialogButton_small;
 }
@@ -558,3 +555,27 @@ textarea {
     color: $username-variant8-color;
 }
 
+@define-mixin mx_Tooltip_dark {
+    box-shadow: none;
+    background-color: $tooltip-timeline-bg-color;
+    color: $tooltip-timeline-fg-color;
+    border: none;
+    border-radius: 3px;
+    padding: 6px 8px;
+}
+
+// This is a workaround for our mixins not supporting child selectors
+.mx_Tooltip_dark {
+    .mx_Tooltip_chevron::after {
+        border-right-color: $tooltip-timeline-bg-color;
+    }
+}
+
+@define-mixin mx_Settings_fullWidthField {
+    margin-right: 100px;
+}
+
+@define-mixin mx_Settings_tooltip {
+    // So it fits in the space provided by the page
+    max-width: 120px;
+}

res/css/_components.scss

@@ -25,6 +25,7 @@
 @import "./structures/_TabbedView.scss";
 @import "./structures/_TagPanel.scss";
 @import "./structures/_TagPanelButtons.scss";
+@import "./structures/_ToastContainer.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_ViewSource.scss";
@@ -48,9 +49,9 @@
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/context_menus/_TopLeftMenu.scss";
+@import "./views/context_menus/_WidgetContextMenu.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
-@import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
@@ -62,6 +63,7 @@
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
 @import "./views/dialogs/_IncomingSasDialog.scss";
+@import "./views/dialogs/_MessageEditHistoryDialog.scss";
 @import "./views/dialogs/_RestoreKeyBackupDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
@@ -70,6 +72,9 @@
 @import "./views/dialogs/_SetPasswordDialog.scss";
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
+@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";
@@ -84,23 +89,30 @@
 @import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
+@import "./views/elements/_ErrorBoundary.scss";
+@import "./views/elements/_EventListSummary.scss";
 @import "./views/elements/_Field.scss";
+@import "./views/elements/_FormButton.scss";
+@import "./views/elements/_IconButton.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
-@import "./views/elements/_MemberEventListSummary.scss";
 @import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.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/_Spinner.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
+@import "./views/elements/_TextWithTooltip.scss";
 @import "./views/elements/_ToggleSwitch.scss";
-@import "./views/elements/_ToolTipButton.scss";
 @import "./views/elements/_Tooltip.scss";
+@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";
@@ -110,24 +122,30 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MKeyVerificationRequest.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";
 @import "./views/messages/_MessageActionBar.scss";
 @import "./views/messages/_MessageTimestamp.scss";
-@import "./views/messages/_ReactionDimension.scss";
+@import "./views/messages/_MjolnirBody.scss";
 @import "./views/messages/_ReactionsRow.scss";
 @import "./views/messages/_ReactionsRowButton.scss";
+@import "./views/messages/_ReactionsRowButtonTooltip.scss";
 @import "./views/messages/_RoomAvatarEvent.scss";
 @import "./views/messages/_SenderProfile.scss";
 @import "./views/messages/_TextualEvent.scss";
 @import "./views/messages/_UnknownBody.scss";
+@import "./views/messages/_ViewSourceEvent.scss";
+@import "./views/right_panel/_UserInfo.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/room_settings/_ColorSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";
 @import "./views/rooms/_Autocomplete.scss";
 @import "./views/rooms/_AuxPanel.scss";
+@import "./views/rooms/_BasicMessageComposer.scss";
 @import "./views/rooms/_E2EIcon.scss";
+@import "./views/rooms/_EditMessageComposer.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
 @import "./views/rooms/_JumpToBottomButton.scss";
@@ -136,6 +154,7 @@
 @import "./views/rooms/_MemberInfo.scss";
 @import "./views/rooms/_MemberList.scss";
 @import "./views/rooms/_MessageComposer.scss";
+@import "./views/rooms/_MessageComposerFormatBar.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
@@ -150,26 +169,31 @@
 @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";
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_DevicesPanel.scss";
 @import "./views/settings/_EmailAddresses.scss";
-@import "./views/settings/_IntegrationsManager.scss";
+@import "./views/settings/_IntegrationManager.scss";
 @import "./views/settings/_KeyBackupPanel.scss";
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
+@import "./views/settings/_SetIdServer.scss";
+@import "./views/settings/_SetIntegrationManager.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/_GeneralUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_HelpUserSettingsTab.scss";
+@import "./views/settings/tabs/user/_MjolnirUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_NotificationUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_PreferencesUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_SecurityUserSettingsTab.scss";
 @import "./views/settings/tabs/user/_VoiceUserSettingsTab.scss";
+@import "./views/terms/_InlineTermsAgreement.scss";
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_IncomingCallbox.scss";

res/css/structures/_AutoHideScrollbar.scss

@@ -14,12 +14,11 @@ 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
+/* This file has CSS for both native and non-native scrollbars in an order
- * order that's fairly logic to read but violates stylelints descending
+ * that's fairly logical to read but duplicates a selector to separate the
- * specificity rule, so turn it off for this file. It also duplicates
+ * hiding/showing from the sizing.
- * a selector to separate the hiding/showing from the sizing.
  */
-/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+/* stylelint-disable no-duplicate-selectors */
 
 /*
 1. for browsers that support native overlay auto-hiding scrollbars

res/css/structures/_ContextualMenu.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -39,7 +40,11 @@ limitations under the License.
     z-index: 5001;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_right {
+.mx_ContextualMenu_right {
+    right: 0;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_right {
     right: 8px;
 }
 
@@ -54,19 +59,11 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_right::after {
+.mx_ContextualMenu_left {
-    content: '';
+    left: 0;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-left: 7px solid $menu-bg-color;
-    border-bottom: 7px solid transparent;
-    position: absolute;
-    top: -7px;
-    right: 1px;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_left {
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_left {
     left: 8px;
 }
 
@@ -81,19 +78,11 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_left::after {
+.mx_ContextualMenu_top {
-    content: '';
+    top: 0;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-right: 7px solid $menu-bg-color;
-    border-bottom: 7px solid transparent;
-    position: absolute;
-    top: -7px;
-    left: 1px;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_top {
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_top {
     top: 8px;
 }
 
@@ -108,19 +97,11 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_top::after {
+.mx_ContextualMenu_bottom {
-    content: '';
+    bottom: 0;
-    width: 0;
-    height: 0;
-    border-left: 7px solid transparent;
-    border-bottom: 7px solid $menu-bg-color;
-    border-right: 7px solid transparent;
-    position: absolute;
-    left: -7px;
-    top: 1px;
 }
 
-.mx_ContextualMenu.mx_ContextualMenu_bottom {
+.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
     bottom: 8px;
 }
 
@@ -135,24 +116,6 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_bottom::after {
-    content: '';
-    width: 0;
-    height: 0;
-    border-left: 7px solid transparent;
-    border-top: 7px solid $menu-bg-color;
-    border-right: 7px solid transparent;
-    position: absolute;
-    left: -7px;
-    bottom: 1px;
-}
-
-.mx_ContextualMenu_field {
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-    white-space: nowrap;
-}
-
 .mx_ContextualMenu_spinner {
     display: block;
     margin: 0 auto;

res/css/structures/_FilePanel.scss

@@ -18,6 +18,7 @@ limitations under the License.
     order: 2;
     flex: 1 1 0;
     overflow-y: auto;
+    display: flex;
 }
 
 .mx_FilePanel .mx_RoomView_messageListWrapper {

res/css/structures/_GenericErrorPage.scss

@@ -2,18 +2,16 @@
     width: 100%;
     height: 100%;
     background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .mx_GenericErrorPage_box {
-    position: absolute;
+    display: inline;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
     width: 500px;
-    height: 200px;
+    min-height: 125px;
     border: 1px solid #f22;
-    padding: 10px;
+    padding: 10px 10px 20px;
     background-color: #fcc;
 }

res/css/structures/_GroupView.scss

@@ -44,21 +44,29 @@ limitations under the License.
 }
 
 .mx_GroupHeader_button {
+    position: relative;
     margin-left: 5px;
     margin-right: 5px;
     cursor: pointer;
     height: 20px;
     width: 20px;
-    background-color: $groupheader-button-color;
+
-    mask-repeat: no-repeat;
+    &::before {
-    mask-size: contain;
+        content: '';
+        position: absolute;
+        height: 20px;
+        width: 20px;
+        background-color: $groupheader-button-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+    }
 }
 
-.mx_GroupHeader_editButton {
+.mx_GroupHeader_editButton::before {
     mask-image: url('$(res)/img/icons-settings-room.svg');
 }
 
-.mx_GroupHeader_shareButton {
+.mx_GroupHeader_shareButton::before {
     mask-image: url('$(res)/img/icons-share.svg');
 }
 

res/css/structures/_LeftPanel.scss

@@ -24,13 +24,13 @@ limitations under the License.
 
 .mx_LeftPanel_container.collapsed {
     min-width: unset;
-    /* Collapsed LeftPanel 70px */
+    /* Collapsed LeftPanel 50px */
-    flex: 0 0 70px;
+    flex: 0 0 50px;
 }
 
 .mx_LeftPanel_container.collapsed.mx_LeftPanel_container_hasTagPanel {
-    /* TagPanel 70px + Collapsed LeftPanel 70px */
+    /* TagPanel 70px + Collapsed LeftPanel 50px */
-    flex: 0 0 140px;
+    flex: 0 0 120px;
 }
 
 .mx_LeftPanel_tagPanelContainer {
@@ -125,3 +125,53 @@ limitations under the License.
         margin-top: 12px;
     }
 }
+
+.mx_LeftPanel_exploreAndFilterRow {
+    display: flex;
+
+    .mx_SearchBox {
+        flex: 1 1 0;
+        min-width: 0;
+        margin: 4px 9px 1px 9px;
+    }
+}
+
+.mx_LeftPanel_explore {
+    flex: 0 0 50%;
+    overflow: hidden;
+    transition: flex-basis 0.2s;
+    box-sizing: border-box;
+
+    &.mx_LeftPanel_explore_hidden {
+        flex-basis: 0;
+    }
+
+    .mx_AccessibleButton {
+        font-size: 14px;
+        margin: 4px 0 1px 9px;
+        padding: 9px;
+        padding-left: 42px;
+        font-weight: 600;
+        color: $notice-secondary-color;
+        position: relative;
+        border-radius: 4px;
+
+        &:hover {
+            background-color: $primary-bg-color;
+        }
+
+        &::before {
+            cursor: pointer;
+            mask: url('$(res)/img/explore.svg');
+            mask-repeat: no-repeat;
+            mask-position: center center;
+            content: "";
+            left: 14px;
+            top: 10px;
+            width: 16px;
+            height: 16px;
+            background-color: $notice-secondary-color;
+            position: absolute;
+        }
+    }
+}

res/css/structures/_NotificationPanel.scss

@@ -18,6 +18,7 @@ limitations under the License.
     order: 2;
     flex: 1 1 0;
     overflow-y: auto;
+    display: flex;
 }
 
 .mx_NotificationPanel .mx_RoomView_messageListWrapper {

res/css/structures/_RightPanel.scss

@@ -50,18 +50,18 @@ limitations under the License.
     height: 20px;
     width: 20px;
     position: relative;
-}
 
-.mx_RightPanel_headerButton::before {
+    &::before {
-    content: '';
+        content: '';
-    position: absolute;
+        position: absolute;
-    top: 0;
+        top: 0;
-    left: 0;
+        left: 0;
-    height: 20px;
+        height: 20px;
-    width: 20px;
+        width: 20px;
-    background-color: $rightpanel-button-color;
+        background-color: $rightpanel-button-color;
-    mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
-    mask-size: contain;
+        mask-size: contain;
+    }
 }
 
 .mx_RightPanel_membersButton::before {

res/css/structures/_RoomDirectory.scss

@@ -17,7 +17,6 @@ limitations under the License.
 .mx_RoomDirectory_dialogWrapper > .mx_Dialog {
     max-width: 960px;
     height: 100%;
-    padding: 20px;
 }
 
 .mx_RoomDirectory_dialog {
@@ -35,24 +34,6 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_RoomDirectory .gm-scroll-view {
-    // little hack because gemini doesn't seem to detect
-    // the scrollbar width well in this instance
-    // when using css scrollbars
-    scrollbar-width: thin;
-}
-
-.mx_RoomDirectory_createRoom {
-    background-color: $button-bg-color;
-    border-radius: 4px;
-    padding: 8px;
-    color: $button-fg-color;
-    font-weight: 600;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
 .mx_RoomDirectory_list {
     flex: 1;
     display: flex;
@@ -91,9 +72,8 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_roomAvatar {
-    width: 24px;
+    width: 32px;
-    padding-left: 12px;
+    padding-right: 14px;
-    padding-right: 24px;
     vertical-align: top;
 }
 
@@ -101,6 +81,35 @@ limitations under the License.
     padding-bottom: 16px;
 }
 
+.mx_RoomDirectory_roomMemberCount {
+    color: $light-fg-color;
+    width: 60px;
+    padding: 0 10px;
+    text-align: center;
+
+    &::before {
+        background-color: $light-fg-color;
+        display: inline-block;
+        vertical-align: text-top;
+        margin-right: 2px;
+        content: "";
+        mask: url('$(res)/img/feather-customised/user.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        // scale it down and make the size slightly bigger (16 instead of 14px)
+        // to avoid rendering artifacts
+        mask-size: 80%;
+        width: 16px;
+        height: 16px;
+    }
+}
+
+.mx_RoomDirectory_join, .mx_RoomDirectory_preview {
+    width: 80px;
+    text-align: center;
+    white-space: nowrap;
+}
+
 .mx_RoomDirectory_name {
     display: inline-block;
     font-weight: 600;
@@ -110,22 +119,9 @@ limitations under the License.
     display: inline-block;
 }
 
-.mx_RoomDirectory_perm {
-    display: inline;
-    padding-left: 5px;
-    padding-right: 5px;
-    margin-right: 5px;
-    height: 15px;
-    border-radius: 11px;
-    background-color: $plinth-bg-color;
-    text-transform: uppercase;
-    font-weight: 600;
-    font-size: 11px;
-    color: $accent-color;
-}
-
 .mx_RoomDirectory_topic {
     cursor: initial;
+    color: $light-fg-color;
 }
 
 .mx_RoomDirectory_alias {
@@ -133,13 +129,20 @@ limitations under the License.
     color: $settings-grey-fg-color;
 }
 
-.mx_RoomDirectory_roomMemberCount {
-    text-align: right;
-    width: 100px;
-    padding-right: 10px;
-}
-
 .mx_RoomDirectory_table tr {
     padding-bottom: 10px;
     cursor: pointer;
 }
+
+.mx_RoomDirectory .mx_RoomView_MessageList {
+    padding: 0;
+}
+
+.mx_RoomDirectory p {
+    font-size: 14px;
+    margin-top: 0;
+
+    .mx_AccessibleButton {
+        padding: 0;
+    }
+}

res/css/structures/_RoomSubList.scss

@@ -20,7 +20,7 @@ limitations under the License.
    so they ideally wouldn't affect each other.
    lowest category: .mx_RoomSubList
         flex-shrink: 10000000
-        distribute size of items within the same categery by their size
+        distribute size of items within the same category by their size
    middle category: .mx_RoomSubList.resized-sized
         flex-shrink: 1000
         applied when using the resizer, will have a max-height set to it,
@@ -46,10 +46,15 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     flex: 0 0 auto;
-    margin: 0 16px;
+    margin: 0 8px;
+    padding: 0 8px;
     height: 36px;
 }
 
+.mx_RoomSubList_labelContainer.focus-visible:focus-within {
+    background-color: $roomtile-focused-bg-color;
+}
+
 .mx_RoomSubList_label {
     flex: 1;
     cursor: pointer;
@@ -67,13 +72,13 @@ limitations under the License.
     margin-left: 8px;
 }
 
-.mx_RoomSubList_badge {
+.mx_RoomSubList_badge > div {
     flex: 0 0 auto;
     border-radius: 8px;
-    color: $accent-fg-color;
     font-weight: 600;
     font-size: 12px;
     padding: 0 5px;
+    color: $roomtile-badge-fg-color;
     background-color: $roomtile-name-color;
     cursor: pointer;
 }
@@ -103,7 +108,8 @@ limitations under the License.
     }
 }
 
-.mx_RoomSubList_badgeHighlight {
+.mx_RoomSubList_badgeHighlight > div {
+    color: $accent-fg-color;
     background-color: $warning-color;
 }
 
@@ -143,8 +149,9 @@ limitations under the License.
     }
 
     .mx_RoomSubList_labelContainer {
-        margin-right: 14px;
+        margin-right: 8px;
         margin-left: 2px;
+        padding: 0;
     }
 
     .mx_RoomSubList_addRoom {

res/css/structures/_RoomView.scss

@@ -221,6 +221,9 @@ hr.mx_RoomView_myReadMarker {
     position: relative;
     top: -1px;
     z-index: 1;
+    transition: width 400ms easeInSine 1s, opacity 400ms easeInSine 1s;
+    width: 99%;
+    opacity: 1;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

res/css/structures/_SearchBox.scss

@@ -14,12 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SearchBox_closeButton {
+.mx_SearchBox {
-    cursor: pointer;
+    flex: 1 1 0;
-    background-image: url('$(res)/img/icons-close.svg');
+    min-width: 0;
-    background-repeat: no-repeat;
+
-    width: 16px;
+    &.mx_SearchBox_blurred:not(:hover) {
-    height: 16px;
+        background-color: transparent;
-    background-position: center;
+    }
-    padding: 9px;
+
+    .mx_SearchBox_closeButton {
+        cursor: pointer;
+        background-image: url('$(res)/img/icons-close.svg');
+        background-repeat: no-repeat;
+        width: 16px;
+        height: 16px;
+        background-position: center;
+        padding: 9px;
+    }
 }

res/css/structures/_TagPanel.scss

@@ -63,7 +63,6 @@ limitations under the License.
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 5px;
 
     height: 100%;
 }

res/css/structures/_ToastContainer.scss

@@ -0,0 +1,98 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ToastContainer {
+    position: absolute;
+    top: 0;
+    left: 70px;
+    z-index: 101;
+    padding: 4px;
+    display: grid;
+    grid-template-rows: 1fr 14px 6px;
+
+    &.mx_ToastContainer_stacked::before {
+        content: "";
+        margin: 0 4px;
+        grid-row: 2 / 4;
+        grid-column: 1;
+        background-color: white;
+        box-shadow: 0px 4px 12px $menu-box-shadow-color;
+        border-radius: 8px;
+    }
+
+    .mx_Toast_toast {
+        grid-row: 1 / 3;
+        grid-column: 1;
+        color: $primary-fg-color;
+        background-color: $primary-bg-color;
+        box-shadow: 0px 4px 12px $menu-box-shadow-color;
+        border-radius: 8px;
+        overflow: hidden;
+        display: grid;
+        grid-template-columns: 20px 1fr;
+        column-gap: 10px;
+        row-gap: 4px;
+        padding: 8px;
+        padding-right: 16px;
+
+        &.mx_Toast_hasIcon {
+            &::after {
+                content: "";
+                width: 20px;
+                height: 20px;
+                grid-column: 1;
+                grid-row: 1;
+                mask-size: 100%;
+                mask-repeat: no-repeat;
+            }
+
+            &.mx_Toast_icon_verification::after {
+                mask-image: url("$(res)/img/e2e/normal.svg");
+                background-color: $primary-fg-color;
+            }
+
+            h2, .mx_Toast_body {
+                grid-column: 2;
+            }
+        }
+
+        h2 {
+            grid-column: 1 / 3;
+            grid-row: 1;
+            margin: 0;
+            font-size: 15px;
+            font-weight: 600;
+        }
+
+        .mx_Toast_body {
+            grid-column: 1 / 3;
+            grid-row: 2;
+        }
+
+        .mx_Toast_buttons {
+            display: flex;
+        }
+
+        .mx_Toast_description {
+            max-width: 400px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            margin: 4px 0 11px 0;
+            font-size: 12px;
+        }
+    }
+}

res/css/structures/_TopLeftMenuButton.scss

@@ -22,7 +22,7 @@ limitations under the License.
     display: flex;
     align-items: center;
     min-width: 0;
-    padding: 0 7px;
+    padding: 0 4px;
     overflow: hidden;
 }
 

res/css/structures/auth/_Login.scss

@@ -30,6 +30,7 @@ limitations under the License.
 
 .mx_Login_submit:disabled {
     opacity: 0.3;
+    cursor: default;
 }
 
 .mx_AuthBody a.mx_Login_sso_link:link,
@@ -62,6 +63,15 @@ limitations under the License.
     margin-bottom: 12px;
 }
 
+.mx_Login_error.mx_Login_serverError {
+    text-align: left;
+    font-weight: normal;
+}
+
+.mx_Login_error.mx_Login_serverError.mx_Login_serverErrorNonFatal {
+    color: $orange-warning-color;
+}
+
 .mx_Login_type_container {
     display: flex;
     align-items: center;
@@ -73,9 +83,9 @@ limitations under the License.
 }
 
 .mx_Login_type_label {
-    flex-grow: 1;
+    flex: 1;
 }
 
-.mx_Login_type_dropdown {
+.mx_Login_underlinedServerName {
-    min-width: 200px;
+    border-bottom: 1px dashed $accent-color;
 }

res/css/views/auth/_AuthBody.scss

@@ -39,8 +39,7 @@ limitations under the License.
     a:link,
     a:hover,
     a:visited {
-        color: $accent-color;
+        @mixin mx_Dialog_link;
-        text-decoration: none;
     }
 
     input[type=text],
@@ -58,12 +57,12 @@ limitations under the License.
         color: $authpage-primary-color;
     }
 
+    .mx_Field_labelAlwaysTopLeft label,
+    .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
     .mx_Field input:focus + label,
     .mx_Field input:not(:placeholder-shown) + label,
     .mx_Field textarea:focus + label,
-    .mx_Field textarea:not(:placeholder-shown) + label,
+    .mx_Field textarea:not(:placeholder-shown) + label {
-    .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
-    .mx_Field_labelAlwaysTopLeft label {
         background-color: $authpage-body-bg-color;
     }
 
@@ -72,7 +71,6 @@ limitations under the License.
     }
 
     .mx_Field input {
-        width: 100%;
         box-sizing: border-box;
     }
 
@@ -110,7 +108,6 @@ limitations under the License.
 
 .mx_AuthBody_fieldRow > .mx_Field {
     margin: 0 5px;
-    flex: 1;
 }
 
 .mx_AuthBody_fieldRow > .mx_Field:first-child {

res/css/views/auth/_InteractiveAuthEntryComponents.scss

@@ -49,10 +49,14 @@ limitations under the License.
 }
 
 .mx_InteractiveAuthEntryComponents_termsSubmit:disabled {
-    background-color: $accent-color-50pct;
+    background-color: $accent-color-darker;
     cursor: default;
 }
 
 .mx_InteractiveAuthEntryComponents_termsPolicy {
     display: block;
 }
+
+.mx_InteractiveAuthEntryComponents_passwordSection {
+    width: 300px;
+}

res/css/views/auth/_ServerConfig.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,24 +15,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ServerConfig_fields {
-    display: flex;
-    margin: 1em 0;
-}
-
-.mx_ServerConfig_fields .mx_Field {
-    flex: 1;
-    margin: 0 5px;
-}
-
-.mx_ServerConfig_fields .mx_Field:first-child {
-    margin-left: 0;
-}
-
-.mx_ServerConfig_fields .mx_Field:last-child {
-    margin-right: 0;
-}
-
 .mx_ServerConfig_help:link {
     opacity: 0.8;
 }
+
+.mx_ServerConfig_error {
+    display: block;
+    color: $warning-color;
+}
+
+.mx_ServerConfig_identityServer {
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: transform 0.25s;
+
+    &.mx_ServerConfig_identityServer_shown {
+        transform: scaleY(1);
+    }
+}

res/css/views/context_menus/_RoomTileContextMenu.scss

@@ -18,6 +18,18 @@ limitations under the License.
     padding: 6px;
 }
 
+.mx_RoomTileContextMenu_tag_icon {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: inline-block;
+}
+
+.mx_RoomTileContextMenu_tag_icon_set {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: none;
+}
+
 .mx_RoomTileContextMenu_tag_field, .mx_RoomTileContextMenu_leave {
     padding-top: 8px;
     padding-right: 20px;
@@ -45,18 +57,6 @@ limitations under the License.
     color: rgba(0, 0, 0, 0.2);
 }
 
-.mx_RoomTileContextMenu_tag_icon {
-    padding-right: 8px;
-    padding-left: 4px;
-    display: inline-block
-}
-
-.mx_RoomTileContextMenu_tag_icon_set {
-    padding-right: 8px;
-    padding-left: 4px;
-    display: none;
-}
-
 .mx_RoomTileContextMenu_separator {
     margin-top: 0;
     margin-bottom: 0;
@@ -72,10 +72,6 @@ limitations under the License.
     color: $warning-color;
 }
 
-.mx_RoomTileContextMenu_tag_fieldSet .mx_RoomTileContextMenu_tag_icon {
-    /* Something to indicate that the icon is the set tag */
-}
-
 .mx_RoomTileContextMenu_notif_picker {
     position: absolute;
     top: 16px;

res/css/views/context_menus/_TagTileContextMenu.scss

@@ -33,7 +33,7 @@ limitations under the License.
 .mx_TagTileContextMenu_item_icon {
     padding-right: 8px;
     padding-left: 4px;
-    display: inline-block
+    display: inline-block;
 }
 
 .mx_TagTileContextMenu_separator {

res/css/views/context_menus/_TopLeftMenu.scss

@@ -89,5 +89,4 @@ limitations under the License.
             background-color: $menu-selected-color;
         }
     }
-
 }

res/css/views/context_menus/_WidgetContextMenu.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2019 The Matrix.org Foundaction 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_WidgetContextMenu {
+    padding: 6px;
+
+    .mx_WidgetContextMenu_option {
+        padding: 3px 6px 3px 6px;
+        cursor: pointer;
+        white-space: nowrap;
+    }
+
+    .mx_WidgetContextMenu_separator {
+        margin-top: 0;
+        margin-bottom: 0;
+        border-bottom-style: none;
+        border-left-style: none;
+        border-right-style: none;
+        border-top-style: solid;
+        border-top-width: 1px;
+        border-color: $menu-border-color;
+    }
+}

res/css/views/dialogs/_AddressPickerDialog.scss

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,10 +16,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_AddressPickerDialog {
+    a:link,
+    a:hover,
+    a:visited {
+        @mixin mx_Dialog_link;
+    }
+}
+
 /* Using a textarea for this element, to circumvent autofill */
 .mx_AddressPickerDialog_input,
-.mx_AddressPickerDialog_input:focus
+.mx_AddressPickerDialog_input:focus {
-{
     height: 26px;
     font-size: 14px;
     font-family: $font-family;
@@ -36,7 +44,7 @@ limitations under the License.
 }
 
 .mx_AddressPickerDialog .mx_Dialog_content {
-    min-height: 50px
+    min-height: 50px;
 }
 
 .mx_AddressPickerDialog_inputContainer {
@@ -68,3 +76,6 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_AddressPickerDialog_identityServer {
+    margin-top: 1em;
+}

res/css/views/dialogs/_CreateRoomDialog.scss

@@ -14,8 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CreateRoomDialog_details_summary {
+.mx_CreateRoomDialog_details {
-    outline: none;
+    .mx_CreateRoomDialog_details_summary {
+        outline: none;
+        list-style: none;
+        font-weight: 600;
+        cursor: pointer;
+        color: $accent-color;
+
+        // list-style doesn't do it for webkit
+        &::-webkit-details-marker {
+            display: none;
+        }
+    }
+
+    > div {
+        display: flex;
+        align-items: start;
+        margin: 5px 0;
+
+        input[type=checkbox] {
+            margin-right: 10px;
+        }
+    }
 }
 
 .mx_CreateRoomDialog_label {
@@ -36,3 +57,38 @@ limitations under the License.
     background-color: $primary-bg-color;
     width: 100%;
 }
+
+// needed to make the alias field only grow as wide as needed
+// as opposed to full width
+.mx_CreateRoomDialog_aliasContainer {
+    display: flex;
+    // put margin on container so it can collapse with siblings
+    margin: 10px 0;
+
+    .mx_RoomAliasField {
+        margin: 0;
+    }
+}
+
+.mx_CreateRoomDialog {
+
+    &.mx_Dialog_fixedWidth {
+        width: 450px;
+    }
+
+    .mx_SettingsFlag {
+        display: flex;
+    }
+
+    .mx_SettingsFlag_label {
+        flex: 1 1 0;
+        min-width: 0;
+        font-weight: 600;
+    }
+
+    .mx_ToggleSwitch {
+        flex: 0 0 auto;
+        margin-left: 30px;
+    }
+}
+

res/css/views/dialogs/_DeactivateAccountDialog.scss

@@ -21,3 +21,7 @@ limitations under the License.
 .mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section {
     margin-top: 60px;
 }
+
+.mx_DeactivateAccountDialog .mx_DeactivateAccountDialog_input_section .mx_Field {
+    width: 300px;
+}

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -23,7 +23,11 @@ limitations under the License.
     cursor: default !important;
 }
 
-.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button, .mx_DevTools_RoomStateExplorer_query {
+.mx_DevTools_RoomStateExplorer_query {
+    margin-bottom: 10px;
+}
+
+.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button {
     margin-bottom: 10px;
     width: 100%;
 }
@@ -41,13 +45,11 @@ limitations under the License.
     border-bottom: 1px solid #e5e5e5;
 }
 
-.mx_DevTools_inputRow
+.mx_DevTools_inputRow {
-{
     display: table-row;
 }
 
-.mx_DevTools_inputLabelCell
+.mx_DevTools_inputLabelCell {
-{
     display: table-cell;
     font-weight: bold;
     padding-right: 24px;
@@ -58,8 +60,7 @@ limitations under the License.
     width: 240px;
 }
 
-.mx_DevTools_inputCell input
+.mx_DevTools_inputCell input {
-{
     display: inline-block;
     border: 0;
     border-bottom: 1px solid $input-underline-color;
@@ -75,15 +76,15 @@ limitations under the License.
     max-width: 684px;
     min-height: 250px;
     padding: 10px;
-    width: 100%;
 }
 
-.mx_DevTools_content .mx_Field_input {
+.mx_DevTools_eventTypeStateKeyGroup {
-    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
 }
 
-.mx_DevTools_content .mx_Field_input + .mx_Field_input {
+.mx_DevTools_content .mx_Field_input:first-of-type {
-    margin-left: 42px;
+    margin-right: 42px;
 }
 
 .mx_DevTools_tgl {
@@ -91,11 +92,11 @@ limitations under the License.
 
     // add default box-sizing for this scope
     &,
-    &:after,
+    &::after,
-    &:before,
+    &::before,
     & *,
-    & *:after,
+    & *::after,
-    & *:before,
+    & *::before,
     & + .mx_DevTools_tgl-btn {
         box-sizing: border-box;
         &::selection {
@@ -111,8 +112,8 @@ limitations under the License.
         position: relative;
         cursor: pointer;
         user-select: none;
-        &:after,
+        &::after,
-        &:before {
+        &::before {
             position: relative;
             display: block;
             content: "";
@@ -120,16 +121,16 @@ limitations under the License.
             height: 100%;
         }
 
-        &:after {
+        &::after {
             left: 0;
         }
 
-        &:before {
+        &::before {
             display: none;
         }
     }
 
-    &:checked + .mx_DevTools_tgl-btn:after {
+    &:checked + .mx_DevTools_tgl-btn::after {
         left: 50%;
     }
 }
@@ -140,8 +141,8 @@ limitations under the License.
         transition: all .2s ease;
         font-family: sans-serif;
         perspective: 100px;
-        &:after,
+        &::after,
-        &:before {
+        &::before {
             display: inline-block;
             transition: all .4s ease;
             width: 100%;
@@ -156,34 +157,34 @@ limitations under the License.
             border-radius: 4px;
         }
 
-        &:after {
+        &::after {
             content: attr(data-tg-on);
-            background: #02C66F;
+            background: #02c66f;
             transform: rotateY(-180deg);
         }
 
-        &:before {
+        &::before {
-            background: #FF3A19;
+            background: #ff3a19;
             content: attr(data-tg-off);
         }
 
-        &:active:before {
+        &:active::before {
             transform: rotateY(-20deg);
         }
     }
 
     &:checked + .mx_DevTools_tgl-btn {
-        &:before {
+        &::before {
             transform: rotateY(180deg);
         }
 
-        &:after {
+        &::after {
             transform: rotateY(0);
             left: 0;
-            background: #7FC6A6;
+            background: #7fc6a6;
         }
 
-        &:active:after {
+        &:active::after {
             transform: rotateY(20deg);
         }
     }

res/css/views/dialogs/_GroupAddressPicker.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GroupAddressPicker_checkboxContainer{
+.mx_GroupAddressPicker_checkboxContainer {
     margin-top: 10px;
     display: flex;
 }

res/css/views/dialogs/_MessageEditHistoryDialog.scss

@@ -0,0 +1,67 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MessageEditHistoryDialog .mx_Dialog_header > .mx_Dialog_title {
+    text-align: center;
+}
+
+.mx_MessageEditHistoryDialog {
+    display: flex;
+    flex-direction: column;
+    max-height: 60vh;
+}
+
+.mx_MessageEditHistoryDialog_scrollPanel {
+    flex: 1 1 auto;
+}
+
+.mx_MessageEditHistoryDialog_error {
+    color: $warning-color;
+    text-align: center;
+}
+
+.mx_MessageEditHistoryDialog_edits {
+    list-style-type: none;
+    font-size: 14px;
+    padding: 0;
+    color: $primary-fg-color;
+
+    span.mx_EditHistoryMessage_deletion, span.mx_EditHistoryMessage_insertion {
+        padding: 0px 2px;
+    }
+
+    .mx_EditHistoryMessage_deletion {
+        color: rgb(255, 76, 85);
+        background-color: rgba(255, 76, 85, 0.1);
+        text-decoration: line-through;
+    }
+
+    .mx_EditHistoryMessage_insertion {
+        color: rgb(26, 169, 123);
+        background-color: rgba(26, 169, 123, 0.1);
+        text-decoration: underline;
+    }
+
+    .mx_EventTile_line, .mx_EventTile_content {
+        margin-right: 0px;
+    }
+
+    .mx_MessageActionBar .mx_AccessibleButton {
+        font-size: 10px;
+        padding: 0 8px;
+    }
+}
+

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -17,19 +17,19 @@ limitations under the License.
 // ICONS
 // ==========================================================
 
-.mx_RoomSettingsDialog_settingsIcon:before {
+.mx_RoomSettingsDialog_settingsIcon::before {
     mask-image: url('$(res)/img/feather-customised/settings.svg');
 }
 
-.mx_RoomSettingsDialog_securityIcon:before {
+.mx_RoomSettingsDialog_securityIcon::before {
     mask-image: url('$(res)/img/feather-customised/lock.svg');
 }
 
-.mx_RoomSettingsDialog_rolesIcon:before {
+.mx_RoomSettingsDialog_rolesIcon::before {
     mask-image: url('$(res)/img/feather-customised/users-sm.svg');
 }
 
-.mx_RoomSettingsDialog_warningIcon:before {
+.mx_RoomSettingsDialog_warningIcon::before {
     mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
 }
 

res/css/views/dialogs/_SetEmailDialog.scss

@@ -31,6 +31,3 @@ limitations under the License.
     box-shadow: none;
     border: 1px solid $accent-color;
 }
-
-.mx_SetEmailDialog_email_input_placeholder {
-}

res/css/views/dialogs/_SetPasswordDialog.scss

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

res/css/views/dialogs/_SlashCommandHelpDialog.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 OpenMarket Ltd
+Copyright Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BugReportDialog .mx_Field {
+.mx_SlashCommandHelpDialog .mx_SlashCommandHelpDialog_headerRow h2 {
-    flex: 1;
+    margin-bottom: 2px;
 }
 
-.mx_BugReportDialog_field_input {
+.mx_SlashCommandHelpDialog .mx_Dialog_content {
-    // TODO: We should really apply this to all .mx_Field inputs.
+    margin-top: 12px;
-    // See https://github.com/vector-im/riot-web/issues/9344.
+    margin-bottom: 34px;
-    flex: 1;
 }

res/css/views/dialogs/_TabbedIntegrationManagerDialog.scss

@@ -0,0 +1,62 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TabbedIntegrationManagerDialog .mx_Dialog {
+    width: 60%;
+    height: 70%;
+    overflow: hidden;
+    padding: 0;
+    max-width: initial;
+    max-height: initial;
+    position: relative;
+}
+
+.mx_TabbedIntegrationManagerDialog_container {
+    // Full size of the dialog, whatever it is
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    .mx_TabbedIntegrationManagerDialog_currentManager {
+        width: 100%;
+        height: 100%;
+        border-top: 1px solid $accent-color;
+
+        iframe {
+            background-color: #fff;
+            border: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+.mx_TabbedIntegrationManagerDialog_tab {
+    display: inline-block;
+    border: 1px solid $accent-color;
+    border-bottom: 0;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    padding: 10px 8px;
+    margin-right: 5px;
+}
+
+.mx_TabbedIntegrationManagerDialog_currentTab {
+    background-color: $accent-color;
+    color: $accent-fg-color;
+}

res/css/views/dialogs/_TermsDialog.scss

@@ -0,0 +1,48 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/*
+ * To avoid visual glitching of two modals stacking briefly, we customise the
+ * terms dialog sizing when it will appear for the integration manager so that
+ * it gets the same basic size as the IM's own modal.
+ */
+.mx_TermsDialog_forIntegrationManager .mx_Dialog {
+    width: 60%;
+    height: 70%;
+    box-sizing: border-box;
+}
+
+.mx_TermsDialog_termsTableHeader {
+    font-weight: bold;
+    text-align: left;
+}
+
+.mx_TermsDialog_termsTable {
+    font-size: 12px;
+    width: 100%;
+}
+
+.mx_TermsDialog_service, .mx_TermsDialog_summary {
+    padding-right: 10px;
+}
+
+.mx_TermsDialog_link {
+    display: inline-block;
+    mask-image: url('$(res)/img/external-link.svg');
+    background-color: $accent-color;
+    width: 10px;
+    height: 10px;
+}

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -17,34 +17,38 @@ limitations under the License.
 // ICONS
 // ==========================================================
 
-.mx_UserSettingsDialog_settingsIcon:before {
+.mx_UserSettingsDialog_settingsIcon::before {
     mask-image: url('$(res)/img/feather-customised/settings.svg');
 }
 
-.mx_UserSettingsDialog_voiceIcon:before {
+.mx_UserSettingsDialog_voiceIcon::before {
     mask-image: url('$(res)/img/feather-customised/phone.svg');
 }
 
-.mx_UserSettingsDialog_bellIcon:before {
+.mx_UserSettingsDialog_bellIcon::before {
     mask-image: url('$(res)/img/feather-customised/notifications.svg');
 }
 
-.mx_UserSettingsDialog_preferencesIcon:before {
+.mx_UserSettingsDialog_preferencesIcon::before {
     mask-image: url('$(res)/img/feather-customised/sliders.svg');
 }
 
-.mx_UserSettingsDialog_securityIcon:before {
+.mx_UserSettingsDialog_securityIcon::before {
     mask-image: url('$(res)/img/feather-customised/lock.svg');
 }
 
-.mx_UserSettingsDialog_helpIcon:before {
+.mx_UserSettingsDialog_helpIcon::before {
     mask-image: url('$(res)/img/feather-customised/help-circle.svg');
 }
 
-.mx_UserSettingsDialog_labsIcon:before {
+.mx_UserSettingsDialog_labsIcon::before {
     mask-image: url('$(res)/img/feather-customised/flag.svg');
 }
 
-.mx_UserSettingsDialog_flairIcon:before {
+.mx_UserSettingsDialog_mjolnirIcon::before {
+    mask-image: url('$(res)/img/feather-customised/face.svg');
+}
+
+.mx_UserSettingsDialog_flairIcon::before {
     mask-image: url('$(res)/img/feather-customised/flair.svg');
 }

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

@@ -20,8 +20,8 @@ limitations under the License.
 }
 
 .mx_CreateKeyBackupDialog_primaryContainer {
-    /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
+    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
-    padding: 20px
+    padding: 20px;
 }
 
 .mx_CreateKeyBackupDialog_primaryContainer::after {

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

@@ -23,7 +23,7 @@ limitations under the License.
     padding-left: 45px;
     padding-bottom: 10px;
 
-    &:before {
+    &::before {
         mask: url("$(res)/img/e2e/lock-warning-filled.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;

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

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_RestoreKeyBackupDialog_primaryContainer {
-    /*FIXME: plinth colour in new theme(s). background-color: $accent-color;*/
+    /* FIXME: plinth colour in new theme(s). background-color: $accent-color; */
-    padding: 20px
+    padding: 20px;
 }
 
 .mx_RestoreKeyBackupDialog_passPhraseInput,

res/css/views/directory/_NetworkDropdown.scss

@@ -36,7 +36,7 @@ limitations under the License.
     position: absolute;
     right: 10px;
     top: 16px;
-    width: 0
+    width: 0;
 }
 
 .mx_NetworkDropdown_networkoption {

res/css/views/elements/_AccessibleButton.scss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AccessibleButton:focus {
-    outline: 0;
-}
-
 .mx_AccessibleButton {
     cursor: pointer;
 }
@@ -79,3 +75,22 @@ limitations under the License.
     color: $button-danger-disabled-fg-color;
     background-color: $button-danger-disabled-bg-color;
 }
+
+.mx_AccessibleButton_kind_link {
+    color: $button-link-fg-color;
+    background-color: $button-link-bg-color;
+}
+
+.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
+    opacity: 0.4;
+}
+
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
+    padding: 5px 12px;
+    color: $button-link-fg-color;
+    background-color: $button-link-bg-color;
+}
+
+.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {
+    opacity: 0.4;
+}

res/css/views/elements/_AddressSelector.scss

@@ -20,9 +20,8 @@ limitations under the License.
     width: 485px;
     max-height: 116px;
     overflow-y: auto;
-	border-radius: 3px;
+    border-radius: 3px;
-	background-color: $primary-bg-color;
+    border: solid 1px $accent-color;
-	border: solid 1px $accent-color;
     cursor: pointer;
 }
 

res/css/views/elements/_Dropdown.scss

@@ -51,13 +51,6 @@ limitations under the License.
     background: $primary-fg-color;
 }
 
-.mx_Dropdown_input > .mx_Dropdown_option {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-}
-
 .mx_Dropdown_option {
     height: 35px;
     line-height: 35px;
@@ -65,6 +58,13 @@ limitations under the License.
     padding-right: 8px;
 }
 
+.mx_Dropdown_input > .mx_Dropdown_option {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+}
+
 .mx_Dropdown_option div {
     overflow: hidden;
     text-overflow: ellipsis;

res/css/views/elements/_EditableItemList.scss

@@ -42,12 +42,6 @@ limitations under the License.
     margin-right: 5px;
 }
 
-.mx_EditableItemList_newItem .mx_Field input {
-    // Use 100% of the space available for the input, but don't let the 10px
-    // padding on either side of the input to push it out of alignment.
-    width: calc(100% - 20px);
-}
-
 .mx_EditableItemList_label {
     margin-bottom: 5px;
 }

res/css/views/elements/_ErrorBoundary.scss

@@ -0,0 +1,34 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ErrorBoundary {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_ErrorBoundary_body {
+    display: flex;
+    flex-direction: column;
+    max-width: 400px;
+    align-items: center;
+
+    .mx_AccessibleButton {
+        margin-top: 5px;
+    }
+}

res/css/views/elements/_EventListSummary.scss

@@ -14,28 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberEventListSummary {
+.mx_EventListSummary {
     position: relative;
 }
 
-.mx_TextualEvent.mx_MemberEventListSummary_summary {
+.mx_TextualEvent.mx_EventListSummary_summary {
     font-size: 14px;
     display: inline-flex;
 }
 
-.mx_MemberEventListSummary_avatars {
+.mx_EventListSummary_avatars {
     display: inline-block;
     margin-right: 8px;
     padding-top: 8px;
     line-height: 12px;
 }
 
-.mx_MemberEventListSummary_avatars .mx_BaseAvatar {
+.mx_EventListSummary_avatars .mx_BaseAvatar {
     margin-right: -4px;
     cursor: pointer;
 }
 
-.mx_MemberEventListSummary_toggle {
+.mx_EventListSummary_toggle {
     color: $accent-color;
     cursor: pointer;
     float: right;
@@ -43,29 +43,29 @@ limitations under the License.
     margin-top: 8px;
 }
 
-.mx_MemberEventListSummary_line {
+.mx_EventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
     line-height: 30px;
 }
 
 .mx_MatrixChat_useCompactLayout {
-    .mx_MemberEventListSummary {
+    .mx_EventListSummary {
         font-size: 13px;
         .mx_EventTile_line {
             line-height: 20px;
         }
     }
 
-    .mx_MemberEventListSummary_line {
+    .mx_EventListSummary_line {
         line-height: 22px;
     }
 
-    .mx_MemberEventListSummary_toggle {
+    .mx_EventListSummary_toggle {
         margin-top: 3px;
     }
 
-    .mx_TextualEvent.mx_MemberEventListSummary_summary {
+    .mx_TextualEvent.mx_EventListSummary_summary {
         font-size: 13px;
     }
 }

res/css/views/elements/_Field.scss

@@ -18,6 +18,8 @@ limitations under the License.
 
 .mx_Field {
     display: flex;
+    flex: 1;
+    min-width: 0;
     position: relative;
     margin: 1em 0;
     border-radius: 4px;
@@ -29,6 +31,10 @@ limitations under the License.
     border-right: 1px solid $input-border-color;
 }
 
+.mx_Field_postfix {
+    border-left: 1px solid $input-border-color;
+}
+
 .mx_Field input,
 .mx_Field select,
 .mx_Field textarea {
@@ -42,6 +48,8 @@ limitations under the License.
     padding: 8px 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
+    flex: 1;
+    min-width: 0;
 }
 
 .mx_Field select {
@@ -107,12 +115,12 @@ limitations under the License.
     max-width: calc(100% - 20px); // 100% of parent minus margin and padding
 }
 
+.mx_Field_labelAlwaysTopLeft label,
+.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
 .mx_Field textarea:focus + label,
-.mx_Field textarea:not(:placeholder-shown) + label,
+.mx_Field textarea:not(:placeholder-shown) + label {
-.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
-.mx_Field_labelAlwaysTopLeft label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,

res/css/views/elements/_FormButton.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_FormButton {
+    line-height: 16px;
+    padding: 5px 15px;
+    font-size: 12px;
+    height: min-content;
+
+    &:not(:last-child) {
+        margin-right: 8px;
+    }
+
+    &.mx_AccessibleButton_kind_primary {
+        color: $accent-color;
+        background-color: $accent-bg-color;
+    }
+
+    &.mx_AccessibleButton_kind_danger {
+        color: $notice-primary-color;
+        background-color: $notice-primary-bg-color;
+    }
+}

res/css/views/elements/_IconButton.scss

@@ -0,0 +1,55 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_IconButton {
+    width: 32px;
+    height: 32px;
+    border-radius: 100%;
+    background-color: $accent-bg-color;
+    // don't shrink or grow if in a flex container
+    flex: 0 0 auto;
+
+    &.mx_AccessibleButton_disabled {
+        background-color: none;
+
+        &::before {
+            background-color: lightgrey;
+        }
+    }
+
+    &:hover {
+        opacity: 90%;
+    }
+
+    &::before {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 55%;
+        background-color: $accent-color;
+    }
+
+    &.mx_IconButton_icon_check::before {
+        mask-image: url('$(res)/img/feather-customised/check.svg');
+    }
+
+    &.mx_IconButton_icon_edit::before {
+        mask-image: url('$(res)/img/feather-customised/edit.svg');
+    }
+}

res/css/views/elements/_ImageView.scss

@@ -128,8 +128,8 @@ limitations under the License.
 }
 
 .mx_ImageView_link {
-    color: $lightbox-fg-color ! important;
+    color: $lightbox-fg-color !important;
-    text-decoration: none ! important;
+    text-decoration: none !important;
 }
 
 .mx_ImageView_button {

res/css/views/elements/_InteractiveTooltip.scss

@@ -0,0 +1,91 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_InteractiveTooltip_wrapper {
+    position: fixed;
+    z-index: 5000;
+}
+
+.mx_InteractiveTooltip {
+    border-radius: 3px;
+    background-color: $interactive-tooltip-bg-color;
+    color: $interactive-tooltip-fg-color;
+    position: absolute;
+    font-size: 10px;
+    font-weight: 600;
+    padding: 6px;
+    z-index: 5001;
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_top {
+    top: 10px; // 8px chevron + 2px spacing
+}
+
+.mx_InteractiveTooltip_chevron_top {
+    position: absolute;
+    left: calc(50% - 8px);
+    top: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-bottom: 8px solid $interactive-tooltip-bg-color;
+    border-right: 8px solid transparent;
+}
+
+// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
+// by Sebastiano Guerriero (@guerriero_se)
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_top {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(135deg);
+        border-radius: 0 0 0 3px;
+        top: calc(-8px / 1.414); // sqrt(2) because of rotation
+    }
+}
+
+.mx_InteractiveTooltip.mx_InteractiveTooltip_withChevron_bottom {
+    bottom: 10px; // 8px chevron + 2px spacing
+}
+
+.mx_InteractiveTooltip_chevron_bottom {
+    position: absolute;
+    left: calc(50% - 8px);
+    bottom: -8px;
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-top: 8px solid $interactive-tooltip-bg-color;
+    border-right: 8px solid transparent;
+}
+
+// Adapted from https://codyhouse.co/blog/post/css-rounded-triangles-with-clip-path
+// by Sebastiano Guerriero (@guerriero_se)
+@supports (clip-path: polygon(0% 0%, 100% 100%, 0% 100%)) {
+    .mx_InteractiveTooltip_chevron_bottom {
+        height: 16px;
+        width: 16px;
+        background-color: inherit;
+        border: none;
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+        transform: rotate(-45deg);
+        border-radius: 0 0 0 3px;
+        bottom: calc(-8px / 1.414); // sqrt(2) because of rotation
+    }
+}

res/css/views/elements/_ManageIntegsButton.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_ManageIntegsButton_error {
     position: relative;
+    float: right;
     cursor: not-allowed;
 }
 
@@ -25,18 +26,6 @@ limitations under the License.
     top: -5px;
 }
 
-.mx_ManageIntegsButton_error {
-    float: right;
-}
-
-.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
-    display: none;
-}
-
-.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
-    display: inline;
-}
-
 .mx_ManageIntegsButton_errorPopup {
     position: absolute;
     top: 110%;
@@ -51,3 +40,11 @@ limitations under the License.
     text-align: center;
     z-index: 1000;
 }
+
+.mx_ManageIntegsButton_error .mx_ManageIntegsButton_errorPopup {
+    display: none;
+}
+
+.mx_ManageIntegsButton_error:hover .mx_ManageIntegsButton_errorPopup {
+    display: inline;
+}

res/css/views/elements/_PowerSelector.scss

@@ -20,6 +20,5 @@ limitations under the License.
 
 .mx_PowerSelector .mx_Field select,
 .mx_PowerSelector .mx_Field input {
-    width: 100%;
     box-sizing: border-box;
 }

res/css/views/elements/_RichText.scss

@@ -13,12 +13,6 @@
     padding-left: 5px;
 }
 
-.mx_EventTile_body .mx_UserPill,
-.mx_EventTile_body .mx_RoomPill,
-.mx_EventTile_body .mx_GroupPill {
-    cursor: pointer;
-}
-
 /* More specific to override `.markdown-body a` text-decoration */
 .mx_EventTile_content .markdown-body a.mx_Pill {
     text-decoration: none;
@@ -33,7 +27,7 @@
 }
 
 .mx_UserPill_selected {
-    background-color: $accent-color ! important;
+    background-color: $accent-color !important;
 }
 
 /* More specific to override `.markdown-body a` color */
@@ -64,6 +58,12 @@
     padding-right: 5px;
 }
 
+.mx_EventTile_body .mx_UserPill,
+.mx_EventTile_body .mx_RoomPill,
+.mx_EventTile_body .mx_GroupPill {
+    cursor: pointer;
+}
+
 .mx_UserPill .mx_BaseAvatar,
 .mx_RoomPill .mx_BaseAvatar,
 .mx_GroupPill .mx_BaseAvatar,
@@ -79,7 +79,7 @@
 
 .mx_Markdown_ITALIC {
     font-style: italic;
-/*
+    /*
     // interestingly, *not* using the explicit italic font
     // variant seems yield better results.
 
@@ -87,7 +87,7 @@
     // https://github.com/google/fonts/issues/1726
     transform: skewX(-14deg);
     display: inline-block;
-*/
+    */
 }
 
 .mx_Markdown_CODE {

res/css/views/elements/_RoomAliasField.scss

@@ -0,0 +1,56 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomAliasField {
+    // if parent is a flex container, this allows the
+    // width to be as wide as needed, and not 100%
+    flex: 0 1 auto;
+    display: flex;
+    align-items: stretch;
+    min-width: 0;
+    max-width: 100%;
+
+    input {
+        width: 150px;
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    input::placeholder {
+        color: $greyed-fg-color;
+        font-weight: normal;
+    }
+
+    .mx_Field_prefix, .mx_Field_postfix {
+        color: $greyed-fg-color;
+        border-left: none;
+        border-right: none;
+        font-weight: 600;
+        padding: 9px 10px;
+        flex: 0 0 auto;
+    }
+
+    .mx_Field_postfix {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        // this allows the domain name to show
+        // as long as it doesn't make the input shrink
+        // if it's too big, it shows an ellipsis
+        // 180: 28 for prefix, 152 for input
+        max-width: calc(100% - 180px);
+    }
+}

res/css/views/elements/_TextWithTooltip.scss

@@ -0,0 +1,19 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_TextWithTooltip_tooltip {
+    display: none;
+}

res/css/views/elements/_ToggleSwitch.scss

@@ -44,10 +44,10 @@ limitations under the License.
     top: 0;
 }
 
-.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
-    left: 2px;
-}
-
 .mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
     left: 23px; // 48px switch - 20px ball - 5px padding = 23px
 }
+
+.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
+    left: 2px;
+}

res/css/views/elements/_Tooltip.scss

@@ -36,8 +36,8 @@ limitations under the License.
     border-bottom: 7px solid transparent;
 }
 
-.mx_Tooltip_chevron:after {
+.mx_Tooltip_chevron::after {
-    content:'';
+    content: '';
     width: 0;
     height: 0;
     border-top: 6px solid transparent;
@@ -55,7 +55,7 @@ limitations under the License.
     border-radius: 4px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
-    z-index: 2000;
+    z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
     padding: 10px;
     pointer-events: none;
     line-height: 14px;
@@ -74,3 +74,19 @@ limitations under the License.
         animation: mx_fadeout 0.1s forwards;
     }
 }
+
+.mx_Tooltip_timeline {
+    box-shadow: none;
+    background-color: $tooltip-timeline-bg-color;
+    color: $tooltip-timeline-fg-color;
+    text-align: center;
+    border: none;
+    border-radius: 3px;
+    font-size: 14px;
+    line-height: 1.2;
+    padding: 6px 8px;
+
+    .mx_Tooltip_chevron::after {
+        border-right-color: $tooltip-timeline-bg-color;
+    }
+}

res/css/views/elements/_TooltipButton.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 New Vector Ltd.
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ToolTipButton {
+.mx_TooltipButton {
     display: inline-block;
     width: 11px;
     height: 11px;
@@ -33,17 +34,17 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_ToolTipButton:hover {
+.mx_TooltipButton:hover {
     opacity: 1.0;
 }
 
-.mx_ToolTipButton_container {
+.mx_TooltipButton_container {
     position: relative;
     top: -18px;
     left: 4px;
 }
 
-.mx_ToolTipButton_helpText {
+.mx_TooltipButton_helpText {
     width: 400px;
     text-align: start;
     line-height: 17px !important;

res/css/views/emojipicker/_EmojiPicker.scss

@@ -0,0 +1,229 @@
+/*
+Copyright 2019 Tulir Asokan <tulir@maunium.net>
+
+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_EmojiPicker {
+    width: 340px;
+    height: 450px;
+
+    border-radius: 4px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_EmojiPicker_body {
+    flex: 1;
+    overflow-y: scroll;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+.mx_EmojiPicker_header {
+    padding: 4px 8px 0;
+    border-bottom: 1px solid $message-action-bar-border-color;
+}
+
+.mx_EmojiPicker_anchor {
+    border: none;
+    padding: 8px 8px 6px;
+    border-bottom: 2px solid transparent;
+    background-color: transparent;
+    border-radius: 4px 4px 0 0;
+
+    width: 36px;
+    height: 38px;
+
+    &:not(:disabled) {
+        cursor: pointer;
+    }
+
+    &:not(:disabled):hover {
+        background-color: $focus-bg-color;
+        border-bottom: 2px solid $button-bg-color;
+    }
+}
+
+.mx_EmojiPicker_anchor::before {
+    background-color: $primary-fg-color;
+    content: '';
+    display: inline-block;
+    mask-size: 100%;
+    mask-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+}
+
+.mx_EmojiPicker_anchor:disabled::before {
+    background-color: $focus-bg-color;
+}
+
+.mx_EmojiPicker_anchor_activity::before { mask-image: url('$(res)/img/emojipicker/activity.svg'); }
+.mx_EmojiPicker_anchor_custom::before { mask-image: url('$(res)/img/emojipicker/custom.svg'); }
+.mx_EmojiPicker_anchor_flags::before { mask-image: url('$(res)/img/emojipicker/flags.svg'); }
+.mx_EmojiPicker_anchor_foods::before { mask-image: url('$(res)/img/emojipicker/foods.svg'); }
+.mx_EmojiPicker_anchor_nature::before { mask-image: url('$(res)/img/emojipicker/nature.svg'); }
+.mx_EmojiPicker_anchor_objects::before { mask-image: url('$(res)/img/emojipicker/objects.svg'); }
+.mx_EmojiPicker_anchor_people::before { mask-image: url('$(res)/img/emojipicker/people.svg'); }
+.mx_EmojiPicker_anchor_places::before { mask-image: url('$(res)/img/emojipicker/places.svg'); }
+.mx_EmojiPicker_anchor_recent::before { mask-image: url('$(res)/img/emojipicker/recent.svg'); }
+.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg'); }
+
+.mx_EmojiPicker_anchor_visible {
+    border-bottom: 2px solid $button-bg-color;
+}
+
+.mx_EmojiPicker_search {
+    margin: 8px;
+    border-radius: 4px;
+    border: 1px solid $input-border-color;
+    background-color: $primary-bg-color;
+    display: flex;
+
+    input {
+        flex: 1;
+        border: none;
+        padding: 8px 12px;
+        border-radius: 4px 0;
+    }
+
+    button {
+        border: none;
+        background-color: inherit;
+        margin: 0;
+        padding: 8px;
+        align-self: center;
+        width: 32px;
+        height: 32px;
+    }
+}
+
+.mx_EmojiPicker_search_clear {
+    cursor: pointer;
+}
+
+.mx_EmojiPicker_search_icon {
+    width: 16px;
+    margin: 8px;
+}
+
+.mx_EmojiPicker_search_icon:not(.mx_EmojiPicker_search_clear) {
+    pointer-events: none;
+}
+
+.mx_EmojiPicker_search_icon::after {
+    mask: url('$(res)/img/emojipicker/search.svg') no-repeat;
+    mask-size: 100%;
+    background-color: $primary-fg-color;
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+
+.mx_EmojiPicker_search_clear::after {
+    mask-image: url('$(res)/img/emojipicker/delete.svg');
+}
+
+.mx_EmojiPicker_category {
+    padding: 0 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mx_EmojiPicker_category_label {
+    width: 304px;
+}
+
+.mx_EmojiPicker_list {
+    width: 304px;
+    padding: 0;
+    margin: 0;
+}
+
+.mx_EmojiPicker_item_wrapper {
+    display: inline-block;
+    list-style: none;
+    width: 38px;
+    cursor: pointer;
+}
+
+.mx_EmojiPicker_item {
+    display: inline-block;
+    font-size: 20px;
+    padding: 5px;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    text-align: center;
+    border-radius: 4px;
+
+    &:hover {
+        background-color: $focus-bg-color;
+    }
+}
+
+.mx_EmojiPicker_item_selected {
+    color: rgba(0, 0, 0, .5);
+    border: 1px solid $input-valid-border-color;
+    padding: 4px;
+}
+
+.mx_EmojiPicker_category_label, .mx_EmojiPicker_preview_name {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+}
+
+.mx_EmojiPicker_footer {
+    border-top: 1px solid $message-action-bar-border-color;
+    height: 72px;
+
+    display: flex;
+    align-items: center;
+}
+
+.mx_EmojiPicker_preview_emoji {
+    font-size: 32px;
+    padding: 8px 16px;
+}
+
+.mx_EmojiPicker_preview_text {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_EmojiPicker_name {
+    text-transform: capitalize;
+}
+
+.mx_EmojiPicker_shortcode {
+    color: $light-fg-color;
+    font-size: 14px;
+
+    &::before, &::after {
+        content: ":";
+    }
+}
+
+.mx_EmojiPicker_quick {
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.mx_EmojiPicker_quick_header .mx_EmojiPicker_name {
+    margin-right: 4px;
+}

res/css/views/globals/_MatrixToolbar.scss

@@ -44,10 +44,9 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_MatrixToolbar_link
+.mx_MatrixToolbar_link {
-{
+    color: $accent-fg-color !important;
-    color: $accent-fg-color ! important;
+    text-decoration: underline !important;
-    text-decoration: underline ! important;
     cursor: pointer;
 }
 

res/css/views/messages/_CreateEvent.scss

@@ -37,6 +37,3 @@ limitations under the License.
 .mx_CreateEvent_header {
     font-weight: bold;
 }
-
-.mx_CreateEvent_link {
-}

res/css/views/messages/_DateSeparator.scss

@@ -30,7 +30,7 @@ limitations under the License.
     border-bottom: 1px solid $panel-divider-color;
 }
 
-.mx_DateSeparator > date {
+.mx_DateSeparator > div {
     margin: 0 25px;
     flex: 0 0 auto;
 }

res/css/views/messages/_MImageBody.scss

@@ -59,3 +59,42 @@ limitations under the License.
     color: $imagebody-giflabel-color;
     pointer-events: none;
 }
+
+.mx_HiddenImagePlaceholder {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+
+    // To center the text in the middle of the frame
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+
+    cursor: pointer;
+    background-color: $header-panel-bg-color;
+
+    .mx_HiddenImagePlaceholder_button {
+        color: $accent-color;
+
+        span.mx_HiddenImagePlaceholder_eye {
+            margin-right: 8px;
+
+            background-color: $accent-color;
+            mask-image: url('$(res)/img/feather-customised/eye.svg');
+            display: inline-block;
+            width: 18px;
+            height: 14px;
+        }
+
+        span:not(.mx_HiddenImagePlaceholder_eye) {
+            vertical-align: text-bottom;
+        }
+    }
+}
+
+.mx_EventTile:hover .mx_HiddenImagePlaceholder {
+    background-color: $primary-bg-color;
+}

res/css/views/messages/_MKeyVerificationRequest.scss

@@ -0,0 +1,77 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_KeyVerification {
+
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr) min-content;
+
+    &.mx_KeyVerification_icon::after {
+        grid-column: 1;
+        grid-row: 1 / 3;
+        width: 12px;
+        height: 16px;
+        content: "";
+        mask-image: url("$(res)/img/e2e/normal.svg");
+        mask-repeat: no-repeat;
+        mask-size: 100%;
+        margin-top: 4px;
+        background-color: $primary-fg-color;
+    }
+
+    &.mx_KeyVerification_icon_verified::after {
+        mask-image: url("$(res)/img/e2e/verified.svg");
+        background-color: $accent-color;
+    }
+
+    .mx_KeyVerification_title, .mx_KeyVerification_subtitle, .mx_KeyVerification_state {
+        overflow-wrap: break-word;
+    }
+
+    .mx_KeyVerification_title {
+        font-weight: 600;
+        font-size: 15px;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .mx_KeyVerification_subtitle {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_KeyVerification_state, .mx_KeyVerification_subtitle {
+        font-size: 12px;
+    }
+
+    .mx_KeyVerification_state, .mx_KeyVerification_buttons {
+        grid-column: 3;
+        grid-row: 1 / 3;
+    }
+
+    .mx_KeyVerification_buttons {
+        align-items: center;
+        display: flex;
+    }
+
+    .mx_KeyVerification_state {
+        width: 130px;
+        padding: 10px 20px;
+        margin: auto 0;
+        text-align: center;
+        color: $notice-secondary-color;
+    }
+}

res/css/views/messages/_MStickerBody.scss

@@ -22,3 +22,14 @@ limitations under the License.
     position: absolute;
     top: 50%;
 }
+
+.mx_MStickerBody_hidden {
+    max-width: 220px;
+    text-decoration: none;
+    text-align: center;
+
+    // To center the text in the middle of the frame
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

res/css/views/messages/_MessageActionBar.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,14 +24,33 @@ limitations under the License.
     line-height: 24px;
     border-radius: 4px;
     background: $message-action-bar-bg-color;
-    top: -13px;
+    top: -18px;
     right: 8px;
     user-select: none;
+    // Ensure the action bar appears above over things, like the read marker.
+    z-index: 1;
+
+    // Adds a previous event safe area so that you can't accidentally hover the
+    // previous event while trying to mouse into the action bar or from the
+    // react button to its tooltip.
+    &::before {
+        content: '';
+        position: absolute;
+        // tooltip safe mousing area + tooltip overhang +
+        // action bar + action bar offset from event
+        width: calc(10px + 48px + 100% + 8px);
+        // safe area + action bar
+        height: calc(20px + 100%);
+        top: -20px;
+        left: -58px;
+        z-index: -1;
+        cursor: initial;
+    }
 
     > * {
+        white-space: nowrap;
         display: inline-block;
         position: relative;
-        width: 27px;
         border: 1px solid $message-action-bar-border-color;
         margin-left: -1px;
 
@@ -53,6 +73,11 @@ limitations under the License.
     }
 }
 
+
+.mx_MessageActionBar_maskButton {
+    width: 27px;
+}
+
 .mx_MessageActionBar_maskButton::after {
     content: '';
     position: absolute;
@@ -65,10 +90,18 @@ limitations under the License.
     background-color: $message-action-bar-fg-color;
 }
 
+.mx_MessageActionBar_reactButton::after {
+    mask-image: url('$(res)/img/react.svg');
+}
+
 .mx_MessageActionBar_replyButton::after {
     mask-image: url('$(res)/img/reply.svg');
 }
 
+.mx_MessageActionBar_editButton::after {
+    mask-image: url('$(res)/img/edit.svg');
+}
+
 .mx_MessageActionBar_optionsButton::after {
     mask-image: url('$(res)/img/icon_context.svg');
 }

res/css/views/messages/_MessageTimestamp.scss

@@ -15,4 +15,6 @@ limitations under the License.
 */
 
 .mx_MessageTimestamp {
+    color: $event-timestamp-color;
+    font-size: 10px;
 }

res/css/views/messages/_MjolnirBody.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,12 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ReactionDimension {
+.mx_MjolnirBody {
-    width: 42px;
-    display: flex;
-    justify-content: space-evenly;
-}
-
-.mx_ReactionDimension_disabled {
     opacity: 0.4;
 }

res/css/views/messages/_ReactionsRow.scss

@@ -16,4 +16,19 @@ limitations under the License.
 
 .mx_ReactionsRow {
     margin: 6px 0;
+    color: $primary-fg-color;
+}
+
+.mx_ReactionsRow_showAll {
+    text-decoration: none;
+    font-size: 10px;
+    font-weight: 600;
+    margin-left: 6px;
+    vertical-align: top;
+
+    &:hover,
+    &:link,
+    &:visited {
+        color: $accent-color;
+    }
 }

res/css/views/messages/_ReactionsRowButton.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_ReactionsRowButton {
-    display: inline-block;
+    display: inline-flex;
     height: 20px;
     line-height: 21px;
     margin-right: 6px;
@@ -24,6 +24,7 @@ limitations under the License.
     border-radius: 10px;
     background-color: $reaction-row-button-bg-color;
     cursor: pointer;
+    user-select: none;
 
     &:hover {
         border-color: $reaction-row-button-hover-border-color;
@@ -34,3 +35,11 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 }
+
+.mx_ReactionsRowButton_content {
+    max-width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    padding-right: 4px;
+}

res/css/views/messages/_ReactionsRowButtonTooltip.scss

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

res/css/views/messages/_ViewSourceEvent.scss

@@ -0,0 +1,50 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EventTile_content.mx_ViewSourceEvent {
+    display: flex;
+    opacity: 0.6;
+    font-size: 12px;
+
+    pre, code {
+        flex: 1;
+    }
+
+    pre {
+        line-height: 1.2;
+        margin: 3.5px 0;
+    }
+
+    .mx_ViewSourceEvent_toggle {
+        width: 12px;
+        mask-repeat: no-repeat;
+        mask-position: 0 center;
+        mask-size: auto 12px;
+        visibility: hidden;
+        background-color: $accent-color;
+        mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
+    }
+
+    &.mx_ViewSourceEvent_expanded .mx_ViewSourceEvent_toggle {
+        mask-position: 0 bottom;
+        margin-bottom: 7px;
+        mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
+    }
+
+    &:hover .mx_ViewSourceEvent_toggle {
+        visibility: visible;
+    }
+}

res/css/views/right_panel/_UserInfo.scss

@@ -0,0 +1,244 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserInfo {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow-y: auto;
+    font-size: 12px;
+
+    .mx_UserInfo_cancel {
+        height: 16px;
+        width: 16px;
+        padding: 10px 0 10px 10px;
+        cursor: pointer;
+        mask-image: url('$(res)/img/minimise.svg');
+        mask-repeat: no-repeat;
+        mask-position: 16px center;
+        background-color: $rightpanel-button-color;
+        position: absolute;
+    }
+
+    h2 {
+        font-size: 18px;
+        font-weight: 600;
+        margin: 18px 0 0 0;
+    }
+
+    .mx_UserInfo_container {
+        padding: 0 16px 16px 16px;
+        border-bottom: 1px solid lightgray;
+    }
+
+    .mx_UserInfo_memberDetailsContainer {
+        padding-bottom: 0;
+    }
+
+    .mx_RoomTile_nameContainer {
+        width: 154px;
+    }
+
+    .mx_RoomTile_badge {
+        display: none;
+    }
+
+    .mx_RoomTile_name {
+        width: 160px;
+    }
+
+    .mx_UserInfo_avatar {
+        margin: 24px 32px 0 32px;
+        cursor: pointer;
+    }
+
+    .mx_UserInfo_avatar > div {
+        max-width: 30vh;
+        margin: 0 auto;
+    }
+
+    .mx_UserInfo_avatar > div > div {
+        /* use padding-top instead of height to make this element square,
+        as the % in padding is a % of the width (including margin,
+        that's why we had to put the margin to center on a parent div),
+        and not a % of the parent height. */
+        padding-top: 100%;
+        height: 0;
+        border-radius: 100%;
+        box-sizing: content-box;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+        cursor: zoom-in;
+    }
+
+    h3 {
+        text-transform: uppercase;
+        color: $notice-secondary-color;
+        font-weight: bold;
+        font-size: 12px;
+        margin: 4px 0;
+    }
+
+    p {
+        margin: 5px 0;
+    }
+
+    .mx_UserInfo_profile {
+        text-align: center;
+
+        h2 {
+            font-size: 18px;
+            line-height: 25px;
+            flex: 1;
+            overflow-x: auto;
+            max-height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .mx_E2EIcon {
+                margin: 5px;
+            }
+        }
+
+        .mx_UserInfo_profileStatus {
+            margin-top: 12px;
+        }
+    }
+
+    .mx_UserInfo_memberDetails .mx_UserInfo_profileField {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        margin: 6px 0;
+
+        .mx_IconButton, .mx_Spinner {
+            margin-left: 20px;
+            width: 16px;
+            height: 16px;
+
+            &::before {
+                mask-size: 80%;
+            }
+        }
+
+        .mx_UserInfo_roleDescription {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            // try to make it the same height as the dropdown
+            margin: 11px 0 12px 0;
+
+            .mx_IconButton {
+                margin-left: 6px;
+            }
+        }
+
+        .mx_Field {
+            margin: 0;
+        }
+    }
+
+    .mx_UserInfo_field {
+        cursor: pointer;
+        color: $accent-color;
+        line-height: 16px;
+        margin: 8px 0;
+
+        &.mx_UserInfo_destructive {
+            color: $warning-color;
+        }
+    }
+
+    .mx_UserInfo_statusMessage {
+        font-size: 11px;
+        opacity: 0.5;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: clip;
+    }
+
+    .mx_UserInfo_scrollContainer {
+        flex: 1 1 0;
+        padding-bottom: 16px;
+    }
+
+    .mx_UserInfo_scrollContainer .mx_UserInfo_container {
+        padding-top: 16px;
+        padding-bottom: 0;
+        border-bottom: none;
+
+        > :not(h3) {
+            margin-left: 8px;
+        }
+    }
+
+    .mx_UserInfo_devices {
+        .mx_UserInfo_device {
+            display: flex;
+            margin: 8px 0;
+
+
+            &.mx_UserInfo_device_verified {
+                .mx_UserInfo_device_trusted {
+                    color: $accent-color;
+                }
+            }
+            &.mx_UserInfo_device_unverified {
+                .mx_UserInfo_device_trusted {
+                    color: $warning-color;
+                }
+            }
+
+            .mx_UserInfo_device_name {
+                flex: 1;
+                margin-right: 5px;
+                word-break: break-word;
+            }
+        }
+
+        // both for icon in expand button and device item
+        .mx_E2EIcon {
+            // don't squeeze
+            flex: 0 0 auto;
+            margin: 2px 5px 0 0;
+            width: 12px;
+            height: 12px;
+        }
+
+        .mx_UserInfo_expand {
+            display: flex;
+            margin-top: 11px;
+            color: $accent-color;
+        }
+    }
+
+    .mx_UserInfo_verify {
+        display: block;
+        background-color: $accent-color;
+        color: $accent-fg-color;
+        border-radius: 4px;
+        padding: 7px 1.5em;
+        text-align: center;
+        margin: 16px 0;
+    }
+}

res/css/views/room_settings/_ColorSettings.scss

@@ -28,7 +28,7 @@ limitations under the License.
     position: absolute;
     left: 10px;
     top: 4px;
-    cursor: default ! important;
+    cursor: default !important;
 }
 
 .mx_ColorSettings_roomColorPrimary {

res/css/views/rooms/_AppsDrawer.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -42,7 +43,6 @@ $AppsDrawerBodyHeight: 273px;
 .mx_AddWidget_button {
     order: 2;
     cursor: pointer;
-    padding-right: 12px;
     padding: 0;
     margin: 5px auto 5px auto;
     color: $accent-color;
@@ -153,40 +153,12 @@ $AppsDrawerBodyHeight: 273px;
     background-color: $accent-color;
 }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
-    mask-image: url('$(res)/img/feather-customised/widget/refresh.svg');
-    mask-size: 100%;
-}
-
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_popout {
     mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
 }
 
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot {
+.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_menu {
-    mask-image: url('$(res)/img/feather-customised/widget/camera.svg');
+    mask-image: url('$(res)/img/icon_context.svg');
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
-    mask-image: url('$(res)/img/feather-customised/widget/edit.svg');
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
-    mask-image: url('$(res)/img/feather-customised/widget/bin.svg');
-    background-color: $warning-color;
-}
-
-.mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_cancel {
-    mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg');
-}
-
-/* delete ? */
-.mx_AppTileMenuBarWidget {
-    cursor: pointer;
-    width: 10px;
-    height: 10px;
-    padding: 1px;
-    transition-duration: 500ms;
-    border: 1px solid transparent;
 }
 
 .mx_AppTileMenuBarWidgetDelete {
@@ -198,7 +170,7 @@ $AppsDrawerBodyHeight: 273px;
     border-radius: 2px;
 }
 
-.mx_AppTileBody{
+.mx_AppTileBody {
     height: $AppsDrawerBodyHeight;
     width: 100%;
     overflow: hidden;
@@ -234,7 +206,7 @@ $AppsDrawerBodyHeight: 273px;
     background-color: $lightbox-bg-color;
     border: 1px solid rgba(0, 0, 0, 0);
     width: 200px;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
     border-radius: 3px;
     margin: 5px;
@@ -248,7 +220,7 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppIconTile:hover {
     border: 1px solid $accent-color;
-    box-shadow: 0 0 10px 5px rgba(200,200,200,0.5);
+    box-shadow: 0 0 10px 5px rgba(200, 200, 200, 0.5);
 }
 
 .mx_AppIconTile_content {
@@ -270,9 +242,8 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppIconTile_image {
     padding: 10px;
-    width: 75%;
+    max-width: 100px;
-    max-width:100px;
+    max-height: 100px;
-    max-height:100px;
     width: auto;
     height: auto;
 }
@@ -295,44 +266,61 @@ form.mx_Custom_Widget_Form div {
 
 .mx_AppPermissionWarning {
     text-align: center;
-    background-color: $primary-bg-color;
+    background-color: $widget-menu-bar-bg-color;
     display: flex;
     height: 100%;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    font-size: 16px;
 }
 
-.mx_AppPermissionWarningImage {
+.mx_AppPermissionWarning_row {
-    margin: 10px 0;
+    margin-bottom: 12px;
 }
 
-.mx_AppPermissionWarningImage img {
+.mx_AppPermissionWarning_smallText {
-    width: 100px;
+    font-size: 12px;
 }
 
-.mx_AppPermissionWarningText {
+.mx_AppPermissionWarning_bolder {
-    max-width: 400px;
+    font-weight: 600;
-    margin: 10px auto 10px auto;
-    color: $primary-fg-color;
 }
 
-.mx_AppPermissionWarningTextLabel {
+.mx_AppPermissionWarning h4 {
-    font-weight: bold;
+    margin: 0;
-    display: block;
+    padding: 0;
 }
 
-.mx_AppPermissionWarningTextURL {
+.mx_AppPermissionWarning_helpIcon {
-    color: $accent-color;
+    margin-top: 1px;
+    margin-right: 2px;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
 }
 
-.mx_AppPermissionButton {
+.mx_AppPermissionWarning_helpIcon::before {
-    border: none;
+    display: inline-block;
-    padding: 5px 20px;
+    background-color: $accent-color;
-    border-radius: 5px;
+    mask-repeat: no-repeat;
-    background-color: $button-bg-color;
+    mask-size: 12px;
-    color: $button-fg-color;
+    width: 12px;
-    cursor: pointer;
+    height: 12px;
+    mask-position: center;
+    content: '';
+    vertical-align: middle;
+    mask-image: url('$(res)/img/feather-customised/help-circle.svg');
+}
+
+.mx_AppPermissionWarning_tooltip {
+    @mixin mx_Tooltip_dark;
+
+    ul {
+        list-style-position: inside;
+        padding-left: 2px;
+        margin-left: 0;
+    }
 }
 
 .mx_AppLoading {
@@ -361,11 +349,11 @@ form.mx_Custom_Widget_Form div {
 }
 
 @keyframes mx_AppLoading_spinner_fadeIn_animation {
-    from { opacity: 0 }
+    from { opacity: 0; }
-    to { opacity: 1 }
+    to { opacity: 1; }
 }
 
 
 .mx_AppLoading iframe {
-  display: none;
+    display: none;
 }

res/css/views/rooms/_Autocomplete.scss

@@ -8,18 +8,13 @@
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;
-    overflow: auto
+    overflow: auto;
 }
 
 .mx_Autocomplete_ProviderSection {
     border-bottom: 1px solid $primary-hairline-color;
 }
 
-.mx_Autocomplete_Completion_container_pill {
-    margin: 12px;
-    display: flex;
-}
-
 /* a "block" completion takes up a whole line */
 .mx_Autocomplete_Completion_block {
     height: 34px;
@@ -32,7 +27,7 @@
 }
 
 .mx_Autocomplete_Completion_block * {
-     margin: 0 3px;
+    margin: 0 3px;
 }
 
 .mx_Autocomplete_Completion_pill {
@@ -50,11 +45,27 @@
     margin: 0 3px;
 }
 
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
+}
+
+.mx_Autocomplete_Completion_description {
+    color: gray;
+}
+
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
+}
+
 .mx_Autocomplete_Completion_container_truncate {
     .mx_Autocomplete_Completion_title,
     .mx_Autocomplete_Completion_subtitle,
     .mx_Autocomplete_Completion_description {
-        /* Ellipsis for long names/subtitles/descriptions*/
+        /* Ellipsis for long names/subtitles/descriptions */
         max-width: 150px;
         white-space: nowrap;
         overflow: hidden;
@@ -62,13 +73,6 @@
     }
 }
 
-/* container for pill-style completions */
-.mx_Autocomplete_Completion_container_pill {
-    margin: 12px;
-    display: flex;
-    flex-flow: wrap;
-}
-
 .mx_Autocomplete_Completion.selected,
 .mx_Autocomplete_Completion:hover {
     background: $selected-color;
@@ -81,14 +85,3 @@
     font-weight: 400;
     opacity: 0.4;
 }
-
-/* styling for common completion elements */
-.mx_Autocomplete_Completion_subtitle {
-    font-style: italic;
-    flex: 1;
-}
-
-.mx_Autocomplete_Completion_description {
-    color: gray;
-}
-

res/css/views/rooms/_BasicMessageComposer.scss

@@ -0,0 +1,76 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BasicMessageComposer {
+    position: relative;
+
+    .mx_BasicMessageComposer_inputEmpty > :first-child::before {
+        content: var(--placeholder);
+        opacity: 0.333;
+        width: 0;
+        height: 0;
+        overflow: visible;
+        display: inline-block;
+        pointer-events: none;
+        white-space: nowrap;
+    }
+
+    @keyframes visualbell {
+        from { background-color: $visual-bell-bg-color; }
+        to { background-color: $primary-bg-color; }
+    }
+
+    &.mx_BasicMessageComposer_input_error {
+        animation: 0.2s visualbell;
+    }
+
+    .mx_BasicMessageComposer_input {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+        overflow-x: hidden;
+
+        span.mx_UserPill, span.mx_RoomPill {
+            padding-left: 21px;
+            position: relative;
+
+            // avatar psuedo element
+            &::before {
+                position: absolute;
+                left: 2px;
+                top: 2px;
+                content: var(--avatar-letter);
+                width: 16px;
+                height: 16px;
+                background: var(--avatar-background), $avatar-bg-color;
+                color: $avatar-initial-color;
+                background-repeat: no-repeat;
+                background-size: 16px;
+                border-radius: 8px;
+                text-align: center;
+                font-weight: normal;
+                line-height: 16px;
+                font-size: 10.4px;
+            }
+        }
+    }
+
+    .mx_BasicMessageComposer_AutoCompleteWrapper {
+        position: relative;
+        height: 0;
+    }
+}

res/css/views/rooms/_E2EIcon.scss

@@ -15,19 +15,29 @@ limitations under the License.
 */
 
 .mx_E2EIcon {
-    width: 25px;
+    width: 16px;
-    height: 25px;
+    height: 16px;
-    mask-repeat: no-repeat;
-    mask-position: center 0;
     margin: 0 9px;
+    position: relative;
+    display: block;
 }
 
-.mx_E2EIcon_verified {
+.mx_E2EIcon_verified::after, .mx_E2EIcon_warning::after {
-    mask-image: url('$(res)/img/e2e/lock-verified.svg');
+    content: "";
-    background-color: $accent-color;
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
-.mx_E2EIcon_warning {
+.mx_E2EIcon_verified::after {
-    mask-image: url('$(res)/img/e2e/lock-warning.svg');
+    background-image: url('$(res)/img/e2e/verified.svg');
-    background-color: $warning-color;
+}
+
+.mx_E2EIcon_warning::after {
+    background-image: url('$(res)/img/e2e/warning.svg');
 }

res/css/views/rooms/_EditMessageComposer.scss

@@ -0,0 +1,63 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EditMessageComposer {
+
+    padding: 3px;
+    // this is to try not make the text move but still have some
+    // padding around and in the editor.
+    // Actual values from fiddling around in inspector
+    margin: -7px -10px -5px -10px;
+    overflow: visible !important;   // override mx_EventTile_content
+
+
+    .mx_BasicMessageComposer_input {
+        border-radius: 4px;
+        border: solid 1px $primary-hairline-color;
+        background-color: $primary-bg-color;
+        max-height: 200px;
+        padding: 3px 6px;
+
+        &:focus {
+            border-color: $accent-color-50pct;
+        }
+    }
+
+    .mx_EditMessageComposer_buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        padding: 5px;
+        position: absolute;
+        left: 0;
+        background: $header-panel-bg-color;
+        z-index: 100;
+        right: 0;
+        margin: 0 -110px 0 0;
+        padding-right: 147px;
+
+        .mx_AccessibleButton {
+            margin-left: 5px;
+            padding: 5px 40px;
+        }
+    }
+}
+
+.mx_EventTile_last .mx_EditMessageComposer_buttons {
+    position: static;
+    margin-right: -147px;
+}

res/css/views/rooms/_EntityTile.scss

@@ -85,10 +85,6 @@ limitations under the License.
     overflow: hidden;
 }
 
-.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
-    font-size: 13px;
-}
-
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
     color: $primary-fg-color;
@@ -102,23 +98,24 @@ limitations under the License.
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
 .mx_EntityTile_unavailable .mx_EntityTile_name,
 .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name {
-{
     opacity: 0.5;
 }
 
 .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name {
-{
     opacity: 0.25;
 }
 
 .mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name
+.mx_EntityTile_unknown .mx_EntityTile_name {
-{
     opacity: 0.25;
 }
 
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
+    font-size: 13px;
+}
+
 .mx_EntityTile_subtext {
     font-size: 11px;
     opacity: 0.5;

res/css/views/rooms/_EventTile.scss

@@ -22,6 +22,15 @@ limitations under the License.
     position: relative;
 }
 
+.mx_EventTile_bubble {
+    background-color: $dark-panel-bg-color;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px auto;
+    max-width: 75%;
+    box-sizing: border-box;
+}
+
 .mx_EventTile.mx_EventTile_info {
     padding-top: 0px;
 }
@@ -40,20 +49,33 @@ limitations under the License.
 }
 
 .mx_EventTile_continuation {
-    padding-top: 0px ! important;
+    padding-top: 0px !important;
+
+    &.mx_EventTile_isEditing {
+        padding-top: 5px !important;
+        margin-top: -5px;
+    }
+}
+
+.mx_EventTile_isEditing {
+    background-color: $header-panel-bg-color;
 }
 
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
     font-size: 14px;
     display: inline-block; /* anti-zalgo, with overflow hidden */
-    overflow-y: hidden;
+    overflow: hidden;
     cursor: pointer;
     padding-left: 65px; /* left gutter */
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
     line-height: 17px;
+    /* the next three lines, along with overflow hidden, truncate long display names */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 65px);
 }
 
 .mx_EventTile .mx_SenderProfile .mx_Flair {
@@ -72,12 +94,14 @@ limitations under the License.
     }
 }
 
+.mx_EventTile_isEditing .mx_MessageTimestamp {
+    visibility: hidden !important;
+}
+
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
     visibility: hidden;
     white-space: nowrap;
-    color: $event-timestamp-color;
-    font-size: 10px;
     left: 0px;
     width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
@@ -97,6 +121,21 @@ limitations under the License.
     line-height: 22px;
 }
 
+.mx_EventTile_bubbleContainer {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+
+    .mx_EventTile_line {
+        margin-right: 0px;
+        grid-column: 1 / 3;
+        padding: 0;
+    }
+
+    .mx_EventTile_msgOption {
+        grid-column: 2;
+    }
+}
+
 .mx_EventTile_reply {
     margin-right: 10px;
 }
@@ -107,8 +146,31 @@ limitations under the License.
 
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px ! important;
+    font-size: 48px !important;
-    line-height: 48px ! important;
+    line-height: 57px !important;
+}
+
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+    visibility: visible;
+}
+
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+    left: 3px;
+    width: auto;
+}
+
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile_last > div > a > .mx_MessageTimestamp,
+.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
+.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
+    visibility: visible;
+}
+
+.mx_EventTile:hover .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar,
+.mx_EventTile.focus-visible:focus-within .mx_MessageActionBar {
+    visibility: visible;
 }
 
 /* this is used for the tile for the event which is selected via the URL.
@@ -120,9 +182,22 @@ limitations under the License.
     background-color: $event-selected-color;
 }
 
+.mx_EventTile_highlight,
+.mx_EventTile_highlight .markdown-body {
+    color: $event-highlight-fg-color;
+
+    .mx_EventTile_line {
+        background-color: $event-highlight-bg-color;
+    }
+}
+
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 78px;
+}
+
 .mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line,
-{
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_line {
     background-color: $event-selected-color;
 }
 
@@ -141,7 +216,7 @@ limitations under the License.
 }
 
 .mx_EventTile_encrypting {
-    color: $event-encrypting-color ! important;
+    color: $event-encrypting-color !important;
 }
 
 .mx_EventTile_sending {
@@ -149,8 +224,7 @@ limitations under the License.
 }
 
 .mx_EventTile_sending .mx_UserPill,
-.mx_EventTile_sending .mx_RoomPill,
+.mx_EventTile_sending .mx_RoomPill {
-.mx_EventTile_sending .mx_emojione {
     opacity: 0.5;
 }
 
@@ -160,25 +234,30 @@ limitations under the License.
 
 .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
 .mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
+    --lozenge-color: $event-redacted-fg-color;
+    --lozenge-border-color: $event-redacted-border-color;
     display: block;
-    width: 100%;
     height: 22px;
     width: 250px;
     border-radius: 11px;
-    background: repeating-linear-gradient(
+    background:
-        -45deg,
+        repeating-linear-gradient(
-        $event-redacted-fg-color,
+            -45deg,
-        $event-redacted-fg-color 3px,
+            var(--lozenge-color),
-        transparent 3px,
+            var(--lozenge-color) 3px,
-        transparent 6px
+            transparent 3px,
-    );
+            transparent 6px
-    box-shadow: 0px 0px 3px $event-redacted-border-color inset;
+        );
+    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
 }
 
-.mx_EventTile_highlight,
+.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
-.mx_EventTile_highlight .markdown-body
+    opacity: 0.4;
- {
+}
-    color: $warning-color;
+
+div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
+    --lozenge-color: $event-notsent-color;
+    --lozenge-border-color: $event-notsent-color;
 }
 
 .mx_EventTile_contextual {
@@ -203,27 +282,6 @@ limitations under the License.
     text-decoration: none;
 }
 
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
-    visibility: visible;
-}
-
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
-    visibility: visible;
-}
-
-.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
-    left: 3px;
-    width: auto;
-}
-
-.mx_EventTile:hover .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
-    visibility: visible;
-}
-
 .mx_EventTile_readAvatars {
     position: relative;
     display: inline-block;
@@ -231,6 +289,7 @@ limitations under the License.
     height: 14px;
     top: 29px;
     user-select: none;
+    z-index: 1;
 }
 
 .mx_EventTile_continuation .mx_EventTile_readAvatars,
@@ -268,9 +327,23 @@ limitations under the License.
     overflow-y: hidden;
 }
 
-/* End to end encryption stuff */
+/* Spoiler stuff */
-.mx_EventTile:hover .mx_EventTile_e2eIcon {
+.mx_EventTile_spoiler {
-    opacity: 1;
+    cursor: pointer;
+}
+
+.mx_EventTile_spoiler_reason {
+    color: $event-timestamp-color;
+    font-size: 11px;
+}
+
+.mx_EventTile_spoiler_content {
+    filter: blur(5px) saturate(0.1) sepia(1);
+    transition-duration: 0.5s;
+}
+
+.mx_EventTile_spoiler.visible > .mx_EventTile_spoiler_content {
+    filter: none;
 }
 
 .mx_EventTile_e2eIcon {
@@ -344,17 +417,22 @@ limitations under the License.
     padding-left: 60px;
 }
 
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: $e2e-verified-color 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: $e2e-unverified-color 5px solid;
+}
+
 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
     padding-left: 78px;
 }
 
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+/* End to end encryption stuff */
-    border-left: $e2e-verified-color 5px solid;
+.mx_EventTile:hover .mx_EventTile_e2eIcon {
-}
+    opacity: 1;
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color 5px solid;
 }
 
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@@ -364,12 +442,6 @@ limitations under the License.
     width: auto;
 }
 
-/*
-.mx_EventTile_verified .mx_EventTile_e2eIcon {
-    display: none;
-}
-*/
-
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
@@ -377,36 +449,52 @@ limitations under the License.
     left: 41px;
 }
 
+.mx_EventTile_content .mx_EventTile_edited {
+    user-select: none;
+    font-size: 12px;
+    color: $roomtopic-color;
+    display: inline-block;
+    margin-left: 9px;
+    cursor: pointer;
+}
+
 /* Various markdown overrides */
 
+.mx_EventTile_body pre {
+    border: 1px solid transparent;
+}
+
 .mx_EventTile_content .markdown-body {
-    font-family: inherit ! important;
+    font-family: inherit !important;
-    white-space: normal ! important;
+    white-space: normal !important;
-    line-height: inherit ! important;
+    line-height: inherit !important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
     font-size: 14px;
-}
 
-/* have to use overlay rather than auto otherwise Linux and Windows
-   Chrome gets very confused about vertical spacing:
-   https://github.com/vector-im/vector-web/issues/754
-*/
-.mx_EventTile_content .markdown-body pre {
-    overflow-x: overlay;
-    overflow-y: visible;
-    max-height: 30vh;
-}
-
-.mx_EventTile_content .markdown-body code {
-    // deliberate constants as we're behind an invert filter
-    background-color: #f8f8f8;
-}
-
-.mx_EventTile_content .markdown-body {
     pre, code {
+        font-family: $monospace-font-family !important;
         // deliberate constants as we're behind an invert filter
         color: #333;
     }
+
+    pre {
+        // have to use overlay rather than auto otherwise Linux and Windows
+        // Chrome gets very confused about vertical spacing:
+        // https://github.com/vector-im/vector-web/issues/754
+        overflow-x: overlay;
+        overflow-y: visible;
+        max-height: 30vh;
+    }
+
+    code {
+        // deliberate constants as we're behind an invert filter
+        background-color: #f8f8f8;
+    }
+}
+
+.mx_EventTile:hover .mx_EventTile_body pre,
+.mx_EventTile.focus-visible:focus-within .mx_EventTile_body pre {
+    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }
 
 .mx_EventTile_pre_container {
@@ -427,17 +515,8 @@ limitations under the License.
     background-image: url($copy-button-url);
 }
 
-.mx_EventTile_body pre {
+.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
-    border: 1px solid transparent;
+.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
-}
-
-.mx_EventTile:hover .mx_EventTile_body pre
-{
-    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
-}
-
-.mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton
-{
     visibility: visible;
 }
 
@@ -446,19 +525,17 @@ limitations under the License.
 .mx_EventTile_content .markdown-body h3,
 .mx_EventTile_content .markdown-body h4,
 .mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6
+.mx_EventTile_content .markdown-body h6 {
-{
+    font-family: inherit !important;
-    font-family: inherit ! important;
     color: inherit;
 }
 
 
 /* Make h1 and h2 the same size as h3. */
 .mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2
+.mx_EventTile_content .markdown-body h2 {
-{
     font-size: 1.5em;
-    border-bottom: none ! important; // override GFM
+    border-bottom: none !important; // override GFM
 }
 
 .mx_EventTile_content .markdown-body a {
@@ -467,7 +544,7 @@ limitations under the License.
 }
 
 .mx_EventTile_content .markdown-body .hljs {
-    display: inline ! important;
+    display: inline !important;
 }
 
 /*
@@ -556,8 +633,8 @@ limitations under the License.
     }
 
     .mx_EventTile_content .markdown-body {
-      p, ul, ol, dl, blockquote, pre, table {
+        p, ul, ol, dl, blockquote, pre, table {
-        margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
-      }
+        }
     }
 }

res/css/views/rooms/_JumpToBottomButton.scss

@@ -55,7 +55,7 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_JumpToBottomButton_scrollDown:before {
+.mx_JumpToBottomButton_scrollDown::before {
     content: "";
     position: absolute;
     top: 0;