topic_list_item: Use unread_counts class for showing unread count.

static/styles/left_sidebar.css

@@ -289,7 +289,6 @@ li.top_left_recent_topics {
     font-size: 13px;
 }
 
-.topic-unread-count,
 .private_message_count {
     float: right;
     padding: 0 4px;
@@ -312,7 +311,6 @@ li.top_left_recent_topics {
 }
 
 /* These are true "unread" counts. */
-.topic-unread-count,
 .private_message_count {
     background-color: hsl(105, 2%, 50%);
     color: hsl(0, 0%, 100%);

static/styles/night_mode.css

@@ -165,7 +165,7 @@ on a dark background, and don't change the dark labels dark either. */
         color: hsl(236, 33%, 90%);
     }
 
-    .topic-unread-count,
+    .topic-list-item .unread_count,
     .private_message_count {
         background-color: hsla(105, 2%, 50%, 0.5);
     }

static/templates/more_topics.hbs

@@ -1,8 +1,8 @@
 <li class="topic-list-item show-more-topics bottom_left_row {{#unless more_topics_unreads}}zero-topic-unreads{{/unless}}">
     <span class='topic-box'>
         <a class="topic-name" href="#">{{t "more topics" }}</a>
-        <div class="topic-unread-count {{#unless more_topics_unreads}}zero_count{{/unless}}">
-            <div class="value">{{more_topics_unreads}}</div>
-        </div>
+        <span class="unread_count {{#unless more_topics_unreads}}zero_count{{/unless}}">
+            {{more_topics_unreads}}
+        </span>
     </span>
 </li>

static/templates/topic_list_item.hbs

@@ -3,9 +3,9 @@
         <a href='{{url}}' class="topic-name" title="{{topic_name}}">
             {{topic_name}}
         </a>
-        <div class="topic-unread-count {{#if is_zero}}zero_count{{/if}}">
-            <div class="value">{{unread}}</div>
-        </div>
+        <span class="unread_count {{#if is_zero}}zero_count{{/if}}">
+            {{unread}}
+        </span>
     </span>
     <span class="topic-sidebar-menu-icon">
         <i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i>