From 73d2fc194dff0ad32d6912f763dfac57cc9e6001 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 10 Dec 2018 16:06:26 -0500
Subject: [PATCH] UX: More consistent category lock and topic-status styles

---
 .../categories-boxes-with-topics.hbs          |  2 +-
 .../templates/components/categories-boxes.hbs |  2 +-
 .../common/base/category-list.scss            | 28 ++++++++++++++-----
 .../stylesheets/common/base/discourse.scss    | 12 ++++----
 app/assets/stylesheets/common/base/topic.scss |  3 +-
 .../stylesheets/common/components/badges.scss |  4 +--
 .../stylesheets/desktop/category-list.scss    |  6 ++--
 7 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs
index 9c082b2c57b..7a793714c04 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes-with-topics.hbs
+++ b/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}}>
diff --git a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs b/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
index 8635ee68ea3..8c51088578e 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/base/category-list.scss b/app/assets/stylesheets/common/base/category-list.scss
index 8dcd5ab7f3e..4abcf9f3dd7 100644
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 116eea761a9..24a7bc16611 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/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;
     }
   }
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 05cf1986b30..4b3db86c9e7 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/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;
     }
diff --git a/app/assets/stylesheets/common/components/badges.scss b/app/assets/stylesheets/common/components/badges.scss
index d86e14dc53c..cb1cbe4ee34 100644
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/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;
     }
   }
 
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 299cadca686..fbccd13f445 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/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;
-        }
       }
     }