pm_list_item: Use unread_counts class for showing unread count.

static/styles/left_sidebar.css

@@ -239,6 +239,10 @@ li.active-sub-filter {
         display: none;
     }
 
+    .expanded_private_message .unread_count {
+        margin: 0;
+    }
+
     i {
         opacity: 0.7;
     }
@@ -289,17 +293,6 @@ li.top_left_recent_topics {
     font-size: 13px;
 }
 
-.private_message_count {
-    float: right;
-    padding: 0 4px;
-    height: 16px;
-    line-height: 16px;
-    font-size: 12px;
-    font-weight: normal;
-    letter-spacing: 0.6px;
-    border-radius: 4px;
-}
-
 /* Starred messaged counts aren't really unread
    counts, so we style them differently.
 */
@@ -310,12 +303,6 @@ li.top_left_recent_topics {
     border-color: hsl(105, 2%, 50%);
 }
 
-/* These are true "unread" counts. */
-.private_message_count {
-    background-color: hsl(105, 2%, 50%);
-    color: hsl(0, 0%, 100%);
-}
-
 .topic-box {
     padding-left: 5px;
     margin-right: 30px;

static/styles/night_mode.css

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

static/templates/pm_list_item.hbs

@@ -16,9 +16,9 @@
         <a href='{{url}}' class="conversation-partners">
             {{recipients}}
         </a>
-        <div class="private_message_count {{#if is_zero}}zero_count{{/if}}">
+        <span class="unread_count {{#if is_zero}}zero_count{{/if}}">
-            <div class="value">{{unread}}</div>
+            {{unread}}
-        </div>
+        </span>
     </span>
 </li>