UX: Refactoring topic statuses for consistent icon sizes & colors

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

@@ -159,7 +159,6 @@
   .topic-status {
     margin-right: 4px;
     padding: 0;
-    font-size: 1.071em;
     &:last-of-type {
       margin-right: 0;
     }
@@ -257,14 +256,6 @@ ol.category-breadcrumb {
 
 .d-icon-thumbtack.unpinned {
   @include fa-rotate(180deg, 1);
-  color: $primary;
-  /* because it is rotated, right becomes left! */
-  padding-left: 3px;
-  padding-right: 0 !important;
-}
-
-.topic-statuses .fa {
-  padding-right: 3px;
 }
 
 .top-title-buttons {

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

@@ -668,3 +668,23 @@ select {
     }
   }
 }
+
+.topic-statuses {
+  float: left;
+  padding: 0;
+  line-height: $line-height-medium;
+  color: $primary-medium;
+  .topic-status {
+    margin: 0;
+
+    .d-icon {
+      height: 0.75em;
+      width: 0.75em;
+      margin-right: 0.15em;
+    }
+  }
+
+  .d-icon-envelope {
+    color: $danger;
+  }
+}

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

@@ -231,21 +231,12 @@
     text-overflow: ellipsis;
   }
   .topic-statuses {
-    margin-top: -2px;
+    .d-icon {
-    float: left;
+      color: $header_primary-medium;
-    padding: 0;
-    i {
-      color: $header_primary;
     }
     .d-icon-envelope {
       color: $danger;
     }
-    .d-icon-lock {
-      padding-top: 0.15em;
-    }
-    .unpinned {
-      color: $header_primary;
-    }
   }
   h1 {
     margin: 0 0 0.25em 0;

app/assets/stylesheets/common/base/search-menu.scss

@@ -57,6 +57,10 @@
     .main-results {
       display: flex;
       flex: 1 1 auto;
+      .topic-statuses {
+        line-height: 1;
+        color: $primary-medium;
+      }
     }
 
     .main-results + .secondary-results {
@@ -190,16 +194,5 @@
     .topic-title {
       margin-right: 0.25em;
     }
-
-    .topic-statuses {
-      float: none;
-      display: inline-block;
-      color: dark-light-choose($primary-medium, $secondary-medium);
-      margin: 0;
-
-      .fa {
-        margin: 0;
-      }
-    }
   }
 }

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

@@ -220,17 +220,18 @@
     color: $tertiary-high;
   }
   .search-link {
-    .topic-statuses,
     .topic-title {
       font-size: $font-up-2;
-      line-height: $line-height-large;
+      line-height: $line-height-medium;
     }
-
     .topic-statuses {
-      float: none;
       display: inline-block;
-      color: dark-light-choose($primary-medium, $secondary-medium);
+      font-size: 1.3em;
-      font-size: $font-0;
+      line-height: 1;
+      color: $primary-medium;
+      span {
+        line-height: 1;
+      }
     }
   }
   .blurb {

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

@@ -66,6 +66,12 @@
   a.topic-featured-link {
     display: inline-block;
   }
+  .topic-statuses {
+    line-height: 0.9;
+    .d-icon {
+      color: $primary-medium;
+    }
+  }
 }
 
 h1 {

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

@@ -31,8 +31,9 @@
       overflow: hidden;
     }
     .d-icon {
-      padding-left: 1px; // prevents lock icon from being cut off on the left
       margin-right: 3px;
+      width: 0.7em;
+      height: 0.7em;
     }
   }
 
@@ -63,6 +64,9 @@
         width: 5px;
       }
     }
+    .d-icon {
+      color: $primary-medium;
+    }
   }
 
   // ----- Box

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

@@ -9,11 +9,6 @@
   fill: currentColor;
   flex-shrink: 0; // Prevent the icon from shrinking if it's in a flexbox
   overflow: visible;
-
-  &.d-icon-lock {
-    height: 0.9em;
-    width: 0.9em;
-  }
 }
 
 // Stacked Icons

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

@@ -70,9 +70,6 @@
       font-size: $font-down-1;
       color: dark-light-choose($primary-medium, $secondary-high);
     }
-    .topic-statuses .fa {
-      color: dark-light-choose($primary-medium, $secondary-high);
-    }
     .title {
       white-space: nowrap;
       overflow: hidden;

app/assets/stylesheets/desktop/discourse.scss

@@ -13,25 +13,6 @@ body.widget-dragging {
   height: 100%;
 }
 
-.topic-statuses {
-  float: left;
-  padding: 0;
-
-  .topic-status {
-    padding: 0 2px 0 0;
-    margin: 0;
-    line-height: $line-height-small;
-
-    .d-icon {
-      font-size: $font-down-1;
-    }
-  }
-
-  .d-icon-envelope {
-    color: $danger;
-  }
-}
-
 .form-vertical {
   .control-group {
     margin-bottom: 24px;

app/assets/stylesheets/desktop/topic-post.scss

@@ -6,11 +6,6 @@
   margin-left: 0;
 }
 
-h1 .topic-statuses .topic-status .d-icon {
-  font-size: 0.857em;
-  vertical-align: middle;
-}
-
 .topic-body {
   // this ensures consistent top margin on topic posts even if the first line of a post
   // is a top-margin-less element like a list or image.
@@ -509,17 +504,11 @@ video {
   }
   .topic-statuses {
     .d-icon {
-      color: $header_primary;
+      color: $header_primary-medium;
     }
     .d-icon-envelope {
       color: $danger;
     }
-    .d-icon-lock {
-      padding-top: 0.15em;
-    }
-    .unpinned {
-      color: $header_primary;
-    }
   }
   .topic-link {
     color: $header_primary;
@@ -542,9 +531,6 @@ video {
     line-height: $line-height-large;
     width: 100%;
   }
-  .topic-statuses {
-    margin-top: -2px;
-  }
 }
 
 /* override docked header CSS for topics with categories */

app/assets/stylesheets/desktop/topic.scss

@@ -33,9 +33,6 @@
       color: $primary;
     }
   }
-  .topic-statuses {
-    margin-top: -2px;
-  }
   .private-message-glyph {
     display: none;
   }

app/assets/stylesheets/mobile/components/user-stream-item.scss

@@ -28,8 +28,4 @@
       vertical-align: inherit;
     }
   }
-
-  .topic-statuses {
-    float: left;
-  }
 }

app/assets/stylesheets/mobile/discourse.scss

@@ -44,20 +44,6 @@ blockquote {
   margin-bottom: 9px;
 }
 
-.topic-statuses {
-  display: inline-block;
-
-  .topic-status {
-    .d-icon {
-      color: $secondary-high;
-    }
-  }
-
-  &:empty {
-    display: none;
-  }
-}
-
 // categories should not be bold on mobile; they fight with the topic title too much
 .badge-wrapper {
   font-weight: normal;

app/assets/stylesheets/mobile/header.scss

@@ -71,7 +71,3 @@
 .search-link .badge-category {
   display: none;
 }
-
-.search-link .topic-statuses .topic-status .d-icon {
-  font-size: $font-0;
-}

app/assets/stylesheets/mobile/topic-list.scss

@@ -152,6 +152,13 @@
       color: $primary;
       padding: 0.5em 0.667em 1.2em 0;
     }
+    .topic-statuses {
+      line-height: 0.95;
+      a {
+        line-height: 0.8;
+        color: $primary-medium;
+      }
+    }
   }
 
   .badge-notification,

app/assets/stylesheets/mobile/topic.scss

@@ -202,6 +202,10 @@ sub sub {
     width: 100%;
     margin-top: 0;
   }
+
+  .topic-statuses {
+    line-height: $line-height-small;
+  }
 }
 
 // make mobile timeline top and bottom dates easier to select