Manually fix remaining stylelint issues

res/css/_common.scss

@@ -104,17 +104,17 @@ input[type=text], input[type=password], textarea {
     color: $primary-fg-color;
 }
 
-input[type=text]:focus, input[type=password]:focus, textarea:focus {
-    outline: none;
-    box-shadow: none;
-}
-
 /* Required by Firefox */
 textarea {
     font-family: $font-family;
     color: $primary-fg-color;
 }
 
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+    outline: none;
+    box-shadow: none;
+}
+
 // This is used to hide the standard outline added by browsers for
 // accessible (focusable) components. Not intended for buttons, but
 // should be used on things like focusable containers where the outline
@@ -129,6 +129,13 @@ textarea {
 // appear to be part of the input
 
 .mx_Dialog, .mx_MatrixChat {
+    .mx_textinput > input[type=text],
+    .mx_textinput > input[type=search] {
+        border: none;
+        flex: 1;
+        color: $primary-fg-color;
+    }
+
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
@@ -147,13 +154,6 @@ textarea {
     .mx_textinput {
         display: flex;
         align-items: center;
-
-        > input[type=text],
-        > input[type=search] {
-            border: none;
-            flex: 1;
-            color: $primary-fg-color;
-        }
     }
 
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
@@ -166,9 +166,7 @@ textarea {
 /*** panels ***/
 .dark-panel {
     background-color: $dark-panel-bg-color;
-}
 
-.dark-panel {
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
     :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
     .mx_textinput {
@@ -271,14 +269,6 @@ textarea {
     justify-content: center;
 }
 
-/* Spinner Dialog overide */
-.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
-    width: auto;
-    border-radius: 8px;
-    padding: 0px;
-    box-shadow: none;
-}
-
 .mx_Dialog {
     background-color: $primary-bg-color;
     color: $light-fg-color;
@@ -425,6 +415,14 @@ textarea {
     opacity: 0.7;
 }
 
+/* Spinner Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+    width: auto;
+    border-radius: 8px;
+    padding: 0px;
+    box-shadow: none;
+}
+
 // TODO: Review mx_GeneralButton usage to see if it can use a different class
 // These classes were brought in from the old UserSettings and are included here to avoid
 // breaking the app.

res/css/views/auth/_AuthBody.scss

@@ -58,12 +58,12 @@ limitations under the License.
         color: $authpage-primary-color;
     }
 
+    .mx_Field_labelAlwaysTopLeft label,
+    .mx_Field select + label, /* Always show a select's label on top to not collide with the value */,
     .mx_Field input:focus + label,
     .mx_Field input:not(:placeholder-shown) + label,
     .mx_Field textarea:focus + label,
-    .mx_Field textarea:not(:placeholder-shown) + label,
+    .mx_Field textarea:not(:placeholder-shown) + label {
-    .mx_Field select + label /* Always show a select's label on top to not collide with the value */,
-    .mx_Field_labelAlwaysTopLeft label {
         background-color: $authpage-body-bg-color;
     }
 

res/css/views/context_menus/_RoomTileContextMenu.scss

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

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -135,6 +135,7 @@ limitations under the License.
     }
 }
 
+/* stylelint-disable no-descending-specificity */
 .mx_DevTools_tgl-flip {
     + .mx_DevTools_tgl-btn {
         padding: 2px;
@@ -189,3 +190,4 @@ limitations under the License.
         }
     }
 }
+/* stylelint-enable no-descending-specificity */

res/css/views/dialogs/_SetEmailDialog.scss

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

res/css/views/elements/_AccessibleButton.scss

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_AccessibleButton:focus {
-    outline: 0;
-}
-
 .mx_AccessibleButton {
     cursor: pointer;
 }
 
+.mx_AccessibleButton:focus {
+    outline: 0;
+}
+
 .mx_AccessibleButton_disabled {
     cursor: default;
 }

res/css/views/elements/_AddressSelector.scss

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

res/css/views/elements/_Dropdown.scss

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

res/css/views/elements/_Field.scss

@@ -110,12 +110,12 @@ limitations under the License.
     max-width: calc(100% - 20px); // 100% of parent minus margin and padding
 }
 
+.mx_Field_labelAlwaysTopLeft label,
+.mx_Field select + label, /* Always show a select's label on top to not collide with the value */,
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
 .mx_Field textarea:focus + label,
-.mx_Field textarea:not(:placeholder-shown) + label,
+.mx_Field textarea:not(:placeholder-shown) + label {
-.mx_Field select + label /* Always show a select's label on top to not collide with the value */,
-.mx_Field_labelAlwaysTopLeft label {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,
@@ -144,6 +144,7 @@ limitations under the License.
     color: $greyed-fg-color;
 }
 
+/* stylelint-disable no-descending-specificity */
 .mx_Field_valid {
     &.mx_Field,
     &.mx_Field:focus-within {
@@ -167,6 +168,7 @@ limitations under the License.
         color: $input-invalid-border-color;
     }
 }
+/* stylelint-enable no-descending-specificity */
 
 .mx_Field_tooltip {
     margin-top: -12px;

res/css/views/elements/_ManageIntegsButton.scss

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

res/css/views/elements/_RichText.scss

@@ -13,12 +13,6 @@
     padding-left: 5px;
 }
 
-.mx_EventTile_body .mx_UserPill,
-.mx_EventTile_body .mx_RoomPill,
-.mx_EventTile_body .mx_GroupPill {
-    cursor: pointer;
-}
-
 /* More specific to override `.markdown-body a` text-decoration */
 .mx_EventTile_content .markdown-body a.mx_Pill {
     text-decoration: none;
@@ -64,6 +58,12 @@
     padding-right: 5px;
 }
 
+.mx_EventTile_body .mx_UserPill,
+.mx_EventTile_body .mx_RoomPill,
+.mx_EventTile_body .mx_GroupPill {
+    cursor: pointer;
+}
+
 .mx_UserPill .mx_BaseAvatar,
 .mx_RoomPill .mx_BaseAvatar,
 .mx_GroupPill .mx_BaseAvatar,

res/css/views/elements/_ToggleSwitch.scss

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

res/css/views/messages/_CreateEvent.scss

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

res/css/views/messages/_DateSeparator.scss

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

res/css/views/rooms/_AppsDrawer.scss

@@ -42,7 +42,6 @@ $AppsDrawerBodyHeight: 273px;
 .mx_AddWidget_button {
     order: 2;
     cursor: pointer;
-    padding-right: 12px;
     padding: 0;
     margin: 5px auto 5px auto;
     color: $accent-color;
@@ -270,7 +269,6 @@ $AppsDrawerBodyHeight: 273px;
 
 .mx_AppIconTile_image {
     padding: 10px;
-    width: 75%;
     max-width: 100px;
     max-height: 100px;
     width: auto;

res/css/views/rooms/_Autocomplete.scss

@@ -15,11 +15,6 @@
     border-bottom: 1px solid $primary-hairline-color;
 }
 
-.mx_Autocomplete_Completion_container_pill {
-    margin: 12px;
-    display: flex;
-}
-
 /* a "block" completion takes up a whole line */
 .mx_Autocomplete_Completion_block {
     height: 34px;
@@ -50,6 +45,22 @@
     margin: 0 3px;
 }
 
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
+}
+
+.mx_Autocomplete_Completion_description {
+    color: gray;
+}
+
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
+}
+
 .mx_Autocomplete_Completion_container_truncate {
     .mx_Autocomplete_Completion_title,
     .mx_Autocomplete_Completion_subtitle,
@@ -62,13 +73,6 @@
     }
 }
 
-/* container for pill-style completions */
-.mx_Autocomplete_Completion_container_pill {
-    margin: 12px;
-    display: flex;
-    flex-flow: wrap;
-}
-
 .mx_Autocomplete_Completion.selected,
 .mx_Autocomplete_Completion:hover {
     background: $selected-color;
@@ -81,14 +85,3 @@
     font-weight: 400;
     opacity: 0.4;
 }
-
-/* styling for common completion elements */
-.mx_Autocomplete_Completion_subtitle {
-    font-style: italic;
-    flex: 1;
-}
-
-.mx_Autocomplete_Completion_description {
-    color: gray;
-}
-

res/css/views/rooms/_EntityTile.scss

@@ -85,10 +85,6 @@ limitations under the License.
     overflow: hidden;
 }
 
-.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
-    font-size: 13px;
-}
-
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
     color: $primary-fg-color;
@@ -116,6 +112,10 @@ limitations under the License.
     opacity: 0.25;
 }
 
+.mx_EntityTile:not(.mx_EntityTile_noHover):hover .mx_EntityTile_name {
+    font-size: 13px;
+}
+
 .mx_EntityTile_subtext {
     font-size: 11px;
     opacity: 0.5;

res/css/views/rooms/_EventTile.scss

@@ -126,6 +126,27 @@ limitations under the License.
     line-height: 57px !important;
 }
 
+.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
+    visibility: visible;
+}
+
+.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
+    left: 3px;
+    width: auto;
+}
+
+// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
+.mx_EventTile_last > div > a > .mx_MessageTimestamp,
+.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
+.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
+    visibility: visible;
+}
+
+.mx_EventTile:hover .mx_MessageActionBar,
+.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
+    visibility: visible;
+}
+
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
@@ -135,6 +156,15 @@ limitations under the License.
     background-color: $event-selected-color;
 }
 
+.mx_EventTile_highlight,
+.mx_EventTile_highlight .markdown-body {
+    color: $event-highlight-fg-color;
+
+    .mx_EventTile_line {
+        background-color: $event-highlight-bg-color;
+    }
+}
+
 .mx_EventTile:hover .mx_EventTile_line,
 .mx_EventTile.mx_EventTile_actionBarFocused .mx_EventTile_line {
     background-color: $event-selected-color;
@@ -166,14 +196,6 @@ limitations under the License.
 .mx_EventTile_sending .mx_RoomPill {
     opacity: 0.5;
 }
-.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 !important;
-    --lozenge-border-color: $event-notsent-color !important;
-}
 
 .mx_EventTile_notSent {
     color: $event-notsent-color;
@@ -184,7 +206,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     --lozenge-color: $event-redacted-fg-color;
     --lozenge-border-color: $event-redacted-border-color;
     display: block;
-    width: 100%;
     height: 22px;
     width: 250px;
     border-radius: 11px;
@@ -199,13 +220,13 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     box-shadow: 0px 0px 3px var(--lozenge-border-color) inset;
 }
 
-.mx_EventTile_highlight,
+.mx_EventTile_sending.mx_EventTile_redacted .mx_UnknownBody {
-.mx_EventTile_highlight .markdown-body {
+    opacity: 0.4;
-    color: $event-highlight-fg-color;
+}
 
-    .mx_EventTile_line {
+div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
-        background-color: $event-highlight-bg-color;
+    --lozenge-color: $event-notsent-color;
-    }
+    --lozenge-border-color: $event-notsent-color;
 }
 
 .mx_EventTile_contextual {
@@ -230,27 +251,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     text-decoration: none;
 }
 
-// Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
-.mx_EventTile_last > div > a > .mx_MessageTimestamp,
-.mx_EventTile:hover > div > a > .mx_MessageTimestamp,
-.mx_EventTile.mx_EventTile_actionBarFocused > div > a > .mx_MessageTimestamp {
-    visibility: visible;
-}
-
-.mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
-    visibility: visible;
-}
-
-.mx_EventTile_selected > div > a > .mx_MessageTimestamp {
-    left: 3px;
-    width: auto;
-}
-
-.mx_EventTile:hover .mx_MessageActionBar,
-.mx_EventTile.mx_EventTile_actionBarFocused .mx_MessageActionBar {
-    visibility: visible;
-}
-
 .mx_EventTile_readAvatars {
     position: relative;
     display: inline-block;
@@ -296,11 +296,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     overflow-y: hidden;
 }
 
-/* End to end encryption stuff */
-.mx_EventTile:hover .mx_EventTile_e2eIcon {
-    opacity: 1;
-}
-
 .mx_EventTile_e2eIcon {
     display: block;
     position: absolute;
@@ -367,22 +362,31 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     padding-left: 5px;
 }
 
+.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 78px;
+}
+
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
     padding-left: 60px;
 }
 
-.mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: $e2e-verified-color 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: $e2e-unverified-color 5px solid;
+}
+
 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
     padding-left: 78px;
 }
 
-.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+/* End to end encryption stuff */
-    border-left: $e2e-verified-color 5px solid;
+.mx_EventTile:hover .mx_EventTile_e2eIcon {
-}
+    opacity: 1;
-.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: $e2e-unverified-color 5px solid;
 }
 
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
@@ -392,12 +396,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     width: auto;
 }
 
-/*
-.mx_EventTile_verified .mx_EventTile_e2eIcon {
-    display: none;
-}
-*/
-
 // Explicit relationships so that it doesn't apply to nested EventTile components (e.g in Replies)
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line > .mx_EventTile_e2eIcon,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line > .mx_EventTile_e2eIcon {
@@ -416,35 +414,40 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 /* Various markdown overrides */
 
+.mx_EventTile_body pre {
+    border: 1px solid transparent;
+}
+
 .mx_EventTile_content .markdown-body {
     font-family: inherit !important;
     white-space: normal !important;
     line-height: inherit !important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
     font-size: 14px;
-}
 
-/* have to use overlay rather than auto otherwise Linux and Windows
-   Chrome gets very confused about vertical spacing:
-   https://github.com/vector-im/vector-web/issues/754
-*/
-.mx_EventTile_content .markdown-body pre {
-    overflow-x: overlay;
-    overflow-y: visible;
-    max-height: 30vh;
-}
-
-.mx_EventTile_content .markdown-body code {
-    // deliberate constants as we're behind an invert filter
-    background-color: #f8f8f8;
-}
-
-.mx_EventTile_content .markdown-body {
     pre, code {
         font-family: $monospace-font-family !important;
         // deliberate constants as we're behind an invert filter
         color: #333;
     }
+
+    pre {
+        // have to use overlay rather than auto otherwise Linux and Windows
+        // Chrome gets very confused about vertical spacing:
+        // https://github.com/vector-im/vector-web/issues/754
+        overflow-x: overlay;
+        overflow-y: visible;
+        max-height: 30vh;
+    }
+
+    code {
+        // deliberate constants as we're behind an invert filter
+        background-color: #f8f8f8;
+    }
+}
+
+.mx_EventTile:hover .mx_EventTile_body pre {
+    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
 }
 
 .mx_EventTile_pre_container {
@@ -465,14 +468,6 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
     background-image: url($copy-button-url);
 }
 
-.mx_EventTile_body pre {
-    border: 1px solid transparent;
-}
-
-.mx_EventTile:hover .mx_EventTile_body pre {
-    border: 1px solid #e5e5e5; // deliberate constant as we're behind an invert filter
-}
-
 .mx_EventTile_body .mx_EventTile_pre_container:hover .mx_EventTile_copyButton {
     visibility: visible;
 }
@@ -518,6 +513,7 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
 
 /* end of overrides */
 
+/* stylelint-disable no-descending-specificity */
 .mx_MatrixChat_useCompactLayout {
     .mx_EventTile {
         padding-top: 4px;
@@ -595,3 +591,4 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
         }
     }
 }
+/* stylelint-enable no-descending-specificity */

res/css/views/rooms/_MemberInfo.scss

@@ -82,9 +82,6 @@ limitations under the License.
     display: block;
 }
 
-.mx_MemberInfo_avatar .mx_BaseAvatar {
-}
-
 .mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
     cursor: zoom-in;
 }

res/css/views/rooms/_PinnedEventTile.scss

@@ -44,6 +44,12 @@ limitations under the License.
     margin-right: 10px;
 }
 
+.mx_PinnedEventTile_actions {
+    float: right;
+    margin-right: 10px;
+    display: none;
+}
+
 .mx_PinnedEventTile:hover .mx_PinnedEventTile_timestamp {
     display: inline-block;
 }
@@ -52,12 +58,6 @@ limitations under the License.
     display: block;
 }
 
-.mx_PinnedEventTile_actions {
-    float: right;
-    margin-right: 10px;
-    display: none;
-}
-
 .mx_PinnedEventTile_unpinButton {
     display: inline-block;
     cursor: pointer;

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -78,6 +78,14 @@ limitations under the License.
         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;
@@ -88,13 +96,4 @@ limitations under the License.
         pointer-events: none;
         z-index: 100;
     }
-
-    .mx_IndicatorScrollbar_leftOverflowIndicator {
-        background: linear-gradient(to left, $panel-gradient);
-    }
-
-    .mx_IndicatorScrollbar_rightOverflowIndicator {
-        background: linear-gradient(to right, $panel-gradient);
-    }
 }
-

res/css/views/rooms/_RoomHeader.scss

@@ -22,7 +22,6 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     margin: auto;
     height: 52px;
-    align-items: center;
     display: flex;
     align-items: center;
     min-width: 0;

res/css/views/rooms/_RoomTile.scss

@@ -25,6 +25,11 @@ limitations under the License.
     position: relative;
 }
 
+.mx_RoomTile:focus {
+    filter: none !important;
+    background-color: $roomtile-focused-bg-color;
+}
+
 .mx_RoomTile_menuButton {
     display: none;
     flex: 0 0 16px;
@@ -34,13 +39,6 @@ limitations under the License.
     background-position: center;
 }
 
-// toggle menuButton and badge on hover/menu displayed
-.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover, .mx_RoomTile_menuDisplayed {
-    .mx_RoomTile_menuButton {
-        display: block;
-    }
-}
-
 .mx_RoomTile_tooltip {
     display: inline-block;
     position: relative;
@@ -48,7 +46,6 @@ limitations under the License.
     left: -12px;
 }
 
-
 .mx_RoomTile_nameContainer {
     display: flex;
     align-items: center;
@@ -109,6 +106,15 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
+.mx_RoomTile_badge {
+    flex: 0 1 content;
+    border-radius: 0.8em;
+    padding: 0 0.4em;
+    color: $accent-fg-color;
+    font-weight: 600;
+    font-size: 12px;
+}
+
 .collapsed {
     .mx_RoomTile {
         margin: 0 2px;
@@ -135,13 +141,12 @@ limitations under the License.
     }
 }
 
-.mx_RoomTile_badge {
+// toggle menuButton and badge on hover/menu displayed
-    flex: 0 1 content;
+.mx_RoomTile_menuDisplayed,
-    border-radius: 0.8em;
+.mx_LeftPanel_container:not(.collapsed) .mx_RoomTile:hover {
-    padding: 0 0.4em;
+    .mx_RoomTile_menuButton {
-    color: $accent-fg-color;
+        display: block;
-    font-weight: 600;
+    }
-    font-size: 12px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge,
@@ -175,11 +180,6 @@ limitations under the License.
     transform: scale(1.05, 1.05);
 }
 
-.mx_RoomTile:focus {
-    filter: none !important;
-    background-color: $roomtile-focused-bg-color;
-}
-
 .mx_RoomTile_arrow {
     position: absolute;
     right: 0px;

src/components/views/messages/DateSeparator.js

@@ -56,6 +56,6 @@ export default class DateSeparator extends React.Component {
     }
 
     render() {
-        return <h2 className="mx_DateSeparator"><hr /><date>{ this.getLabel() }</date><hr /></h2>;
+        return <h2 className="mx_DateSeparator"><hr /><div>{ this.getLabel() }</div><hr /></h2>;
     }
 }