Merge branches 'develop' and 'devtools_serverlist' of github.com:matrix-org/matrix-react-sdk into devtools_serverlist

res/css/views/auth/_AuthBody.scss

@@ -130,3 +130,27 @@ limitations under the License.
 .mx_AuthBody_spinner {
     margin: 1em 0;
 }
+
+.mx_AuthBody_passwordScore {
+    width: 100%;
+    appearance: none;
+    height: 4px;
+    border: 0;
+    border-radius: 2px;
+    position: absolute;
+    top: -12px;
+
+    &::-moz-progress-bar {
+        border-radius: 2px;
+        background-color: $accent-color;
+    }
+
+    &::-webkit-progress-bar,
+    &::-webkit-progress-value {
+        border-radius: 2px;
+    }
+
+    &::-webkit-progress-value {
+        background-color: $accent-color;
+    }
+}

res/css/views/avatars/_BaseAvatar.scss

@@ -26,6 +26,7 @@ limitations under the License.
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
     // https://bugzilla.mozilla.org/show_bug.cgi?id=255139
     display: inline-block;
+    user-select: none;
 }
 
 .mx_BaseAvatar_initial {

res/css/views/dialogs/_AddressPickerDialog.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,8 +16,8 @@ limitations under the License.
 */
 
 /* Using a textarea for this element, to circumvent autofill */
-.mx_ChatInviteDialog_input,
-.mx_ChatInviteDialog_input:focus
+.mx_AddressPickerDialog_input,
+.mx_AddressPickerDialog_input:focus
 {
     height: 26px;
     font-size: 14px;
@@ -34,11 +35,11 @@ limitations under the License.
     word-wrap: nowrap;
 }
 
-.mx_ChatInviteDialog .mx_Dialog_content {
+.mx_AddressPickerDialog .mx_Dialog_content {
     min-height: 50px
 }
 
-.mx_ChatInviteDialog_inputContainer {
+.mx_AddressPickerDialog_inputContainer {
     border-radius: 3px;
     border: solid 1px $input-border-color;
     line-height: 36px;
@@ -51,19 +52,19 @@ limitations under the License.
     overflow-y: auto;
 }
 
-.mx_ChatInviteDialog_error {
+.mx_AddressPickerDialog_error {
     margin-top: 10px;
     color: $warning-color;
 }
 
-.mx_ChatInviteDialog_cancel {
+.mx_AddressPickerDialog_cancel {
     position: absolute;
     right: 11px;
     top: 13px;
     cursor: pointer;
 }
 
-.mx_ChatInviteDialog_cancel object {
+.mx_AddressPickerDialog_cancel object {
     pointer-events: none;
 }
 

res/css/views/dialogs/_BugReportDialog.scss

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

res/css/views/dialogs/_SettingsDialog.scss

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

res/css/views/dialogs/_UploadConfirmDialog.scss

@@ -0,0 +1,35 @@
+/*
+Copyright 2019 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UploadConfirmDialog_fileIcon {
+    margin-right: 5px;
+}
+
+.mx_UploadConfirmDialog_previewOuter {
+    text-align: center;
+}
+
+.mx_UploadConfirmDialog_previewInner {
+    display: inline-block;
+    text-align: left;
+}
+
+.mx_UploadConfirmDialog_imagePreview {
+    max-height: 300px;
+    max-width: 100%;
+    border-radius: 4px;
+    border: 1px solid $dialog-close-fg-color;
+}

res/css/views/dialogs/_WidgetOpenIDPermissionsDialog.scss

@@ -0,0 +1,28 @@
+/*
+Copyright 2019 Travis Ralston
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_WidgetOpenIDPermissionsDialog .mx_SettingsFlag {
+    .mx_ToggleSwitch {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 8px;
+    }
+
+    .mx_SettingsFlag_label {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}

res/css/views/elements/_AccessibleButton.scss

@@ -37,6 +37,12 @@ limitations under the License.
 .mx_AccessibleButton_kind_primary {
     color: $button-primary-fg-color;
     background-color: $button-primary-bg-color;
+    font-weight: 600;
+}
+
+.mx_AccessibleButton_kind_secondary {
+    color: $accent-color;
+    font-weight: 600;
 }
 
 .mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {

res/css/views/elements/_Field.scss

@@ -168,6 +168,7 @@ limitations under the License.
 .mx_Field_tooltip {
     margin-top: -12px;
     margin-left: 4px;
+    width: 200px;
 }
 
 .mx_Field_tooltip.mx_Field_valid {

res/css/views/elements/_ImageView.scss

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

res/css/views/elements/_Tooltip.scss

@@ -50,11 +50,10 @@ limitations under the License.
 
 .mx_Tooltip {
     display: none;
-    animation: mx_fadein 0.2s;
     position: fixed;
     border: 1px solid $menu-border-color;
     border-radius: 4px;
-    box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+    box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
     background-color: $menu-bg-color;
     z-index: 2000;
     padding: 10px;
@@ -66,4 +65,12 @@ limitations under the License.
     max-width: 200px;
     word-break: break-word;
     margin-right: 50px;
+
+    &.mx_Tooltip_visible {
+        animation: mx_fadein 0.2s forwards;
+    }
+
+    &.mx_Tooltip_invisible {
+        animation: mx_fadeout 0.1s forwards;
+    }
 }

res/css/views/elements/_Validation.scss

@@ -0,0 +1,69 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Validation {
+    position: relative;
+}
+
+.mx_Validation_details {
+    padding-left: 20px;
+    margin: 0;
+}
+
+.mx_Validation_description + .mx_Validation_details {
+    margin: 1em 0 0;
+}
+
+.mx_Validation_detail {
+    position: relative;
+    font-weight: normal;
+    list-style: none;
+    margin-bottom: 0.5em;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    &::before {
+        content: "";
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        top: 0;
+        left: -18px;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+    }
+
+    &.mx_Validation_valid {
+        color: $input-valid-border-color;
+
+        &::before {
+            mask-image: url('$(res)/img/feather-customised/check.svg');
+            background-color: $input-valid-border-color;
+        }
+    }
+
+    &.mx_Validation_invalid {
+        color: $input-invalid-border-color;
+
+        &::before {
+            mask-image: url('$(res)/img/feather-customised/x.svg');
+            background-color: $input-invalid-border-color;
+        }
+    }
+}

res/css/views/messages/_MessageActionBar.scss

@@ -0,0 +1,74 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_MessageActionBar {
+    position: absolute;
+    visibility: hidden;
+    cursor: pointer;
+    display: flex;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 4px;
+    background: $message-action-bar-bg-color;
+    top: -13px;
+    right: 8px;
+    user-select: none;
+
+    > * {
+        display: inline-block;
+        position: relative;
+        width: 27px;
+        border: 1px solid $message-action-bar-border-color;
+        margin-left: -1px;
+
+        &:hover {
+            border-color: $message-action-bar-hover-border-color;
+            z-index: 1;
+        }
+
+        &:first-child {
+            border-radius: 3px 0 0 3px;
+        }
+
+        &:last-child {
+            border-radius: 0 3px 3px 0;
+        }
+
+        &:only-child {
+            border-radius: 3px;
+        }
+    }
+}
+
+.mx_MessageActionBar_maskButton::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: $message-action-bar-fg-color;
+}
+
+.mx_MessageActionBar_replyButton::after {
+    mask-image: url('$(res)/img/reply.svg');
+}
+
+.mx_MessageActionBar_optionsButton::after {
+    mask-image: url('$(res)/img/icon_context.svg');
+}

res/css/views/messages/_ReactionDimension.scss

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

res/css/views/messages/_ReactionsRow.scss

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

res/css/views/messages/_ReactionsRowButton.scss

@@ -0,0 +1,36 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ReactionsRowButton {
+    display: inline-block;
+    height: 20px;
+    line-height: 21px;
+    margin-right: 6px;
+    padding: 0 6px;
+    border: 1px solid $reaction-row-button-border-color;
+    border-radius: 10px;
+    background-color: $reaction-row-button-bg-color;
+    cursor: pointer;
+
+    &:hover {
+        border-color: $reaction-row-button-hover-border-color;
+    }
+
+    &.mx_ReactionsRowButton_selected {
+        background-color: $reaction-row-button-selected-bg-color;
+        border-color: $reaction-row-button-selected-border-color;
+    }
+}

res/css/views/messages/_SenderProfile.scss

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

res/css/views/rooms/_EventTile.scss

@@ -31,6 +31,7 @@ limitations under the License.
     top: 14px;
     left: 8px;
     cursor: pointer;
+    user-select: none;
 }
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
@@ -62,6 +63,7 @@ limitations under the License.
     vertical-align: top;
     height: 16px;
     overflow: hidden;
+    user-select: none;
 
     img {
         vertical-align: -2px;
@@ -80,6 +82,7 @@ limitations under the License.
     width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
     position: absolute;
+    user-select: none;
 }
 
 .mx_EventTile_line, .mx_EventTile_reply {
@@ -118,7 +121,7 @@ limitations under the License.
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
-.mx_EventTile.menu .mx_EventTile_line
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line
 {
     background-color: $event-selected-color;
 }
@@ -203,7 +206,7 @@ limitations under the License.
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
 .mx_EventTile_last > div > a > .mx_MessageTimestamp,
 .mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile.menu > div > a > .mx_MessageTimestamp {
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
     visibility: visible;
 }
 
@@ -216,24 +219,8 @@ limitations under the License.
     width: auto;
 }
 
-.mx_EventTile_editButton {
-    position: absolute;
-    display: inline-block;
-    visibility: hidden;
-    cursor: pointer;
-    top: 6px;
-    right: 6px;
-    width: 19px;
-    height: 19px;
-    background-image: url($edit-button-url);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.mx_EventTile:hover .mx_EventTile_editButton,
-.mx_EventTile.menu .mx_EventTile_editButton {
+.mx_EventTile:hover .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
     visibility: visible;
 }
 
@@ -243,6 +230,7 @@ limitations under the License.
     width: 14px;
     height: 14px;
     top: 29px;
+    user-select: none;
 }
 
 .mx_EventTile_continuation .mx_EventTile_readAvatars,
@@ -550,10 +538,6 @@ limitations under the License.
         top: 3px;
     }
 
-    .mx_EventTile_editButton {
-        top: 3px;
-    }
-
     .mx_EventTile_readAvatars {
         top: 27px;
     }

res/css/views/rooms/_MemberList.scss

@@ -20,6 +20,7 @@ limitations under the License.
     flex: 1;
     display: flex;
     flex-direction: column;
+    min-height: 0;
 
     .mx_Spinner {
         flex: 1 0 auto;
@@ -35,6 +36,10 @@ limitations under the License.
         margin-top: 8px;
         margin-bottom: 4px;
     }
+
+    .mx_AutoHideScrollbar {
+        flex: 1 1 0;
+    }
 }
 
 .mx_MemberList_chevron {

res/css/views/rooms/_RoomBreadcrumbs.scss

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

res/css/views/rooms/_RoomPreviewBar.scss

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

res/css/views/rooms/_RoomTile.scss

@@ -144,11 +144,14 @@ limitations under the License.
     font-size: 12px;
 }
 
-.mx_RoomTile_unreadNotify .mx_RoomTile_badge {
+.mx_RoomTile_unreadNotify .mx_RoomTile_badge,
+.mx_RoomTile_badge.mx_RoomTile_badgeUnread {
     background-color: $roomtile-name-color;
 }
 
-.mx_RoomTile_highlight .mx_RoomTile_badge {
+.mx_RoomTile_highlight .mx_RoomTile_badge,
+.mx_RoomTile_badge.mx_RoomTile_badgeRed
+{
     background-color: $warning-color;
 }
 

res/css/views/rooms/_RoomUpgradeWarningBar.scss

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

res/css/views/settings/tabs/_SettingsTab.scss

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SettingsTab_warningText {
+    color: $warning-color;
+}
+
 .mx_SettingsTab_heading {
     font-size: 20px;
     font-weight: 600;
@@ -68,3 +72,7 @@ limitations under the License.
     // give them more visual distinction between the sections.
     margin-top: 30px;
 }
+
+.mx_SettingsTab a {
+    color: $accent-color-alt;
+}