Merge branch 'develop' into matthew/low_bandwidth

.babelrc

@@ -1,4 +1,21 @@
 {
-  "presets": ["react", "es2015", "es2016"],
+    "presets": [
-  "plugins": ["transform-class-properties", "transform-object-rest-spread", "transform-async-to-bluebird", "transform-runtime", "add-module-exports", "syntax-dynamic-import"]
+        "react",
+        "es2015",
+        "es2016"
+    ],
+    "plugins": [
+        [
+            "transform-builtin-extend",
+            {
+                "globals": ["Error"]
+            }
+        ],
+        "transform-class-properties",
+        "transform-object-rest-spread",
+        "transform-async-to-bluebird",
+        "transform-runtime",
+        "add-module-exports",
+        "syntax-dynamic-import"
+    ]
 }

.buildkite/pipeline.yaml

@@ -0,0 +1,91 @@
+steps:
+  - label: ":eslint: Lint"
+    command:
+      - "yarn install"
+      - "yarn lintwithexclusions"
+      - "yarn stylelint"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:10"
+
+  - label: ":chains: End-to-End Tests"
+    agents:
+      # We use a medium sized instance instead of the normal small ones because
+      # e2e tests otherwise take +-8min
+      queue: "medium"
+    command:
+      # 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"
+      - "./scripts/ci/end-to-end-tests.sh"
+    plugins:
+      - docker#v3.0.1:
+          image: "matrixdotorg/riotweb-ci-e2etests-env:latest"
+          propagate-environment: true
+
+  - label: ":karma: Tests"
+    agents:
+      # We use a medium sized instance instead of the normal small ones because
+      # webpack loves to gorge itself on resources.
+      queue: "medium"
+    command:
+      # Install chrome
+      - "echo '--- Installing Chrome'"
+      - "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
+      - "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
+      - "apt-get update"
+      - "apt-get install -y google-chrome-stable"
+      # Run tests
+      # TODO: Remove hacky chmod for BuildKite
+      - "chmod +x ./scripts/ci/*.sh"
+      - "chmod +x ./scripts/*"
+      - "echo '--- Installing Dependencies'"
+      - "./scripts/ci/install-deps.sh"
+      - "echo '+++ Running Tests'"
+      - "./scripts/ci/unit-tests.sh"
+    env:
+      CHROME_BIN: "/usr/bin/google-chrome-stable"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:10"
+          propagate-environment: true
+
+  - label: "🔧 Riot Tests"
+    agents:
+      # We use a medium sized instance instead of the normal small ones because
+      # webpack loves to gorge itself on resources.
+      queue: "medium"
+    command:
+      # Install chrome
+      - "echo '--- Installing Chrome'"
+      - "wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -"
+      - "sh -c 'echo \"deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main\" >> /etc/apt/sources.list.d/google.list'"
+      - "apt-get update"
+      - "apt-get install -y google-chrome-stable"
+      # Run tests
+      # TODO: Remove hacky chmod for BuildKite
+      - "chmod +x ./scripts/ci/*.sh"
+      - "chmod +x ./scripts/*"
+      - "echo '--- Installing Dependencies'"
+      - "./scripts/ci/install-deps.sh"
+      - "echo '+++ Running Tests'"
+      - "./scripts/ci/riot-unit-tests.sh"
+    env:
+      CHROME_BIN: "/usr/bin/google-chrome-stable"
+    plugins:
+      - docker#v3.0.1:
+          image: "node:10"
+          propagate-environment: true
+
+  - wait
+ 
+  - label: "🐴 Trigger riot-web"
+    trigger: "riot-web"
+    branches: "develop"
+    build:
+        branch: "develop"
+        message: "[react-sdk] ${BUILDKITE_MESSAGE}"
+    async: true

.eslintignore.errorfiles

@@ -4,13 +4,11 @@ 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
 src/components/structures/ScrollPanel.js
 src/components/structures/SearchBox.js
-src/components/structures/TimelinePanel.js
 src/components/structures/UploadBar.js
 src/components/views/avatars/BaseAvatar.js
 src/components/views/avatars/MemberAvatar.js
@@ -18,7 +16,6 @@ src/components/views/create_room/RoomAlias.js
 src/components/views/dialogs/DeactivateAccountDialog.js
 src/components/views/dialogs/SetPasswordDialog.js
 src/components/views/dialogs/UnknownDeviceDialog.js
-src/components/views/directory/NetworkDropdown.js
 src/components/views/elements/AddressSelector.js
 src/components/views/elements/DirectorySearchBox.js
 src/components/views/elements/ImageView.js
@@ -31,7 +28,6 @@ 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/AliasSettings.js
 src/components/views/room_settings/ColorSettings.js
 src/components/views/rooms/Autocomplete.js
 src/components/views/rooms/AuxPanel.js
@@ -44,19 +40,16 @@ 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/RoomSettings.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/UserTile.js
-src/components/views/settings/AddPhoneNumber.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/ContentMessages.js
 src/GroupAddressPicker.js
 src/HtmlUtils.js
 src/ImageUtils.js
@@ -64,7 +57,6 @@ src/languageHandler.js
 src/linkify-matrix.js
 src/Markdown.js
 src/MatrixClientPeg.js
-src/Modal.js
 src/notifications/ContentRules.js
 src/notifications/PushRuleVectorState.js
 src/notifications/VectorPushRulesDefinitions.js

.eslintrc.js

@@ -15,6 +15,9 @@ module.exports = {
       "flowtype",
       "babel"
     ],
+    globals: {
+        LANGUAGES_FILE: "readonly",
+    },
     env: {
         es6: true,
     },
@@ -91,13 +94,13 @@ module.exports = {
             // to JSX.
             ignorePattern: '^\\s*<',
             ignoreComments: true,
+            ignoreRegExpLiterals: true,
             code: 120,
         }],
         "valid-jsdoc": ["warn"],
         "new-cap": ["warn"],
         "key-spacing": ["warn"],
         "prefer-const": ["warn"],
-        "arrow-parens": "off",
 
         // crashes currently: https://github.com/eslint/eslint/issues/6274
         "generator-star-spacing": "off",

.gitignore

@@ -1,19 +1,15 @@
-npm-debug.log
+/.npmrc
+/*.log
+package-lock.json
 
 /node_modules
 /lib
 
-# version file and tarball created by 'npm pack'
+# version file and tarball created by `npm pack` / `yarn pack`
 /git-revision.txt
 /matrix-react-sdk-*.tgz
 
-# test reports created by karma
-/karma-reports
-
 /.idea
 /src/component-index.js
 
 .DS_Store
-
-# https://github.com/vector-im/riot-web/issues/7083
-package-lock.json

.stylelintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4,
+        "comment-empty-line-before": null,
+        "declaration-empty-line-before": null,
+        "length-zero-no-unit": null,
+        "rule-empty-line-before": null,
+        "color-hex-length": null,
+        "max-empty-lines": null,
+        "number-no-trailing-zeros": null,
+        "number-leading-zero": null,
+        "selector-list-comma-newline-after": null,
+    }
+}

.travis.yml

@@ -1,35 +0,0 @@
-# we need trusty for the chrome addon
-dist: trusty
-
-# we don't need sudo, so can run in a container, which makes startup much
-# quicker.
-#
-# unfortunately we do temporarily require sudo as a workaround for
-# https://github.com/travis-ci/travis-ci/issues/8836
-sudo: required
-
-language: node_js
-node_js:
-    - node # Latest stable version of nodejs.
-addons:
-    chrome: stable
-install:
-    - ./scripts/travis/install-deps.sh
-matrix:
-    include:
-        - name: Linting Checks
-          script:
-            # run the linter, but exclude any files known to have errors or warnings.
-            - npm run lintwithexclusions
-        # - name: End-to-End Tests
-        #   if: branch = develop
-        #   install:
-        #     - sudo apt-get install build-essential python2.7-dev libffi-dev python-pip python-setuptools sqlite3 libssl-dev python-virtualenv libjpeg-dev libxslt1-dev
-        #   script:
-        #     - ./scripts/travis/end-to-end-tests.sh
-        - name: Unit Tests
-          script:
-            - ./scripts/travis/unit-tests.sh
-        - name: Riot-web Unit Tests
-          script:
-            - ./scripts/travis/riot-unit-tests.sh

README.md

@@ -25,7 +25,6 @@ Developer Guide
 
 Platform Targets:
  * Chrome, Firefox and Safari.
- * Edge should also work, but we're not testing it proactively.
  * WebRTC features (VoIP and Video calling) are only available in Chrome & Firefox.
  * Mobile Web is not currently a target platform - instead please use the native
    iOS (https://github.com/matrix-org/matrix-ios-kit) and Android
@@ -66,7 +65,7 @@ practices that anyone working with the SDK needs to be be aware of and uphold:
     component is a view or a structure, and then a broad functional grouping
     (e.g. 'rooms' here)
 
-  * After creating a new component you must run `npm run reskindex` to regenerate
+  * After creating a new component you must run `yarn reskindex` to regenerate
     the `component-index.js` for the SDK (used in future for skinning)
 
   * The view's CSS file MUST have the same name (e.g. view/rooms/MessageTile.css).
@@ -131,26 +130,35 @@ for now.
 Development
 ===========
 
-Ensure you have the latest stable Node JS runtime installed (v8.x is the best choice). Then check out
+Ensure you have the latest LTS version of Node.js installed.
-the code and pull in dependencies:
 
-```bash
+Using `yarn` instead of `npm` is recommended. Please see the Yarn [install
-git clone https://github.com/matrix-org/matrix-react-sdk.git
+guide](https://yarnpkg.com/docs/install/) if you do not have it already.
-cd matrix-react-sdk
-git checkout develop
-npm install
-```
 
 `matrix-react-sdk` depends on `matrix-js-sdk`. To make use of changes in the
 latter and to ensure tests run against the develop branch of `matrix-js-sdk`,
-you should run the following which will sync changes from the JS sdk here.
+you should set up `matrix-js-sdk`:
 
 ```bash
-npm link ../matrix-js-sdk
+git clone https://github.com/matrix-org/matrix-js-sdk
+cd matrix-js-sdk
+git checkout develop
+yarn link
+yarn install
 ```
 
-Command assumes a checked out and installed `matrix-js-sdk` folder in parent
+Then check out `matrix-react-sdk` and pull in dependencies:
-folder.
+
+```bash
+git clone https://github.com/matrix-org/matrix-react-sdk
+cd matrix-react-sdk
+git checkout develop
+yarn link matrix-js-sdk
+yarn install
+```
+
+See the [help for `yarn link`](https://yarnpkg.com/docs/cli/link) for more
+details about this.
 
 Running tests
 =============
@@ -158,5 +166,5 @@ Running tests
 Ensure you've followed the above development instructions and then:
 
 ```bash
-npm run test
+yarn test
 ```

docs/settings.md

@@ -1,11 +1,15 @@
 # Settings Reference
 
-This document serves as developer documentation for using "Granular Settings". Granular Settings allow users to specify different values for a setting at particular levels of interest. For example, a user may say that in a particular room they want URL previews off, but in all other rooms they want them enabled. The `SettingsStore` helps mask the complexity of dealing with the different levels and exposes easy to use getters and setters.
+This document serves as developer documentation for using "Granular Settings". Granular Settings allow users to specify 
+different values for a setting at particular levels of interest. For example, a user may say that in a particular room 
+they want URL previews off, but in all other rooms they want them enabled. The `SettingsStore` helps mask the complexity 
+of dealing with the different levels and exposes easy to use getters and setters.
 
 
 ## Levels
 
-Granular Settings rely on a series of known levels in order to use the correct value for the scenario. These levels, in order of prioirty, are:
+Granular Settings rely on a series of known levels in order to use the correct value for the scenario. These levels, in 
+order of prioirty, are:
 * `device` - The current user's device
 * `room-device` - The current user's device, but only when in a specific room
 * `room-account` - The current user's account, but only when in a specific room
@@ -14,12 +18,14 @@ Granular Settings rely on a series of known levels in order to use the correct v
 * `config` - Values are defined by `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 that room administrators cannot force account-only settings upon participants.
+Individual settings may control which levels are appropriate for them as part of the defaults. This is often to ensure 
+that room administrators cannot force account-only settings upon participants.
 
 
 ## Settings
 
-Settings are the different options a user may set or experience in the application. These are pre-defined in `src/settings/Settings.js` under the `SETTINGS` constant and have the following minimum requirements:
+Settings are the different options a user may set or experience in the application. These are pre-defined in 
+`src/settings/Settings.js` under the `SETTINGS` constant and have the following minimum requirements:
 ```
 // The ID is used to reference the setting throughout the application. This must be unique.
 "theSettingId": {
@@ -47,13 +53,21 @@ Settings are the different options a user may set or experience in the applicati
 
 ### Getting values for a setting
 
-After importing `SettingsStore`, simply make a call to `SettingsStore.getValue`. The `roomId` parameter should always be supplied where possible, even if the setting does not have a per-room level value. This is to ensure that the value returned is best represented in the room, particularly if the setting ever gets a per-room level in the future.
+After importing `SettingsStore`, simply make a call to `SettingsStore.getValue`. The `roomId` parameter should always 
+be supplied where possible, even if the setting does not have a per-room level value. This is to ensure that the value 
+returned is best represented in the room, particularly if the setting ever gets a per-room level in the future.
 
-In settings pages it is often desired to have the value at a particular level instead of getting the calculated value. Call `SettingsStore.getValueAt` to get the value of a setting at a particular level, and optionally make it explicitly at that level. By default `getValueAt` will traverse the tree starting at the provided level; making it explicit means it will not go beyond the provided level. When using `getValueAt`, please be sure to use `SettingLevel` to represent the target level.
+In settings pages it is often desired to have the value at a particular level instead of getting the calculated value. 
+Call `SettingsStore.getValueAt` to get the value of a setting at a particular level, and optionally make it explicitly 
+at that level. By default `getValueAt` will traverse the tree starting at the provided level; making it explicit means 
+it will not go beyond the provided level. When using `getValueAt`, please be sure to use `SettingLevel` to represent the 
+target level.
 
 ### Setting values for a setting
 
-Values are defined at particular levels and should be done in a safe manner. There are two checks to perform to ensure a clean save: is the level supported and can the user actually set the value. In most cases, neither should be an issue although there are circumstances where this changes. An example of a safe call is:
+Values are defined at particular levels and should be done in a safe manner. There are two checks to perform to ensure a 
+clean save: is the level supported and can the user actually set the value. In most cases, neither should be an issue 
+although there are circumstances where this changes. An example of a safe call is:
 ```javascript
 const isSupported = SettingsStore.isLevelSupported(SettingLevel.ROOM);
 if (isSupported) {
@@ -64,11 +78,13 @@ if (isSupported) {
 }
 ```
 
-These checks may also be performed in different areas of the application to avoid the verbose example above. For instance, the component which allows changing the setting may be hidden conditionally on the above conditions.
+These checks may also be performed in different areas of the application to avoid the verbose example above. For 
+instance, the component which allows changing the setting may be hidden conditionally on the above conditions.
 
 ##### `SettingsFlag` component
 
-Where possible, the `SettingsFlag` component should be used to set simple "flip-a-bit" (true/false) settings. The `SettingsFlag` also supports simple radio button options, such as the theme the user would like to use.
+Where possible, the `SettingsFlag` component should be used to set simple "flip-a-bit" (true/false) settings. The 
+`SettingsFlag` also supports simple radio button options, such as the theme the user would like to use.
 ```html
 <SettingsFlag name="theSettingId"
               level={SettingsLevel.ROOM}
@@ -86,42 +102,65 @@ Where possible, the `SettingsFlag` component should be used to set simple "flip-
 
 ### Getting the display name for a setting
 
-Simply call `SettingsStore.getDisplayName`. The appropriate display name will be returned and automatically translated for you. If a display name cannot be found, it will return `null`.
+Simply call `SettingsStore.getDisplayName`. The appropriate display name will be returned and automatically translated 
+for you. If a display name cannot be found, it will return `null`.
 
 
 ## Features
 
-Occasionally some parts of the application may be undergoing testing and are not quite production ready. These are commonly known to be behind a "labs flag". Features behind lab flags must go through the granular settings system, and look and act very much normal settings. The exception is that they must supply `isFeature: true` as part of the setting definition and should go through the helper functions on `SettingsStore`.
+Occasionally some parts of the application may be undergoing testing and are not quite production ready. These are 
+commonly known to be behind a "labs flag". Features behind lab flags must go through the granular settings system, and 
+look and act very much normal settings. The exception is that they must supply `isFeature: true` as part of the setting 
+definition and should go through the helper functions on `SettingsStore`.
 
-Although features have levels and a default value, the calculation of those options is blocked by the feature's state. A feature's state is determined from the `SdkConfig` and is a little complex. If `enableLabs` (a legacy flag) is `true` then the feature's state is `labs`, if it is `false`, the state is `disable`. If `enableLabs` is not set then the state is determined from the `features` config, such as in the following:
+Although features have levels and a default value, the calculation of those options is blocked by the feature's state. 
+A feature's state is determined from the `SdkConfig` and is a little complex. If `enableLabs` (a legacy flag) is `true` 
+then the feature's state is `labs`, if it is `false`, the state is `disable`. If `enableLabs` is not set then the state 
+is determined from the `features` config, such as in the following:
 ```json
 "features": {
     "feature_lazyloading": "labs"
 }
 ```
-In this example, `feature_lazyloading` is in the `labs` state. It may also be in the `enable` or `disable` state with a similar approach. If the state is invalid, the feature is in the `disable` state. A feature's levels are only calculated if it is in the `labs` state, therefore the default only applies in that scenario. If the state is `enable`, the feature is always-on.
+In this example, `feature_lazyloading` is in the `labs` state. It may also be in the `enable` or `disable` state with a 
+similar approach. If the state is invalid, the feature is in the `disable` state. A feature's levels are only calculated 
+if it is in the `labs` state, therefore the default only applies in that scenario. If the state is `enable`, the feature 
+is always-on.
 
-Once a feature flag has served its purpose, it is generally recommended to remove it and the associated feature flag checks. This would enable the feature implicitly as it is part of the application now.
+Once a feature flag has served its purpose, it is generally recommended to remove it and the associated feature flag 
+checks. This would enable the feature implicitly as it is part of the application now.
 
 ### Determining if a feature is enabled
 
-A simple call to `SettingsStore.isFeatureEnabled` will tell you if the feature is enabled. This will perform all the required calculations to determine if the feature is enabled based upon the configuration and user selection.
+A simple call to `SettingsStore.isFeatureEnabled` will tell you if the feature is enabled. This will perform all the 
+required calculations to determine if the feature is enabled based upon the configuration and user selection.
 
 ### Enabling a feature
 
-Features can only be enabled if the feature is in the `labs` state, otherwise this is a no-op. To find the current set of features in the `labs` state, call `SettingsStore.getLabsFeatures`. To set the value, call `SettingsStore.setFeatureEnabled`. 
+Features can only be enabled if the feature is in the `labs` state, otherwise this is a no-op. To find the current set 
+of features in the `labs` state, call `SettingsStore.getLabsFeatures`. To set the value, call 
+`SettingsStore.setFeatureEnabled`. 
 
 
 ## Setting controllers
 
-Settings may have environmental factors that affect their value or need additional code to be called when they are modified. A setting controller is able to override the calculated value for a setting and react to changes in that setting. Controllers are not a replacement for the level handlers and should only be used to ensure the environment is kept up to date with the setting where it is otherwise not possible. An example of this is the notification settings: they can only be considered enabled if the platform supports notifications, and enabling notifications requires additional steps to actually enable notifications.
+Settings may have environmental factors that affect their value or need additional code to be called when they are 
+modified. A setting controller is able to override the calculated value for a setting and react to changes in that 
+setting. Controllers are not a replacement for the level handlers and should only be used to ensure the environment is 
+kept up to date with the setting where it is otherwise not possible. An example of this is the notification settings: 
+they can only be considered enabled if the platform supports notifications, and enabling notifications requires 
+additional steps to actually enable notifications.
 
 For more information, see `src/settings/controllers/SettingController.js`.
 
 
 ## Local echo
 
-`SettingsStore` will perform local echo on all settings to ensure that immediately getting values does not cause a split-brain scenario. As mentioned in the "Setting values for a setting" section, the appropriate checks should be done to ensure that the user is allowed to set the value. The local echo system assumes that the user has permission and that the request will go through successfully. The local echo only takes effect until the request to save a setting has completed (either successfully or otherwise). 
+`SettingsStore` will perform local echo on all settings to ensure that immediately getting values does not cause a 
+split-brain scenario. As mentioned in the "Setting values for a setting" section, the appropriate checks should be done 
+to ensure that the user is allowed to set the value. The local echo system assumes that the user has permission and that 
+the request will go through successfully. The local echo only takes effect until the request to save a setting has 
+completed (either successfully or otherwise). 
 
 ```javascript
 SettingsStore.setValue(...).then(() => {
@@ -131,24 +170,69 @@ SettingsStore.getValue(...); // this will return the value set in `setValue` abo
 ```
 
 
+## Watching for changes
+
+Most use cases do not need to set up a watcher because they are able to react to changes as they are made, or the 
+changes which are made are not significant enough for it to matter. Watchers are intended to be used in scenarios where 
+it is important to react to changes made by other logged in devices. Typically, this would be done within the component 
+itself, however the component should not be aware of the intricacies of setting inversion or remapping to particular 
+data structures. Instead, a generic watcher interface is provided on `SettingsStore` to watch (and subsequently unwatch) 
+for changes in a setting.
+
+An example of a watcher in action would be:
+
+```javascript
+class MyComponent extends React.Component {
+    
+    settingWatcherRef = null;
+    
+    componentWillMount() {
+        const callback = (settingName, roomId, level, newValAtLevel, newVal) => {
+            this.setState({color: newVal});
+        };
+        this.settingWatcherRef = SettingsStore.watchSetting("roomColor", "!example:matrix.org", callback);
+    }
+    
+    componentWillUnmount() {
+        SettingsStore.unwatchSetting(this.settingWatcherRef);
+    }
+}
+```
+
 
 # Maintainers Reference
 
-The granular settings system has a few complex parts to power it. This section is to document how the `SettingsStore` is supposed to work.
+The granular settings system has a few complex parts to power it. This section is to document how the `SettingsStore` is 
+supposed to work.
 
 ### General information
 
-The `SettingsStore` uses the hardcoded `LEVEL_ORDER` constant to ensure that it is using the correct override procedure. The array is checked from left to right, simulating the behaviour of overriding values from the higher levels. Each level should be defined in this array, including `default`.
+The `SettingsStore` uses the hardcoded `LEVEL_ORDER` constant to ensure that it is using the correct override procedure. 
+The array is checked from left to right, simulating the behaviour of overriding values from the higher levels. Each 
+level should be defined in this array, including `default`.
 
-Handlers (`src/settings/handlers/SettingsHandler.js`) represent a single level and are responsible for getting and setting values at that level. Handlers also provide additional information to the `SettingsStore` such as if the level is supported or if the current user may set values at the level. The `SettingsStore` will use the handler to enforce checks and manipulate settings. Handlers are also responsible for dealing with migration patterns or legacy settings for their level (for example, a setting being renamed or using a different key from other settings in the underlying store). Handlers are provided to the `SettingsStore` via the `LEVEL_HANDLERS` constant. `SettingsStore` will optimize lookups by only considering handlers that are supported on the platform.
+Handlers (`src/settings/handlers/SettingsHandler.js`) represent a single level and are responsible for getting and 
+setting values at that level. Handlers also provide additional information to the `SettingsStore` such as if the level 
+is supported or if the current user may set values at the level. The `SettingsStore` will use the handler to enforce 
+checks and manipulate settings. Handlers are also responsible for dealing with migration patterns or legacy settings for 
+their level (for example, a setting being renamed or using a different key from other settings in the underlying store). 
+Handlers are provided to the `SettingsStore` via the `LEVEL_HANDLERS` constant. `SettingsStore` will optimize lookups by 
+only considering handlers that are supported on the platform.
 
-Local echo is achieved through `src/settings/handlers/LocalEchoWrapper.js` which acts as a wrapper around a given handler. This is automatically applied to all defined `LEVEL_HANDLERS` and proxies the calls to the wrapped handler where possible. The echo is achieved by a simple object cache stored within the class itself. The cache is invalidated immediately upon the proxied save call succeeding or failing.
+Local echo is achieved through `src/settings/handlers/LocalEchoWrapper.js` which acts as a wrapper around a given 
+handler. This is automatically applied to all defined `LEVEL_HANDLERS` and proxies the calls to the wrapped handler 
+where possible. The echo is achieved by a simple object cache stored within the class itself. The cache is invalidated 
+immediately upon the proxied save call succeeding or failing.
 
-Controllers are notified of changes by the `SettingsStore`, and are given the opportunity to override values after the `SettingsStore` has deemed the value calculated. Controllers are invoked as the last possible step in the code.
+Controllers are notified of changes by the `SettingsStore`, and are given the opportunity to override values after the 
+`SettingsStore` has deemed the value calculated. Controllers are invoked as the last possible step in the code.
 
 ### Features
 
-Features automatically get considered as `disabled` if they are not listed in the `SdkConfig` or `enable_labs` is false/not set. Features are always checked against the configuration before going through the level order as they have the option of being forced-on or forced-off for the application. This is done by the `features` section and looks something like this:
+Features automatically get considered as `disabled` if they are not listed in the `SdkConfig` or `enableLabs` is 
+false/not set. Features are always checked against the configuration before going through the level order as they have 
+the option of being forced-on or forced-off for the application. This is done by the `features` section and looks 
+something like this:
  
 ```
 "features": {
@@ -159,3 +243,21 @@ Features automatically get considered as `disabled` if they are not listed in th
 ```
 
 If `enableLabs` is true in the configuration, the default for features becomes `"labs"`.
+
+### Watchers
+
+Watchers can appear complicated under the hood: there is a central `WatchManager` which handles the actual invocation 
+of callbacks, and callbacks are managed by the SettingsStore by redirecting the caller's callback to a dedicated 
+callback. This is done so that the caller can reuse the same function as their callback without worrying about whether 
+or not it'll unsubscribe all watchers. 
+
+Setting changes are emitted into the default `WatchManager`, which calculates the new value for the setting. Ideally, 
+we'd also try and suppress updates which don't have a consequence on this value, however there's not an easy way to do 
+this. Instead, we just dispatch an update for all changes and leave it up to the consumer to deduplicate. 
+
+In practice, handlers which rely on remote changes (account data, room events, etc) will always attach a listener to the 
+`MatrixClient`. They then watch for changes to events they care about and send off appropriate updates to the 
+generalized `WatchManager` - a class specifically designed to deduplicate the logic of managing watchers. The handlers 
+which are localized to the local client (device) generally just trigger the `WatchManager` when they manipulate the 
+setting themselves as there's nothing to really 'watch'.
+ 

jenkins.sh

@@ -8,25 +8,32 @@ nvm use 10
 
 set -x
 
-# install the other dependencies
-npm install
-
 scripts/fetchdep.sh matrix-org matrix-js-sdk
-rm -r node_modules/matrix-js-sdk || true
+
-ln -s ../matrix-js-sdk node_modules/matrix-js-sdk
+pushd matrix-js-sdk
-(cd matrix-js-sdk && npm install)
+yarn link
+yarn install
+popd
+
+yarn link matrix-js-sdk
+
+# install the other dependencies
+yarn install
 
 # run the mocha tests
-npm run test -- --no-colors
+yarn test --no-colors
 
 # run eslint
-npm run lintall -- -f checkstyle -o eslint.xml || true
+yarn lintall -f checkstyle -o eslint.xml || true
 
 # re-run the linter, excluding any files known to have errors or warnings.
-npm run lintwithexclusions
+yarn lintwithexclusions
+
+# lint styles
+yarn stylelint
 
 # delete the old tarball, if it exists
 rm -f matrix-react-sdk-*.tgz
 
 # build our tarball
-npm pack
+yarn pack

karma.conf.js

@@ -8,7 +8,7 @@ var fs = require('fs');
  * to build everything; however it's the easiest way to load our dependencies
  * from node_modules.
  *
- * If you run karma in multi-run mode (with `npm run test-multi`), it will watch
+ * If you run karma in multi-run mode (with `yarn test-multi`), it will watch
  * the tests for changes, and webpack will rebuild using a cache. This is much quicker
  * than a clean rebuild.
  */
@@ -35,7 +35,7 @@ function fileExists(name) {
     }
 }
 
-// try find the gemini-scrollbar css in an npm-version-agnostic way
+// try find the gemini-scrollbar css in an version-agnostic way
 var gsCss = 'node_modules/gemini-scrollbar/gemini-scrollbar.css';
 if (!fileExists(gsCss)) {
     gsCss = 'node_modules/react-gemini-scrollbar/'+gsCss;
@@ -94,7 +94,7 @@ module.exports = function (config) {
         // test results reporter to use
         // possible values: 'dots', 'progress'
         // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['logcapture', 'spec', 'junit', 'summary'],
+        reporters: ['logcapture', 'spec', 'summary'],
 
         specReporter: {
             suppressErrorSummary: false, // do print error summary
@@ -135,9 +135,10 @@ module.exports = function (config) {
         ],
 
         customLaunchers: {
-            'ChromeHeadless': {
+            'VectorChromeHeadless': {
                 base: 'Chrome',
                 flags: [
+                    '--no-sandbox',
                     // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
                     '--headless',
                     '--disable-gpu',
@@ -155,10 +156,6 @@ module.exports = function (config) {
         // how many browser should be started simultaneous
         concurrency: Infinity,
 
-        junitReporter: {
-            outputDir: 'karma-reports',
-        },
-
         webpack: {
             module: {
                 rules: [
@@ -198,7 +195,7 @@ module.exports = function (config) {
                 alias: {
                     // alias any requires to the react module to the one in our
                     // path, otherwise we tend to get the react source included
-                    // twice when using npm link.
+                    // twice when using `npm link` / `yarn link`.
                     react: path.resolve('./node_modules/react'),
 
                     'matrix-react-sdk': path.resolve('test/skinned-sdk.js'),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.14.8",
+  "version": "1.2.0",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -40,18 +40,19 @@
     "rethemendex": "res/css/rethemendex.sh",
     "i18n": "matrix-gen-i18n",
     "prunei18n": "matrix-prune-i18n",
-    "build": "npm run reskindex && npm run start:init",
+    "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",
-    "start": "npm run start:init && npm run start:all",
+    "start": "yarn start:init && yarn start:all",
-    "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"npm run build:watch\" \"npm run reskindex:watch\"",
+    "start:all": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n build,reskindex \"yarn build:watch\" \"yarn reskindex:watch\"",
     "start:init": "babel src -d lib --source-maps --copy-files",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
     "lintwithexclusions": "eslint --max-warnings 0 --ignore-path .eslintignore.errorfiles src test",
+    "stylelint": "stylelint res/css/**/*.scss",
     "clean": "rimraf lib",
-    "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
+    "prepare": "yarn clean && yarn build && git rev-parse HEAD > git-revision.txt",
-    "test": "karma start --single-run=true --browsers ChromeHeadless",
+    "test": "karma start --single-run=true --browsers VectorChromeHeadless",
     "test-multi": "karma start"
   },
   "dependencies": {
@@ -64,7 +65,8 @@
     "classnames": "^2.1.2",
     "commonmark": "^0.28.1",
     "counterpart": "^0.18.0",
-    "emojione": "2.2.7",
+    "emojibase-data": "^4.0.0",
+    "emojibase-regex": "^3.0.0",
     "file-saver": "^1.3.3",
     "filesize": "3.5.6",
     "flux": "2.1.1",
@@ -73,17 +75,19 @@
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
     "glob": "^5.0.14",
-    "highlight.js": "^9.13.0",
+    "highlight.js": "9.14.2",
     "is-ip": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.6",
     "lodash": "^4.13.1",
     "lolex": "2.3.2",
-    "matrix-js-sdk": "0.14.3",
+    "matrix-js-sdk": "1.2.0",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
+    "png-chunks-extract": "^1.0.0",
     "prop-types": "^15.5.8",
     "qrcode-react": "^0.1.16",
+    "qs": "^6.6.0",
     "querystring": "^0.2.0",
     "react": "^15.6.0",
     "react-addons-css-transition-group": "15.3.2",
@@ -98,7 +102,7 @@
     "slate-react": "^0.18.10",
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
-    "velocity-vector": "github:vector-im/velocity#059e3b2",
+    "velocity-animate": "^1.5.2",
     "whatwg-fetch": "^1.1.1",
     "zxcvbn": "^4.4.2"
   },
@@ -109,6 +113,7 @@
     "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",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -117,7 +122,7 @@
     "babel-preset-es2016": "^6.24.1",
     "babel-preset-es2017": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "chokidar": "^1.6.1",
+    "chokidar": "^2.1.2",
     "concurrently": "^4.0.1",
     "eslint": "^5.12.0",
     "eslint-config-google": "^0.7.1",
@@ -125,21 +130,20 @@
     "eslint-plugin-flowtype": "^2.30.0",
     "eslint-plugin-react": "^7.7.0",
     "estree-walker": "^0.5.0",
-    "expect": "^23.6.0",
+    "expect": "^24.1.0",
     "file-loader": "^3.0.1",
     "flow-parser": "^0.57.3",
     "jest-mock": "^23.2.0",
-    "karma": "^3.0.0",
+    "karma": "^4.0.1",
-    "karma-chrome-launcher": "^0.2.3",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-cli": "^1.0.1",
-    "karma-junit-reporter": "^0.4.2",
     "karma-logcapture-reporter": "0.0.1",
     "karma-mocha": "^1.3.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "^0.0.31",
     "karma-summary-reporter": "^1.5.1",
     "karma-webpack": "^4.0.0-beta.0",
-    "matrix-mock-request": "^1.2.1",
+    "matrix-mock-request": "^1.2.3",
     "matrix-react-test-utils": "^0.1.1",
     "mocha": "^5.0.5",
     "react-addons-test-utils": "^15.4.0",
@@ -147,6 +151,8 @@
     "rimraf": "^2.4.3",
     "sinon": "^5.0.7",
     "source-map-loader": "^0.2.3",
+    "stylelint": "^9.10.1",
+    "stylelint-config-standard": "^18.2.0",
     "walk": "^2.3.9",
     "webpack": "^4.20.2",
     "webpack-cli": "^3.1.1"

res/css/_common.scss

@@ -32,10 +32,21 @@ body {
     margin: 0px;
 }
 
+pre, code {
+    font-family: $monospace-font-family;
+    font-size: 100% !important;
+}
+
 .error, .warning {
     color: $warning-color;
 }
 
+b {
+    // On Firefox, the default weight for `<b>` is `bolder` which results in no bold
+    // effect since we only have specific weights of our fonts available.
+    font-weight: bold;
+}
+
 h2 {
     color: $primary-fg-color;
     font-weight: 400;
@@ -50,8 +61,47 @@ a:visited {
     color: $accent-color-alt;
 }
 
+input[type=text],
+input[type=search],
+input[type=password] {
+    padding: 9px;
+    font-family: $font-family;
+    font-size: 14px;
+    font-weight: 600;
+    min-width: 0;
+}
+
+input[type=text].mx_textinput_icon,
+input[type=search].mx_textinput_icon {
+    padding-left: 36px;
+    background-repeat: no-repeat;
+    background-position: 10px center;
+}
+
+// FIXME THEME - Tint by CSS rather than referencing a duplicate asset
+input[type=text].mx_textinput_icon.mx_textinput_search,
+input[type=search].mx_textinput_icon.mx_textinput_search {
+    background-image: url('$(res)/img/feather-customised/search-input.svg');
+}
+
+// dont search UI as not all browsers support it,
+// we implement it ourselves where needed instead
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+    display: none;
+}
+
+// Override Firefox's UA style so we get a consistent look across browsers
+input::placeholder,
+textarea::placeholder {
+    opacity: initial;
+}
+
 input[type=text], input[type=password], textarea {
     background-color: transparent;
+    color: $primary-fg-color;
 }
 
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
@@ -62,6 +112,80 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 /* Required by Firefox */
 textarea {
     font-family: $font-family;
+    color: $primary-fg-color;
+}
+
+// This is used to hide the standard outline added by browsers for
+// accessible (focusable) components. Not intended for buttons, but
+// should be used on things like focusable containers where the outline
+// is usually not helping anyone.
+.mx_HiddenFocusable {
+    outline: none;
+}
+
+// .mx_textinput is a container for a text input
+// + some other controls like buttons, ...
+// it has the appearance of a text box so the controls
+// appear to be part of the input
+
+.mx_Dialog, .mx_MatrixChat {
+    :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 {
+        display: block;
+        box-sizing: border-box;
+        background-color: transparent;
+        color: $input-darker-fg-color;
+        border-radius: 4px;
+        border: 1px solid $dialog-close-fg-color;
+        // these things should probably not be defined
+        // globally
+        margin: 9px;
+        flex: 0 0 auto;
+    }
+
+    .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,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
+    .mx_textinput input::placeholder {
+        color: $roomsublist-label-fg-color;
+    }
+}
+
+/*** 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;
+        border: none;
+    }
+}
+
+.light-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-lighter-fg-color;
+        background-color: $input-lighter-bg-color;
+        border: none;
+    }
 }
 
 /* Prevent ugly dotted highlight around selected elements in Firefox */
@@ -123,6 +247,17 @@ textarea {
     color: $roomsublist-label-bg-color;
 }
 
+/* Expected z-indexes for dialogs:
+    4000 - Default wrapper index
+    4009 - Static dialog background
+    4010 - Static dialog itself
+    4011 - Standard dialog background
+    4012 - Standard dialog itself
+
+   These are set up such that the static dialog always appears
+   underneath the standard dialogs.
+ */
+
 .mx_Dialog_wrapper {
     position: fixed;
     z-index: 4000;
@@ -144,27 +279,29 @@ textarea {
     box-shadow: none;
 }
 
-/* View Source Dialog overide */
-.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog {
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
 .mx_Dialog {
     background-color: $primary-bg-color;
     color: $light-fg-color;
-    z-index: 4010;
+    z-index: 4012;
     font-weight: 300;
     font-size: 15px;
     position: relative;
-    padding: 40px 58px 36px 58px;
+    padding: 25px 30px 30px 30px;
-    width: 60%;
-    max-width: 704px;
-    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     max-height: 80%;
+    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
+    border-radius: 4px;
     overflow-y: auto;
 }
 
+.mx_Dialog_fixedWidth {
+    width: 60vw;
+    max-width: 704px;
+}
+
+.mx_Dialog_staticWrapper .mx_Dialog {
+    z-index: 4010;
+}
+
 .mx_Dialog_background {
     position: fixed;
     top: 0;
@@ -173,6 +310,17 @@ textarea {
     height: 100%;
     background-color: $dialog-backdrop-color;
     opacity: 0.8;
+    z-index: 4011;
+}
+
+.mx_Dialog_background.mx_Dialog_staticBackground {
+    z-index: 4009;
+}
+
+.mx_Dialog_wrapperWithStaticUnder .mx_Dialog_background {
+    // Roughly half of what it would normally be - we don't want to black out
+    // the app, just make it clear that the dialogs are stacked.
+    opacity: 0.4;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
@@ -192,13 +340,13 @@ textarea {
 
 .mx_Dialog_header {
     position: relative;
+    margin-bottom: 20px;
 }
 
 .mx_Dialog_title {
-    font-weight: bold;
     font-size: 22px;
     line-height: 36px;
-    color: $primary-fg-color;
+    color: $dialog-title-fg-color;
 }
 
 .mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
@@ -210,16 +358,17 @@ textarea {
 }
 
 .mx_Dialog_cancelButton {
-    mask: url('$(res)/img/feather-icons/cancel.svg');
+    mask: url('$(res)/img/feather-customised/cancel.svg');
     mask-repeat: no-repeat;
     mask-position: center;
-    width: 36px;
+    mask-size: cover;
-    height: 36px;
+    width: 14px;
-    background-color: $primary-fg-color;
+    height: 14px;
+    background-color: $dialog-close-fg-color;
     cursor: pointer;
     position: absolute;
-    top: 20px;
+    top: 4px;
-    right: 20px;
+    right: 0px;
 }
 
 .mx_Dialog_content {
@@ -230,6 +379,7 @@ textarea {
 }
 
 .mx_Dialog_buttons {
+    margin-top: 20px;
     text-align: right;
 }
 
@@ -242,7 +392,11 @@ textarea {
     font-weight: 600;
     border: 1px solid $accent-color ! important;
     color: $accent-color;
-    background-color: $accent-fg-color;
+    background-color: $button-secondary-bg-color;
+}
+
+.mx_Dialog button:last-child {
+    margin-right: 0px;
 }
 
 .mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
@@ -256,6 +410,7 @@ textarea {
 .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;
 }
 
 .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
@@ -270,6 +425,20 @@ textarea {
     opacity: 0.7;
 }
 
+// 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.
+// Ref: https://github.com/vector-im/riot-web/issues/8420
+.mx_GeneralButton {
+    @mixin mx_DialogButton;
+    display: inline;
+    margin: auto;
+}
+
+.mx_GeneralButton:hover {
+    @mixin mx_DialogButton_hover;
+}
+
 .mx_linkButton {
     cursor: pointer;
     color: $accent-color;
@@ -289,15 +458,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;
@@ -367,3 +527,37 @@ textarea {
     opacity: 0;
     cursor: pointer;
 }
+
+// username colors
+// used by SenderProfile & RoomPreviewBar
+.mx_Username_color1 {
+    color: $username-variant1-color;
+}
+
+.mx_Username_color2 {
+    color: $username-variant2-color;
+}
+
+.mx_Username_color3 {
+    color: $username-variant3-color;
+}
+
+.mx_Username_color4 {
+    color: $username-variant4-color;
+}
+
+.mx_Username_color5 {
+    color: $username-variant5-color;
+}
+
+.mx_Username_color6 {
+    color: $username-variant6-color;
+}
+
+.mx_Username_color7 {
+    color: $username-variant7-color;
+}
+
+.mx_Username_color8 {
+    color: $username-variant8-color;
+}

res/css/_components.scss

@@ -4,10 +4,14 @@
 @import "./structures/_CompatibilityPage.scss";
 @import "./structures/_ContextualMenu.scss";
 @import "./structures/_CreateRoom.scss";
+@import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
+@import "./structures/_GenericErrorPage.scss";
 @import "./structures/_GroupView.scss";
+@import "./structures/_HeaderButtons.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";
+@import "./structures/_MainSplit.scss";
 @import "./structures/_MatrixChat.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NotificationPanel.scss";
@@ -16,12 +20,13 @@
 @import "./structures/_RoomStatusBar.scss";
 @import "./structures/_RoomSubList.scss";
 @import "./structures/_RoomView.scss";
+@import "./structures/_ScrollPanel.scss";
 @import "./structures/_SearchBox.scss";
 @import "./structures/_TabbedView.scss";
 @import "./structures/_TagPanel.scss";
+@import "./structures/_TagPanelButtons.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
-@import "./structures/_UserSettings.scss";
 @import "./structures/_ViewSource.scss";
 @import "./structures/auth/_Login.scss";
 @import "./views/auth/_AuthBody.scss";
@@ -35,6 +40,7 @@
 @import "./views/auth/_LanguageSelector.scss";
 @import "./views/auth/_ServerConfig.scss";
 @import "./views/auth/_ServerTypeSelector.scss";
+@import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
@@ -42,17 +48,20 @@
 @import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/context_menus/_TopLeftMenu.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/_ChatInviteDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";
 @import "./views/dialogs/_CreateGroupDialog.scss";
 @import "./views/dialogs/_CreateRoomDialog.scss";
 @import "./views/dialogs/_DeactivateAccountDialog.scss";
+@import "./views/dialogs/_DeviceVerifyDialog.scss";
 @import "./views/dialogs/_DevtoolsDialog.scss";
 @import "./views/dialogs/_EncryptedEventDialog.scss";
 @import "./views/dialogs/_GroupAddressPicker.scss";
+@import "./views/dialogs/_IncomingSasDialog.scss";
 @import "./views/dialogs/_RestoreKeyBackupDialog.scss";
 @import "./views/dialogs/_RoomSettingsDialog.scss";
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
@@ -62,7 +71,9 @@
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
+@import "./views/dialogs/_UploadConfirmDialog.scss";
 @import "./views/dialogs/_UserSettingsDialog.scss";
+@import "./views/dialogs/_WidgetOpenIDPermissionsDialog.scss";
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@@ -74,10 +85,12 @@
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
 @import "./views/elements/_Field.scss";
-@import "./views/elements/_HexVerify.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MemberEventListSummary.scss";
+@import "./views/elements/_MessageEditor.scss";
+@import "./views/elements/_PowerSelector.scss";
 @import "./views/elements/_ProgressBar.scss";
 @import "./views/elements/_ReplyThread.scss";
 @import "./views/elements/_ResizeHandle.scss";
@@ -85,8 +98,11 @@
 @import "./views/elements/_RoleButton.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/_Validation.scss";
 @import "./views/globals/_MatrixToolbar.scss";
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
@@ -99,11 +115,19 @@
 @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/_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/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";
@@ -120,14 +144,13 @@
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomDropTarget.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomRecoveryReminder.scss";
-@import "./views/rooms/_RoomSettings.scss";
 @import "./views/rooms/_RoomTile.scss";
-@import "./views/rooms/_RoomTooltip.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SearchableEntityList.scss";
@@ -141,16 +164,17 @@
 @import "./views/settings/_Notifications.scss";
 @import "./views/settings/_PhoneNumbers.scss";
 @import "./views/settings/_ProfileSettings.scss";
-@import "./views/settings/tabs/_GeneralRoomSettingsTab.scss";
-@import "./views/settings/tabs/_GeneralUserSettingsTab.scss";
-@import "./views/settings/tabs/_HelpSettingsTab.scss";
-@import "./views/settings/tabs/_NotificationSettingsTab.scss";
-@import "./views/settings/tabs/_PreferencesSettingsTab.scss";
-@import "./views/settings/tabs/_RolesRoomSettingsTab.scss";
-@import "./views/settings/tabs/_SecurityRoomSettingsTab.scss";
-@import "./views/settings/tabs/_SecuritySettingsTab.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
-@import "./views/settings/tabs/_VoiceSettingsTab.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/_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/verification/_VerificationShowSas.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_IncomingCallbox.scss";
 @import "./views/voip/_VideoView.scss";

res/css/structures/_AutoHideScrollbar.scss

@@ -14,6 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/* This file has CSS for both native and non-native scrollbars in an
+ * order that's fairly logic to read but violates stylelints descending
+ * specificity rule, so turn it off for this file. It also duplicates
+ * a selector to separate the hiding/showing from the sizing.
+ */
+/* stylelint-disable no-descending-specificity, no-duplicate-selectors */
+
 /*
 1. for browsers that support native overlay auto-hiding scrollbars
 */
@@ -59,8 +66,7 @@ body.mx_scrollbar_nooverlay {
     */
     .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow > .mx_AutoHideScrollbar_offset,
     .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::before,
-    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after
+    .mx_AutoHideScrollbar:hover.mx_AutoHideScrollbar_overflow::after {
-    {
         margin-right: calc(-1 * var(--scrollbar-width));
     }
 }
@@ -74,6 +80,7 @@ body.mx_scrollbar_nooverlay {
 // or fallback for webkit browsers
 ::-webkit-scrollbar {
     width: 6px;
+    height: 6px;
     background-color: $scrollbar-track-color;
 }
 

res/css/structures/_ContextualMenu.scss

@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_ContextualMenu {
     border-radius: 4px;
-    box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
     color: $primary-fg-color;
     position: absolute;
@@ -54,14 +54,14 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_right:after {
+.mx_ContextualMenu_chevron_right::after {
-    content:'';
+    content: '';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
     border-left: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     top: -7px;
     right: 1px;
 }
@@ -81,14 +81,14 @@ limitations under the License.
     border-bottom: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_left:after{
+.mx_ContextualMenu_chevron_left::after {
-    content:'';
+    content: '';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
     border-right: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     top: -7px;
     left: 1px;
 }
@@ -108,14 +108,14 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_top:after{
+.mx_ContextualMenu_chevron_top::after {
-    content:'';
+    content: '';
     width: 0;
     height: 0;
     border-left: 7px solid transparent;
     border-bottom: 7px solid $menu-bg-color;
     border-right: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     left: -7px;
     top: 1px;
 }
@@ -135,14 +135,14 @@ limitations under the License.
     border-right: 8px solid transparent;
 }
 
-.mx_ContextualMenu_chevron_bottom:after{
+.mx_ContextualMenu_chevron_bottom::after {
-    content:'';
+    content: '';
     width: 0;
     height: 0;
     border-left: 7px solid transparent;
     border-top: 7px solid $menu-bg-color;
     border-right: 7px solid transparent;
-    position:absolute;
+    position: absolute;
     left: -7px;
     bottom: 1px;
 }

res/css/structures/_CustomRoomTagPanel.scss

@@ -0,0 +1,45 @@
+/*
+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_LeftPanel_tagPanelContainer {
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_CustomRoomTagPanel {
+    background-color: $tagpanel-bg-color;
+    max-height: 40vh;
+}
+
+.mx_CustomRoomTagPanel_scroller {
+    max-height: inherit;
+}
+
+.mx_CustomRoomTagPanel .mx_AccessibleButton {
+    margin: 9px auto;
+    width: 40px;
+}
+
+.mx_CustomRoomTagPanel .mx_BaseAvatar_image {
+    box-sizing: border-box;
+    width: 40px;
+    height: 40px;
+}
+
+.mx_CustomRoomTagPanel .mx_AccessibleButton.CustomRoomTagPanel_tileSelected .mx_BaseAvatar_image {
+    border: 3px solid $warning-color;
+    border-radius: 40px;
+}

res/css/structures/_FilePanel.scss

@@ -101,10 +101,10 @@ limitations under the License.
     padding-left: 0px;
 }
 
-.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}

res/css/structures/_GenericErrorPage.scss

@@ -0,0 +1,19 @@
+.mx_GenericErrorPage {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+}
+
+.mx_GenericErrorPage_box {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 500px;
+    height: 200px;
+    border: 1px solid #f22;
+    padding: 10px;
+    background-color: #fcc;
+}

res/css/structures/_GroupView.scss

@@ -44,23 +44,36 @@ limitations under the License.
 }
 
 .mx_GroupHeader_button {
-    margin-left: 12px;
+    margin-left: 5px;
+    margin-right: 5px;
     cursor: pointer;
+    height: 20px;
+    width: 20px;
+    background-color: $groupheader-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_GroupHeader_button object {
+.mx_GroupHeader_editButton {
-    // prevents clicks from being swallowed by svg in 'object' tag
+    mask-image: url('$(res)/img/icons-settings-room.svg');
-    pointer-events: none;
+}
+
+.mx_GroupHeader_shareButton {
+    mask-image: url('$(res)/img/icons-share.svg');
+}
+
+.mx_GroupView_hostingSignup img {
+    margin-left: 5px;
 }
 
 .mx_GroupView_editable {
-    border-bottom: 1px solid $strong-input-border-color ! important;
+    border-bottom: 1px solid $strong-input-border-color !important;
     min-width: 150px;
     cursor: text;
 }
 
 .mx_GroupView_editable:focus {
-    border-bottom: 1px solid $accent-color ! important;
+    border-bottom: 1px solid $accent-color !important;
     outline: none;
     box-shadow: none;
 }
@@ -82,7 +95,7 @@ limitations under the License.
 
 .mx_GroupView_avatarPicker .mx_Spinner {
     width: 48px;
-    height: 48px ! important;
+    height: 48px !important;
 }
 
 .mx_GroupView_header_leftCol {
@@ -161,7 +174,6 @@ limitations under the License.
 
 .mx_GroupView > .mx_MainSplit {
     flex: 1;
-    display: flex;
 }
 
 .mx_GroupView_body {
@@ -321,7 +333,7 @@ limitations under the License.
     display: none;
 }
 
-.mx_GroupView_body .gm-scroll-view > *{
+.mx_GroupView_body .gm-scroll-view > * {
     margin: 11px 50px 0px 68px;
 }
 

res/css/structures/_HeaderButtons.scss

@@ -0,0 +1,28 @@
+/*
+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_HeaderButtons {
+    display: flex;
+}
+
+.mx_HeaderButtons::before {
+    content: "";
+    background-color: $header-divider-color;
+    opacity: 0.5;
+    margin: 0 15px;
+    border-radius: 1px;
+    width: 1px;
+}

res/css/structures/_HomePage.scss

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+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.
@@ -22,10 +23,3 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
 }
-
-.mx_HomePage iframe {
-    display: block;
-	width: 100%;
-	height: 100%;
-	border: 0px;
-}

res/css/structures/_LeftPanel.scss

@@ -33,6 +33,11 @@ limitations under the License.
     flex: 0 0 140px;
 }
 
+.mx_LeftPanel_tagPanelContainer {
+    flex: 0 0 70px;
+    height: 100%;
+}
+
 .mx_LeftPanel_hideButton {
     position: absolute;
     top: 10px;
@@ -62,11 +67,6 @@ limitations under the License.
     z-index: 6;
 }
 
-.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
-   flex: 0 0 160px;
-   margin-bottom: 9px;
-}
-
 .mx_LeftPanel .mx_BottomLeftMenu {
     order: 3;
 
@@ -77,6 +77,11 @@ limitations under the License.
     z-index: 1;
 }
 
+.mx_LeftPanel_container.collapsed .mx_BottomLeftMenu {
+    flex: 0 0 160px;
+    margin-bottom: 9px;
+}
+
 .mx_LeftPanel .mx_BottomLeftMenu_options {
     margin-top: 18px;
 }

res/css/structures/_MainSplit.scss

@@ -0,0 +1,27 @@
+/*
+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_MainSplit {
+    display: flex;
+    flex-direction: row;
+    min-width: 0;
+}
+
+// move hit area 5px to the right so it doesn't overlap with the timeline scrollbar
+.mx_MainSplit > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
+    margin: 0 -10px 0 0;
+    padding: 0 10px 0 0;
+}

res/css/structures/_MyGroups.scss

@@ -49,11 +49,11 @@ limitations under the License.
     height: 40px;
     width: 40px;
     border-radius: 20px;
-    background-color: $roomheader-addroom-color;
+    background-color: $roomheader-addroom-bg-color;
     position: relative;
 
-    &:before {
+    &::before {
-        background-color: $accent-fg-color;
+        background-color: $roomheader-addroom-fg-color;
         mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
         mask-position: center;
@@ -113,8 +113,7 @@ limitations under the License.
     overflow-x: hidden;
 
     display: flex;
-    flex-direction: row;
+    flex-flow: row wrap;
-    flex-flow: wrap;
     align-content: flex-start;
 }
 
@@ -153,6 +152,7 @@ limitations under the License.
 
 .mx_GroupTile_profile .mx_GroupTile_groupId {
     font-size: 13px;
+    opacity: 0.7;
 }
 
 .mx_GroupTile_profile .mx_GroupTile_desc {
@@ -163,7 +163,3 @@ limitations under the License.
     max-height: 36px;
     overflow: hidden;
 }
-
-.mx_GroupTile_profile .mx_GroupTile_groupId {
-    opacity: 0.7;
-}

res/css/structures/_NotificationPanel.scss

@@ -66,7 +66,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_roomName a,
 .mx_NotificationPanel .mx_EventTile_senderDetails a {
-    text-decoration: none ! important;
+    text-decoration: none !important;
 }
 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
@@ -83,14 +83,14 @@ limitations under the License.
     padding-right: 0px;
 }
 
-.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: $primary-bg-color;
-}
-
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
     padding-left: 0px;
 }
 
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: $primary-bg-color;
+}
+
 .mx_NotificationPanel .mx_EventTile_content {
     margin-right: 0px;
 }

res/css/structures/_RightPanel.scss

@@ -25,9 +25,7 @@ limitations under the License.
 
 .mx_RightPanel_header {
     order: 1;
-
     border-bottom: 1px solid $primary-hairline-color;
-
     flex: 0 0 52px;
 }
 
@@ -45,20 +43,55 @@ limitations under the License.
     cursor: pointer;
     flex: 0 0 auto;
     vertical-align: top;
-    margin-top: 4px;
+    margin-left: 5px;
-    padding-left: 5px;
+    margin-right: 5px;
-    padding-right: 5px;
     text-align: center;
-    position: relative;
     border-bottom: 2px solid transparent;
+    height: 20px;
+    width: 20px;
+    position: relative;
 }
 
-.mx_RightPanel_headerButton object {
+.mx_RightPanel_headerButton::before {
-    pointer-events: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 20px;
+    width: 20px;
+    background-color: $rightpanel-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_RightPanel_headerButton_highlight {
+.mx_RightPanel_membersButton::before {
-    border-color: $button-bg-color;
+    mask-image: url('$(res)/img/feather-customised/user.svg');
+}
+
+.mx_RightPanel_filesButton::before {
+    mask-image: url('$(res)/img/feather-customised/files.svg');
+}
+
+.mx_RightPanel_notifsButton::before {
+    mask-image: url('$(res)/img/feather-customised/notifications.svg');
+}
+
+.mx_RightPanel_groupMembersButton::before {
+    mask-image: url('$(res)/img/icons-people.svg');
+}
+
+.mx_RightPanel_roomsButton::before {
+    mask-image: url('$(res)/img/icons-room-nobg.svg');
+}
+
+.mx_RightPanel_headerButton_highlight::after {
+    content: '';
+    position: absolute;
+    bottom: -6px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background-color: $button-bg-color;
 }
 
 .mx_RightPanel_headerButton_badge {

res/css/structures/_RoomStatusBar.scss

@@ -40,12 +40,12 @@ limitations under the License.
     opacity: 0.5;
     position: relative;
     top: -4px;
-/*
+    /*
     animation-duration: 1s;
     animation-name: bounce;
     animation-direction: alternate;
     animation-iteration-count: infinite;
-*/
+    */
 }
 
 .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -138,8 +138,8 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_resend_link {
-    color: $primary-fg-color ! important;
+    color: $primary-fg-color !important;
-    text-decoration: underline ! important;
+    text-decoration: underline !important;
     cursor: pointer;
 }
 

res/css/structures/_RoomSubList.scss

@@ -75,6 +75,7 @@ limitations under the License.
     font-size: 12px;
     padding: 0 5px;
     background-color: $roomtile-name-color;
+    cursor: pointer;
 }
 
 .mx_RoomSubList_addRoom, .mx_RoomSubList_badge {
@@ -82,15 +83,24 @@ limitations under the License.
 }
 
 .mx_RoomSubList_addRoom {
-    background-color: $roomheader-addroom-color;
+    background-color: $roomheader-addroom-bg-color;
-    color: $roomsublist-background;
-    background-image: url('$(res)/img/icons-room-add.svg');
-    background-repeat: no-repeat;
-    background-position: center;
     border-radius: 10px; // 16/2 + 2 padding
     height: 16px;
     flex: 0 0 16px;
-    background-clip: content-box;
+    position: relative;
+
+    &::before {
+        background-color: $roomheader-addroom-fg-color;
+        mask: url('$(res)/img/icons-room-add.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
 }
 
 .mx_RoomSubList_badgeHighlight {
@@ -99,7 +109,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     pointer-events: none;
-    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
     transition: transform 0.2s ease-in;
     width: 10px;
@@ -127,6 +137,26 @@ limitations under the License.
     padding: 0 8px;
 }
 
+.collapsed {
+    .mx_RoomSubList_scroll {
+        padding: 0;
+    }
+
+    .mx_RoomSubList_labelContainer {
+        margin-right: 14px;
+        margin-left: 2px;
+    }
+
+    .mx_RoomSubList_addRoom {
+        margin-left: 3px;
+        margin-right: 10px;
+    }
+
+    .mx_RoomSubList_label > span {
+        display: none;
+    }
+}
+
 // overflow indicators
 .mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
     &.mx_IndicatorScrollbar_topOverflow::before,
@@ -151,10 +181,10 @@ limitations under the License.
     &.mx_IndicatorScrollbar_topOverflow::before {
         top: 0;
         transition: background-image 0.1s ease-in;
-        background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
+        background: linear-gradient(to top, $panel-gradient);
     }
 
-/*
+    /*
     // for now, we remove the bottomOverflow entirely as we don't want to
     // lose the screen real-estate due to a bg-colored gradient, but we also
     // don't want to use drop shadows and risk a confusing hierarchy of cards.
@@ -165,26 +195,5 @@ limitations under the License.
         margin: 0px -8px;
         background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
     }
-*/
+    */
-}
-
-.collapsed {
-
-    .mx_RoomSubList_scroll {
-        padding: 0;
-    }
-
-    .mx_RoomSubList_labelContainer {
-        margin-right: 14px;
-        margin-left: 2px;
-    }
-
-    .mx_RoomSubList_addRoom {
-        margin-left: 3px;
-        margin-right: 10px;
-    }
-
-    .mx_RoomSubList_label > span {
-        display: none;
-    }
 }

res/css/structures/_RoomView.scss

@@ -70,48 +70,27 @@ limitations under the License.
     background-color: $primary-bg-color;
 }
 
+.mx_RoomView_auxPanel_hiddenHighlights {
+    border-bottom: 1px solid $primary-hairline-color;
+    padding: 10px 26px;
+    color: $warning-color;
+    cursor: pointer;
+}
+
 .mx_RoomView_auxPanel_apps {
-    max-width: 1920px ! important;
+    max-width: 1920px !important;
 }
 
 
 .mx_RoomView .mx_MainSplit {
     flex: 1 1 0;
-    display: flex;
-}
-
-.mx_RoomView_body {
-    position: relative; //for .mx_RoomView_auxPanel_fullHeight
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-}
-
-.mx_RoomView_body .mx_RoomView_timeline {
-    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
-    position: relative;
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_RoomView_body {
-    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner{
-        order: 2;
-    }
-}
-
-.mx_RoomView_body .mx_RoomView_statusArea {
-    order: 3;
-}
-
-.mx_RoomView_body .mx_MessageComposer {
-    order: 4;
 }
 
 .mx_RoomView_messagePanel {
     width: 100%;
     overflow-y: auto;
+    flex: 1 1 0;
+    overflow-anchor: none;
 }
 
 .mx_RoomView_messagePanelSearchSpinner {
@@ -123,9 +102,9 @@ limitations under the License.
     position: relative;
 }
 
-.mx_RoomView_messagePanelSearchSpinner:before {
+.mx_RoomView_messagePanelSearchSpinner::before {
     background-color: $greyed-fg-color;
-    mask: url('$(res)/img/feather-icons/search-input.svg');
+    mask: url('$(res)/img/feather-customised/search-input.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 50px;
@@ -137,6 +116,53 @@ limitations under the License.
     height: 50px;
 }
 
+.mx_RoomView_body {
+    position: relative; //for .mx_RoomView_auxPanel_fullHeight
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
+        order: 2;
+    }
+}
+
+.mx_RoomView_body .mx_RoomView_timeline {
+    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_RoomView_statusArea {
+    width: 100%;
+    flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $primary-bg-color;
+    z-index: 1000;
+    overflow: hidden;
+
+    transition: all .2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
+}
+
+.mx_RoomView_statusAreaBox {
+    margin: auto;
+    min-height: 50px;
+}
+
+.mx_RoomView_statusAreaBox_line {
+    margin-left: 65px;
+    border-top: 1px solid $primary-hairline-color;
+    height: 1px;
+}
+
 .mx_RoomView_messageListWrapper {
     min-height: 100%;
 
@@ -197,33 +223,6 @@ hr.mx_RoomView_myReadMarker {
     z-index: 1;
 }
 
-.mx_RoomView_statusArea {
-    width: 100%;
-    flex: 0 0 auto;
-
-    max-height: 0px;
-    background-color: $primary-bg-color;
-    z-index: 1000;
-    overflow: hidden;
-
-    transition: all .2s ease-out;
-}
-
-.mx_RoomView_statusArea_expanded {
-    max-height: 100px;
-}
-
-.mx_RoomView_statusAreaBox {
-    margin: auto;
-    min-height: 50px;
-}
-
-.mx_RoomView_statusAreaBox_line {
-    margin-left: 65px;
-    border-top: 1px solid $primary-hairline-color;
-    height: 1px;
-}
-
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
     background-color: $primary-bg-color;
 }
@@ -284,7 +283,7 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_ongoingConfCallNotification a {
-    color: $accent-fg-color ! important;
+    color: $accent-fg-color !important;
 }
 
 .mx_MatrixChat_useCompactLayout {

res/css/structures/_ScrollPanel.scss

@@ -0,0 +1,26 @@
+/*
+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_ScrollPanel {
+
+    .mx_RoomView_MessageList {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        overflow-y: hidden;
+    }
+}

res/css/structures/_TabbedView.scss

@@ -28,8 +28,8 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabels {
-    width: 150px;
+    width: 170px;
-    max-width: 150px;
+    max-width: 170px;
     color: $tab-label-fg-color;
     position: fixed;
 }
@@ -39,9 +39,8 @@ limitations under the License.
     cursor: pointer;
     display: block;
     border-radius: 3px;
-    font-size: 12px;
+    font-size: 14px;
-    font-weight: 600;
+    min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
-    min-height: 20px; // use min-height instead of height to allow the label to overflow a bit
     margin-bottom: 6px;
     position: relative;
 }
@@ -51,33 +50,28 @@ limitations under the License.
     color: $tab-label-active-fg-color;
 }
 
-// TODO: Remove temporary hack alongside "visit old settings" tab
+.mx_TabbedView_maskedIcon {
-.mx_TabbedView_tabLabel_TEMP_HACK {
-    background-color: orange;
-}
-
-.mx_TabbedView_maskedIcon {;
     margin-left: 6px;
     margin-right: 9px;
     margin-top: 1px;
-    width: 14px;
+    width: 16px;
-    height: 14px;
+    height: 16px;
     display: inline-block;
 }
 
-.mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_maskedIcon::before {
     display: inline-block;
     background-color: $tab-label-icon-bg-color;
     mask-repeat: no-repeat;
-    mask-size: 14px;
+    mask-size: 16px;
-    width: 14px;
+    width: 16px;
-    height: 18px;
+    height: 22px;
     mask-position: center;
     content: '';
     vertical-align: middle;
 }
 
-.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before {
     background-color: $tab-label-active-icon-bg-color;
 }
 
@@ -86,10 +80,11 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabPanel {
-    margin-left: 220px; // 150px sidebar + 70px padding
+    margin-left: 240px; // 170px sidebar + 70px padding
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    min-height: 0; // firefox
 }
 
 .mx_TabbedView_tabPanelContent {

res/css/structures/_TagPanel.scss

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_TagPanel {
-    flex: 0 0 70px;
+    flex: 1;
     background-color: $tagpanel-bg-color;
     cursor: pointer;
 
@@ -36,7 +36,6 @@ limitations under the License.
 
     flex: none;
 
-    display: flex;
     justify-content: center;
     align-items: flex-start;
 
@@ -68,26 +67,23 @@ limitations under the License.
 
     height: 100%;
 }
+.mx_TagPanel .mx_TagPanel_tagTileContainer > div {
+    height: 40px;
+    padding: 5px 0 4px 0;
+}
 
 .mx_TagPanel .mx_TagTile {
-    padding-top: 9px;
+    margin: 9px 0;
-    padding-bottom: 9px;
+    // opacity: 0.5;
-//  opacity: 0.5;
     position: relative;
 }
 .mx_TagPanel .mx_TagTile:focus,
 .mx_TagPanel .mx_TagTile:hover,
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected {
-//    opacity: 1;
+    // opacity: 1;
-}
-
-.mx_TagPanel .mx_TagTile.mx_TagTile_selected {
-    /* To offset border of mx_TagTile_avatar */
-    padding: 3px 0px;
 }
 
 .mx_TagPanel .mx_TagTile.mx_TagTile_selected .mx_TagTile_avatar .mx_BaseAvatar {
-    border: 3px solid $accent-color;
     background-color: $accent-color;
     border-radius: 40px;
 
@@ -97,6 +93,13 @@ limitations under the License.
     width: 40px;
 }
 
+.mx_TagPanel .mx_TagTile_selected .mx_BaseAvatar_image {
+    border: 3px solid $accent-color;
+    height: 40px;
+    width: 40px;
+    box-sizing: border-box;
+}
+
 .mx_TagPanel .mx_TagTile.mx_AccessibleButton:focus {
     filter: none;
 }
@@ -112,7 +115,7 @@ limitations under the License.
     height: 15px;
     position: absolute;
     right: -5px;
-    top: 1px;
+    top: -8px;
     border-radius: 8px;
     background-color: $neutral-badge-color;
     color: #ffffff;
@@ -124,39 +127,22 @@ limitations under the License.
     padding-right: 4px;
 }
 
-.mx_TagPanel_groupsButton {
+.mx_TagTile_avatar {
-    flex: 0;
-    margin: 17px 0 3px 0;
-}
-
-.mx_TagPanel_groupsButton > .mx_GroupsButton:before {
-    mask: url('$(res)/img/feather-icons/users.svg');
-    mask-position: center 11px;
-}
-
-.mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
-    mask: url('$(res)/img/feather-icons/life-buoy.svg');
-    mask-position: center 9px;
-}
-
-.mx_TagPanel_groupsButton > .mx_AccessibleButton {
-    margin-bottom: 12px;
-    height: 40px;
-    width: 40px;
-    border-radius: 20px;
-    background-color: $roomheader-addroom-color;
     position: relative;
-    /* overwrite mx_RoleButton inline-block */
+}
-    display: block !important;
+
-
+.mx_TagTile_badge {
-    &:before {
+    position: absolute;
-        background-color: $tagpanel-bg-color;
+    right: -4px;
-        mask-repeat: no-repeat;
+    top: -2px;
-        content: '';
+    border-radius: 8px;
-        position: absolute;
+    color: $accent-fg-color;
-        top: 0;
+    font-weight: 600;
-        bottom: 0;
+    font-size: 14px;
-        left: 0;
+    padding: 0 5px;
-        right: 0;
+    background-color: $roomtile-name-color;
-    }
+}
+
+.mx_TagTile_badgeHighlight {
+    background-color: $warning-color;
 }

res/css/structures/_TagPanelButtons.scss

@@ -0,0 +1,56 @@
+/*
+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_TagPanelButtons {
+    background-color: $tagpanel-bg-color;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    padding: 17px 0 3px 0;
+}
+
+.mx_TagPanelButtons > .mx_GroupsButton::before {
+    mask: url('$(res)/img/feather-customised/users.svg');
+    mask-position: center 11px;
+}
+
+.mx_TagPanelButtons > .mx_TagPanelButtons_report::before {
+    mask: url('$(res)/img/feather-customised/life-buoy.svg');
+    mask-position: center 9px;
+}
+
+.mx_TagPanelButtons > .mx_AccessibleButton {
+    margin-bottom: 12px;
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    background-color: $tagpanel-button-color;
+    position: relative;
+    /* overwrite mx_RoleButton inline-block */
+    display: block !important;
+
+    &::before {
+        background-color: $tagpanel-bg-color;
+        mask-repeat: no-repeat;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+}

res/css/structures/_TopLeftMenuButton.scss

@@ -41,7 +41,7 @@ limitations under the License.
 
 .mx_TopLeftMenuButton_chevron {
     margin: 0 7px;
-    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
     width: 10px;
     height: 6px;

res/css/structures/_UserSettings.scss

@@ -1,269 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations 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_UserSettings {
-    max-width: 960px;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_UserSettings .mx_RoomHeader {
-    order: 1;
-
-    flex: 0 0 70px;
-}
-
-.mx_UserSettings_body {
-    order: 2;
-
-    flex: 1 1 0;
-
-    margin-top: -20px;
-    overflow-y: auto;
-}
-
-.mx_UserSettings h3 {
-    clear: both;
-    margin-left: 63px;
-    text-transform: uppercase;
-    color: $h3-color;
-    font-weight: 600;
-    font-size: 13px;
-    margin-top: 26px;
-    margin-bottom: 10px;
-}
-
-.mx_UserSettings_section h3 {
-    margin-left: 0px;
-}
-
-.mx_UserSettings_spinner {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 12px;
-    width: 32px;
-    height: 32px;
-}
-
-.mx_UserSettings_button {
-    @mixin mx_DialogButton;
-    display: inline;
-    margin: auto;
-}
-
-.mx_UserSettings_button:hover {
-    @mixin mx_DialogButton_hover;
-}
-
-.mx_UserSettings_button.danger {
-    background-color: $warning-color;
-}
-
-.mx_UserSettings_section {
-    margin-left: 63px;
-    margin-top: 28px;
-    margin-bottom: 28px;
-}
-
-.mx_UserSettings_cryptoSection ul {
-    display: table;
-}
-.mx_UserSettings_cryptoSection li {
-    display: table-row;
-}
-.mx_UserSettings_cryptoSection label,
-.mx_UserSettings_cryptoSection span {
-    display: table-cell;
-    padding-right: 1em;
-}
-
-.mx_UserSettings_passwordWarning {
-    /* To move the "Sign out" button out of the way */
-    clear: both;
-    color: $warning-color;
-    margin-bottom: 5px;
-}
-
-.mx_UserSettings_importExportButtons {
-    padding-top: 10px;
-    padding-left: 40px;
-}
-
-.mx_UserSettings_importExportButtons .mx_UserSettings_button {
-    margin-right: 1em;
-}
-
-.mx_UserSettings_toggle input {
-    width: 16px;
-    margin-right: 8px;
-    margin-bottom: 8px;
-}
-
-.mx_UserSettings_toggle label {
-    padding-bottom: 21px;
-}
-
-.mx_UserSettings_accountTable
-.mx_UserSettings_notifTable
-{
-    display: table;
-}
-
-.mx_UserSettings_notifTable .mx_Spinner {
-    position: absolute;
-}
-
-.mx_UserSettings_language {
-    width: 200px;
-}
-
-.mx_UserSettings_webRtcDevices_dropdown {
-    width: 50%;
-}
-
-.mx_UserSettings_profileTable
-{
-    display: table;
-    float: left;
-}
-
-.mx_UserSettings_profileTableRow
-{
-    display: table-row;
-}
-
-.mx_UserSettings_profileLabelCell
-{
-    padding-bottom: 21px;
-    display: table-cell;
-    font-weight: bold;
-    padding-right: 24px;
-}
-
-.mx_UserSettings_profileInputCell {
-    display: table-cell;
-    padding-bottom: 21px;
-    width: 240px;
-}
-
-.mx_UserSettings_profileInputCell input,
-.mx_UserSettings_profileInputCell .mx_EditableText
-{
-    display: inline-block;
-    border: 0px;
-    border-bottom: 1px solid $input-underline-color;
-    padding: 0px;
-    width: 240px;
-    color: $input-fg-color;
-    font-family: $font-family;
-    font-size: 16px;
-}
-
-.mx_UserSettings_threepidButton {
-    display: table-cell;
-    padding-left: 0.5em;
-    position: relative;
-    cursor: pointer;
-}
-
-.mx_UserSettings_phoneSection {
-    display:table;
-}
-
-.mx_UserSettings_phoneCountry {
-    width: 70px;
-    display: table-cell;
-}
-
-input.mx_UserSettings_phoneNumberField {
-    margin-left: 3px;
-    width: 172px;
-    border: 1px solid transparent;
-}
-
-.mx_UserSettings_changePasswordButton {
-    float: right;
-    margin-right: 32px;
-    margin-left: 32px;
-}
-
-.mx_UserSettings_logout {
-    float: right;
-    margin-right: 32px;
-    margin-left: 32px;
-}
-
-.mx_UserSettings_avatarPicker {
-    margin-left: 32px;
-    margin-right: 32px;
-    float: right;
-    cursor: pointer;
-}
-
-.mx_UserSettings_avatarPicker_img .mx_BaseAvatar_image {
-    object-fit: cover;
-}
-
-.mx_UserSettings_avatarPicker_edit {
-    text-align: center;
-    margin-top: 10px;
-}
-
-.mx_UserSettings_avatarPicker_edit img {
-    cursor: pointer;
-}
-
-.mx_UserSettings_avatarPicker_edit > input {
-    display: none;
-}
-
-.mx_UserSettings_avatarPicker_imgContainer {
-    display: inline-block;
-}
-
-.mx_UserSettings_avatarPicker_remove {
-    display: inline-block;
-    float: right;
-    margin-right: -15px;
-}
-
-.mx_UserSettings_advanced_spoiler,
-.mx_UserSettings_link {
-    cursor: pointer;
-    color: $accent-color;
-    word-break: break-all;
-}
-
-.mx_UserSettings_analyticsModal table {
-    margin: 10px 0px;
-}
-
-
-// Temp styles to keep the layout moderately usable. Not perfect, but better
-// than 30 options being impossible to understand.
-.mx_UserSettings .mx_SettingsFlag {
-    height: 30px;
-}
-
-.mx_UserSettings .mx_SettingsFlag .mx_ToggleSwitch {
-    float: left;
-    margin-right: 5px;
-}

res/css/structures/_ViewSource.scss

@@ -14,6 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_ViewSource_label_left {
+    float: left;
+}
+
+.mx_ViewSource_label_right {
+    float: right;
+}
+
+.mx_ViewSource_label_bottom {
+    clear: both;
+    border-bottom: 1px solid #e5e5e5;
+}
+
 .mx_ViewSource pre {
     text-align: left;
     font-size: 12px;

res/css/structures/auth/_Login.scss

@@ -15,17 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_Login_field {
-    width: 100%;
-    box-sizing: border-box;
-    border-radius: 3px;
-    border: 1px solid $strong-input-border-color;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
-    margin-bottom: 14px;
-}
-
 .mx_Login_submit {
     @mixin mx_DialogButton;
     width: 100%;
@@ -69,74 +58,28 @@ limitations under the License.
     color: $warning-color;
     font-weight: bold;
     text-align: center;
-/*
-    height: 24px;
-*/
     margin-top: 12px;
     margin-bottom: 12px;
 }
 
 .mx_Login_type_container {
     display: flex;
-    margin-bottom: 14px;
+    align-items: center;
-    color: $primary-fg-color;
+    color: $authpage-primary-color;
+
+    .mx_Field {
+        margin: 0;
+    }
 }
 
 .mx_Login_type_label {
     flex-grow: 1;
-    line-height: 35px;
 }
 
 .mx_Login_type_dropdown {
-    display: inline-block;
+    min-width: 200px;
-    min-width: 170px;
-    align-self: flex-end;
-    flex: 1 1 auto;
 }
 
-.mx_Login_field_prefix {
+.mx_Login_underlinedServerName {
-    height: 38px;
+    border-bottom: 1px dashed $accent-color;
-    padding: 0px 5px;
-    line-height: 38px;
-
-    background-color: #eee;
-    border: 1px solid #c7c7c7;
-    border-right: 0px;
-    border-radius: 3px 0px 0px 3px;
-
-    text-align: center;
-}
-
-.mx_Login_field_has_prefix {
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-}
-
-.mx_Login_phoneSection {
-    display:flex;
-}
-
-.mx_Login_phoneCountry {
-    margin-bottom: 14px;
-
-    /* To override mx_Login_field_prefix */
-    text-align: left;
-    padding: 0px;
-    background-color: $primary-bg-color;
-}
-
-.mx_Login_field_prefix .mx_Dropdown_input {
-    /* To use prefix border instead of dropdown border */
-    border: 0;
-}
-
-.mx_Login_phoneCountry .mx_Dropdown_option {
-    /* To match height of mx_Login_field */
-    height: 38px;
-    line-height: 38px;
-}
-
-.mx_Login_phoneCountry .mx_Dropdown_option img {
-    margin: 3px;
-    vertical-align: top;
 }

res/css/views/auth/_AuthBody.scss

@@ -21,19 +21,80 @@ limitations under the License.
     padding: 25px 60px;
     box-sizing: border-box;
     font-size: 12px;
-    color: $authpage-body-color;
+    color: $authpage-secondary-color;
-}
 
-.mx_AuthBody h2 {
+    h2 {
         font-size: 24px;
         font-weight: 600;
         margin-top: 8px;
-}
+        color: $authpage-primary-color;
+    }
 
-.mx_AuthBody h3 {
+    h3 {
         font-size: 14px;
         font-weight: 600;
-    color: $primary-fg-color;
+        color: $authpage-primary-color;
+    }
+
+    a:link,
+    a:hover,
+    a:visited {
+        color: $accent-color;
+        text-decoration: none;
+    }
+
+    input[type=text],
+    input[type=password] {
+        color: $authpage-primary-color;
+    }
+
+    .mx_Field input,
+    .mx_Field select {
+        color: $authpage-primary-color;
+        background-color: $authpage-body-bg-color;
+    }
+
+    .mx_Field label {
+        color: $authpage-primary-color;
+    }
+
+    .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 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;
+    }
+
+    input.error {
+        color: $warning-color;
+    }
+
+    .mx_Field input {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    .mx_Field_select::before {
+        background-color: $authpage-primary-color;
+    }
+
+    .mx_Dropdown {
+        color: $authpage-primary-color;
+    }
+
+    .mx_Dropdown_arrow {
+        background: $authpage-primary-color;
+    }
+
+    .mx_Dropdown_menu {
+        background-color: $authpage-body-bg-color;
+
+        .mx_Dropdown_option_highlight {
+            background-color: $authpage-focus-bg-color;
+        }
+    }
 }
 
 .mx_AuthBody_editServerDetails {
@@ -42,38 +103,54 @@ limitations under the License.
     font-weight: normal;
 }
 
-.mx_AuthBody .mx_Field input {
-    width: 100%;
-    box-sizing: border-box;
-}
-
 .mx_AuthBody_fieldRow {
     display: flex;
     margin-bottom: 10px;
 }
 
-.mx_AuthBody_fieldRow > * {
+.mx_AuthBody_fieldRow > .mx_Field {
     margin: 0 5px;
     flex: 1;
 }
 
-.mx_AuthBody_fieldRow > *:first-child {
+.mx_AuthBody_fieldRow > .mx_Field:first-child {
     margin-left: 0;
 }
 
-.mx_AuthBody_fieldRow > *:last-child {
+.mx_AuthBody_fieldRow > .mx_Field:last-child {
     margin-right: 0;
 }
 
-.mx_AuthBody a:link,
-.mx_AuthBody a:hover,
-.mx_AuthBody a:visited {
-    color: $accent-color;
-    text-decoration: none;
-}
-
 .mx_AuthBody_changeFlow {
     display: block;
     text-align: center;
     width: 100%;
 }
+
+.mx_AuthBody_spinner {
+    margin: 1em 0;
+}
+
+.mx_AuthBody_passwordScore {
+    width: 100%;
+    appearance: none;
+    height: 4px;
+    border: 0;
+    border-radius: 2px;
+    position: absolute;
+    top: -12px;
+
+    &::-moz-progress-bar {
+        border-radius: 2px;
+        background-color: $accent-color;
+    }
+
+    &::-webkit-progress-bar,
+    &::-webkit-progress-value {
+        border-radius: 2px;
+    }
+
+    &::-webkit-progress-value {
+        background-color: $accent-color;
+    }
+}

res/css/views/auth/_ServerConfig.scss

@@ -35,3 +35,8 @@ limitations under the License.
 .mx_ServerConfig_help:link {
     opacity: 0.8;
 }
+
+.mx_ServerConfig_error {
+    display: block;
+    color: $warning-color;
+}

res/css/views/auth/_ServerTypeSelector.scss

@@ -34,7 +34,7 @@ limitations under the License.
 .mx_ServerTypeSelector_label {
     text-align: center;
     font-weight: 600;
-    color: $primary-fg-color;
+    color: $authpage-primary-color;
     margin: 8px 0;
 }
 
@@ -54,7 +54,7 @@ limitations under the License.
     height: 18px;
     margin-bottom: 12px;
     font-weight: 600;
-    color: $primary-fg-color;
+    color: $authpage-primary-color;
 }
 
 .mx_ServerTypeSelector_logo > div {

res/css/views/auth/_Welcome.scss

@@ -0,0 +1,26 @@
+/*
+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_Welcome {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mx_Welcome .mx_AuthBody_language {
+    width: 120px;
+    margin-bottom: 10px;
+}

res/css/views/avatars/_BaseAvatar.scss

@@ -16,6 +16,17 @@ limitations under the License.
 
 .mx_BaseAvatar {
     position: relative;
+    // In at least Firefox, the case of relative positioned inline elements
+    // (such as mx_BaseAvatar) with absolute positioned children (such as
+    // mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give
+    // different results during full reflow of the page vs. incremental reflow
+    // of small portions. While that's surely a browser bug, we can avoid it by
+    // using `inline-block` instead of the default `inline`.
+    // https://github.com/vector-im/riot-web/issues/5594
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
+    display: inline-block;
+    user-select: none;
 }
 
 .mx_BaseAvatar_initial {

res/css/views/context_menus/_TopLeftMenu.scss

@@ -15,24 +15,54 @@ limitations under the License.
 */
 
 .mx_TopLeftMenu {
-    min-width: 180px;
+    min-width: 210px;
     border-radius: 4px;
 
+    .mx_TopLeftMenu_greyedText {
+        font-size: 12px;
+        opacity: 0.5;
+    }
+
+    .mx_TopLeftMenu_upgradeLink {
+        font-size: 12px;
+
+        img {
+            margin-left: 5px;
+        }
+    }
+
     .mx_TopLeftMenu_section:not(:last-child) {
         border-bottom: 1px solid $menu-border-color;
     }
 
-    .mx_TopLeftMenu_section {
+    .mx_TopLeftMenu_section_noIcon {
-        list-style: none;
+        margin: 5px 0;
+        padding: 5px 20px 5px 15px;
+
+        div:not(:first-child) {
+            margin-top: 5px;
+        }
+    }
+
+    .mx_TopLeftMenu_section_withIcon {
         margin: 5px 0;
         padding: 0;
+        list-style: none;
+
+        li.mx_TopLeftMenu_icon_home::after {
+            mask-image: url('$(res)/img/feather-customised/home.svg');
+        }
 
         li.mx_TopLeftMenu_icon_settings::after {
-            mask-image: url('$(res)/img/feather-icons/settings.svg');
+            mask-image: url('$(res)/img/feather-customised/settings.svg');
+        }
+
+        li.mx_TopLeftMenu_icon_signin::after {
+            mask-image: url('$(res)/img/feather-customised/sign-in.svg');
         }
 
         li.mx_TopLeftMenu_icon_signout::after {
-            mask-image: url('$(res)/img/feather-icons/sign-out.svg');
+            mask-image: url('$(res)/img/feather-customised/sign-out.svg');
         }
 
         li::after {

res/css/views/dialogs/_AddressPickerDialog.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+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.
@@ -15,8 +16,8 @@ limitations under the License.
 */
 
 /* Using a textarea for this element, to circumvent autofill */
-.mx_ChatInviteDialog_input,
+.mx_AddressPickerDialog_input,
-.mx_ChatInviteDialog_input:focus
+.mx_AddressPickerDialog_input:focus
 {
     height: 26px;
     font-size: 14px;
@@ -34,11 +35,11 @@ limitations under the License.
     word-wrap: nowrap;
 }
 
-.mx_ChatInviteDialog .mx_Dialog_content {
+.mx_AddressPickerDialog .mx_Dialog_content {
     min-height: 50px
 }
 
-.mx_ChatInviteDialog_inputContainer {
+.mx_AddressPickerDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
     line-height: 36px;
@@ -51,19 +52,19 @@ limitations under the License.
     overflow-y: auto;
 }
 
-.mx_ChatInviteDialog_error {
+.mx_AddressPickerDialog_error {
     margin-top: 10px;
     color: $warning-color;
 }
 
-.mx_ChatInviteDialog_cancel {
+.mx_AddressPickerDialog_cancel {
     position: absolute;
     right: 11px;
     top: 13px;
     cursor: pointer;
 }
 
-.mx_ChatInviteDialog_cancel object {
+.mx_AddressPickerDialog_cancel object {
     pointer-events: none;
 }
 

res/css/views/dialogs/_Analytics.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_AnalyticsModal table {
+    margin: 10px 0px;
+}

res/css/views/dialogs/_BugReportDialog.scss

@@ -14,39 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_BugReportDialog_field_container {
+.mx_BugReportDialog .mx_Field {
-    display: flex;
+    flex: 1;
-}
-
-.mx_BugReportDialog_field_label {
-    flex-basis: 150px;
-
-    text-align: right;
-
-    padding-top: 9px;
-    padding-right: 4px;
-
-    line-height: 18px;
 }
 
 .mx_BugReportDialog_field_input {
-    flex-grow: 1;
+    // TODO: We should really apply this to all .mx_Field inputs.
-
+    // See https://github.com/vector-im/riot-web/issues/9344.
-    /* taken from mx_ChatInviteDialog_inputContainer */
+    flex: 1;
-    border-radius: 3px;
-    border: solid 1px $input-border-color;
-
-    font-size: 14px;
-
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 7px;
-    padding-bottom: 7px;
-
-    margin-bottom: 4px;
-}
-
-.mx_BugReportDialog_field_input[type="text" i] {
-    padding-top: 9px;
-    padding-bottom: 9px;
 }

res/css/views/dialogs/_CreateGroupDialog.scss

@@ -43,10 +43,9 @@ limitations under the License.
 
 .mx_CreateGroupDialog_prefix,
 .mx_CreateGroupDialog_suffix {
-    height: 35px;
     padding: 0px 5px;
     line-height: 37px;
-    background-color: $input-border-color;
+    background-color: $input-darker-bg-color;
     border: 1px solid $input-border-color;
     text-align: center;
 }

res/css/views/dialogs/_DeviceVerifyDialog.scss

@@ -0,0 +1,29 @@
+/*
+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_DeviceVerifyDialog_cryptoSection ul {
+    display: table;
+}
+
+.mx_DeviceVerifyDialog_cryptoSection li {
+    display: table-row;
+}
+
+.mx_DeviceVerifyDialog_cryptoSection label,
+.mx_DeviceVerifyDialog_cryptoSection span {
+    display: table-cell;
+    padding-right: 1em;
+}

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -18,7 +18,12 @@ limitations under the License.
     margin: 10px 0;
 }
 
-.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_RoomStateExplorer_query {
+.mx_DevTools_ServersInRoomList_button {
+    /* Set the cursor back to default as `.mx_Dialog button` sets it to pointer */
+    cursor: default !important;
+}
+
+.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button, .mx_DevTools_RoomStateExplorer_query {
     margin-bottom: 10px;
     width: 100%;
 }
@@ -67,12 +72,25 @@ limitations under the License.
 
 .mx_DevTools_textarea {
     font-size: 12px;
-    max-width: 624px;
+    max-width: 684px;
     min-height: 250px;
     padding: 10px;
     width: 100%;
 }
 
+.mx_DevTools_content .mx_Field_input {
+    display: inline-block;
+}
+
+.mx_DevTools_eventTypeStateKeyGroup {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.mx_DevTools_content .mx_Field_input:first-of-type {
+    margin-right: 42px;
+}
+
 .mx_DevTools_tgl {
     display: none;
 

res/css/views/dialogs/_IncomingSasDialog.scss

@@ -14,21 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_HexVerify {
+.mx_IncomingSasDialog_opponentProfile_image {
-    text-align: center;
+    position: relative;
 }
 
-.mx_HexVerify_pair {
+.mx_IncomingSasDialog_opponentProfile h2 {
     display: inline-block;
-    font-weight: bold;
+    margin-left: 10px;
-    padding-left: 3px;
-    padding-right: 3px;
-}
-
-.mx_HexVerify_pair_verified {
-    color: $accent-color;
-}
-
-.mx_HexVerify_pair:hover{
-    color: $accent-color;
 }

res/css/views/dialogs/_RoomSettingsDialog.scss

@@ -18,17 +18,27 @@ limitations under the License.
 // ==========================================================
 
 .mx_RoomSettingsDialog_settingsIcon:before {
-    mask-image: url('$(res)/img/feather-icons/settings.svg');
+    mask-image: url('$(res)/img/feather-customised/settings.svg');
 }
 
 .mx_RoomSettingsDialog_securityIcon:before {
-    mask-image: url('$(res)/img/feather-icons/lock.svg');
+    mask-image: url('$(res)/img/feather-customised/lock.svg');
 }
 
 .mx_RoomSettingsDialog_rolesIcon:before {
-    mask-image: url('$(res)/img/feather-icons/users-sm.svg');
+    mask-image: url('$(res)/img/feather-customised/users-sm.svg');
 }
 
 .mx_RoomSettingsDialog_warningIcon:before {
-    mask-image: url('$(res)/img/feather-icons/warning-triangle.svg');
+    mask-image: url('$(res)/img/feather-customised/warning-triangle.svg');
+}
+
+.mx_RoomSettingsDialog .mx_Dialog_title {
+    -ms-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    margin: 0 auto;
+    padding-left: 40px;
+    padding-right: 80px;
 }

res/css/views/dialogs/_SettingsDialog.scss

@@ -14,15 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SettingsDialog {
+// Not actually a component but things shared by settings components
-    .mx_Dialog {
+.mx_UserSettingsDialog, .mx_RoomSettingsDialog {
-        max-width: 900px;
+    width: 90vw;
-        width: 80%;
+    max-width: 1000px;
-        height: 80%;
+    // set the height too since tabbed view scrolls itself.
-        border-radius: 4px;
+    height: 80vh;
-        padding-top: 0;
-        padding-right: 0;
-        padding-left: 0;
 
     .mx_TabbedView {
         top: 65px;
@@ -30,8 +27,8 @@ limitations under the License.
 
     .mx_TabbedView .mx_SettingsTab {
         box-sizing: border-box;
-            min-width: 550px;
+        min-width: 580px;
-            padding-right: 130px;
+        padding-right: 100px;
 
         // Put some padding on the bottom to avoid the settings tab from
         // colliding harshly with the dialog when scrolled down.
@@ -40,8 +37,6 @@ limitations under the License.
 
     .mx_Dialog_title {
         text-align: center;
-            margin-top: 16px;
         margin-bottom: 24px;
     }
-    }
 }

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -28,28 +28,28 @@ limitations under the License.
     flex-direction: column;
 }
 
+.mx_UnknownDeviceDialog ul {
+    list-style: none;
+    padding: 0;
+}
+// userid
+.mx_UnknownDeviceDialog p {
+    font-weight: bold;
+    font-size: 16px;
+}
+
 .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
-    float: right;
+    flex-direction: row !important;
 }
 
 .mx_UnknownDeviceDialog .mx_Dialog_content {
     margin-bottom: 24px;
 }
 
-.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
+.mx_UnknownDeviceDialog_deviceList > li {
-    float: right;
+    padding: 4px;
-    clear: both;
-    padding: 0px;
-    padding-top: 8px;
 }
 
-.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
+.mx_UnknownDeviceDialog_deviceList > li > * {
-    @mixin mx_DialogButton_small;
+    padding-bottom: 0;
-    background-color: $primary-bg-color;
-    color: $accent-color;
-}
-
-.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
-    height: 40px;
-    border-bottom: 1px solid $primary-hairline-color;
 }

res/css/views/dialogs/_UploadConfirmDialog.scss

@@ -0,0 +1,35 @@
+/*
+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_UploadConfirmDialog_fileIcon {
+    margin-right: 5px;
+}
+
+.mx_UploadConfirmDialog_previewOuter {
+    text-align: center;
+}
+
+.mx_UploadConfirmDialog_previewInner {
+    display: inline-block;
+    text-align: left;
+}
+
+.mx_UploadConfirmDialog_imagePreview {
+    max-height: 300px;
+    max-width: 100%;
+    border-radius: 4px;
+    border: 1px solid $dialog-close-fg-color;
+}

res/css/views/dialogs/_UserSettingsDialog.scss

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

res/css/views/dialogs/_WidgetOpenIDPermissionsDialog.scss

@@ -0,0 +1,28 @@
+/*
+Copyright 2019 Travis Ralston
+
+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_WidgetOpenIDPermissionsDialog .mx_SettingsFlag {
+    .mx_ToggleSwitch {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 8px;
+    }
+
+    .mx_SettingsFlag_label {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}

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

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

res/css/views/elements/_AccessibleButton.scss

@@ -37,11 +37,16 @@ limitations under the License.
 .mx_AccessibleButton_kind_primary {
     color: $button-primary-fg-color;
     background-color: $button-primary-bg-color;
+    font-weight: 600;
+}
+
+.mx_AccessibleButton_kind_secondary {
+    color: $accent-color;
+    font-weight: 600;
 }
 
 .mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
-    color: $button-primary-disabled-fg-color;
+    opacity: 0.4;
-    background-color: $button-primary-disabled-bg-color;
 }
 
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
@@ -51,8 +56,7 @@ limitations under the License.
 }
 
 .mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
-    color: $button-primary-disabled-fg-color;
+    opacity: 0.4;
-    background-color: $button-primary-disabled-bg-color;
 }
 
 .mx_AccessibleButton_kind_danger {

res/css/views/elements/_Dropdown.scss

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_Dropdown {
     position: relative;
+    color: $primary-fg-color;
 }
 
 .mx_Dropdown_disabled {
@@ -33,7 +34,7 @@ limitations under the License.
 }
 
 .mx_Dropdown_input:focus {
-    border-color: $accent-color;
+    border-color: $input-focused-border-color;
 }
 
 /* Disable dropdown highlight on focus */
@@ -45,7 +46,7 @@ limitations under the License.
     width: 10px;
     height: 6px;
     padding-right: 9px;
-    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
     background: $primary-fg-color;
 }
@@ -76,7 +77,9 @@ limitations under the License.
     vertical-align: middle;
 }
 
-input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
+input.mx_Dropdown_option,
+input.mx_Dropdown_option:focus {
+    font-weight: normal;
     border: 0;
     padding-top: 0;
     padding-bottom: 0;
@@ -95,7 +98,7 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
     margin: 0;
     padding: 0px;
     border-radius: 3px;
-    border: 1px solid $accent-color;
+    border: 1px solid $input-focused-border-color;
     background-color: $primary-bg-color;
     max-height: 200px;
     overflow-y: auto;
@@ -110,10 +113,6 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
     background-color: $focus-bg-color;
 }
 
-.mx_Dropdown_menu {
-    font-weight: bold;
-}
-
 .mx_Dropdown_searchPrompt {
     font-weight: normal;
     margin-left: 5px;

res/css/views/elements/_EditableItemList.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2017, 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.
@@ -16,47 +16,38 @@ limitations under the License.
 
 .mx_EditableItemList {
     margin-top: 12px;
-    margin-bottom: 0px;
+    margin-bottom: 10px;
 }
 
 .mx_EditableItem {
-    display: flex;
+    margin-bottom: 5px;
-    margin-left: 56px;
+    margin-left: 15px;
 }
 
-.mx_EditableItem .mx_EditableItem_editable {
+.mx_EditableItem_delete {
-    border: 0px;
+    margin-right: 5px;
-    border-bottom: 1px solid $strong-input-border-color;
-    padding: 0px;
-    min-width: 240px;
-    max-width: 400px;
-    margin-bottom: 16px;
-}
-
-.mx_EditableItem .mx_EditableItem_editable:focus {
-    border-bottom: 1px solid $accent-color;
-    outline: none;
-    box-shadow: none;
-}
-
-.mx_EditableItem .mx_EditableItem_editablePlaceholder {
-    color: $settings-grey-fg-color;
-}
-
-.mx_EditableItem .mx_EditableItem_addButton,
-.mx_EditableItem .mx_EditableItem_removeButton {
-    padding-left: 0.5em;
-    position: relative;
     cursor: pointer;
-
+    vertical-align: middle;
-    visibility: hidden;
 }
 
-.mx_EditableItem:hover .mx_EditableItem_addButton,
+.mx_EditableItem_email {
-.mx_EditableItem:hover .mx_EditableItem_removeButton {
+    vertical-align: middle;
-    visibility: visible;
+}
+
+.mx_EditableItem_promptText {
+    margin-right: 10px;
+}
+
+.mx_EditableItem_confirmBtn {
+    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: 8px;
+    margin-bottom: 5px;
 }

res/css/views/elements/_Field.scss

@@ -14,11 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* TODO: Consider unifying with general input styles in _dharma.scss */
+/* TODO: Consider unifying with general input styles in _light.scss */
 
 .mx_Field {
+    display: flex;
     position: relative;
     margin: 1em 0;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+    border: 1px solid $input-border-color;
+}
+
+.mx_Field_prefix {
+    border-right: 1px solid $input-border-color;
 }
 
 .mx_Field input,
@@ -27,10 +35,12 @@ limitations under the License.
     font-weight: normal;
     font-family: $font-family;
     font-size: 14px;
+    border: none;
+    // Even without a border here, we still need this avoid overlapping the rounded
+    // corners on the field above.
     border-radius: 4px;
-    transition: border-color 0.25s;
-    border: 1px solid $input-border-color;
     padding: 8px 9px;
+    color: $primary-fg-color;
     background-color: $primary-bg-color;
 }
 
@@ -47,18 +57,21 @@ limitations under the License.
     right: 10px;
     width: 10px;
     height: 6px;
-    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask: url('$(res)/img/feather-customised/dropdown-arrow.svg');
     mask-repeat: no-repeat;
     background-color: $primary-fg-color;
     z-index: 1;
     pointer-events: none;
 }
 
+.mx_Field:focus-within {
+    border-color: $input-focused-border-color;
+}
+
 .mx_Field input:focus,
 .mx_Field select:focus,
 .mx_Field textarea:focus {
     outline: 0;
-    border-color: $input-focused-border-color;
 }
 
 .mx_Field input::placeholder,
@@ -87,21 +100,29 @@ limitations under the License.
     top: 0px;
     margin: 7px 8px;
     padding: 2px;
+    pointer-events: none; // Allow clicks to fall through to the input
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 20px); // 100% of parent minus margin and padding
 }
 
 .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 select + label /* Always show a select's label on top to not collide with the value */ {
+.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,
         top 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
     font-size: 10px;
-    top: -14px;
+    top: -13px;
+    padding: 0 2px;
     background-color: $field-focused-label-bg-color;
+    pointer-events: initial;
 }
 
 .mx_Field input:focus + label,
@@ -111,7 +132,56 @@ limitations under the License.
 }
 
 .mx_Field select:disabled,
-.mx_Field input:disabled {
+.mx_Field select:disabled + label,
+.mx_Field input:disabled,
+.mx_Field input:disabled + label,
+.mx_Field textarea:disabled,
+.mx_Field textarea:disabled + label {
     background-color: $field-focused-label-bg-color;
     color: $greyed-fg-color;
 }
+
+.mx_Field_valid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $input-valid-border-color;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $input-valid-border-color;
+    }
+}
+
+.mx_Field_invalid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $input-invalid-border-color;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $input-invalid-border-color;
+    }
+}
+
+.mx_Field_tooltip {
+    margin-top: -12px;
+    margin-left: 4px;
+    width: 200px;
+}
+
+.mx_Field_tooltip.mx_Field_valid {
+    animation: mx_fadeout 1s 2s forwards;
+}
+
+// Customise other components when placed inside a Field
+
+.mx_Field .mx_Dropdown_input {
+    border: initial;
+    border-radius: initial;
+}
+
+.mx_Field .mx_CountryDropdown {
+    width: 67px;
+}

res/css/views/elements/_ImageView.scss

@@ -77,9 +77,27 @@ limitations under the License.
 
 .mx_ImageView_cancel {
     position: absolute;
-    top: 0px;
+    // hack for mx_Dialog having a top padding of 40px
+    top: 40px;
     right: 0px;
-    padding: 35px;
+    padding-top: 35px;
+    padding-right: 35px;
+    cursor: pointer;
+}
+
+.mx_ImageView_rotateClockwise {
+    position: absolute;
+    top: 40px;
+    right: 70px;
+    padding-top: 35px;
+    cursor: pointer;
+}
+
+.mx_ImageView_rotateCounterClockwise {
+    position: absolute;
+    top: 40px;
+    right: 105px;
+    padding-top: 35px;
     cursor: pointer;
 }
 

res/css/views/elements/_ManageIntegsButton.scss

@@ -0,0 +1,53 @@
+/*
+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_ManageIntegsButton_error {
+    position: relative;
+    cursor: not-allowed;
+}
+
+.mx_ManageIntegsButton_error img {
+    position: absolute;
+    right: -5px;
+    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%;
+    left: -275%;
+    width: 550%;
+    padding: 30%;
+    font-size: 10pt;
+    line-height: 1.5em;
+    border-radius: 5px;
+    background-color: $accent-color;
+    color: $accent-fg-color;
+    text-align: center;
+    z-index: 1000;
+}

res/css/views/elements/_MessageEditor.scss

@@ -0,0 +1,90 @@
+/*
+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_MessageEditor {
+    border-radius: 4px;
+    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_MessageEditor_editor {
+        border-radius: 4px;
+        border: solid 1px $primary-hairline-color;
+        background-color: $primary-bg-color;
+        padding: 3px 6px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+        outline: none;
+        max-height: 200px;
+        overflow-x: auto;
+
+        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_MessageEditor_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_MessageEditor_AutoCompleteWrapper {
+        position: relative;
+        height: 0;
+    }
+}
+
+.mx_EventTile_last .mx_MessageEditor_buttons {
+    position: static;
+    margin-right: -147px;
+}

res/css/views/elements/_PowerSelector.scss

@@ -0,0 +1,25 @@
+/*
+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_PowerSelector {
+    width: 100%;
+}
+
+.mx_PowerSelector .mx_Field select,
+.mx_PowerSelector .mx_Field input {
+    width: 100%;
+    box-sizing: border-box;
+}

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/_Tooltip.scss

@@ -0,0 +1,92 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+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.
+*/
+
+@keyframes mx_fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes mx_fadeout {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.mx_Tooltip_chevron {
+    position: absolute;
+    left: -7px;
+    top: 10px;
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid $menu-border-color;
+    border-bottom: 7px solid transparent;
+}
+
+.mx_Tooltip_chevron:after {
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-right: 6px solid $menu-bg-color;
+    border-bottom: 6px solid transparent;
+    position: absolute;
+    top: -6px;
+    left: 1px;
+}
+
+.mx_Tooltip {
+    display: none;
+    position: fixed;
+    border: 1px solid $menu-border-color;
+    border-radius: 4px;
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
+    background-color: $menu-bg-color;
+    z-index: 2000;
+    padding: 10px;
+    pointer-events: none;
+    line-height: 14px;
+    font-size: 12px;
+    font-weight: 600;
+    color: $primary-fg-color;
+    max-width: 200px;
+    word-break: break-word;
+    margin-right: 50px;
+
+    &.mx_Tooltip_visible {
+        animation: mx_fadein 0.2s forwards;
+    }
+
+    &.mx_Tooltip_invisible {
+        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/_Validation.scss

@@ -0,0 +1,69 @@
+/*
+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_Validation {
+    position: relative;
+}
+
+.mx_Validation_details {
+    padding-left: 20px;
+    margin: 0;
+}
+
+.mx_Validation_description + .mx_Validation_details {
+    margin: 1em 0 0;
+}
+
+.mx_Validation_detail {
+    position: relative;
+    font-weight: normal;
+    list-style: none;
+    margin-bottom: 0.5em;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        top: 0;
+        left: -18px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+
+    &.mx_Validation_valid {
+        color: $input-valid-border-color;
+
+        &::before {
+            mask-image: url('$(res)/img/feather-customised/check.svg');
+            background-color: $input-valid-border-color;
+        }
+    }
+
+    &.mx_Validation_invalid {
+        color: $input-invalid-border-color;
+
+        &::before {
+            mask-image: url('$(res)/img/feather-customised/x.svg');
+            background-color: $input-invalid-border-color;
+        }
+    }
+}

res/css/views/messages/_CreateEvent.scss

@@ -24,9 +24,14 @@ limitations under the License.
 
 .mx_CreateEvent_image {
     float: left;
-    padding-right: 20px;
+    margin-right: 20px;
     width: 72px;
     height: 34px;
+
+    background-color: $primary-fg-color;
+    mask: url('$(res)/img/room-continuation.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
 }
 
 .mx_CreateEvent_header {

res/css/views/messages/_MessageActionBar.scss

@@ -0,0 +1,78 @@
+/*
+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_MessageActionBar {
+    position: absolute;
+    visibility: hidden;
+    cursor: pointer;
+    display: flex;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 4px;
+    background: $message-action-bar-bg-color;
+    top: -18px;
+    right: 8px;
+    user-select: none;
+
+    > * {
+        display: inline-block;
+        position: relative;
+        width: 27px;
+        border: 1px solid $message-action-bar-border-color;
+        margin-left: -1px;
+
+        &:hover {
+            border-color: $message-action-bar-hover-border-color;
+            z-index: 1;
+        }
+
+        &:first-child {
+            border-radius: 3px 0 0 3px;
+        }
+
+        &:last-child {
+            border-radius: 0 3px 3px 0;
+        }
+
+        &:only-child {
+            border-radius: 3px;
+        }
+    }
+}
+
+.mx_MessageActionBar_maskButton::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: $message-action-bar-fg-color;
+}
+
+.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/_ReactionDimension.scss

@@ -0,0 +1,25 @@
+/*
+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_ReactionDimension {
+    width: 42px;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.mx_ReactionDimension_disabled {
+    opacity: 0.4;
+}

res/css/views/messages/_ReactionsRow.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_ReactionsRow {
+    margin: 6px 0;
+}

res/css/views/messages/_ReactionsRowButton.scss

@@ -0,0 +1,37 @@
+/*
+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_ReactionsRowButton {
+    display: inline-block;
+    height: 20px;
+    line-height: 21px;
+    margin-right: 6px;
+    padding: 0 6px;
+    border: 1px solid $reaction-row-button-border-color;
+    border-radius: 10px;
+    background-color: $reaction-row-button-bg-color;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+        border-color: $reaction-row-button-hover-border-color;
+    }
+
+    &.mx_ReactionsRowButton_selected {
+        background-color: $reaction-row-button-selected-bg-color;
+        border-color: $reaction-row-button-selected-border-color;
+    }
+}

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/_SenderProfile.scss

@@ -18,36 +18,3 @@ limitations under the License.
     font-weight: 600;
 }
 
-.mx_SenderProfile_color1 {
-    color: $username-variant1-color;
-}
-
-.mx_SenderProfile_color2 {
-    color: $username-variant2-color;
-}
-
-.mx_SenderProfile_color3 {
-    color: $username-variant3-color;
-}
-
-.mx_SenderProfile_color4 {
-    color: $username-variant4-color;
-}
-
-.mx_SenderProfile_color5 {
-    color: $username-variant5-color;
-}
-
-.mx_SenderProfile_color6 {
-    color: $username-variant6-color;
-}
-
-.mx_SenderProfile_color7 {
-    color: $username-variant7-color;
-}
-
-.mx_SenderProfile_color8 {
-    color: $username-variant8-color;
-}
-
-

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/room_settings/_AliasSettings.scss

@@ -0,0 +1,28 @@
+/*
+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_AliasSettings_editable {
+    border: 0px;
+    border-bottom: 1px solid $strong-input-border-color;
+    padding: 0px;
+    min-width: 240px;
+}
+
+.mx_AliasSettings_editable:focus {
+    border-bottom: 1px solid $accent-color;
+    outline: none;
+    box-shadow: none;
+}

res/css/views/room_settings/_ColorSettings.scss

@@ -0,0 +1,39 @@
+/*
+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_ColorSettings_roomColor {
+    display: inline-block;
+    position: relative;
+    width: 37px;
+    height: 37px;
+    border: 1px solid #979797;
+    margin-right: 13px;
+    cursor: pointer;
+}
+
+.mx_ColorSettings_roomColor_selected {
+    position: absolute;
+    left: 10px;
+    top: 4px;
+    cursor: default ! important;
+}
+
+.mx_ColorSettings_roomColorPrimary {
+    height: 10px;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}

res/css/views/rooms/_AppsDrawer.scss

@@ -14,6 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+/*
+the tile title bar is 5 (top border) + 12 (title, buttons) + 5 (bottom padding) px = 22px
+the body is assumed to be 300px (assumed by at least the sticker pickerm, perhaps elsewhere),
+so the body height would be 300px - 22px (room for title bar) = 278px
+BUT! the sticker picker also assumes it's a little less high than that because the iframe
+for the sticker picker doesn't have any padding or margin on it's bottom.
+so subtracking another 5px, which brings us at 273px.
+*/
+$AppsDrawerBodyHeight: 273px;
+
 .mx_AppsDrawer {
     margin: 5px;
 }
@@ -83,7 +93,7 @@ limitations under the License.
 }
 
 .mx_AppTile_persistedWrapper {
-    height: 280px;
+    height: $AppsDrawerBodyHeight;
 }
 
 .mx_AppTile_mini .mx_AppTile_persistedWrapper {
@@ -134,39 +144,39 @@ limitations under the License.
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_minimise {
-    mask-image: url('$(res)/img/feather-icons/widget/minimise.svg');
+    mask-image: url('$(res)/img/feather-customised/widget/minimise.svg');
     background-color: $accent-color;
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_maximise {
-    mask-image: url('$(res)/img/feather-icons/widget/maximise.svg');
+    mask-image: url('$(res)/img/feather-customised/widget/maximise.svg');
     background-color: $accent-color;
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_reload {
-    mask-image: url('$(res)/img/feather-icons/widget/refresh.svg');
+    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-icons/widget/external-link.svg');
+    mask-image: url('$(res)/img/feather-customised/widget/external-link.svg');
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_snapshot {
-    mask-image: url('$(res)/img/feather-icons/widget/camera.svg');
+    mask-image: url('$(res)/img/feather-customised/widget/camera.svg');
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_edit {
-    mask-image: url('$(res)/img/feather-icons/widget/edit.svg');
+    mask-image: url('$(res)/img/feather-customised/widget/edit.svg');
 }
 
 .mx_AppTileMenuBar_iconButton.mx_AppTileMenuBar_iconButton_delete {
-    mask-image: url('$(res)/img/feather-icons/widget/bin.svg');
+    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-icons/widget/x-circle.svg');
+    mask-image: url('$(res)/img/feather-customised/widget/x-circle.svg');
 }
 
 /* delete ? */
@@ -189,7 +199,7 @@ limitations under the License.
 }
 
 .mx_AppTileBody{
-    height: 280px;
+    height: $AppsDrawerBodyHeight;
     width: 100%;
     overflow: hidden;
 }
@@ -208,7 +218,7 @@ limitations under the License.
 
 .mx_AppTileBody iframe {
     width: 100%;
-    height: 280px;
+    height: $AppsDrawerBodyHeight;
     overflow: hidden;
     border: none;
     padding: 0;
@@ -332,7 +342,7 @@ form.mx_Custom_Widget_Form div {
     align-items: center;
     font-weight: bold;
     position: relative;
-    height: 280px;
+    height: $AppsDrawerBodyHeight;
 }
 
 .mx_AppLoading .mx_Spinner {

res/css/views/rooms/_Autocomplete.scss

@@ -71,7 +71,7 @@
 
 .mx_Autocomplete_Completion.selected,
 .mx_Autocomplete_Completion:hover {
-    background: $menu-bg-color;
+    background: $selected-color;
     outline: none;
 }
 

res/css/views/rooms/_E2EIcon.scss

@@ -23,11 +23,11 @@ limitations under the License.
 }
 
 .mx_E2EIcon_verified {
-    mask-image: url('$(res)/img/feather-icons/e2e/lock-verified.svg');
+    mask-image: url('$(res)/img/e2e/lock-verified.svg');
     background-color: $accent-color;
 }
 
 .mx_E2EIcon_warning {
-    mask-image: url('$(res)/img/feather-icons/e2e/lock-warning.svg');
+    mask-image: url('$(res)/img/e2e/lock-warning.svg');
     background-color: $warning-color;
 }

res/css/views/rooms/_EntityTile.scss

@@ -22,10 +22,28 @@ limitations under the License.
 }
 
 .mx_EntityTile:hover {
-    background-image: url('$(res)/img/member_chevron.png');
-    background-position: center right 10px;
-    background-repeat: no-repeat;
     padding-right: 30px;
+    position: relative; // to keep the chevron aligned
+}
+
+.mx_EntityTile:hover::before {
+    content: "";
+    position: absolute;
+    top: calc(50% - 8px); // center
+    right: 10px;
+    mask: url('$(res)/img/member_chevron.png');
+    mask-repeat: no-repeat;
+    width: 16px;
+    height: 16px;
+    background-color: $rightpanel-button-color;
+}
+
+.mx_EntityTile .mx_PresenceLabel {
+    display: none;
+}
+
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_PresenceLabel {
+    display: block;
 }
 
 .mx_EntityTile_invite {
@@ -67,7 +85,7 @@ limitations under the License.
     overflow: hidden;
 }
 
-.mx_EntityTile_name_hover {
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
     font-size: 13px;
 }
 
@@ -81,31 +99,25 @@ limitations under the License.
     color: $primary-fg-color;
 }
 
-/*
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
 .mx_EntityTile_unavailable .mx_EntityTile_name,
-.mx_EntityTile_unavailable .mx_EntityTile_name_hover,
 .mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name
-.mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover
 {
-    opacity: 0.66;
+    opacity: 0.5;
 }
 
 .mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name
-.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }
 
 .mx_EntityTile_unknown .mx_EntityTile_avatar,
-.mx_EntityTile_unknown .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_name
-.mx_EntityTile_unknown .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }
-*/
 
 .mx_EntityTile_subtext {
     font-size: 11px;

res/css/views/rooms/_EventTile.scss

@@ -31,6 +31,7 @@ limitations under the License.
     top: 14px;
     left: 8px;
     cursor: pointer;
+    user-select: none;
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
@@ -39,31 +40,49 @@ 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: block; /* anti-zalgo, with overflow hidden */
+    display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow-y: hidden;
     cursor: pointer;
     padding-left: 65px; /* left gutter */
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: 22px;
+    line-height: 17px;
 }
 
 .mx_EventTile .mx_SenderProfile .mx_Flair {
     opacity: 0.7;
     margin-left: 5px;
-}
+    display: inline-block;
+    vertical-align: top;
+    height: 16px;
+    overflow: hidden;
+    user-select: none;
 
-.mx_EventTile .mx_SenderProfile .mx_Flair img {
+    img {
         vertical-align: -2px;
         margin-right: 2px;
         border-radius: 8px;
+    }
+}
+
+.mx_EventTile_isEditing .mx_MessageTimestamp {
+    visibility: hidden !important;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
@@ -76,6 +95,7 @@ limitations under the License.
     width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
     position: absolute;
+    user-select: none;
 }
 
 .mx_EventTile_line, .mx_EventTile_reply {
@@ -101,7 +121,7 @@ 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;
-    line-height: 48px ! important;
+    line-height: 52px ! important;
 }
 
 /* this is used for the tile for the event which is selected via the URL.
@@ -114,7 +134,7 @@ limitations under the License.
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile.menu .mx_EventTile_line
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
 {
     background-color: $event-selected-color;
 }
@@ -142,8 +162,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;
 }
 
@@ -199,7 +218,7 @@ limitations under the License.
 // 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.menu > div > a > .mx_MessageTimestamp {
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
     visibility: visible;
 }
 
@@ -212,24 +231,8 @@ limitations under the License.
     width: auto;
 }
 
-.mx_EventTile_editButton {
+.mx_EventTile:hover .mx_MessageActionBar,
-    position: absolute;
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
-    display: inline-block;
-    visibility: hidden;
-    cursor: pointer;
-    top: 6px;
-    right: 6px;
-    width: 19px;
-    height: 19px;
-    background-image: url($edit-button-url);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.mx_EventTile:hover .mx_EventTile_editButton,
-.mx_EventTile.menu .mx_EventTile_editButton {
     visibility: visible;
 }
 
@@ -239,6 +242,7 @@ limitations under the License.
     width: 14px;
     height: 14px;
     top: 29px;
+    user-select: none;
 }
 
 .mx_EventTile_continuation .mx_EventTile_readAvatars,
@@ -277,6 +281,9 @@ limitations under the License.
 }
 
 /* End to end encryption stuff */
+.mx_EventTile:hover .mx_EventTile_e2eIcon {
+    opacity: 1;
+}
 
 .mx_EventTile_e2eIcon {
     display: block;
@@ -289,15 +296,16 @@ limitations under the License.
     mask-size: 14px;
     mask-repeat: no-repeat;
     mask-position: 0;
+    opacity: 0.2;
 }
 
 .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
-    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    mask-image: url('$(res)/img/e2e/warning.svg');
     background-color: $warning-color;
 }
 
 .mx_EventTile_e2eIcon_unencrypted {
-    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    mask-image: url('$(res)/img/e2e/warning.svg');
     background-color: $composer-e2e-icon-color;
 }
 
@@ -381,6 +389,14 @@ 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;
+}
+
 /* Various markdown overrides */
 
 .mx_EventTile_content .markdown-body {
@@ -404,7 +420,14 @@ limitations under the License.
 .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;
+    }
 }
 
 .mx_EventTile_pre_container {
@@ -533,10 +556,6 @@ limitations under the License.
     }
 
     .mx_EventTile_e2eIcon {
-        top: 7px;
-    }
-
-    .mx_EventTile_editButton {
         top: 3px;
     }
 

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -27,15 +27,15 @@ limitations under the License.
     mask-repeat: no-repeat;
 }
 .mx_MemberDeviceInfo_icon_blacklisted {
-    mask-image: url('$(res)/img/feather-icons/e2e/blacklisted.svg');
+    mask-image: url('$(res)/img/e2e/blacklisted.svg');
     background-color: $warning-color;
 }
 .mx_MemberDeviceInfo_icon_verified {
-    mask-image: url('$(res)/img/feather-icons/e2e/verified.svg');
+    mask-image: url('$(res)/img/e2e/verified.svg');
     background-color: $accent-color;
 }
 .mx_MemberDeviceInfo_icon_unverified {
-    mask-image: url('$(res)/img/feather-icons/e2e/warning.svg');
+    mask-image: url('$(res)/img/e2e/warning.svg');
     background-color: $warning-color;
 }
 

res/css/views/rooms/_MemberInfo.scss

@@ -27,13 +27,18 @@ limitations under the License.
 }
 
 .mx_MemberInfo_name > .mx_E2EIcon {
-    margin-left: 0;
+    margin-right: 0;
 }
 
 .mx_MemberInfo_cancel {
     height: 16px;
-    padding: 10px 15px;
+    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;
 }
 
 .mx_MemberInfo_name h2 {
@@ -43,7 +48,7 @@ limitations under the License.
 .mx_MemberInfo h2 {
     font-size: 18px;
     font-weight: 600;
-    margin: 16px 0;
+    margin: 16px 0 16px 15px;
 }
 
 .mx_MemberInfo_container {

res/css/views/rooms/_MemberList.scss

@@ -20,6 +20,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    min-height: 0;
 
     .mx_Spinner {
         flex: 1 0 auto;
@@ -35,6 +36,10 @@ limitations under the License.
         margin-top: 8px;
         margin-bottom: 4px;
     }
+
+    .mx_AutoHideScrollbar {
+        flex: 1 1 0;
+    }
 }
 
 .mx_MemberList_chevron {
@@ -82,8 +87,13 @@ limitations under the License.
     }
 }
 
+.mx_MemberList_invite.mx_AccessibleButton_disabled {
+    background-color: $greyed-fg-color;;
+    cursor: not-allowed;
+}
+
 .mx_MemberList_invite span {
-    background-image: url('$(res)/img/feather-icons/user-add.svg');
+    background-image: url('$(res)/img/feather-customised/user-add.svg');
     background-repeat: no-repeat;
     background-position: center left;
     padding-left: 25px;

res/css/views/rooms/_MessageComposer.scss

@@ -180,27 +180,36 @@ limitations under the License.
     color: $accent-color;
 }
 
-.mx_MessageComposer_upload,
+.mx_MessageComposer_button {
-.mx_MessageComposer_hangup,
+    margin-right: 12px;
-.mx_MessageComposer_voicecall,
-.mx_MessageComposer_videocall,
-.mx_MessageComposer_apps,
-.mx_MessageComposer_stickers {
-    /*display: table-cell;*/
-    /*vertical-align: middle;*/
-    /*padding-left: 10px;*/
-    padding-right: 12px;
     cursor: pointer;
     padding-top: 4px;
+    height: 20px;
+    width: 20px;
+    background-color: $composer-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-position: center;
 }
 
-.mx_MessageComposer_upload object,
+.mx_MessageComposer_upload {
-.mx_MessageComposer_hangup object,
+    mask-image: url('$(res)/img/feather-customised/paperclip.svg');
-.mx_MessageComposer_voicecall object,
+}
-.mx_MessageComposer_videocall object,
+
-.mx_MessageComposer_apps object,
+.mx_MessageComposer_hangup {
-.mx_MessageComposer_stickers object {
+    mask-image: url('$(res)/img/hangup.svg');
-    pointer-events: none;
+}
+
+.mx_MessageComposer_voicecall {
+    mask-image: url('$(res)/img/feather-customised/phone.svg');
+}
+
+.mx_MessageComposer_videocall {
+    mask-image: url('$(res)/img/feather-customised/video.svg');
+}
+
+.mx_MessageComposer_stickers {
+    mask-image: url('$(res)/img/feather-customised/face.svg');
 }
 
 .mx_MessageComposer_formatting {
@@ -246,14 +255,29 @@ limitations under the License.
 }
 
 .mx_MessageComposer_formatbar_markdown {
+    height: 17px;
+    width: 30px;
     margin-right: 64px;
 }
 
 .mx_MessageComposer_input_markdownIndicator {
-    cursor: pointer;
     height: 10px;
+    width: 12px;
     padding: 4px 4px 4px 0;
-    opacity: 0.8;
+}
+
+.mx_MessageComposer_formatbar_markdown,
+.mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    mask-image: url('$(res)/img/markdown.svg');
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background-color: $composer-button-color;
+
+    &.mx_MessageComposer_markdownDisabled {
+        opacity: 0.2;
+    }
 }
 
 .mx_MatrixChat_useCompactLayout {

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -0,0 +1,100 @@
+/*
+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_RoomBreadcrumbs {
+    position: relative;
+    height: 42px;
+    padding: 8px;
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: row;
+
+    // Autohide the scrollbar
+    overflow-x: hidden;
+    &:hover {
+        overflow-x: visible;
+    }
+
+    .mx_AutoHideScrollbar_offset {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+    }
+
+    .mx_RoomBreadcrumbs_crumb {
+        margin-left: 4px;
+        height: 32px;
+        display: inline-block;
+        transition: transform 0.3s, width 0.3s;
+        position: relative;
+
+        .mx_RoomTile_badge {
+            position: absolute;
+            top: -3px;
+            right: -4px;
+        }
+
+        .mx_RoomBreadcrumbs_dmIndicator {
+            position: absolute;
+            bottom: 0;
+            right: -4px;
+        }
+    }
+
+    .mx_RoomBreadcrumbs_animate {
+        margin-left: 0;
+        width: 32px;
+        transform: scale(1);
+    }
+
+    .mx_RoomBreadcrumbs_preAnimate {
+        width: 0;
+        transform: scale(0);
+    }
+
+    .mx_RoomBreadcrumbs_left {
+        opacity: 0.5;
+    }
+
+    // Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
+    // will deal with left/right positioning for us. Normally we'd use position:sticky on
+    // a few key elements, however that doesn't work in horizontal scrolling scenarios.
+
+    .mx_IndicatorScrollbar_leftOverflowIndicator,
+    .mx_IndicatorScrollbar_rightOverflowIndicator {
+        display: none;
+    }
+
+    &.mx_IndicatorScrollbar_leftOverflow .mx_IndicatorScrollbar_leftOverflowIndicator,
+    &.mx_IndicatorScrollbar_rightOverflow .mx_IndicatorScrollbar_rightOverflowIndicator {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 15px;
+        display: block;
+        pointer-events: none;
+        z-index: 100;
+    }
+
+    .mx_IndicatorScrollbar_leftOverflowIndicator {
+        background: linear-gradient(to left, $panel-gradient);
+    }
+
+    .mx_IndicatorScrollbar_rightOverflowIndicator {
+        background: linear-gradient(to right, $panel-gradient);
+    }
+}
+

res/css/views/rooms/_RoomHeader.scss

@@ -58,7 +58,6 @@ limitations under the License.
 
 .mx_RoomHeader_buttons {
     display: flex;
-    align-items: center;
     background-color: $primary-bg-color;
     padding-right: 5px;
 }
@@ -116,10 +115,6 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_settingsButton object {
-    pointer-events: none;
-}
-
 .mx_RoomHeader_name,
 .mx_RoomHeader_avatar,
 .mx_RoomHeader_avatarPicker,
@@ -160,6 +155,7 @@ limitations under the License.
     font-weight: 400;
     font-size: 13px;
     margin: 0 7px;
+    margin-top: 4px; // to align baseline of topic with room name
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: 1px solid transparent;
@@ -199,10 +195,32 @@ limitations under the License.
 .mx_RoomHeader_button {
     margin-left: 10px;
     cursor: pointer;
+    height: 20px;
+    width: 20px;
+    background-color: $roomheader-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_RoomHeader_button object {
+.mx_RoomHeader_settingsButton {
-    pointer-events: none;
+    mask-image: url('$(res)/img/feather-customised/settings.svg');
+}
+
+.mx_RoomHeader_forgetButton {
+    mask-image: url('$(res)/img/leave.svg');
+    width: 26px;
+}
+
+.mx_RoomHeader_searchButton {
+    mask-image: url('$(res)/img/feather-customised/search.svg');
+}
+
+.mx_RoomHeader_shareButton {
+    mask-image: url('$(res)/img/feather-customised/share.svg');
+}
+
+.mx_RoomHeader_manageIntegsButton {
+    mask-image: url('$(res)/img/feather-customised/grid.svg');
 }
 
 .mx_RoomHeader_showPanel {
@@ -219,6 +237,7 @@ limitations under the License.
 
 .mx_RoomHeader_pinnedButton {
     position: relative;
+    mask-image: url('$(res)/img/icons-pin.svg');
 }
 
 .mx_RoomHeader_pinsIndicator {

res/css/views/rooms/_RoomPreviewBar.scss

@@ -15,48 +15,112 @@ limitations under the License.
 */
 
 .mx_RoomPreviewBar {
-    text-align: center;
+    flex: 0 0 auto;
-    height: 176px;
-    background-color: $event-selected-color;
     align-items: center;
     flex-direction: column;
     justify-content: center;
     display: flex;
-    background-color: $preview-bar-bg-color;
     -webkit-align-items: center;
+
+    h3 {
+        font-size: 18px;
+        font-weight: 600;
+
+        &.mx_RoomPreviewBar_spinnerTitle {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+
+    .mx_Spinner {
+        width: auto;
+        height: auto;
+        margin: 10px 10px 10px 0;
+        flex: 0 0 auto;
+    }
 }
 
-.mx_RoomPreviewBar_wrapper {
+.mx_RoomPreviewBar_dark {
+    background-color: $tagpanel-bg-color;
+    color: $accent-fg-color;
 }
 
-.mx_RoomPreviewBar_invite_text {
+.mx_RoomPreviewBar_actions {
-    color: $primary-fg-color;
+    display: flex;
 }
 
-.mx_RoomPreviewBar_join_text {
+.mx_RoomPreviewBar_message {
-    color: $warning-color;
+    display: flex;
+    align-items: stretch;
+
+    p {
+        overflow-wrap: break-word;
+    }
 }
 
-.mx_RoomPreviewBar_preview_text {
+.mx_RoomPreviewBar_panel {
-    margin-top: 25px;
+    padding: 8px 8px 8px 20px;
-    color: $settings-grey-fg-color;
+    border-top: 1px solid $panel-divider-color;
+
+    flex-direction: row;
+
+    .mx_RoomPreviewBar_actions {
+        flex: 0 0 auto;
+        flex-direction: row;
+        padding: 3px 8px;
+
+        &>* {
+            margin-left: 12px;
+        }
+    }
+
+    .mx_RoomPreviewBar_message {
+        flex: 1 0 0;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+
+        &>* {
+            margin: 4px;
+        }
+    }
 }
 
-.mx_RoomPreviewBar_join_text a {
+.mx_RoomPreviewBar_dialog {
+    margin: auto;
+    box-sizing: content;
+    width: 400px;
+    border-radius: 4px;
+    flex-direction: column;
+    padding: 20px;
+    text-align: center;
+
+    .mx_RoomPreviewBar_message {
+        flex-direction: column;
+
+        &>* {
+            margin: 5px 0 20px 0;
+        }
+    }
+
+    .mx_RoomPreviewBar_actions {
+        flex-direction: column-reverse;
+        .mx_AccessibleButton {
+            padding: 7px 50px;//extra wide
+        }
+
+        &>* {
+            margin-top: 12px;
+        }
+    }
+}
+
+.mx_RoomPreviewBar_inviter {
+    font-weight: 600;
+}
+
+a.mx_RoomPreviewBar_inviter {
     text-decoration: underline;
     cursor: pointer;
 }
-
-.mx_RoomPreviewBar_warning {
-    display: flex;
-    align-items: center;
-    padding: 8px;
-}
-
-.mx_RoomPreviewBar_warningIcon {
-    padding: 12px;
-}
-
-.mx_RoomPreviewBar_spinnerIntro {
-    margin-top: 50px;
-}

res/css/views/rooms/_RoomRecoveryReminder.scss

@@ -38,7 +38,6 @@ limitations under the License.
     margin: 0 10px;
 }
 
-.mx_RoomRecoveryReminder_button.mx_RoomRecoveryReminder_secondary {
+.mx_RoomRecoveryReminder_secondary {
-    @mixin mx_DialogButton_secondary;
+    font-size: 90%;
-    background-color: transparent;
 }

res/css/views/rooms/_RoomSettings.scss

@@ -1,260 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations 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_RoomSettings {
-    margin: 40px;
-}
-
-.mx_RoomSettings_upgradeButton,
-.mx_RoomSettings_leaveButton,
-.mx_RoomSettings_unbanButton {
-    @mixin mx_DialogButton;
-    position: relative;
-    margin-right: 8px;
-}
-
-.mx_RoomSettings_devtoolsButton {
-    @mixin mx_DialogButton;
-    position: relative;
-    padding: 4px 1.5em;
-    margin-top: 8px;
-}
-
-.mx_RoomSettings_upgradeButton,
-.mx_RoomSettings_leaveButton:hover,
-.mx_RoomSettings_unbanButton:hover {
-    @mixin mx_DialogButton_hover;
-}
-
-.mx_RoomSettings_upgradeButton.danger {
-    @mixin mx_DialogButton_danger;
-}
-
-.mx_RoomSettings_integrationsButton_error {
-    position: relative;
-    cursor: not-allowed;
-}
-.mx_RoomSettings_integrationsButton_error img {
-    position: absolute;
-    right: -5px;
-    top: -5px;
-}
-.mx_RoomSettings_leaveButton,
-.mx_RoomSettings_integrationsButton_error {
-    float: right;
-}
-.mx_RoomSettings_integrationsButton_error .mx_RoomSettings_integrationsButton_errorPopup {
-    display: none;
-}
-.mx_RoomSettings_integrationsButton_error:hover .mx_RoomSettings_integrationsButton_errorPopup {
-    display: inline;
-}
-.mx_RoomSettings_integrationsButton_errorPopup {
-    position: absolute;
-    top: 110%;
-    left: -275%;
-    width: 550%;
-    padding: 30%;
-    font-size: 10pt;
-    line-height: 1.5em;
-    border-radius: 5px;
-    background-color: $accent-color;
-    color: $accent-fg-color;
-    text-align: center;
-    z-index: 1000;
-}
-.mx_RoomSettings_unbanButton {
-    display: inline;
-}
-
-.mx_RoomSettings_e2eIcon {
-    padding-left: 4px;
-    padding-right: 7px;
-}
-
-.mx_RoomSettings_leaveButton {
-    margin-right: 32px;
-}
-
-.mx_RoomSettings_powerLevels {
-    display: table;
-}
-
-.mx_RoomSettings_powerLevel {
-    display: table-row;
-}
-
-.mx_RoomSettings_powerLevelKey,
-.mx_RoomSettings_powerLevel .mx_PowerSelector {
-    display: table-cell;
-    padding-bottom: 5px;
-}
-
-.mx_RoomSettings_powerLevelKey {
-    text-align: right;
-    padding-right: 0.3em;
-}
-
-.mx_RoomSettings h3 {
-    text-transform: uppercase;
-    color: $h3-color;
-    font-weight: 600;
-    font-size: 13px;
-    margin-top: 36px;
-    margin-bottom: 10px;
-}
-
-.mx_RoomSettings .mx_RoomSettings_toggles label {
-    margin-bottom: 8px;
-    display: block;
-}
-
-.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"],
-.mx_RoomSettings .mx_RoomSettings_toggles input[type="radio"] {
-    margin-right: 7px;
-}
-
-.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
-    margin-left: 1em;
-    margin-right: 7px;
-}
-
-.mx_RoomSettings .mx_RoomSettings_tags {
-    margin-bottom: 8px;
-}
-
-.mx_RoomSettings .mx_RoomSettings_roomColor {
-    display: inline-block;
-    position: relative;
-    width: 37px;
-    height: 37px;
-    border: 1px solid #979797;
-    margin-right: 13px;
-    cursor: pointer;
-}
-
-.mx_RoomSettings .mx_RoomSettings_roomColor_selected {
-    position: absolute;
-    left: 10px;
-    top: 4px;
-    cursor: default ! important;
-}
-
-.mx_RoomSettings .mx_RoomSettings_roomColorPrimary {
-    height: 10px;
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
-}
-
-.mx_RoomSettings .mx_RoomSettings_aliasLabel {
-    margin-bottom: 8px;
-}
-
-.mx_RoomSettings .mx_RoomSettings_aliasesTable {
-    margin-top: 12px;
-    margin-bottom: 0px;
-    margin-left: 56px;
-    display: table;
-}
-
-.mx_RoomSettings .mx_RoomSettings_aliasesTableRow {
-    display: table-row;
-    margin-bottom: 16px;
-}
-
-.mx_RoomSettings .mx_RoomSettings_alias {
-    max-width: 400px;
-    margin-bottom: 16px;
-    /*
-    commented out so margin applies
-    display: table-cell; */
-}
-
-.mx_RoomSettings .mx_RoomSettings_addAlias,
-.mx_RoomSettings .mx_RoomSettings_deleteAlias {
-    display: table-cell;
-    padding-left: 0.5em;
-    position: relative;
-    cursor: pointer;
-}
-
-.mx_RoomSettings .mx_RoomSettings_addAlias img,
-.mx_RoomSettings .mx_RoomSettings_deleteAlias img {
-    visibility: hidden;
-}
-
-.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img,
-.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img {
-    visibility: visible;
-}
-
-.mx_RoomSettings_warning {
-    color: $warning-color;
-    font-weight: bold;
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
-.mx_RoomSettings_editable {
-    border: 0px;
-    border-bottom: 1px solid $strong-input-border-color;
-    padding: 0px;
-    min-width: 240px;
-}
-
-.mx_RoomSettings_editable:focus {
-    border-bottom: 1px solid $accent-color;
-    outline: none;
-    box-shadow: none;
-}
-
-.mx_RoomSettings_deleteAlias,
-.mx_RoomSettings_addAlias {
-    display: table-cell;
-    visibility: visible;
-}
-
-.mx_RoomSettings_deleteAlias:hover,
-.mx_RoomSettings_addAlias:hover {
-    visibility: visible;
-}
-
-.mx_RoomSettings_aliasPlaceholder {
-    color: $settings-grey-fg-color;
-}
-
-.mx_RoomSettings_buttons {
-    text-align: right;
-    margin-bottom: 16px;
-}
-
-.mx_RoomSettings_button {
-    display: inline;
-    border: 0px;
-    height: 36px;
-    border-radius: 36px;
-    font-weight: 400;
-    font-size: 15px;
-    color: $accent-fg-color;
-    background-color: $accent-color;
-    width: auto;
-    margin: auto;
-    padding: 6px;
-    padding-left: 1em;
-    padding-right: 1em;
-}

res/css/views/rooms/_RoomTile.scss

@@ -102,7 +102,6 @@ limitations under the License.
 
 .mx_RoomTile_name {
     font-size: 14px;
-    font-weight: 600;
     padding: 0 6px;
     color: $roomtile-name-color;
     white-space: nowrap;
@@ -145,18 +144,20 @@ limitations under the License.
     font-size: 12px;
 }
 
-.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
+.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
+.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
     background-color: $roomtile-name-color;
 }
 
-.mx_RoomTile_highlight .mx_RoomTile_badge {
+.mx_RoomTile_highlight .mx_RoomTile_badge,
+.mx_RoomTile_badge.mx_RoomTile_badgeRed
+{
     background-color: $warning-color;
 }
 
 .mx_RoomTile_unread, .mx_RoomTile_highlight {
-    font-weight: 700 ! important;
-
     .mx_RoomTile_name {
+        font-weight: 600;
         color: $roomtile-selected-color;
     }
 }
@@ -176,7 +177,7 @@ limitations under the License.
 }
 
 .mx_RoomTile:focus {
-    filter: none ! important;
+    filter: none !important;
     background-color: $roomtile-focused-bg-color;
 }
 
@@ -192,3 +193,7 @@ limitations under the License.
 .mx_RoomTile.mx_RoomTile_transparent:focus {
     background-color: $roomtile-transparent-focused-color;
 }
+
+.mx_GroupInviteTile .mx_RoomTile_name {
+    flex: 1;
+}

res/css/views/rooms/_RoomTooltip.scss

@@ -1,54 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_RoomTooltip_chevron {
-    position: absolute;
-    left: -8px;
-    top: 4px;
-    width: 0;
-    height: 0;
-    border-top: 8px solid transparent;
-    border-right: 8px solid $menu-bg-color;
-    border-bottom: 8px solid transparent;
-}
-
-.mx_RoomTooltip_chevron:after {
-    content:'';
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-right: 7px solid $primary-bg-color;
-    border-bottom: 7px solid transparent;
-    position:absolute;
-    top: -7px;
-    left: 1px;
-}
-
-.mx_RoomTooltip {
-    display: none;
-    position: fixed;
-    border-radius: 5px;
-    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
-    background-color: $primary-bg-color;
-    z-index: 2000;
-    padding: 5px;
-    pointer-events: none;
-    line-height: 14px;
-    font-size: 13px;
-    color: $primary-fg-color;
-    max-width: 600px;
-    margin-right: 50px;
-}

res/css/views/rooms/_RoomUpgradeWarningBar.scss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_RoomUpgradeWarningBar {
     text-align: center;
-    height: 176px;
+    height: 235px;
     background-color: $event-selected-color;
     align-items: center;
     flex-direction: column;

res/css/views/rooms/_SearchBar.scss

@@ -32,7 +32,7 @@ limitations under the License.
         width: 37px;
         height: 37px;
         background-color: $accent-color;
-        mask: url('$(res)/img/feather-icons/search-input.svg');
+        mask: url('$(res)/img/feather-customised/search-input.svg');
         mask-repeat: no-repeat;
         mask-position: center;
     }

res/css/views/rooms/_Stickers.scss

@@ -7,8 +7,12 @@
     height: 300px;
 }
 
-.mx_Stickers_content .mx_AppTileFullWidth {
+#mx_persistedElement_stickerPicker .mx_AppTileFullWidth {
-    border: none;
+    height: unset;
+    box-sizing: border-box;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
 }
 
 .mx_Stickers_contentPlaceholder {

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -40,6 +40,7 @@ limitations under the License.
 }
 
 .mx_WhoIsTypingTile_remainingAvatarPlaceholder {
+    position: relative;
     display: inline-block;
     color: #acacac;
     background-color: #ddd;