Update develop

res/css/views/rooms/_RoomBreadcrumbs2.scss

@@ -51,3 +51,18 @@ limitations under the License.
         height: 32px;
     }
 }
+
+.mx_RoomBreadcrumbs2_Tooltip {
+    margin-left: -42px;
+    margin-top: -42px;
+
+    &.mx_Tooltip {
+        background-color: $tagpanel-bg-color;
+        color: $accent-fg-color;
+        border: 0;
+
+        .mx_Tooltip_chevron {
+            display: none;
+        }
+    }
+}

res/css/views/rooms/_RoomSublist2.scss

@@ -102,7 +102,7 @@ limitations under the License.
 
             // Apply the width and margin to the badge so the container doesn't occupy dead space
             .mx_NotificationBadge {
-                width: 16px;
+                // Do not set a width so the badges get properly sized
                 margin-left: 8px; // same as menu+aux buttons
             }
         }
@@ -288,6 +288,7 @@ limitations under the License.
     }
 
     &.mx_RoomSublist2_hasMenuOpen,
+    &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:focus-within,
     &:not(.mx_RoomSublist2_minimized) > .mx_RoomSublist2_headerContainer:hover {
         .mx_RoomSublist2_menuButton {
             visibility: visible;
@@ -399,3 +400,7 @@ limitations under the License.
         margin-top: 8px;
     }
 }
+
+.mx_RoomSublist2_addRoomTooltip {
+    margin-top: -3px;
+}

res/css/views/rooms/_RoomTile2.scss

@@ -23,27 +23,23 @@ limitations under the License.
 
     // The tile is also a flexbox row itself
     display: flex;
-    flex-wrap: wrap;
 
-    &.mx_RoomTile2_selected, &:hover, &.mx_RoomTile2_hasMenuOpen {
+    &.mx_RoomTile2_selected,
+    &:hover,
+    &:focus-within,
+    &.mx_RoomTile2_hasMenuOpen {
         background-color: $roomtile2-selected-bg-color;
         border-radius: 32px;
     }
 
-    .mx_RoomTile2_avatarContainer {
+    .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
         margin-right: 8px;
-        position: relative;
-
-        .mx_RoomTileIcon {
-            position: absolute;
-            bottom: 0;
-            right: 0;
-        }
     }
 
     .mx_RoomTile2_nameContainer {
         flex-grow: 1;
-        max-width: calc(100% - 58px); // 32px avatar, 18px badge area, 8px margin on avatar
+        min-width: 0; // allow flex to shrink it
+        margin-right: 8px; // spacing to buttons/badges
 
         // Create a new column layout flexbox for the name parts
         display: flex;
@@ -81,31 +77,44 @@ limitations under the License.
         }
     }
 
-    .mx_RoomTile2_badgeContainer {
-        width: 18px;
-        height: 32px;
-
-        // Create another flexbox row because it's super easy to position the badge at
-        // the end this way.
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    .mx_RoomTile2_menuButton {
+        margin-left: 4px; // spacing between buttons
     }
 
-    // The menu button is hidden by default
-    // TODO: [Notifications] Use mx_RoomTile2_notificationsButton, similar to the following approach:
-    // https://github.com/matrix-org/matrix-react-sdk/blob/2180a56074f3698fc0241c309a72ba6cad802d1c/res/css/views/rooms/_RoomSublist2.scss#L48-L76
-    // You'll need to do the same down below on the &:hover selector for the tile.
-    // See https://github.com/vector-im/riot-web/issues/13961.
-    // ... also remove this 5 line TODO comment.
+    .mx_RoomTile2_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
+        position: relative; // fixes badge alignment in some scenarios
+
+        // 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_RoomTile2_menuButton,
     .mx_RoomTile2_notificationsButton {
-        width: 0;
-        height: 0;
-        visibility: hidden;
+        width: 20px;
+        min-width: 20px; // yay flex
+        height: 20px;
+        margin: auto 0;
         position: relative;
+        display: none;
 
         &::before {
+            top: 2px;
+            left: 2px;
             content: '';
             width: 16px;
             height: 16px;
@@ -117,25 +126,29 @@ limitations under the License.
         }
     }
 
+    // If the room has an overriden notification setting then we always show the notifications menu button
+    .mx_RoomTile2_notificationsButton.mx_RoomTile2_notificationsButton_show {
+        display: block;
+    }
+
     .mx_RoomTile2_menuButton::before {
-        top: 8px;
-        left: -1px; // this is off-center to align it with the badges
         mask-image: url('$(res)/img/feather-customised/more-horizontal.svg');
     }
 
     &:not(.mx_RoomTile2_minimized) {
-        &:hover, &.mx_RoomTile2_hasMenuOpen {
+        &:hover,
+        &:focus-within,
+        &.mx_RoomTile2_hasMenuOpen {
             // Hide the badge container on hover because it'll be a menu button
             .mx_RoomTile2_badgeContainer {
                 width: 0;
                 height: 0;
-                visibility: hidden;
+                display: none;
             }
 
+            .mx_RoomTile2_notificationsButton,
             .mx_RoomTile2_menuButton {
-                width: 18px;
-                height: 32px;
-                visibility: visible;
+                display: block;
             }
         }
     }
@@ -145,19 +158,29 @@ limitations under the License.
         align-items: center;
         position: relative;
 
-        .mx_RoomTile2_avatarContainer {
+        .mx_DecoratedRoomAvatar, .mx_RoomTile2_avatarContainer {
             margin-right: 0;
         }
-
-        .mx_RoomTile2_badgeContainer {
-            position: absolute;
-            top: 0;
-            right: 0;
-            height: 18px;
-        }
     }
 }
 
+// We use these both in context menus and the room tiles
+.mx_RoomTile2_iconBell::before {
+    mask-image: url('$(res)/img/feather-customised/bell.svg');
+}
+.mx_RoomTile2_iconBellDot::before {
+    mask-image: url('$(res)/img/feather-customised/bell-notification.custom.svg');
+}
+.mx_RoomTile2_iconBellCrossed::before {
+    mask-image: url('$(res)/img/feather-customised/bell-crossed.svg');
+}
+.mx_RoomTile2_iconBellMentions::before {
+    mask-image: url('$(res)/img/feather-customised/bell-mentions.custom.svg');
+}
+.mx_RoomTile2_iconCheck::before {
+    mask-image: url('$(res)/img/feather-customised/check.svg');
+}
+
 .mx_RoomTile2_contextMenu {
     .mx_RoomTile2_contextMenu_redRow {
         .mx_AccessibleButton {
@@ -169,6 +192,16 @@ limitations under the License.
         }
     }
 
+    .mx_RoomTile2_contextMenu_activeRow {
+        &.mx_AccessibleButton, .mx_AccessibleButton {
+            color: $accent-color !important; // !important to override styles from context menu
+        }
+
+        .mx_IconizedContextMenu_icon::before {
+            background-color: $accent-color;
+        }
+    }
+
     .mx_IconizedContextMenu_icon {
         position: relative;
         width: 16px;