UX: More consistent category lock and topic-status styles

app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs

@@ -1,5 +1,5 @@
 {{#each categories as |c|}}
-  <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}}>
+  <div class='category category-box category-box-{{unbound c.slug}}' style={{border-color c.color}}>
     <div class='category-box-inner'>
       <div class='category-box-heading'>
         <a href={{c.url}}>

app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

@@ -1,5 +1,5 @@
 {{#each categories as |c|}}
-  <div class='category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}>
+  <div class='category category-box category-box-{{unbound c.slug}}' style={{border-color c.color}} data-url={{c.url}}>
     <div class='category-box-inner'>
       <div class="category-logo">
         {{#if c.uploaded_logo.url}}

app/assets/stylesheets/common/base/category-list.scss

@@ -55,10 +55,6 @@
         max-width: 100%;
       }
     }
-
-    h3 .fa {
-      color: $primary;
-    }
   }
 
   .category-box-inner {
@@ -186,16 +182,34 @@
     li {
       padding: 4px 0;
       display: flex;
+      align-items: baseline;
       .overflow {
         max-height: 3em;
         overflow: hidden;
         text-overflow: ellipsis;
       }
-
       .d-icon {
-        margin-right: 6px;
-        margin-top: 2px;
+        margin-right: 0.15em;
+        width: 0.76em;
+        height: 0.76em;
       }
     }
   }
 }
+
+.categories-list .category {
+  h3 .d-icon {
+    color: $primary-medium;
+    height: 0.76em;
+    width: 0.76em;
+    vertical-align: baseline;
+    margin-right: 0.15em;
+  }
+}
+
+.category-boxes-with-topics,
+.category-boxes {
+  .category-box h3 .d-icon {
+    margin-right: 0;
+  }
+}

app/assets/stylesheets/common/base/discourse.scss

@@ -670,16 +670,18 @@ select {
 }
 
 .topic-statuses {
+  display: inline;
   float: left;
-  padding: 0;
-  line-height: $line-height-medium;
-  color: $primary-medium;
+  margin-right: 0.15em;
   .topic-status {
     margin: 0;
-
+    display: inline-flex;
+    color: $primary-medium;
     .d-icon {
-      height: 0.75em;
+      height: 0.76em;
       width: 0.75em;
+    }
+    &:not(:last-child) {
       margin-right: 0.15em;
     }
   }

app/assets/stylesheets/common/base/topic.scss

@@ -67,7 +67,8 @@
     display: inline-block;
   }
   .topic-statuses {
-    line-height: 0.95;
+    line-height: 1.2em;
+    margin-right: 0.15em;
     .d-icon {
       color: $primary-medium;
     }

app/assets/stylesheets/common/components/badges.scss

@@ -32,8 +32,8 @@
     }
     .d-icon {
       margin-right: 3px;
-      width: 0.7em;
-      height: 0.7em;
+      width: 0.74em;
+      height: 0.74em;
     }
   }
 

app/assets/stylesheets/desktop/category-list.scss

@@ -76,6 +76,9 @@
       text-overflow: ellipsis;
       flex: 0 1 auto;
     }
+    .topic-statuses {
+      margin-right: 0.15em;
+    }
     .topic-post-badges .badge.new-posts,
     .title {
       margin-right: 5px;
@@ -91,9 +94,6 @@
         a[href] {
           color: $primary;
         }
-        .fa {
-          margin-right: 5px;
-        }
       }
     }