Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into resizable-appsdrawer

 Conflicts:

	res/css/views/rooms/_AppsDrawer.scss

res/css/views/auth/_AuthBody.scss

@@ -128,6 +128,11 @@ limitations under the License.
         margin-top: 16px;
         font-size: $font-15px;
         line-height: $font-24px;
+
+        .mx_InlineSpinner img {
+            vertical-align: sub;
+            margin-right: 5px;
+        }
     }
 
     .mx_AuthBody_paddedFooter_subtitle {
@@ -147,26 +152,11 @@ limitations under the License.
     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;
+@media only screen and (max-width: 480px) {
+    .mx_AuthBody {
+        border-radius: 4px;
+        width: auto;
+        max-width: 500px;
+        padding: 10px;
     }
 }

res/css/views/auth/_AuthHeader.scss

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

res/css/views/auth/_AuthHeaderLogo.scss

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

res/css/views/auth/_AuthPage.scss

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

res/css/views/auth/_PassphraseField.scss

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

res/css/views/avatars/_BaseAvatar.scss

@@ -22,7 +22,7 @@ limitations under the License.
     // 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://github.com/vector-im/element-web/issues/5594
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
     // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
     display: inline-block;

res/css/views/avatars/_DecoratedRoomAvatar.scss

@@ -0,0 +1,73 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// XXX: We shouldn't be using TemporaryTile anywhere - delete it.
+.mx_DecoratedRoomAvatar, .mx_TemporaryTile {
+    position: relative;
+
+    &.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
+        mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+    }
+
+    .mx_DecoratedRoomAvatar_icon {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+        margin: 4px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+
+    .mx_DecoratedRoomAvatar_icon::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        position: absolute;
+        border-radius: 8px;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_globe::before {
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        background: $secondary-fg-color;
+        mask-image: url('$(res)/img/globe.svg');
+    }
+
+    .mx_DecoratedRoomAvatar_icon_offline::before {
+        background-color: $presence-offline;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_online::before {
+        background-color: $presence-online;
+    }
+
+    .mx_DecoratedRoomAvatar_icon_away::before {
+        background-color: $presence-away;
+    }
+
+    .mx_NotificationBadge, .mx_RoomTile_badgeContainer {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 18px;
+        width: 18px;
+    }
+}

res/css/views/avatars/_PulsedAvatar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
-    float: right;
-    padding: 0px;
-    margin-right: 42px;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-}
+.mx_PulsedAvatar {
+    @keyframes shadow-pulse {
+        0% {
+            box-shadow: 0 0 0 0px rgba($accent-color, 0.2);
+        }
+        100% {
+            box-shadow: 0 0 0 6px rgba($accent-color, 0);
+        }
+    }
 
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
-    @mixin mx_DialogButton;
-    background-color: $primary-bg-color;
-    color: $accent-color;
-}
-
-.mx_EncryptedEventDialog button {
-    margin-top: 0px;
+    img {
+        animation: shadow-pulse 1s infinite;
+    }
 }

res/css/views/context_menus/_IconizedContextMenu.scss

@@ -0,0 +1,148 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// A context menu that largely fits the | [icon]    [label] | format.
+.mx_IconizedContextMenu {
+    min-width: 146px;
+
+    .mx_IconizedContextMenu_optionList {
+        & > * {
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+
+        // the notFirst class is for cases where the optionList might be under a header of sorts.
+        &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
+            // This is a bit of a hack when we could just use a simple border-top property,
+            // however we have a (kinda) good reason for doing it this way: we need opacity.
+            // To get the right color, we need an opacity modifier which means we have to work
+            // around the problem. PostCSS doesn't support the opacity() function, and if we
+            // use something like postcss-functions we quickly run into an issue where the
+            // function we would define gets passed a CSS variable for custom themes, which
+            // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
+            //
+            // Therefore, we just hack in a line and border the thing ourselves
+            &::before {
+                border-top: 1px solid $primary-fg-color;
+                opacity: 0.1;
+                content: '';
+
+                // Counteract the padding problems (width: 100% ignores the 40px padding,
+                // unless we position it absolutely then it does the right thing).
+                width: 100%;
+                position: absolute;
+                left: 0;
+            }
+        }
+
+        // round the top corners of the top button for the hover effect to be bounded
+        &:first-child .mx_AccessibleButton:first-child {
+            border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu
+        }
+
+        // round the bottom corners of the bottom button for the hover effect to be bounded
+        &:last-child .mx_AccessibleButton:last-child {
+            border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu
+        }
+
+        .mx_AccessibleButton {
+            // pad the inside of the button so that the hover background is padded too
+            padding-top: 12px;
+            padding-bottom: 12px;
+            text-decoration: none;
+            color: $primary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;
+
+            // Create a flexbox to more easily define the list items
+            display: flex;
+            align-items: center;
+
+            &:hover {
+                background-color: $menu-selected-color;
+            }
+
+            img, .mx_IconizedContextMenu_icon { // icons
+                width: 16px;
+                min-width: 16px;
+                max-width: 16px;
+            }
+
+            span.mx_IconizedContextMenu_label { // labels
+                padding-left: 14px;
+                width: 100%;
+                flex: 1;
+
+                // Ellipsize any text overflow
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+        }
+    }
+
+    .mx_IconizedContextMenu_icon {
+        position: relative;
+        width: 16px;
+        height: 16px;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
+    }
+
+    .mx_IconizedContextMenu_optionList_red {
+        .mx_AccessibleButton {
+            color: $warning-color !important;
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $warning-color;
+        }
+    }
+
+    .mx_IconizedContextMenu_active {
+        &.mx_AccessibleButton, .mx_AccessibleButton {
+            color: $accent-color !important;
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $accent-color;
+        }
+    }
+
+    &.mx_IconizedContextMenu_compact {
+        .mx_IconizedContextMenu_optionList > * {
+            padding: 8px 16px 8px 11px;
+        }
+    }
+
+    .mx_IconizedContextMenu_checked {
+        margin-left: 16px;
+        margin-right: -5px;
+
+        &::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/checkmark.svg');
+        }
+    }
+}

res/css/views/context_menus/_TagTileContextMenu.scss

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

res/css/views/dialogs/_BugReportDialog.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd.
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,16 +14,10 @@ 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;
+.mx_BugReportDialog {
+    .mx_BugReportDialog_download {
+        .mx_AccessibleButton_kind_link {
+            padding-left: 0;
+        }
+    }
 }

res/css/views/dialogs/_GroupAddressPicker.scss

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

res/css/views/dialogs/_RoomSettingsDialog.scss

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

res/css/views/dialogs/_ServerOfflineDialog.scss

@@ -0,0 +1,72 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ServerOfflineDialog {
+    .mx_ServerOfflineDialog_content {
+        padding-right: 85px;
+        color: $primary-fg-color;
+
+        hr {
+            border-color: $primary-fg-color;
+            opacity: 0.1;
+            border-bottom: none;
+        }
+
+        ul {
+            padding: 16px;
+
+            li:nth-child(n + 2) {
+                margin-top: 16px;
+            }
+        }
+
+        .mx_ServerOfflineDialog_content_context {
+            .mx_ServerOfflineDialog_content_context_timestamp {
+                display: inline-block;
+                width: 115px;
+                color: $muted-fg-color;
+                line-height: 24px; // same as avatar
+                vertical-align: top;
+            }
+
+            .mx_ServerOfflineDialog_content_context_timeline {
+                display: inline-block;
+                width: calc(100% - 155px); // 115px timestamp width + 40px right margin
+
+                .mx_ServerOfflineDialog_content_context_timeline_header {
+                    span {
+                        margin-left: 8px;
+                        vertical-align: middle;
+                    }
+                }
+
+                .mx_ServerOfflineDialog_content_context_txn {
+                    position: relative;
+                    margin-top: 8px;
+
+                    .mx_ServerOfflineDialog_content_context_txn_desc {
+                        width: calc(100% - 100px); // 100px is an arbitrary margin for the button
+                    }
+
+                    .mx_AccessibleButton {
+                        float: right;
+                        padding: 0;
+                    }
+                }
+            }
+        }
+    }
+}

res/css/views/dialogs/_ShareDialog.scss

@@ -51,10 +51,12 @@ limitations under the License.
     display: inherit;
 }
 .mx_ShareDialog_matrixto_copy > div {
-    background-image: url($copy-button-url);
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
     margin-left: 5px;
     width: 20px;
     height: 20px;
+    background-repeat: no-repeat;
 }
 
 .mx_ShareDialog_split {
@@ -64,9 +66,6 @@ limitations under the License.
 
 .mx_ShareDialog_qrcode_container {
     float: left;
-    background-color: #ffffff;
-    padding: 5px; // makes qr code more readable in dark theme
-    border-radius: 5px;
     height: 256px;
     width: 256px;
     margin-right: 64px;

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -1,48 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_UnknownDeviceDialog {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-.mx_UnknownDeviceDialog ul {
-    list-style: none;
-    padding: 0;
-}
-// userid
-.mx_UnknownDeviceDialog p {
-    font-weight: bold;
-    font-size: $font-16px;
-}
-
-.mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
-    flex-direction: row !important;
-}
-
-.mx_UnknownDeviceDialog .mx_Dialog_content {
-    margin-bottom: 24px;
-    overflow-y: scroll;
-}
-
-.mx_UnknownDeviceDialog_deviceList > li {
-    padding: 4px;
-}
-
-.mx_UnknownDeviceDialog_deviceList > li > * {
-    padding-bottom: 0;
-}

res/css/views/dialogs/_UserSettingsDialog.scss

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

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

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

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

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

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

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

res/css/views/directory/_NetworkDropdown.scss

@@ -145,13 +145,14 @@ limitations under the License.
     &::after {
         content: "";
         position: absolute;
-        width: 24px;
-        height: 24px;
-        right: -28px; // - (24 + 4)
+        width: 26px;
+        height: 26px;
+        right: -27.5px; // - (width: 26 + spacing to align with X above: 1.5)
+        top: -3px;
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;
-        mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
         background-color: $primary-fg-color;
     }
 

res/css/views/elements/_AddressSelector.scss

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

res/css/views/elements/_Dropdown.scss

@@ -77,12 +77,18 @@ limitations under the License.
     white-space: nowrap;
 }
 
-.mx_Dropdown_option img {
+.mx_Dropdown_option img,
+.mx_Dropdown_option .mx_Dropdown_option_emoji {
     margin: 5px;
     width: 16px;
     vertical-align: middle;
 }
 
+.mx_Dropdown_option_emoji {
+    font-size: $font-16px;
+    line-height: $font-16px;
+}
+
 input.mx_Dropdown_option,
 input.mx_Dropdown_option:focus {
     font-weight: normal;

res/css/views/elements/_Field.scss

@@ -191,5 +191,5 @@ limitations under the License.
 }
 
 .mx_Field .mx_CountryDropdown {
-    width: 67px;
+    width: $font-78px;
 }

res/css/views/elements/_ImageView.scss

@@ -37,7 +37,7 @@ limitations under the License.
     order: 2;
     /* min-width hack needed for FF */
     min-width: 0px;
-    max-height: 90%;
+    height: 90%;
     flex: 15 15 0;
     display: flex;
     align-items: center;

res/css/views/elements/_InlineSpinner.scss

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

res/css/views/elements/_InteractiveTooltip.scss

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

res/css/views/elements/_ProgressBar.scss

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

res/css/views/elements/_QRCode.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ReactionsRowButtonTooltip_reactedWith {
-    opacity: 0.7;
+.mx_QRCode {
+    img {
+        border-radius: 8px;
+    }
 }

res/css/views/elements/_ResizeHandle.scss

@@ -34,7 +34,7 @@ limitations under the License.
 
 .mx_MatrixChat > .mx_ResizeHandle.mx_ResizeHandle_horizontal {
     margin: 0 -10px 0 0;
-    padding: 0 10px 0 0;
+    padding: 0 8px 0 0;
 }
 
 .mx_ResizeHandle > div {

res/css/views/elements/_Slider.scss

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

res/css/views/elements/_StyledCheckbox.scss

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

res/css/views/elements/_StyledRadioButton.scss

@@ -0,0 +1,124 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/**
+* This component expects the parent to specify a positive padding and
+* width
+*/
+
+.mx_RadioButton {
+    $radio-circle-color: $muted-fg-color;
+    $active-radio-circle-color: $accent-color;
+    position: relative;
+
+    display: flex;
+    align-items: baseline;
+    flex-grow: 1;
+
+    > .mx_RadioButton_content {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+
+        margin-left: 8px;
+        margin-right: 8px;
+    }
+
+    .mx_RadioButton_spacer {
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        height: $font-16px;
+        width: $font-16px;
+    }
+
+    > input[type=radio] {
+        // Remove the OS's representation
+        margin: 0;
+        padding: 0;
+        appearance: none;
+
+        + div {
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            box-sizing: border-box;
+            height: $font-16px;
+            width: $font-16px;
+            margin-left: 2px; // For the highlight on focus
+
+            border: $font-1-5px solid $radio-circle-color;
+            border-radius: $font-16px;
+
+            > div {
+                box-sizing: border-box;
+
+                height: $font-8px;
+                width: $font-8px;
+
+                border-radius: $font-8px;
+            }
+        }
+
+        &.focus-visible {
+            & + div {
+                @mixin unreal-focus;
+            }
+        }
+
+        &:checked {
+            & + div {
+                border-color: $active-radio-circle-color;
+
+                & > div {
+                    background: $active-radio-circle-color;
+                }
+            }
+        }
+
+        &:disabled {
+            & + div,
+            & + div + span {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            & + div {
+                border-color: $radio-circle-color;
+            }
+        }
+
+        &:checked:disabled {
+            & + div > div {
+                background-color: $radio-circle-color;
+            }
+        }
+    }
+}
+
+.mx_RadioButton_outlined {
+    border: 1px solid $input-darker-bg-color;
+    border-radius: 8px;
+}
+
+.mx_RadioButton_checked {
+    border-color: $accent-color;
+}

res/css/views/elements/_ToggleSwitch.scss

@@ -24,11 +24,6 @@ limitations under the License.
 
     background-color: $togglesw-off-color;
     opacity: 0.5;
-
-    display: flex;
-    flex-direction: row;
-    flex: 0 0 auto;
-    align-items: center;
 }
 
 .mx_ToggleSwitch_enabled {
@@ -38,16 +33,18 @@ limitations under the License.
 
 .mx_ToggleSwitch.mx_ToggleSwitch_on {
     background-color: $togglesw-on-color;
+
+    > .mx_ToggleSwitch_ball {
+        left: calc(100% - $font-20px);
+    }
 }
 
 .mx_ToggleSwitch_ball {
-    transition: left 0.15s ease-out 0.1s;
+    position: relative;
     width: $font-20px;
     height: $font-20px;
     border-radius: $font-20px;
     background-color: $togglesw-ball-color;
-}
-
-.mx_ToggleSwitch_on {
-    flex-direction: row-reverse;
+    transition: left 0.15s ease-out 0.1s;
+    left: 0;
 }

res/css/views/elements/_Tooltip.scss

@@ -51,21 +51,27 @@ limitations under the License.
 .mx_Tooltip {
     display: none;
     position: fixed;
-    border: 1px solid $menu-border-color;
-    border-radius: 4px;
+    border-radius: 8px;
     box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
-    background-color: $menu-bg-color;
-    z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
+    z-index: 6000; // Higher than context menu so tooltips can be used everywhere
     padding: 10px;
     pointer-events: none;
     line-height: $font-14px;
     font-size: $font-12px;
-    font-weight: 600;
-    color: $primary-fg-color;
+    font-weight: 500;
     max-width: 200px;
     word-break: break-word;
     margin-right: 50px;
 
+    background-color: $inverted-bg-color;
+    color: $accent-fg-color;
+    border: 0;
+    text-align: center;
+
+    .mx_Tooltip_chevron {
+        display: none;
+    }
+
     &.mx_Tooltip_visible {
         animation: mx_fadein 0.2s forwards;
     }
@@ -75,18 +81,23 @@ limitations under the License.
     }
 }
 
-.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: $font-14px;
-    line-height: 1.2;
-    padding: 6px 8px;
+// These tooltips use an older style with a chevron
+.mx_Field_tooltip {
+    background-color: $menu-bg-color;
+    color: $primary-fg-color;
+    border: 1px solid $menu-border-color;
+    text-align: unset;
 
-    .mx_Tooltip_chevron::after {
-        border-right-color: $tooltip-timeline-bg-color;
+    .mx_Tooltip_chevron {
+        display: unset;
     }
 }
+
+.mx_Tooltip_title {
+    font-weight: 600;
+}
+
+.mx_Tooltip_sub {
+    opacity: 0.7;
+    margin-top: 4px;
+}

res/css/views/emojipicker/_EmojiPicker.scss

@@ -190,7 +190,7 @@ limitations under the License.
 
 .mx_EmojiPicker_footer {
     border-top: 1px solid $message-action-bar-border-color;
-    height: 72px;
+    min-height: 72px;
 
     display: flex;
     align-items: center;

res/css/views/globals/_MatrixToolbar.scss

@@ -1,73 +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_MatrixToolbar {
-    background-color: $accent-color;
-    color: $accent-fg-color;
-
-    display: flex;
-    align-items: center;
-}
-
-.mx_MatrixToolbar_warning {
-    margin-left: 16px;
-    margin-right: 8px;
-    margin-top: -2px;
-}
-
-.mx_MatrixToolbar_info {
-    padding-left: 16px;
-    padding-right: 8px;
-    background-color: $info-bg-color;
-}
-
-.mx_MatrixToolbar_error {
-    padding-left: 16px;
-    padding-right: 8px;
-    background-color: $warning-bg-color;
-}
-
-.mx_MatrixToolbar_content {
-    flex: 1;
-}
-
-.mx_MatrixToolbar_link {
-    color: $accent-fg-color !important;
-    text-decoration: underline !important;
-    cursor: pointer;
-}
-
-.mx_MatrixToolbar_clickable {
-    cursor: pointer;
-}
-
-.mx_MatrixToolbar_close {
-    cursor: pointer;
-}
-
-.mx_MatrixToolbar_close img {
-    display: block;
-    float: right;
-    margin-right: 10px;
-}
-
-.mx_MatrixToolbar_action {
-    margin-right: 16px;
-}
-
-.mx_MatrixToolbar_changelog {
-    white-space: pre;
-}

res/css/views/messages/_MImageBody.scss

@@ -25,6 +25,7 @@ limitations under the License.
     height: 100%;
     left: 0;
     top: 0;
+    border-radius: 4px;
 }
 
 .mx_MImageBody_thumbnail_container {

res/css/views/messages/_MessageActionBar.scss

@@ -24,7 +24,7 @@ limitations under the License.
     line-height: $font-24px;
     border-radius: 4px;
     background: $message-action-bar-bg-color;
-    top: -18px;
+    top: -26px;
     right: 8px;
     user-select: none;
     // Ensure the action bar appears above over things, like the read marker.
@@ -41,7 +41,7 @@ limitations under the License.
         width: calc(10px + 48px + 100% + 8px);
         // safe area + action bar
         height: calc(20px + 100%);
-        top: -20px;
+        top: -12px;
         left: -58px;
         z-index: -1;
         cursor: initial;
@@ -91,17 +91,17 @@ limitations under the License.
 }
 
 .mx_MessageActionBar_reactButton::after {
-    mask-image: url('$(res)/img/react.svg');
+    mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
 }
 
 .mx_MessageActionBar_replyButton::after {
-    mask-image: url('$(res)/img/reply.svg');
+    mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
 }
 
 .mx_MessageActionBar_editButton::after {
-    mask-image: url('$(res)/img/edit.svg');
+    mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }
 
 .mx_MessageActionBar_optionsButton::after {
-    mask-image: url('$(res)/img/icon_context.svg');
+    mask-image: url('$(res)/img/element-icons/context-menu.svg');
 }

res/css/views/messages/_MessageTimestamp.scss

@@ -17,4 +17,5 @@ limitations under the License.
 .mx_MessageTimestamp {
     color: $event-timestamp-color;
     font-size: $font-10px;
+    font-variant-numeric: tabular-nums;
 }

res/css/views/messages/_ReactionsRowButton.scss

@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_ReactionsRowButton {
     display: inline-flex;
-    height: 20px;
     line-height: $font-21px;
     margin-right: 6px;
     padding: 0 6px;
@@ -35,11 +34,6 @@ limitations under the License.
         border-color: $reaction-row-button-selected-border-color;
     }
 
-    // ignore mouse events for all children, treat it as one entire hoverable entity
-    * {
-        pointer-events: none;
-    }
-
     .mx_ReactionsRowButton_content {
         max-width: 100px;
         overflow: hidden;

res/css/views/messages/_RedactedBody.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RedactedBody {
+    white-space: pre-wrap;
+    color: $muted-fg-color;
+    vertical-align: middle;
+
+    padding-left: 20px;
+    position: relative;
+
+    &::before {
+        height: 14px;
+        width: 14px;
+        background-color: $muted-fg-color;
+        mask-image: url('$(res)/img/feather-customised/trash.custom.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        content: '';
+        position: absolute;
+        top: 2px;
+        left: 0;
+    }
+}

res/css/views/messages/_common_CryptoEvent.scss

@@ -15,28 +15,45 @@ limitations under the License.
 */
 
 .mx_cryptoEvent {
-
     display: grid;
     grid-template-columns: 24px minmax(0, 1fr) min-content;
 
+    &.mx_cryptoEvent_icon::before,
     &.mx_cryptoEvent_icon::after {
         grid-column: 1;
         grid-row: 1 / 3;
         width: 16px;
         height: 16px;
         content: "";
-        background-image: url("$(res)/img/e2e/normal.svg");
-        background-repeat: no-repeat;
-        background-size: 100%;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        background-color: $composer-e2e-icon-color;
         margin-top: 4px;
     }
 
+    // white infill for the transparency
+    &.mx_cryptoEvent_icon::before {
+        background-color: #ffffff;
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 90%;
+    }
+
     &.mx_cryptoEvent_icon_verified::after {
-        background-image: url("$(res)/img/e2e/verified.svg");
+        mask-image: url("$(res)/img/e2e/verified.svg");
+        background-color: $accent-color;
     }
 
     &.mx_cryptoEvent_icon_warning::after {
-        background-image: url("$(res)/img/e2e/warning.svg");
+        mask-image: url("$(res)/img/e2e/warning.svg");
+        background-color: $notice-primary-color;
     }
 
     .mx_cryptoEvent_title, .mx_cryptoEvent_subtitle, .mx_cryptoEvent_state {

res/css/views/right_panel/_UserInfo.scss

@@ -53,7 +53,7 @@ limitations under the License.
     }
 
     .mx_UserInfo_separator {
-        border-bottom: 1px solid lightgray;
+        border-bottom: 1px solid rgba($primary-fg-color, .1);
     }
 
     .mx_UserInfo_memberDetailsContainer {
@@ -121,7 +121,7 @@ limitations under the License.
     h3 {
         text-transform: uppercase;
         color: $notice-secondary-color;
-        font-weight: bold;
+        font-weight: 600;
         font-size: $font-12px;
         margin: 4px 0;
     }

res/css/views/rooms/_AppsDrawer.scss

@@ -49,7 +49,7 @@ $MiniAppTileHeight: 114px;
     order: 2;
     cursor: pointer;
     padding: 0;
-    margin: 5px auto 5px 0px;
+    margin: 5px auto 5px 0;
     color: $accent-color;
     font-size: $font-12px;
 }
@@ -87,7 +87,7 @@ $MiniAppTileHeight: 114px;
     margin: 0;
     padding: 0;
     border: 5px solid $widget-menu-bar-bg-color;
-    border-radius: 4px;
+    border-radius: 8px;
     display: flex;
     flex-direction: column;
 }
@@ -117,6 +117,7 @@ $MiniAppTileHeight: 114px;
 .mx_AppTile_persistedWrapper div {
     width: 100%;
     height: 100%;
+    min-width: 300px;
 }
 
 .mx_AppTileMenuBar {

res/css/views/rooms/_Autocomplete.scss

@@ -6,9 +6,10 @@
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
     border-bottom: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: 8px 8px 0 0;
     max-height: 50vh;
     overflow: auto;
+    box-shadow: 0px -16px 32px $composer-shadow-color;
 }
 
 .mx_Autocomplete_ProviderSection {

res/css/views/rooms/_E2EIcon.scss

@@ -22,28 +22,58 @@ limitations under the License.
     display: block;
 }
 
-.mx_E2EIcon_warning::after,
-.mx_E2EIcon_normal::after,
-.mx_E2EIcon_verified::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-repeat: no-repeat;
-    background-size: contain;
+.mx_E2EIcon_warning,
+.mx_E2EIcon_normal,
+.mx_E2EIcon_verified {
+    &::before, &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+}
+
+// white infill for the transparency
+.mx_E2EIcon::before {
+    background-color: #ffffff;
+    mask-image: url('$(res)/img/e2e/normal.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 90%;
+}
+
+// transparent-looking border surrounding the shield for when overlain over avatars
+.mx_E2EIcon_bordered {
+    mask-image: url('$(res)/img/e2e/normal.svg');
+    background-color: $header-panel-bg-color;
+
+    // shrink the actual badge
+    &::after {
+        mask-size: 75%;
+    }
+    // shrink the infill of the badge
+    &::before {
+        mask-size: 65%;
+    }
 }
 
 .mx_E2EIcon_warning::after {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    mask-image: url('$(res)/img/e2e/warning.svg');
+    background-color: $notice-primary-color;
 }
 
 .mx_E2EIcon_normal::after {
-    background-image: url('$(res)/img/e2e/normal.svg');
+    mask-image: url('$(res)/img/e2e/normal.svg');
+    background-color: $composer-e2e-icon-color;
 }
 
 .mx_E2EIcon_verified::after {
-    background-image: url('$(res)/img/e2e/verified.svg');
+    mask-image: url('$(res)/img/e2e/verified.svg');
+    background-color: $accent-color;
 }

res/css/views/rooms/_EntityTile.scss

@@ -26,8 +26,6 @@ limitations under the License.
         position: absolute;
         bottom: 2px;
         right: 7px;
-        height: 15px;
-        width: 15px;
     }
 }
 

res/css/views/rooms/_EventTile.scss

@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+$left-gutter: 64px;
+
 .mx_EventTile {
     max-width: 100%;
     clear: both;
@@ -37,7 +39,6 @@ limitations under the License.
 }
 
 .mx_EventTile_avatar {
-    position: absolute;
     top: 14px;
     left: 8px;
     cursor: pointer;
@@ -46,7 +47,7 @@ limitations under the License.
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
     top: $font-8px;
-    left: 65px;
+    left: $left-gutter;
 }
 
 .mx_EventTile_continuation {
@@ -68,15 +69,13 @@ limitations under the License.
     display: inline-block; /* anti-zalgo, with overflow hidden */
     overflow: hidden;
     cursor: pointer;
-    padding-left: 65px; /* left gutter */
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: $font-17px;
     /* the next three lines, along with overflow hidden, truncate long display names */
     white-space: nowrap;
     text-overflow: ellipsis;
-    max-width: calc(100% - 65px);
+    max-width: calc(100% - $left-gutter);
 }
 
 .mx_EventTile .mx_SenderProfile .mx_Flair {
@@ -104,9 +103,7 @@ limitations under the License.
     visibility: hidden;
     white-space: nowrap;
     left: 0px;
-    width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
-    position: absolute;
     user-select: none;
 }
 
@@ -116,17 +113,14 @@ limitations under the License.
 
 .mx_EventTile_line, .mx_EventTile_reply {
     position: relative;
-    padding-left: 65px; /* left gutter */
-    padding-top: 3px;
-    padding-bottom: 3px;
+    padding-left: $left-gutter;
     border-radius: 4px;
-    line-height: $font-22px;
 }
 
 .mx_RoomView_timeline_rr_enabled,
 // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 .mx_EventListSummary {
-    .mx_EventTile_line, .mx_EventTile_reply {
+    .mx_EventTile_line {
         /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
         margin-right: 110px;
     }
@@ -151,10 +145,6 @@ limitations under the License.
     margin-right: 10px;
 }
 
-.mx_EventTile_info .mx_EventTile_line {
-    padding-left: 83px;
-}
-
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px !important;
@@ -171,10 +161,15 @@ limitations under the License.
 }
 
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+// The first set is to handle the 'group layout' (default) and the second for the IRC layout
 .mx_EventTile_last > div > a > .mx_MessageTimestamp,
 .mx_EventTile:hover > div > a > .mx_MessageTimestamp,
 .mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp,
-.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp {
+.mx_EventTile.focus-visible:focus-within > div > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile_last > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile:hover > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile.mx_EventTile_actionBarFocused > a > .mx_MessageTimestamp,
+.mx_IRCLayout .mx_EventTile.focus-visible:focus-within > a > .mx_MessageTimestamp {
     visibility: visible;
 }
 
@@ -189,7 +184,7 @@ limitations under the License.
  * TODO: ultimately we probably want some transition on here.
  */
 .mx_EventTile_selected > .mx_EventTile_line {
-    border-left: $accent-color 5px solid;
+    border-left: $accent-color 4px solid;
     padding-left: 60px;
     background-color: $event-selected-color;
 }
@@ -244,34 +239,6 @@ limitations under the License.
     color: $event-notsent-color;
 }
 
-.mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody,
-.mx_EventTile_redacted .mx_EventTile_reply .mx_UnknownBody {
-    --lozenge-color: $event-redacted-fg-color;
-    --lozenge-border-color: $event-redacted-border-color;
-    display: block;
-    height: 22px;
-    width: 250px;
-    border-radius: 11px;
-    background:
-        repeating-linear-gradient(
-            -45deg,
-            var(--lozenge-color),
-            var(--lozenge-color) 3px,
-            transparent 3px,
-            transparent 6px
-        );
-    box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
-}
-
-.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
-    opacity: 0.4;
-}
-
-div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
-    --lozenge-color: $event-notsent-color;
-    --lozenge-border-color: $event-notsent-color;
-}
-
 .mx_EventTile_contextual {
     opacity: 0.4;
 }
@@ -363,29 +330,67 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 .mx_EventTile_e2eIcon {
     position: absolute;
     top: 6px;
-    left: 46px;
-    width: 15px;
-    height: 15px;
+    left: 44px;
+    width: 14px;
+    height: 14px;
     display: block;
     bottom: 0;
     right: 0;
     opacity: 0.2;
     background-repeat: no-repeat;
     background-size: contain;
+
+    &::before, &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+
+    &::before {
+        background-color: #ffffff;
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: 90%;
+    }
 }
 
 .mx_EventTile_e2eIcon_undecryptable, .mx_EventTile_e2eIcon_unverified {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
     opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_unknown {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
     opacity: 1;
 }
 
 .mx_EventTile_e2eIcon_unencrypted {
-    background-image: url('$(res)/img/e2e/warning.svg');
+    &::after {
+        mask-image: url('$(res)/img/e2e/warning.svg');
+        background-color: $notice-primary-color;
+    }
+    opacity: 1;
+}
+
+.mx_EventTile_e2eIcon_unauthenticated {
+    &::after {
+        mask-image: url('$(res)/img/e2e/normal.svg');
+        background-color: $composer-e2e-icon-color;
+    }
     opacity: 1;
 }
 
@@ -427,10 +432,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     margin-bottom: 0px;
 }
 
-.mx_EventTile_12hr .mx_EventTile_e2eIcon {
-    padding-left: 5px;
-}
-
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
@@ -438,15 +439,15 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: $e2e-verified-color 5px solid;
+    border-left: $e2e-verified-color 4px solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color 5px solid;
+    border-left: $e2e-unverified-color 4px solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
-    border-left: $e2e-unknown-color 5px solid;
+    border-left: $e2e-unknown-color 4px solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
@@ -539,7 +540,8 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     right: 6px;
     width: 19px;
     height: 19px;
-    background-image: url($copy-button-url);
+    mask-image: url($copy-button-url);
+    background-color: $message-action-bar-fg-color;
 }
 
 .mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
@@ -567,7 +569,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 .mx_EventTile_content .markdown-body a {
     color: $accent-color-alt;
-    text-decoration: underline;
 }
 
 .mx_EventTile_content .markdown-body .hljs {
@@ -588,84 +589,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 /* end of overrides */
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_EventTile {
-        padding-top: 4px;
-    }
-
-    .mx_EventTile.mx_EventTile_info {
-        // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
-        padding-top: 0px;
-        font-size: $font-13px;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            line-height: $font-20px;
-        }
-        .mx_EventTile_avatar {
-            top: 4px;
-        }
-    }
-
-    .mx_EventTile .mx_SenderProfile {
-        font-size: $font-13px;
-    }
-
-    .mx_EventTile.mx_EventTile_emote {
-        // add a bit more space for emotes so that avatars don't collide
-        padding-top: 8px;
-        .mx_EventTile_avatar {
-            top: 2px;
-        }
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 1px;
-        }
-    }
-
-    .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
-        padding-top: 0;
-        .mx_EventTile_line, .mx_EventTile_reply {
-            padding-top: 0px;
-            padding-bottom: 0px;
-        }
-    }
-
-    .mx_EventTile_line, .mx_EventTile_reply {
-        padding-top: 0px;
-        padding-bottom: 0px;
-    }
-
-    .mx_EventTile_avatar {
-        top: 2px;
-    }
-
-    .mx_EventTile_e2eIcon {
-        top: 3px;
-    }
-
-    .mx_EventTile_readAvatars {
-        top: 27px;
-    }
-
-    .mx_EventTile_continuation .mx_EventTile_readAvatars,
-    .mx_EventTile_emote .mx_EventTile_readAvatars {
-        top: 5px;
-    }
-
-    .mx_EventTile_info .mx_EventTile_readAvatars {
-        top: 4px;
-    }
-
-    .mx_RoomView_MessageList h2 {
-        margin-top: 6px;
-    }
-
-    .mx_EventTile_content .markdown-body {
-        p, ul, ol, dl, blockquote, pre, table {
-            margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
-        }
-    }
-}
-
 .mx_EventTile_tileError {
     color: red;
     text-align: center;
@@ -685,3 +608,14 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
         margin-left: 1em;
     }
 }
+
+@media only screen and (max-width: 480px) {
+    .mx_EventTile_line, .mx_EventTile_reply {
+        padding-left: 0;
+        margin-right: 0;
+    }
+    .mx_EventTile_content {
+        margin-top: 10px;
+        margin-right: 0;
+    }
+}

res/css/views/rooms/_GroupLayout.scss

@@ -0,0 +1,130 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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.
+*/
+
+$left-gutter: 64px;
+
+.mx_GroupLayout {
+    .mx_EventTile {
+        > .mx_SenderProfile {
+            line-height: $font-17px;
+            padding-left: $left-gutter;
+        }
+
+        > .mx_EventTile_line {
+            padding-left: $left-gutter;
+        }
+
+        > .mx_EventTile_avatar {
+            position: absolute;
+        }
+
+        .mx_MessageTimestamp {
+            position: absolute;
+            width: 46px; /* 8 + 30 (avatar) + 8 */
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 3px;
+            padding-bottom: 3px;
+            line-height: $font-22px;
+        }
+    }
+
+    .mx_EventTile_info .mx_EventTile_line {
+        padding-left: calc($left-gutter + 18px);
+    }
+}
+
+/* Compact layout overrides */
+
+.mx_MatrixChat_useCompactLayout {
+    .mx_EventTile {
+        padding-top: 4px;
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+
+        &.mx_EventTile_info {
+            // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
+            padding-top: 0px;
+            font-size: $font-13px;
+            .mx_EventTile_line, .mx_EventTile_reply {
+                line-height: $font-20px;
+            }
+            .mx_EventTile_avatar {
+                top: 4px;
+            }
+        }
+
+        .mx_SenderProfile {
+            font-size: $font-13px;
+        }
+
+        &.mx_EventTile_emote {
+            // add a bit more space for emotes so that avatars don't collide
+            padding-top: 8px;
+            .mx_EventTile_avatar {
+                top: 2px;
+            }
+            .mx_EventTile_line, .mx_EventTile_reply {
+                padding-top: 0px;
+                padding-bottom: 1px;
+            }
+        }
+
+        &.mx_EventTile_emote.mx_EventTile_continuation {
+            padding-top: 0;
+            .mx_EventTile_line, .mx_EventTile_reply {
+                padding-top: 0px;
+                padding-bottom: 0px;
+            }
+        }
+
+        .mx_EventTile_avatar {
+            top: 2px;
+        }
+
+        .mx_EventTile_e2eIcon {
+            top: 3px;
+        }
+
+        .mx_EventTile_readAvatars {
+            top: 27px;
+        }
+
+        &.mx_EventTile_continuation .mx_EventTile_readAvatars,
+        &.mx_EventTile_emote .mx_EventTile_readAvatars {
+            top: 5px;
+        }
+
+        &.mx_EventTile_info .mx_EventTile_readAvatars {
+            top: 4px;
+        }
+
+        .mx_EventTile_content .markdown-body {
+            p, ul, ol, dl, blockquote, pre, table {
+                margin-bottom: 4px; // 1/4 of the non-compact margin-bottom
+            }
+        }
+    }
+
+    .mx_RoomView_MessageList h2 {
+        margin-top: 6px;
+    }
+}

res/css/views/rooms/_IRCLayout.scss

@@ -0,0 +1,225 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+$icon-width: 14px;
+$timestamp-width: 45px;
+$right-padding: 5px;
+$irc-line-height: $font-18px;
+
+.mx_IRCLayout {
+    --name-width: 70px;
+
+    line-height: $irc-line-height !important;
+
+    .mx_EventTile {
+
+        // timestamps are links which shouldn't be underlined
+        > a {
+            text-decoration: none;
+        }
+
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding-top: 0;
+
+        > * {
+            margin-right: $right-padding;
+        }
+
+        > .mx_EventTile_msgOption {
+            order: 5;
+            flex-shrink: 0;
+
+            .mx_EventTile_readAvatars {
+                top: 0.2rem; // ($irc-line-height - avatar height) / 2
+            }
+        }
+
+        > .mx_SenderProfile {
+            order: 2;
+            flex-shrink: 0;
+            width: var(--name-width);
+            text-overflow: ellipsis;
+            text-align: left;
+            display: flex;
+            align-items: center;
+            overflow: visible;
+            justify-content: flex-end;
+        }
+
+        .mx_EventTile_line, .mx_EventTile_reply {
+            padding: 0;
+            display: flex;
+            flex-direction: column;
+            order: 3;
+            flex-grow: 1;
+            flex-shrink: 1;
+            min-width: 0;
+        }
+
+        > .mx_EventTile_avatar {
+            order: 1;
+            position: relative;
+            top: 0;
+            left: 0;
+            flex-shrink: 0;
+            height: $irc-line-height;
+            display: flex;
+            align-items: center;
+
+            // Need to use important to override the js provided height and width values.
+            > .mx_BaseAvatar, > .mx_BaseAvatar > * {
+                height: $font-14px !important;
+                width: $font-14px !important;
+                font-size: $font-10px !important;
+                line-height: $font-15px !important;
+            }
+        }
+
+        .mx_MessageTimestamp {
+            font-size: $font-10px;
+            width: $timestamp-width;
+            text-align: right;
+        }
+
+        > .mx_EventTile_e2eIcon {
+            position: absolute;
+            right: unset;
+            left: unset;
+            top: 0;
+
+            padding: 0;
+
+            flex-shrink: 0;
+            flex-grow: 0;
+
+            height: $font-18px;
+
+            background-position: center;
+        }
+
+        .mx_EventTile_line {
+            .mx_EventTile_e2eIcon,
+            .mx_TextualEvent,
+            .mx_MTextBody,
+            .mx_ReplyThread_wrapper_empty {
+                display: inline-block;
+            }
+        }
+
+        .mx_EventTile_reply {
+            order: 4;
+        }
+
+        .mx_EditMessageComposer_buttons {
+            position: relative;
+        }
+    }
+
+    .mx_EventTile_emote {
+        > .mx_EventTile_avatar {
+            margin-left: calc(var(--name-width) + $icon-width + $right-padding);
+        }
+    }
+
+    blockquote {
+        margin: 0;
+    }
+
+    .mx_EventListSummary {
+        > .mx_EventTile_line {
+            padding-left: calc(var(--name-width) + $icon-width + $timestamp-width + 3 * $right-padding); // 15 px of padding
+        }
+
+        .mx_EventListSummary_avatars {
+            padding: 0;
+            margin: 0 9px 0 0;
+        }
+    }
+
+    .mx_EventTile.mx_EventTile_info {
+        .mx_EventTile_avatar {
+            left: calc(var(--name-width) + 10px + $icon-width);
+            top: 0;
+        }
+
+        .mx_EventTile_line {
+            left: calc(var(--name-width) + 10px + $icon-width);
+        }
+
+        .mx_TextualEvent {
+            line-height: $irc-line-height;
+        }
+    }
+
+    // Suppress highlight thing from the normal Layout.
+    .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
+    .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
+        padding-left: 0;
+        border-left: 0;
+    }
+
+    .mx_SenderProfile_hover {
+        background-color: $primary-bg-color;
+        overflow: hidden;
+
+        > span {
+            display: flex;
+
+            > .mx_SenderProfile_name,
+            > .mx_SenderProfile_aux {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                min-width: var(--name-width);
+            }
+        }
+    }
+
+    .mx_SenderProfile:hover {
+        justify-content: flex-start;
+    }
+
+    .mx_SenderProfile_hover:hover {
+        overflow: visible;
+        width: max(auto, 100%);
+        z-index: 10;
+    }
+
+    .mx_ReplyThread {
+        margin: 0;
+        .mx_SenderProfile {
+            width: unset;
+            max-width: var(--name-width);
+        }
+    }
+
+    .mx_ProfileResizer {
+        position: absolute;
+        height: 100%;
+        width: 15px;
+        left: calc(80px + var(--name-width));
+        cursor: col-resize;
+        z-index: 100;
+    }
+
+    // Need to use important to override the js provided height and width values.
+    .mx_Flair > img {
+        height: $font-14px !important;
+        width: $font-14px !important;
+    }
+}

res/css/views/rooms/_InviteOnlyIcon.scss

@@ -1,58 +0,0 @@
-/*
-Copyright 2020 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-@define-mixin mx_InviteOnlyIcon {
-    width: 12px;
-    height: 12px;
-    position: relative;
-    display: block !important;
-}
-
-@define-mixin mx_InviteOnlyIcon_padlock {
-    background-color: $roomtile-name-color;
-    mask-image: url("$(res)/img/feather-customised/lock-solid.svg");
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
-.mx_InviteOnlyIcon_large {
-    @mixin mx_InviteOnlyIcon;
-    margin: 0 4px;
-
-    &::before {
-        @mixin mx_InviteOnlyIcon_padlock;
-        width: 12px;
-        height: 12px;
-    }
-}
-
-.mx_InviteOnlyIcon_small {
-    @mixin mx_InviteOnlyIcon;
-    left: -2px;
-
-    &::before {
-        @mixin mx_InviteOnlyIcon_padlock;
-        width: 10px;
-        height: 10px;
-    }
-}

res/css/views/rooms/_JumpToBottomButton.scss

@@ -41,6 +41,11 @@ limitations under the License.
     // with text-align in parent
     display: inline-block;
     padding: 0 4px;
+    color: $accent-fg-color;
+    background-color: $muted-fg-color;
+}
+
+.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
     color: $secondary-accent-color;
     background-color: $warning-color;
 }
@@ -51,7 +56,7 @@ limitations under the License.
     border-radius: 19px;
     box-sizing: border-box;
     background: $primary-bg-color;
-    border: 1.3px solid $roomtile-name-color;
+    border: 1.3px solid $muted-fg-color;
     cursor: pointer;
 }
 
@@ -62,8 +67,8 @@ limitations under the License.
     bottom: 0;
     left: 0;
     right: 0;
-    mask: url('$(res)/img/icon-jump-to-bottom.svg');
+    mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
     mask-repeat: no-repeat;
-    mask-position: 9px 14px;
-    background: $roomtile-name-color;
+    mask-size: contain;
+    background: $muted-fg-color;
 }

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -1,95 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_MemberDeviceInfo {
-    display: flex;
-    padding-bottom: 10px;
-    align-items: flex-start;
-}
-
-.mx_MemberDeviceInfo_icon {
-    margin-top: 4px;
-    width: 12px;
-    height: 12px;
-    mask-repeat: no-repeat;
-    mask-size: 100%;
-}
-.mx_MemberDeviceInfo_icon_blacklisted {
-    mask-image: url('$(res)/img/e2e/blacklisted.svg');
-    background-color: $warning-color;
-}
-.mx_MemberDeviceInfo_icon_verified {
-    mask-image: url('$(res)/img/e2e/verified.svg');
-    background-color: $accent-color;
-}
-.mx_MemberDeviceInfo_icon_unverified {
-    mask-image: url('$(res)/img/e2e/warning.svg');
-    background-color: $warning-color;
-}
-
-.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
-    display: flex;
-    flex-direction: column;
-    flex: 0 1 auto;
-    align-items: stretch;
-}
-
-.mx_MemberDeviceInfo_textButton {
-    @mixin mx_DialogButton_small;
-    margin: 2px;
-    flex: 1;
-}
-
-.mx_MemberDeviceInfo_textButton:hover {
-    @mixin mx_DialogButton_hover;
-}
-
-.mx_MemberDeviceInfo_deviceId {
-    word-break: break-word;
-    font-size: $font-13px;
-}
-
-.mx_MemberDeviceInfo_deviceInfo {
-    margin: 0 5px 5px 8px;
-    flex: 1;
-}
-
-/* "Unblacklist" is too long for a regular button: make it wider and
-   reduce the padding. */
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
-    float: right;
-    padding-left: 1em;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
-    color: $e2e-verified-color;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
-    color: $e2e-unverified-color;
-}
-
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
-    color: $e2e-warning-color;
-}

res/css/views/rooms/_MemberList.scss

@@ -26,6 +26,10 @@ limitations under the License.
         flex: 1 0 auto;
     }
 
+    .mx_SearchBox {
+        margin-bottom: 5px;
+    }
+
     h2 {
         text-transform: uppercase;
         color: $h3-color;
@@ -59,32 +63,27 @@ limitations under the License.
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
     flex: 1 1 0;
+
+    // stricter rule to override the one in _common.scss
+    &[type="text"] {
+        font-size: $font-12px;
+    }
 }
 
-
-
 .mx_MemberList_wrapper {
     padding: 10px;
 }
 
-
-.mx_MemberList_invite,
-.mx_RightPanel_invite {
+.mx_MemberList_invite {
     flex: 0 0 auto;
     position: relative;
     background-color: $button-bg-color;
     border-radius: 4px;
-    padding: 8px;
-    margin: 9px;
+    margin: 5px 9px 9px;
     display: flex;
     justify-content: center;
     color: $button-fg-color;
     font-weight: 600;
-
-    .mx_RightPanel_icon {
-        padding-right: 5px;
-        padding-top: 2px;
-    }
 }
 
 .mx_MemberList_invite.mx_AccessibleButton_disabled {
@@ -93,8 +92,17 @@ limitations under the License.
 }
 
 .mx_MemberList_invite span {
-    background-image: url('$(res)/img/feather-customised/user-add.svg');
+    background-image: url('$(res)/img/element-icons/room/invite.svg');
     background-repeat: no-repeat;
     background-position: center left;
-    padding-left: 25px;
+    background-size: 20px;
+    padding: 8px 0 8px 25px;
+}
+
+.mx_MemberList_inviteCommunity span {
+    background-image: url('$(res)/img/icon-invite-people.svg');
+}
+
+.mx_MemberList_addRoomToCommunity span {
+    background-image: url('$(res)/img/icons-room-add.svg');
 }

res/css/views/rooms/_MessageComposer.scss

@@ -20,7 +20,8 @@ limitations under the License.
     margin: auto;
     border-top: 1px solid $primary-hairline-color;
     position: relative;
-    padding-left: 84px;
+    padding-left: 82px;
+    padding-right: 6px;
 }
 
 .mx_MessageComposer_replaced_wrapper {
@@ -60,7 +61,7 @@ limitations under the License.
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
     position: absolute;
-    left: 27px;
+    left: 26px;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@@ -76,8 +77,8 @@ limitations under the License.
     left: 60px;
     margin-right: 0; // Counteract the E2EIcon class
     margin-left: 3px; // Counteract the E2EIcon class
-    width: 15px;
-    height: 15px;
+    width: 12px;
+    height: 12px;
 }
 
 .mx_MessageComposer_noperm_error {
@@ -178,44 +179,72 @@ limitations under the License.
     color: $accent-color;
 }
 
+.mx_MessageComposer_button_highlight {
+    background: rgba($accent-color, 0.25);
+    // make the icon the accent color too
+    &::before {
+        background-color: $accent-color !important;
+    }
+}
+
 .mx_MessageComposer_button {
     position: relative;
-    margin-right: 12px;
+    margin-right: 6px;
     cursor: pointer;
-    height: 20px;
-    width: 20px;
+    height: 26px;
+    width: 26px;
+    border-radius: 100%;
 
     &::before {
         content: '';
         position: absolute;
 
+        top: 3px;
+        left: 3px;
         height: 20px;
         width: 20px;
-        background-color: $composer-button-color;
+        background-color: $icon-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
         mask-position: center;
     }
+
+    &:hover {
+        background: rgba($accent-color, 0.1);
+
+        &::before {
+            background-color: $accent-color;
+        }
+    }
+
+    &.mx_MessageComposer_hangup::before {
+        background-color: $warning-color;
+    }
 }
 
+
 .mx_MessageComposer_upload::before {
-    mask-image: url('$(res)/img/feather-customised/paperclip.svg');
+    mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
 }
 
 .mx_MessageComposer_hangup::before {
-    mask-image: url('$(res)/img/hangup.svg');
+    mask-image: url('$(res)/img/element-icons/call/hangup.svg');
 }
 
 .mx_MessageComposer_voicecall::before {
-    mask-image: url('$(res)/img/feather-customised/phone.svg');
+    mask-image: url('$(res)/img/element-icons/call/voice-call.svg');
 }
 
 .mx_MessageComposer_videocall::before {
-    mask-image: url('$(res)/img/feather-customised/video.svg');
+    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+}
+
+.mx_MessageComposer_emoji::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
 }
 
 .mx_MessageComposer_stickers::before {
-    mask-image: url('$(res)/img/feather-customised/face.svg');
+    mask-image: url('$(res)/img/element-icons/room/composer/sticker.svg');
 }
 
 .mx_MessageComposer_formatting {
@@ -279,7 +308,7 @@ limitations under the License.
     mask-size: contain;
     mask-position: center;
     mask-repeat: no-repeat;
-    background-color: $composer-button-color;
+    background-color: $icon-button-color;
 
     &.mx_MessageComposer_markdownDisabled {
         opacity: 0.2;

res/css/views/rooms/_MessageComposerFormatBar.scss

@@ -75,23 +75,23 @@ limitations under the License.
     }
 
     .mx_MessageComposerFormatBar_buttonIconBold::after {
-        mask-image: url('$(res)/img/format/bold.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/bold.svg');
     }
 
     .mx_MessageComposerFormatBar_buttonIconItalic::after {
-        mask-image: url('$(res)/img/format/italics.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/italic.svg');
     }
 
     .mx_MessageComposerFormatBar_buttonIconStrikethrough::after {
-        mask-image: url('$(res)/img/format/strikethrough.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/strikethrough.svg');
     }
 
     .mx_MessageComposerFormatBar_buttonIconQuote::after {
-        mask-image: url('$(res)/img/format/quote.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/quote.svg');
     }
 
     .mx_MessageComposerFormatBar_buttonIconCode::after {
-        mask-image: url('$(res)/img/format/code.svg');
+        mask-image: url('$(res)/img/element-icons/room/format-bar/code.svg');
     }
 }
 

res/css/views/rooms/_NotificationBadge.scss

@@ -0,0 +1,72 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NotificationBadge {
+    &:not(.mx_NotificationBadge_visible) {
+        display: none;
+    }
+
+    // Badges are structured a bit weirdly to work around issues with non-monospace
+    // font styles. The badge pill is actually a background div and the count floats
+    // within that. For example:
+    //
+    //  ( 99+ ) <-- Rounded pill is a _bg class.
+    //     ^- The count is an element floating within that.
+
+    &.mx_NotificationBadge_visible {
+        background-color: $roomtile-default-badge-bg-color;
+
+        // Create a flexbox to order the count a bit easier
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        &.mx_NotificationBadge_highlighted {
+            // TODO: Use a more specific variable
+            background-color: $warning-color;
+        }
+
+        // These are the 3 background types
+
+        &.mx_NotificationBadge_dot {
+            background-color: $primary-fg-color; // increased visibility
+
+            width: 6px;
+            height: 6px;
+            border-radius: 6px;
+        }
+
+        &.mx_NotificationBadge_2char {
+            width: $font-16px;
+            height: $font-16px;
+            border-radius: $font-16px;
+        }
+
+        &.mx_NotificationBadge_3char {
+            width: $font-26px;
+            height: $font-16px;
+            border-radius: $font-16px;
+        }
+
+        // The following is the floating badge
+
+        .mx_NotificationBadge_count {
+            font-size: $font-10px;
+            line-height: $font-14px;
+            color: #fff; // TODO: Variable
+        }
+    }
+}

res/css/views/rooms/_ReplyPreview.scss

@@ -15,16 +15,13 @@ limitations under the License.
 */
 
 .mx_ReplyPreview {
-    position: absolute;
-    bottom: 0;
-    z-index: 1000;
-    width: 100%;
     border: 1px solid $primary-hairline-color;
     background: $primary-bg-color;
     border-bottom: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: 8px 8px 0 0;
     max-height: 50vh;
     overflow: auto;
+    box-shadow: 0px -16px 32px $composer-shadow-color;
 }
 
 .mx_ReplyPreview_section {

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,98 +15,42 @@ limitations under the License.
 */
 
 .mx_RoomBreadcrumbs {
-    position: relative;
-    height: 42px;
-    padding: 8px;
-    padding-bottom: 0;
+    width: 100%;
+
+    // Create a flexbox for the crumbs
     display: flex;
     flex-direction: row;
-
-    // repeating circles as empty placeholders
-    background:
-        radial-gradient(
-            circle at center,
-            $breadcrumb-placeholder-bg-color,
-            $breadcrumb-placeholder-bg-color 15px,
-            transparent 16px
-        );
-    background-size: 36px;
-    background-position: 6px -1px;
-    background-repeat: repeat-x;
-
-
-    // Autohide the scrollbar
-    overflow-x: hidden;
-    &:hover {
-        overflow-x: visible;
-    }
-
-    .mx_AutoHideScrollbar {
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-    }
+    align-items: flex-start;
 
     .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;
+        margin-right: 8px;
         width: 32px;
-        transform: scale(1);
     }
 
-    .mx_RoomBreadcrumbs_preAnimate {
-        width: 0;
-        transform: scale(0);
+    // These classes come from the CSSTransition component. There's many more classes we
+    // could care about, but this is all we worried about for now. The animation works by
+    // first triggering the enter state with the newest breadcrumb off screen (-40px) then
+    // sliding it into view.
+    &.mx_RoomBreadcrumbs-enter {
+        margin-left: -40px; // 32px for the avatar, 8px for the margin
+    }
+    &.mx_RoomBreadcrumbs-enter-active {
+        margin-left: 0;
+
+        // Timing function is as-requested by design.
+        // NOTE: The transition time MUST match the value passed to CSSTransition!
+        transition: margin-left 640ms cubic-bezier(0.66, 0.02, 0.36, 1);
     }
 
-    .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_leftOverflowIndicator {
-        background: linear-gradient(to left, $panel-gradient);
-    }
-
-    .mx_IndicatorScrollbar_rightOverflowIndicator {
-        background: linear-gradient(to right, $panel-gradient);
-    }
-
-    &.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_RoomBreadcrumbs_placeholder {
+        font-weight: 600;
+        font-size: $font-14px;
+        line-height: 32px; // specifically to match the height this is not scaled
+        height: 32px;
     }
 }
+
+.mx_RoomBreadcrumbs_Tooltip {
+    margin-left: -42px;
+    margin-top: -42px;
+}

res/css/views/rooms/_RoomDropTarget.scss

@@ -1,55 +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_RoomDropTarget_container {
-    background-color: $secondary-accent-color;
-    padding-left: 18px;
-    padding-right: 18px;
-    padding-top: 8px;
-    padding-bottom: 7px;
-}
-
-.collapsed .mx_RoomDropTarget_container {
-    padding-right: 10px;
-    padding-left: 10px;
-}
-
-.mx_RoomDropTarget {
-    font-size: $font-13px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border: 1px dashed $accent-color;
-    color: $primary-fg-color;
-    background-color: $droptarget-bg-color;
-    border-radius: 4px;
-}
-
-
-.mx_RoomDropTarget_label {
-    position: relative;
-    margin-top: 3px;
-    line-height: $font-21px;
-    z-index: 1;
-    text-align: center;
-}
-
-.collapsed .mx_RoomDropTarget_avatar {
-    float: none;
-}
-
-.collapsed .mx_RoomDropTarget_label {
-    display: none;
-}

res/css/views/rooms/_RoomHeader.scss

@@ -15,26 +15,34 @@ limitations under the License.
 */
 
 .mx_RoomHeader {
-    flex: 0 0 52px;
+    flex: 0 0 50px;
     border-bottom: 1px solid $primary-hairline-color;
+    background-color: $roomheader-bg-color;
 
-    .mx_E2EIcon {
-        margin: 0;
-        position: absolute;
-        bottom: -2px;
-        right: -6px;
-        height: 15px;
-        width: 15px;
+    .mx_RoomHeader_e2eIcon {
+        height: 12px;
+        width: 12px;
+
+        .mx_E2EIcon {
+            margin: 0;
+            position: absolute;
+            height: 12px;
+            width: 12px;
+        }
     }
 }
 
 .mx_RoomHeader_wrapper {
     margin: auto;
-    height: 52px;
+    height: 50px;
     display: flex;
     align-items: center;
     min-width: 0;
-    padding: 0 10px 0 19px;
+    padding: 0 10px 0 18px;
+
+    .mx_InviteOnlyIcon_large {
+        margin: 0;
+    }
 }
 
 .mx_RoomHeader_spinner {
@@ -67,7 +75,6 @@ limitations under the License.
 .mx_RoomHeader_buttons {
     display: flex;
     background-color: $primary-bg-color;
-    padding-right: 5px;
 }
 
 .mx_RoomHeader_info {
@@ -173,7 +180,7 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    margin: 0 7px;
+    margin: 0 6px 0 7px;
     position: relative;
 }
 
@@ -201,41 +208,53 @@ limitations under the License.
 
 .mx_RoomHeader_button {
     position: relative;
-    margin-left: 10px;
+    margin-left: 1px;
+    margin-right: 1px;
     cursor: pointer;
-    height: 20px;
-    width: 20px;
+    height: 32px;
+    width: 32px;
+    border-radius: 100%;
 
     &::before {
         content: '';
         position: absolute;
-        height: 20px;
-        width: 20px;
-        background-color: $roomheader-button-color;
+        top: 4px; // center with parent of 32px
+        left: 4px; // center with parent of 32px
+        height: 24px;
+        width: 24px;
+        background-color: $icon-button-color;
         mask-repeat: no-repeat;
         mask-size: contain;
     }
+
+    &:hover {
+        background: rgba($accent-color, 0.1);
+
+        &::before {
+            background-color: $accent-color;
+        }
+    }
 }
 
 .mx_RoomHeader_settingsButton::before {
-    mask-image: url('$(res)/img/feather-customised/settings.svg');
+    mask-image: url('$(res)/img/element-icons/settings.svg');
 }
 
 .mx_RoomHeader_forgetButton::before {
-    mask-image: url('$(res)/img/leave.svg');
+    mask-image: url('$(res)/img/element-icons/leave.svg');
     width: 26px;
 }
 
 .mx_RoomHeader_searchButton::before {
-    mask-image: url('$(res)/img/feather-customised/search.svg');
+    mask-image: url('$(res)/img/element-icons/room/search-inset.svg');
 }
 
 .mx_RoomHeader_shareButton::before {
-    mask-image: url('$(res)/img/feather-customised/share.svg');
+    mask-image: url('$(res)/img/element-icons/room/share.svg');
 }
 
 .mx_RoomHeader_manageIntegsButton::before {
-    mask-image: url('$(res)/img/feather-customised/grid.svg');
+    mask-image: url('$(res)/img/element-icons/room/integrations.svg');
 }
 
 .mx_RoomHeader_showPanel {
@@ -251,7 +270,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_pinnedButton::before {
-    mask-image: url('$(res)/img/icons-pin.svg');
+    mask-image: url('$(res)/img/element-icons/room/pin.svg');
 }
 
 .mx_RoomHeader_pinsIndicator {
@@ -267,3 +286,12 @@ limitations under the License.
 .mx_RoomHeader_pinsIndicatorUnread {
     background-color: $pinned-unread-color;
 }
+
+@media only screen and (max-width: 480px) {
+    .mx_RoomHeader_wrapper {
+        padding: 0;
+    }
+    .mx_RoomHeader {
+        overflow: hidden;
+    }
+}

res/css/views/rooms/_RoomList.scss

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -16,51 +15,45 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    /* take up remaining space below TopLeftMenu */
-    flex: 1;
-    min-height: 0;
-    overflow-y: hidden;
+    padding-right: 7px; // width of the scrollbar, to line things up
 }
 
-.mx_RoomList .mx_ResizeHandle {
-    // needed so the z-index takes effect
-    position: relative;
+.mx_RoomList_iconPlus::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+}
+.mx_RoomList_iconExplore::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
 }
 
-/* hide resize handles next to collapsed / empty sublists */
-.mx_RoomList .mx_RoomSubList:not(.mx_RoomSubList_nonEmpty) + .mx_ResizeHandle {
-    display: none;
-}
-
-.mx_RoomList_expandButton {
-    margin-left: 8px;
-    cursor: pointer;
-    padding-left: 12px;
-    padding-right: 12px;
-}
-
-.mx_RoomList_emptySubListTip_container {
-    padding-left: 18px;
-    padding-right: 18px;
-    padding-top: 8px;
-    padding-bottom: 7px;
-}
-
-.mx_RoomList_emptySubListTip {
+.mx_RoomList_explorePrompt {
+    margin: 4px 12px 4px;
+    padding-top: 12px;
+    border-top: 1px solid $tertiary-fg-color;
     font-size: $font-13px;
-    padding: 5px;
-    border: 1px dashed $accent-color;
-    color: $primary-fg-color;
-    background-color: $droptarget-bg-color;
-    border-radius: 4px;
-    line-height: $font-16px;
-}
 
-.mx_RoomList_emptySubListTip .mx_RoleButton {
-    vertical-align: -2px;
-}
+    div:first-child {
+        font-weight: $font-semi-bold;
+        margin-bottom: 8px;
+    }
 
-.mx_RoomList_headerButtons {
-    position: absolute;
-    right: 60px;
+    .mx_AccessibleButton {
+        color: $secondary-fg-color;
+        position: relative;
+        padding: 0 0 0 24px;
+        font-size: inherit;
+
+        &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            background: $secondary-fg-color;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+        }
+    }
 }

res/css/views/rooms/_RoomPreviewBar.scss

@@ -58,11 +58,6 @@ limitations under the License.
     }
 }
 
-.mx_RoomPreviewBar_dark {
-    background-color: $tagpanel-bg-color;
-    color: $accent-fg-color;
-}
-
 .mx_RoomPreviewBar_actions {
     display: flex;
 }

res/css/views/rooms/_RoomSublist.scss

@@ -0,0 +1,389 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomSublist {
+    margin-left: 8px;
+    margin-bottom: 4px;
+
+    .mx_RoomSublist_headerContainer {
+        // Create a flexbox to make alignment easy
+        display: flex;
+        align-items: center;
+
+        // ***************************
+        // Sticky Headers Start
+
+        // Ideally we'd be able to use `position: sticky; top: 0; bottom: 0;` on the
+        // headerContainer, however due to our layout concerns we actually have to
+        // calculate it manually so we can sticky things in the right places. We also
+        // target the headerText instead of the container to reduce jumps when scrolling,
+        // and to help hide the badges/other buttons that could appear on hover. This
+        // all works by ensuring the header text has a fixed height when sticky so the
+        // fixed height of the container can maintain the scroll position.
+
+        // The combined height must be set in the LeftPanel component for sticky headers
+        // to work correctly.
+        padding-bottom: 8px;
+        height: 24px;
+        color: $roomlist-header-color;
+
+        .mx_RoomSublist_stickable {
+            flex: 1;
+            max-width: 100%;
+
+            // Create a flexbox to make ordering easy
+            display: flex;
+            align-items: center;
+
+            // We use a generic sticky class for 2 reasons: to reduce style duplication and
+            // to identify when a header is sticky. If we didn't have a consistent sticky class,
+            // we'd have to do the "is sticky" checks again on click, as clicking the header
+            // when sticky scrolls instead of collapses the list.
+            &.mx_RoomSublist_headerContainer_sticky {
+                position: fixed;
+                height: 32px; // to match the header container
+                // width set by JS
+                width: calc(100% - 22px);
+            }
+
+            &.mx_RoomSublist_headerContainer_stickyBottom {
+                bottom: 0;
+            }
+
+            // We don't have a top style because the top is dependent on the room list header's
+            // height, and is therefore calculated in JS.
+            // The class, mx_RoomSublist_headerContainer_stickyTop, is applied though.
+        }
+
+        // Sticky Headers End
+        // ***************************
+
+        .mx_RoomSublist_badgeContainer {
+            // Create another flexbox row because it's super easy to position the badge this way.
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            // Apply the width and margin to the badge so the container doesn't occupy dead space
+            .mx_NotificationBadge {
+                // Do not set a width so the badges get properly sized
+                margin-left: 8px; // same as menu+aux buttons
+            }
+        }
+
+        &:not(.mx_RoomSublist_headerContainer_withAux) {
+            .mx_NotificationBadge {
+                margin-right: 4px; // just to push it over a bit, aligning it with the other elements
+            }
+        }
+
+        .mx_RoomSublist_auxButton,
+        .mx_RoomSublist_menuButton {
+            margin-left: 8px; // should be the same as the notification badge
+            position: relative;
+            width: 24px;
+            height: 24px;
+            border-radius: 32px;
+
+            &::before {
+                content: '';
+                width: 16px;
+                height: 16px;
+                position: absolute;
+                top: 4px;
+                left: 4px;
+                mask-position: center;
+                mask-size: contain;
+                mask-repeat: no-repeat;
+                background: $muted-fg-color;
+            }
+        }
+
+        // Hide the menu button by default
+        .mx_RoomSublist_menuButton {
+            visibility: hidden;
+            width: 0;
+            margin: 0;
+        }
+
+        .mx_RoomSublist_auxButton::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/plus.svg');
+        }
+
+        .mx_RoomSublist_menuButton::before {
+            mask-image: url('$(res)/img/element-icons/context-menu.svg');
+        }
+
+        .mx_RoomSublist_headerText {
+            flex: 1;
+            max-width: calc(100% - 16px); // 16px is the badge width
+            line-height: $font-16px;
+            font-size: $font-13px;
+            font-weight: 600;
+
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+
+            .mx_RoomSublist_collapseBtn {
+                display: inline-block;
+                position: relative;
+                width: 14px;
+                height: 14px;
+                margin-right: 6px;
+
+                &::before {
+                    content: '';
+                    width: 18px;
+                    height: 18px;
+                    position: absolute;
+                    mask-position: center;
+                    mask-size: contain;
+                    mask-repeat: no-repeat;
+                    background-color: $roomlist-header-color;
+                    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+                }
+
+                &.mx_RoomSublist_collapseBtn_collapsed::before {
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+    }
+
+    // In the general case, we leave height of headers alone even if sticky, so
+    // that the sublists below them do not jump. However, that leaves a gap
+    // when scrolled to the top above the first sublist (whose header can only
+    // ever stick to top), so we force height to 0 for only that first header.
+    // See also https://github.com/vector-im/element-web/issues/14429.
+    &:first-child .mx_RoomSublist_headerContainer {
+        height: 0;
+        padding-bottom: 4px;
+    }
+
+    .mx_RoomSublist_resizeBox {
+        position: relative;
+
+        // Create another flexbox column for the tiles
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .mx_RoomSublist_tiles {
+            flex: 1 0 0;
+            overflow: hidden;
+            // need this to be flex otherwise the overflow hidden from above
+            // sometimes vertically centers the clipped list ... no idea why it would do this
+            // as the box model should be top aligned. Happens in both FF and Chromium
+            display: flex;
+            flex-direction: column;
+
+            mask-image: linear-gradient(0deg, transparent, black 4px);
+        }
+
+        .mx_RoomSublist_resizerHandles_showNButton {
+            flex: 0 0 32px;
+        }
+
+        .mx_RoomSublist_resizerHandles {
+            flex: 0 0 4px;
+        }
+
+        // Class name comes from the ResizableBox component
+        // The hover state needs to use the whole sublist, not just the resizable box,
+        // so that selector is below and one level higher.
+        .mx_RoomSublist_resizerHandle {
+            cursor: ns-resize;
+            border-radius: 3px;
+
+            // Override styles from library
+            width: unset !important;
+            height: 4px !important; // Update RESIZE_HANDLE_HEIGHT if this changes
+
+            // This is positioned directly below the 'show more' button.
+            position: absolute;
+            bottom: 0 !important; // override from library
+
+            // Together, these make the bar 64px wide
+            // These are also overridden from the library
+            left: calc(50% - 32px) !important;
+            right: calc(50% - 32px) !important;
+        }
+
+        &:hover, &.mx_RoomSublist_hasMenuOpen {
+            .mx_RoomSublist_resizerHandle {
+                opacity: 0.8;
+                background-color: $primary-fg-color;
+            }
+        }
+    }
+
+    .mx_RoomSublist_showNButton {
+        cursor: pointer;
+        font-size: $font-13px;
+        line-height: $font-18px;
+        color: $roomtile-preview-color;
+
+        // Update the render() function for RoomSublist if these change
+        // Update the ListLayout class for minVisibleTiles if these change.
+        height: 24px;
+        padding-bottom: 4px;
+
+        // We create a flexbox to cheat at alignment
+        display: flex;
+        align-items: center;
+
+        .mx_RoomSublist_showNButtonChevron {
+            position: relative;
+            width: 18px;
+            height: 18px;
+            margin-left: 12px;
+            margin-right: 16px;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $roomlist-header-color;
+            left: -1px; // adjust for image position
+        }
+
+        .mx_RoomSublist_showMoreButtonChevron,
+        .mx_RoomSublist_showLessButtonChevron {
+            mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+        }
+
+        .mx_RoomSublist_showLessButtonChevron {
+            transform: rotate(180deg);
+        }
+    }
+
+    &.mx_RoomSublist_hasMenuOpen,
+    &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:focus-within,
+    &:not(.mx_RoomSublist_minimized) > .mx_RoomSublist_headerContainer:hover {
+        .mx_RoomSublist_menuButton {
+            visibility: visible;
+            width: 24px;
+            margin-left: 8px;
+        }
+    }
+
+    &.mx_RoomSublist_minimized {
+        .mx_RoomSublist_headerContainer {
+            height: auto;
+            flex-direction: column;
+            position: relative;
+
+            .mx_RoomSublist_badgeContainer {
+                order: 0;
+                align-self: flex-end;
+                margin-right: 0;
+            }
+
+            .mx_RoomSublist_stickable {
+                order: 1;
+                max-width: 100%;
+            }
+
+            .mx_RoomSublist_auxButton {
+                order: 2;
+                visibility: visible;
+                width: 32px !important; // !important to override hover styles
+                height: 32px !important; // !important to override hover styles
+                margin-left: 0 !important; // !important to override hover styles
+                background-color: $roomlist-button-bg-color;
+                margin-top: 8px;
+
+                &::before {
+                    top: 8px;
+                    left: 8px;
+                }
+            }
+        }
+
+        .mx_RoomSublist_resizeBox {
+            align-items: center;
+        }
+
+        .mx_RoomSublist_showNButton {
+            flex-direction: column;
+
+            .mx_RoomSublist_showNButtonChevron {
+                margin-right: 12px; // to center
+            }
+        }
+
+        .mx_RoomSublist_menuButton {
+            height: 16px;
+        }
+
+        &.mx_RoomSublist_hasMenuOpen,
+        & > .mx_RoomSublist_headerContainer:hover {
+            .mx_RoomSublist_menuButton {
+                visibility: visible;
+                position: absolute;
+                bottom: 48px; // align to middle of name, 40px for aux button (with padding) and 8px for alignment
+                right: 0;
+                width: 16px;
+                height: 16px;
+                border-radius: 0;
+                z-index: 1; // occlude the list name
+
+                // This is the same color as the left panel background because it needs
+                // to occlude the sublist title
+                background-color: $roomlist-bg-color;
+
+                &::before {
+                    top: 0;
+                    left: 0;
+                }
+            }
+
+            &.mx_RoomSublist_headerContainer:not(.mx_RoomSublist_headerContainer_withAux) {
+                .mx_RoomSublist_menuButton {
+                    bottom: 8px; // align to the middle of name, 40px less than the `bottom` above.
+                }
+            }
+        }
+    }
+}
+
+.mx_RoomSublist_contextMenu {
+    padding: 20px 16px;
+    width: 250px;
+
+    hr {
+        margin-top: 16px;
+        margin-bottom: 16px;
+        margin-right: 16px; // additional 16px
+        border: 1px solid $roomsublist-divider-color;
+        opacity: 0.1;
+    }
+
+    .mx_RoomSublist_contextMenu_title {
+        font-size: $font-15px;
+        line-height: $font-20px;
+        font-weight: 600;
+        margin-bottom: 4px;
+    }
+
+    .mx_RadioButton, .mx_Checkbox {
+        margin-top: 8px;
+    }
+}
+
+.mx_RoomSublist_addRoomTooltip {
+    margin-top: -3px;
+}

res/css/views/rooms/_RoomTile.scss

@@ -1,6 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,213 +14,182 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// Note: the room tile expects to be in a flexbox column container
 .mx_RoomTile {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-    height: $font-34px;
-    margin: 0;
-    padding: 0 8px 0 10px;
-    position: relative;
-
-    .mx_RoomTile_menuButton {
-        display: none;
-        flex: 0 0 16px;
-        height: 16px;
-        background-image: url('$(res)/img/icon_context.svg');
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-
-    .mx_UserOnlineDot {
-        display: block;
-        margin-right: 5px;
-    }
-}
-
-.mx_RoomTile:focus {
-    filter: none !important;
-    background-color: $roomtile-focused-bg-color;
-}
-
-.mx_RoomTile_tooltip {
-    display: inline-block;
-    position: relative;
-    top: -54px;
-    left: -12px;
-}
-
-.mx_RoomTile_nameContainer {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    vertical-align: middle;
-    min-width: 0;
-}
-
-.mx_RoomTile_labelContainer {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    min-width: 0;
-}
-
-.mx_RoomTile_subtext {
-    display: inline-block;
-    font-size: $font-11px;
-    padding: 0 0 0 7px;
-    margin: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: clip;
-    position: relative;
-    bottom: 4px;
-}
-
-.mx_RoomTile_avatar_container {
-    position: relative;
-}
-
-.mx_RoomTile_avatar {
-    flex: 0;
+    margin-bottom: 4px;
     padding: 4px;
-    width: 24px;
-    vertical-align: middle;
-}
 
-.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
-    padding-top: 0;
-    vertical-align: super;
-}
+    // The tile is also a flexbox row itself
+    display: flex;
 
-.mx_RoomTile_dm {
-    display: block;
-    position: absolute;
-    bottom: 0;
-    right: -5px;
-    z-index: 2;
-}
+    &.mx_RoomTile_selected,
+    &:hover,
+    &:focus-within,
+    &.mx_RoomTile_hasMenuOpen {
+        background-color: $roomtile-selected-bg-color;
+        border-radius: 8px;
+    }
 
-// Note we match .mx_E2EIcon to make sure this matches more tightly than just
-// .mx_E2EIcon on its own
-.mx_RoomTile_e2eIcon.mx_E2EIcon {
-    height: 14px;
-    width: 14px;
-    display: block;
-    position: absolute;
-    bottom: -2px;
-    right: -5px;
-    z-index: 1;
-    margin: 0;
-}
+    .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
+        margin-right: 8px;
+    }
 
-.mx_RoomTile_name {
-    font-size: $font-14px;
-    padding: 0 4px;
-    color: $roomtile-name-color;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-}
+    .mx_RoomTile_nameContainer {
+        flex-grow: 1;
+        min-width: 0; // allow flex to shrink it
+        margin-right: 8px; // spacing to buttons/badges
 
-.mx_RoomTile_badge {
-    flex: 0 1 content;
-    border-radius: 0.8em;
-    padding: 0 0.4em;
-    color: $roomtile-badge-fg-color;
-    font-weight: 600;
-    font-size: $font-12px;
-}
-
-.collapsed {
-    .mx_RoomTile {
-        margin: 0 6px;
-        padding: 0 2px;
-        position: relative;
+        // Create a new column layout flexbox for the name parts
+        display: flex;
+        flex-direction: column;
         justify-content: center;
+
+        .mx_RoomTile_name,
+        .mx_RoomTile_messagePreview {
+            margin: 0 2px;
+            width: 100%;
+
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        .mx_RoomTile_name {
+            font-size: $font-14px;
+            line-height: $font-18px;
+        }
+
+        .mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
+            font-weight: 600;
+        }
+
+        .mx_RoomTile_messagePreview {
+            font-size: $font-13px;
+            line-height: $font-18px;
+            color: $roomtile-preview-color;
+        }
+
+        .mx_RoomTile_nameWithPreview {
+            margin-top: -4px; // shift the name up a bit more
+        }
     }
 
-    .mx_RoomTile_name {
+    .mx_RoomTile_notificationsButton {
+        margin-left: 4px; // spacing between buttons
+    }
+
+    .mx_RoomTile_badgeContainer {
+        height: 16px;
+        // don't set width so that it takes no space when there is no badge to show
+        margin: auto 0; // vertically align
+
+        // Create a flexbox to make aligning dot badges easier
+        display: flex;
+        align-items: center;
+
+        .mx_NotificationBadge {
+            margin-right: 2px; // centering
+        }
+
+        .mx_NotificationBadge_dot {
+            // make the smaller dot occupy the same width for centering
+            margin-left: 5px;
+            margin-right: 7px;
+        }
+    }
+
+    // The context menu buttons are hidden by default
+    .mx_RoomTile_menuButton,
+    .mx_RoomTile_notificationsButton {
+        width: 20px;
+        min-width: 20px; // yay flex
+        height: 20px;
+        margin-top: auto;
+        margin-bottom: auto;
+        position: relative;
         display: none;
+
+        &::before {
+            top: 2px;
+            left: 2px;
+            content: '';
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            background: $primary-fg-color;
+        }
     }
 
-    .mx_RoomTile_badge {
-        position: absolute;
-        right: 6px;
-        top: 0px;
-        border-radius: 16px;
-        z-index: 3;
-        border: 0.18em solid $secondary-accent-color;
-    }
-
-    .mx_RoomTile_menuButton {
-        display: none; // no design for this for now
-    }
-    .mx_UserOnlineDot {
-        display: none; // no design for this for now
-    }
-}
-
-// toggle menuButton and badge on menu displayed
-.mx_RoomTile_menuDisplayed,
-// or on keyboard focus of room tile
-.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:focus-within,
-// or on pointer hover
-.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
-    .mx_RoomTile_menuButton {
+    // If the room has an overriden notification setting then we always show the notifications menu button
+    .mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
         display: block;
     }
-    .mx_UserOnlineDot {
-        display: none;
+
+    .mx_RoomTile_menuButton::before {
+        mask-image: url('$(res)/img/element-icons/context-menu.svg');
+    }
+
+    &:not(.mx_RoomTile_minimized) {
+        &:hover,
+        &:focus-within,
+        &.mx_RoomTile_hasMenuOpen {
+            // Hide the badge container on hover because it'll be a menu button
+            .mx_RoomTile_badgeContainer {
+                width: 0;
+                height: 0;
+                display: none;
+            }
+
+            .mx_RoomTile_notificationsButton,
+            .mx_RoomTile_menuButton {
+                display: block;
+            }
+        }
+    }
+
+    &.mx_RoomTile_minimized {
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+
+        .mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
+            margin-right: 0;
+        }
     }
 }
 
-.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
-.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
-    background-color: $roomtile-name-color;
+// We use these both in context menus and the room tiles
+.mx_RoomTile_iconBell::before {
+    mask-image: url('$(res)/img/element-icons/notifications.svg');
+}
+.mx_RoomTile_iconBellDot::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/notifications-default.svg');
+}
+.mx_RoomTile_iconBellCrossed::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/notifications-off.svg');
+}
+.mx_RoomTile_iconBellMentions::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/notifications-dm.svg');
 }
 
-.mx_RoomTile_highlight .mx_RoomTile_badge,
-.mx_RoomTile_badge.mx_RoomTile_badgeRed {
-    color: $accent-fg-color;
-    background-color: $warning-color;
-}
+.mx_RoomTile_contextMenu {
+    .mx_RoomTile_iconStar::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/favorite.svg');
+    }
 
-.mx_RoomTile_unread, .mx_RoomTile_highlight {
-    .mx_RoomTile_name {
-        font-weight: 600;
-        color: $roomtile-selected-color;
+    .mx_RoomTile_iconArrowDown::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/low-priority.svg');
+    }
+
+    .mx_RoomTile_iconSettings::before {
+        mask-image: url('$(res)/img/element-icons/settings.svg');
+    }
+
+    .mx_RoomTile_iconSignOut::before {
+        mask-image: url('$(res)/img/element-icons/leave.svg');
     }
 }
-
-.mx_RoomTile_selected {
-    border-radius: 4px;
-    background-color: $roomtile-selected-bg-color;
-}
-
-.mx_DNDRoomTile {
-    transform: none;
-    transition: transform 0.2s;
-}
-
-.mx_DNDRoomTile_dragging {
-    transform: scale(1.05, 1.05);
-}
-
-.mx_RoomTile_arrow {
-    position: absolute;
-    right: 0px;
-}
-
-.mx_RoomTile.mx_RoomTile_transparent {
-    background-color: transparent;
-}
-
-.mx_RoomTile.mx_RoomTile_transparent:focus {
-    background-color: $roomtile-transparent-focused-color;
-}
-
-.mx_GroupInviteTile .mx_RoomTile_name {
-    flex: 1;
-}

res/css/views/rooms/_SendMessageComposer.scss

@@ -44,10 +44,5 @@ limitations under the License.
             overflow-y: auto;
         }
     }
-
-    .mx_SendMessageComposer_overlayWrapper {
-        position: relative;
-        height: 0;
-    }
 }
 

res/css/views/rooms/_Stickers.scss

@@ -31,7 +31,7 @@
 .mx_Stickers_addLink {
     display: inline;
     cursor: pointer;
-    text-decoration: underline;
+    color: $button-link-fg-color;
 }
 
 .mx_Stickers_hideStickers {

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -28,7 +28,7 @@ limitations under the License.
     content: "";
     position: absolute;
     top: -8px;
-    left: 11px;
+    left: 10.5px;
     width: 4px;
     height: 4px;
     border-radius: 16px;
@@ -42,19 +42,20 @@ limitations under the License.
     border-radius: 19px;
     box-sizing: border-box;
     background: $primary-bg-color;
-    border: 1.3px solid $roomtile-name-color;
+    border: 1.3px solid $muted-fg-color;
     cursor: pointer;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp::before {
     content: "";
     position: absolute;
-    width: 38px;
-    height: 38px;
-    mask-image: url('$(res)/img/icon-jump-to-first-unread.svg');
+    width: 36px;
+    height: 36px;
+    mask-image: url('$(res)/img/feather-customised/chevron-down-thin.svg');
     mask-repeat: no-repeat;
-    mask-position: 9px 13px;
-    background: $roomtile-name-color;
+    mask-size: contain;
+    background: $muted-fg-color;
+    transform: rotate(180deg);
 }
 
 .mx_TopUnreadMessagesBar_markAsRead {
@@ -62,7 +63,7 @@ limitations under the License.
     width: 18px;
     height: 18px;
     background: $primary-bg-color;
-    border: 1.3px solid $roomtile-name-color;
+    border: 1.3px solid $muted-fg-color;
     border-radius: 10px;
     margin: 5px auto;
 }
@@ -76,5 +77,5 @@ limitations under the License.
     mask-repeat: no-repeat;
     mask-size: 10px;
     mask-position: 4px 4px;
-    background: $roomtile-name-color;
+    background: $muted-fg-color;
 }

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -59,7 +59,7 @@ limitations under the License.
     flex: 1;
     font-size: $font-14px;
     font-weight: 600;
-    color: $eventtile-meta-color;
+    color: $roomtopic-color;
 }
 
 .mx_WhoIsTypingTile_label > span {

res/css/views/settings/_AvatarSetting.scss

@@ -27,28 +27,6 @@ limitations under the License.
 
     .mx_AccessibleButton.mx_AccessibleButton_kind_primary {
         margin-top: 8px;
-
-        div {
-            position: relative;
-            height: 12px;
-            width: 12px;
-            display: inline;
-            padding-right: 6px; // 0.5 * 12px
-            left: -6px; // 0.5 * 12px
-            top: 3px;
-        }
-
-        div::before {
-            content: '';
-            position: absolute;
-            height: 12px;
-            width: 12px;
-
-            background-color: $button-primary-fg-color;
-            mask-repeat: no-repeat;
-            mask-size: contain;
-            mask-image: url('$(res)/img/feather-customised/upload.svg');
-        }
     }
 
     .mx_AccessibleButton.mx_AccessibleButton_kind_link_sm {

res/css/views/settings/_UpdateCheckButton.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,10 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_UserOnlineDot {
-    border-radius: 50%;
-    background-color: $accent-color;
-    height: 6px;
-    width: 6px;
-    display: inline-block;
+.mx_UpdateCheckButton_summary {
+    margin-left: 16px;
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+    }
 }

res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.scss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_SecurityRoomSettingsTab label {
-    display: block;
-}
-
 .mx_SecurityRoomSettingsTab_warning {
     display: block;
 

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

@@ -0,0 +1,230 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AppearanceUserSettingsTab_fontSlider,
+.mx_AppearanceUserSettingsTab_fontSlider_preview,
+.mx_AppearanceUserSettingsTab_Layout {
+    @mixin mx_Settings_fullWidthField;
+}
+
+.mx_AppearanceUserSettingsTab .mx_Field {
+    width: 256px;
+}
+
+.mx_AppearanceUserSettingsTab_fontScaling {
+    color: $primary-fg-color;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 15px;
+    background: rgba($appearance-tab-border-color, 0.2);
+    border-radius: 10px;
+    font-size: 10px;
+    margin-top: 24px;
+    margin-bottom: 24px;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_preview {
+    border: 1px solid $appearance-tab-border-color;
+    border-radius: 10px;
+    padding: 0 16px 9px 16px;
+    pointer-events: none;
+
+    .mx_EventTile_msgOption {
+        display: none;
+    }
+
+    &.mx_IRCLayout {
+        padding-top: 9px;
+    }
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_smallText {
+    font-size: 15px;
+    padding-right: 20px;
+    padding-left: 5px;
+    font-weight: 500;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_largeText {
+    font-size: 18px;
+    padding-left: 20px;
+    padding-right: 5px;
+    font-weight: 500;
+}
+
+.mx_AppearanceUserSettingsTab {
+    > .mx_SettingsTab_SubHeading {
+        margin-bottom: 32px;
+    }
+}
+
+.mx_AppearanceUserSettingsTab_themeSection {
+    $radio-bg-color: $input-darker-bg-color;
+    color: $primary-fg-color;
+
+    > .mx_ThemeSelectors {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        margin-top: 4px;
+        margin-bottom: 30px;
+
+        > .mx_RadioButton {
+            padding: $font-16px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            width: 180px;
+
+            background: $radio-bg-color;
+            opacity: 0.4;
+
+            flex-shrink: 1;
+            flex-grow: 0;
+
+            margin-right: 15px;
+            margin-top: 10px;
+
+            font-weight: 600;
+            color: $muted-fg-color;
+
+            > span {
+                justify-content: center;
+            }
+        }
+
+        > .mx_RadioButton_enabled {
+            opacity: 1;
+
+            // These colors need to be hardcoded because they don't change with the theme
+            &.mx_ThemeSelector_light {
+                background-color: #f3f8fd;
+                color: #2e2f32;
+            }
+
+            &.mx_ThemeSelector_dark {
+                // 5% lightened version of 181b21
+                background-color: #25282e;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+
+            &.mx_ThemeSelector_black {
+                background-color: #000000;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.mx_SettingsTab_customFontSizeField {
+    margin-left: calc($font-16px + 10px);
+}
+
+.mx_AppearanceUserSettingsTab_Layout_RadioButtons {
+    display: flex;
+    flex-direction: row;
+
+    color: $primary-fg-color;
+
+    .mx_AppearanceUserSettingsTab_spacer {
+        width: 24px;
+    }
+
+    > .mx_AppearanceUserSettingsTab_Layout_RadioButton {
+        flex-grow: 0;
+        flex-shrink: 1;
+        display: flex;
+        flex-direction: column;
+
+        width: 300px;
+
+        border: 1px solid $appearance-tab-border-color;
+        border-radius: 10px;
+
+        .mx_EventTile_msgOption,
+        .mx_MessageActionBar {
+            display: none;
+        }
+
+        .mx_AppearanceUserSettingsTab_Layout_RadioButton_preview {
+            flex-grow: 1;
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            pointer-events: none;
+        }
+
+        .mx_RadioButton {
+            flex-grow: 0;
+            padding: 10px;
+        }
+
+        .mx_EventTile_content {
+            margin-right: 0;
+        }
+
+        &.mx_AppearanceUserSettingsTab_Layout_RadioButton_selected {
+            border-color: $accent-color;
+        }
+    }
+
+    .mx_RadioButton {
+        border-top: 1px solid $appearance-tab-border-color;
+
+        > input + div {
+            border-color: rgba($muted-fg-color, 0.2);
+        }
+    }
+
+    .mx_RadioButton_checked {
+        background-color: rgba($accent-color, 0.08);
+    }
+}
+
+.mx_AppearanceUserSettingsTab_Advanced {
+    color: $primary-fg-color;
+
+    > * {
+        margin-bottom: 16px;
+    }
+
+    .mx_AppearanceUserSettingsTab_AdvancedToggle {
+        color: $accent-color;
+        cursor: pointer;
+    }
+
+    .mx_AppearanceUserSettingsTab_systemFont {
+        margin-left: calc($font-16px + 10px);
+    }
+}

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

@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_changePassword .mx_Field,
-.mx_GeneralUserSettingsTab_themeSection .mx_Field {
+.mx_GeneralUserSettingsTab_changePassword .mx_Field {
     @mixin mx_Settings_fullWidthField;
 }
 
@@ -23,6 +22,12 @@ limitations under the License.
     margin-top: 0;
 }
 
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+    // Move the spinner to the left side of the container (default center)
+    justify-content: left;
+}
+
 .mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
 .mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,

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

@@ -63,4 +63,25 @@ limitations under the License.
             font-size: inherit;
         }
     }
+
+    .mx_SecurityUserSettingsTab_warning {
+        color: $notice-primary-color;
+        position: relative;
+        padding-left: 40px;
+        margin-top: 30px;
+
+        &::before {
+            mask-repeat: no-repeat;
+            mask-position: 0 center;
+            mask-size: $font-24px;
+            position: absolute;
+            width: $font-24px;
+            height: $font-24px;
+            content: "";
+            top: 0;
+            left: 0;
+            background-color: $notice-primary-color;
+            mask-image: url('$(res)/img/feather-customised/alert-triangle.svg');
+        }
+    }
 }

res/css/views/toasts/_NonUrgentEchoFailureToast.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NonUrgentEchoFailureToast {
+    .mx_NonUrgentEchoFailureToast_icon {
+        display: inline-block;
+        width: $font-18px;
+        height: $font-18px;
+        mask-position: center;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        background-color: #fff; // we know that non-urgent toasts are always styled the same
+        mask-image: url('$(res)/img/element-icons/cloud-off.svg');
+        margin-right: 8px;
+    }
+
+    span { // includes the i18n block
+        vertical-align: middle;
+    }
+
+    .mx_AccessibleButton {
+        padding: 0;
+    }
+}

res/css/views/voip/_CallContainer.scss

@@ -0,0 +1,89 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_CallContainer {
+    position: absolute;
+    right: 20px;
+    bottom: 72px;
+    border-radius: 8px;
+    overflow: hidden;
+    z-index: 100;
+    box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
+
+    cursor: pointer;
+
+    .mx_CallPreview {
+        .mx_VideoView {
+            width: 350px;
+        }
+
+        .mx_VideoView_localVideoFeed {
+            border-radius: 8px;
+            overflow: hidden;
+        }
+    }
+
+    .mx_IncomingCallBox {
+        min-width: 250px;
+        background-color: $primary-bg-color;
+        padding: 8px;
+
+        .mx_IncomingCallBox_CallerInfo {
+            display: flex;
+            direction: row;
+
+            img {
+                margin: 8px;
+            }
+
+            > div {
+                display: flex;
+                flex-direction: column;
+
+                justify-content: center;
+            }
+
+            h1, p {
+                margin: 0px;
+                padding: 0px;
+                font-size: $font-14px;
+                line-height: $font-16px;
+            }
+
+            h1 {
+                font-weight: bold;
+            }
+        }
+
+        .mx_IncomingCallBox_buttons {
+            padding: 8px;
+            display: flex;
+            flex-direction: row;
+
+            > .mx_IncomingCallBox_spacer {
+                width: 8px;
+            }
+
+            > * {
+                flex-shrink: 0;
+                flex-grow: 1;
+                margin-right: 0;
+                font-size: $font-15px;
+                line-height: $font-24px;
+            }
+        }
+    }
+}

res/css/views/voip/_CallView.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,8 +19,76 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
     cursor: pointer;
-    text-align: center;
     padding: 6px;
     font-weight: bold;
-    font-size: $font-13px;
+
+    border-radius: 8px;
+    min-width: 200px;
+
+    display: flex;
+    align-items: center;
+
+    img {
+        margin: 4px;
+        margin-right: 10px;
+    }
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        // Hacky vertical align
+        padding-top: 3px;
+    }
+
+    > div > p,
+    > div > h1 {
+        padding: 0;
+        margin: 0;
+        font-size: $font-13px;
+        line-height: $font-15px;
+    }
+
+    > div > p {
+        font-weight: bold;
+    }
+
+    > * {
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+}
+
+.mx_CallView_hangup {
+    position: absolute;
+
+    right: 8px;
+    bottom: 10px;
+
+    height: 35px;
+    width: 35px;
+
+    border-radius: 35px;
+
+    background-color: $notice-primary-color;
+
+    z-index: 101;
+
+    cursor: pointer;
+
+    &::before {
+        content: '';
+        position: absolute;
+
+        height: 20px;
+        width: 20px;
+
+        top: 6.5px;
+        left: 7.5px;
+
+        mask: url('$(res)/img/hangup.svg');
+        mask-size: contain;
+        background-size: contain;
+
+        background-color: $primary-fg-color;
+    }
 }

res/css/views/voip/_IncomingCallbox.scss

@@ -1,69 +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_IncomingCallBox {
-    text-align: center;
-    border: 1px solid #a4a4a4;
-    border-radius: 8px;
-    background-color: $primary-bg-color;
-    position: fixed;
-    z-index: 1000;
-    padding: 6px;
-    margin-top: -3px;
-    margin-left: -20px;
-    width: 200px;
-}
-
-.mx_IncomingCallBox_chevron {
-    padding: 12px;
-    position: absolute;
-    left: -21px;
-    top: 0px;
-}
-
-.mx_IncomingCallBox_title {
-    padding: 6px;
-    font-weight: bold;
-}
-
-.mx_IncomingCallBox_buttons {
-    display: flex;
-}
-
-.mx_IncomingCallBox_buttons_cell {
-    vertical-align: middle;
-    padding: 6px;
-    flex: 1;
-}
-
-.mx_IncomingCallBox_buttons_decline,
-.mx_IncomingCallBox_buttons_accept {
-    vertical-align: middle;
-    width: 80px;
-    height: 36px;
-    line-height: $font-36px;
-    border-radius: 36px;
-    color: $accent-fg-color;
-    margin: auto;
-}
-
-.mx_IncomingCallBox_buttons_decline {
-    background-color: $voip-decline-color;
-}
-
-.mx_IncomingCallBox_buttons_accept {
-    background-color: $voip-accept-color;
-}