recent_topics: Show unread count after topic name.

We remove the non-obvious unread count column and move the unread
counts to be displayed after topic.

static/styles/night_mode.scss

@@ -401,6 +401,10 @@ on a dark background, and don't change the dark labels dark either. */
         background-color: hsla(0, 0%, 0%, 0.2);
     }
 
+    .recent_topic_unread_count {
+        background-color: hsl(0, 0%, 15%) !important;
+        color: hsl(0, 0%, 100%);
+    }
 
     .btn-recent-filters {
         background-color: hsl(0, 0%, 26%);

static/styles/recent_topics.scss

@@ -102,11 +102,11 @@
         }
 
         .recent_topic_unread_count {
-            text-align: center;
-            // width is kept less than width of
-            // header text "Unread" so, that final width
-            // is set to header's width.
-            width: 1px;
+            background-color: hsl(0, 0%, 89%);
+            float: right;
+            padding: 0.5px;
+            margin-right: 10px;
+            border-radius: 5px;
         }
 
         .recent_avatars {

static/templates/recent_topic_row.hbs

@@ -1,11 +1,4 @@
 <tr id="recent_topic:{{stream_id}}:{{topic}}" {{#if hidden}}style="display:none;"{{/if}}>
-    <td class="recent_topic_unread_count">
-        {{#if unread_count}}
-        {{unread_count}}
-        {{else}}
-        <i class="fa fa-check-circle" title="{{t 'All messages read' }}" aria-hidden="true"></i>
-        {{/if}}
-    </td>
     <td class="recent_topic_stream">
         <span id="stream_sidebar_privacy_swatch_{{stream_id}}" class="stream-privacy filter-icon" style="color: {{stream_color}}">
             {{> stream_privacy }}
@@ -14,6 +7,7 @@
     </td>
     <td class="recent_topic_name">
         <a href="{{topic_url}}">{{topic}}</a>
+        {{#if unread_count}}<span class="recent_topic_unread_count">+{{unread_count}}</span>{{/if}}
     </td>
     <td class="recent_topic_actions">
         <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" title="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>

static/templates/recent_topics_table.hbs

@@ -22,7 +22,6 @@
     <table class="table table-responsive table-hover">
         <thead>
             <tr>
-                <th>{{t 'Unread' }}</th>
                 <th>{{t 'Stream' }}</th>
                 <th>{{t 'Topic' }}</th>
                 <th>{{t 'Actions' }}</th>