From db32d29eaa0151832ffa2778ca0a56d7e7cb9f9c Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 6 Dec 2018 19:22:04 -0500
Subject: [PATCH] UX: Refactoring topic statuses for consistent icon sizes &
 colors

---
 .../stylesheets/common/base/_topic-list.scss  |  9 ---------
 .../stylesheets/common/base/discourse.scss    | 20 +++++++++++++++++++
 .../stylesheets/common/base/header.scss       | 13 ++----------
 .../stylesheets/common/base/search-menu.scss  | 15 ++++----------
 .../stylesheets/common/base/search.scss       | 13 ++++++------
 app/assets/stylesheets/common/base/topic.scss |  6 ++++++
 .../stylesheets/common/components/badges.scss |  6 +++++-
 .../stylesheets/common/components/svg.scss    |  5 -----
 .../stylesheets/desktop/category-list.scss    |  3 ---
 app/assets/stylesheets/desktop/discourse.scss | 19 ------------------
 .../stylesheets/desktop/topic-post.scss       | 16 +--------------
 app/assets/stylesheets/desktop/topic.scss     |  3 ---
 .../mobile/components/user-stream-item.scss   |  4 ----
 app/assets/stylesheets/mobile/discourse.scss  | 14 -------------
 app/assets/stylesheets/mobile/header.scss     |  4 ----
 app/assets/stylesheets/mobile/topic-list.scss |  7 +++++++
 app/assets/stylesheets/mobile/topic.scss      |  4 ++++
 17 files changed, 56 insertions(+), 105 deletions(-)

diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index d25c03662e2..9d63ce35c9c 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index c7540f02543..116eea761a9 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 1099e43cd36..38bd1d741b5 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -231,21 +231,12 @@
     text-overflow: ellipsis;
   }
   .topic-statuses {
-    margin-top: -2px;
-    float: left;
-    padding: 0;
-    i {
-      color: $header_primary;
+    .d-icon {
+      color: $header_primary-medium;
     }
     .d-icon-envelope {
       color: $danger;
     }
-    .d-icon-lock {
-      padding-top: 0.15em;
-    }
-    .unpinned {
-      color: $header_primary;
-    }
   }
   h1 {
     margin: 0 0 0.25em 0;
diff --git a/app/assets/stylesheets/common/base/search-menu.scss b/app/assets/stylesheets/common/base/search-menu.scss
index c8a85d84dcc..d24e3e4072f 100644
--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/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;
-      }
-    }
   }
 }
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 1d030cf2a9f..7538609f66f 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/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: $font-0;
+      font-size: 1.3em;
+      line-height: 1;
+      color: $primary-medium;
+      span {
+        line-height: 1;
+      }
     }
   }
   .blurb {
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index d5604603982..6a66aedaa07 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index e9b2114fa58..2a8df087f80 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/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
diff --git a/app/assets/stylesheets/common/components/svg.scss b/app/assets/stylesheets/common/components/svg.scss
index 40e805dc28b..d4b88f1b2fe 100644
--- a/app/assets/stylesheets/common/components/svg.scss
+++ b/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
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 4993ed884b3..299cadca686 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/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;
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 35314c0f21d..b5c4dcb6513 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/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;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 2556ef650f4..7cfbad661cf 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/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 */
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index d7a7ce8981e..a3ce6554e73 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -33,9 +33,6 @@
       color: $primary;
     }
   }
-  .topic-statuses {
-    margin-top: -2px;
-  }
   .private-message-glyph {
     display: none;
   }
diff --git a/app/assets/stylesheets/mobile/components/user-stream-item.scss b/app/assets/stylesheets/mobile/components/user-stream-item.scss
index 0b0e0ceba2c..0960cd470c1 100644
--- a/app/assets/stylesheets/mobile/components/user-stream-item.scss
+++ b/app/assets/stylesheets/mobile/components/user-stream-item.scss
@@ -28,8 +28,4 @@
       vertical-align: inherit;
     }
   }
-
-  .topic-statuses {
-    float: left;
-  }
 }
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 25816c870fc..ef9405c8cfa 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/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;
diff --git a/app/assets/stylesheets/mobile/header.scss b/app/assets/stylesheets/mobile/header.scss
index 5268e25dd05..e7efb8ce8d9 100644
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/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;
-}
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index be35d1983e7..49cc6f928c4 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/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,
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 1a3c493c885..5db0b876f74 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/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