UX: Refactoring topic statuses for consistent icon sizes & colors

UX: Refactoring topic statuses for consistent icon sizes & colors
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


diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index d25c036..9d63ce3 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 c7540f0..116eea7 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 1099e43..38bd1d7 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 c8a85d8..d24e3e4 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 1d030cf..7538609 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 d560460..6a66aed 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 e9b2114..2a8df08 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 40e805d..d4b88f1 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 4993ed8..299cadc 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 35314c0..b5c4dcb 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 2556ef6..7cfbad6 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 d7a7ce8..a3ce655 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -33,9 +33,6 @@
       color: $primary;
     }
   }
-  .topic-statuses {
-   

GitHub

2 Likes