Add/improve badge counts in new room list

res/css/_components.scss

@@ -172,6 +172,7 @@
 @import "./views/rooms/_MemberList.scss";
 @import "./views/rooms/_MessageComposer.scss";
 @import "./views/rooms/_MessageComposerFormatBar.scss";
+@import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";

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: $roomtile2-badge-color;
+        margin-right: 14px;
+
+        // 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 {
+            width: 6px;
+            height: 6px;
+            border-radius: 6px;
+            margin-right: 18px;
+        }
+
+        &.mx_NotificationBadge_2char {
+            width: 16px;
+            height: 16px;
+            border-radius: 16px;
+        }
+
+        &.mx_NotificationBadge_3char {
+            width: 26px;
+            height: 16px;
+            border-radius: 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/_RoomSublist2.scss

@@ -30,11 +30,36 @@ limitations under the License.
     margin-bottom: 12px;
 
     .mx_RoomSublist2_headerContainer {
-        text-transform: uppercase;
-        opacity: 0.5;
-        line-height: $font-16px;
-        font-size: $font-12px;
-        padding-bottom: 8px;
+        // Create a flexbox to make ordering easy
+        display: flex;
+        align-items: center;
+
+        .mx_RoomSublist2_badgeContainer {
+            opacity: 0.8;
+            padding-right: 7px;
+
+            // 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: flex-end;
+        }
+
+        .mx_RoomSublist2_headerText {
+            text-transform: uppercase;
+            opacity: 0.5;
+            line-height: $font-16px;
+            font-size: $font-12px;
+            padding-bottom: 8px;
+
+            width: 100%;
+            flex: 1;
+
+            // Ellipsize any text overflow
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
     }
 
     .mx_RoomSublist2_resizeBox {

res/css/views/rooms/_RoomTile2.scss

@@ -50,11 +50,14 @@ limitations under the License.
         // TODO: Ellipsis on the name and preview
 
         .mx_RoomTile2_name {
-            font-weight: 600;
             font-size: $font-14px;
             line-height: $font-19px;
         }
 
+        .mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
+            font-weight: 600;
+        }
+
         .mx_RoomTile2_messagePreview {
             font-size: $font-13px;
             line-height: $font-18px;
@@ -70,34 +73,5 @@ limitations under the License.
         display: flex;
         align-items: center;
         justify-content: flex-end;
-
-        .mx_RoomTile2_badge {
-            background-color: $roomtile2-badge-color;
-
-            &:not(.mx_RoomTile2_badgeEmpty) {
-                border-radius: 16px;
-                font-size: $font-10px;
-                line-height: $font-14px;
-                text-align: center;
-                font-weight: bold;
-                margin-right: 14px;
-                color: #fff; // TODO: Variable
-
-                // TODO: Confirm padding on counted badges
-                padding: 2px 5px;
-            }
-
-            &.mx_RoomTile2_badgeEmpty {
-                width: 6px;
-                height: 6px;
-                border-radius: 6px;
-                margin-right: 18px;
-            }
-
-            &.mx_RoomTile2_badgeHighlight {
-                // TODO: Use a more specific variable
-                background-color: $warning-color;
-            }
-        }
     }
 }