From 855026eea1c0bacec962555075675027e233e374 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Sun, 22 Nov 2020 20:16:41 -0500
Subject: [PATCH] UX: PM title glyph alignment and consistency improvement
 (#11314)

* UX: PM title glyph alignment should match public topic-status style

* minor fixes
---
 .../templates/components/private-message-glyph.hbs    |  4 ++--
 .../javascripts/discourse/app/templates/topic.hbs     |  5 +++--
 app/assets/stylesheets/common/base/discourse.scss     |  2 +-
 app/assets/stylesheets/common/base/topic.scss         | 11 ++++-------
 app/assets/stylesheets/mobile/topic.scss              |  4 ----
 5 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/private-message-glyph.hbs b/app/assets/javascripts/discourse/app/templates/components/private-message-glyph.hbs
index 8ccce6f788c..e8e9ea8f7bc 100644
--- a/app/assets/javascripts/discourse/app/templates/components/private-message-glyph.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/private-message-glyph.hbs
@@ -5,9 +5,9 @@
         {{d-icon "envelope" class="private-message-glyph"}}
       </span>
     </a>
-  {{else}}
+  {{~else}}
     <span class="private-message-glyph-wrapper">
       {{d-icon "envelope" class="private-message-glyph"}}
     </span>
-  {{/if}}
+  {{~/if}}
 {{/if}}
diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs
index 52acbebd533..77187a8ec74 100644
--- a/app/assets/javascripts/discourse/app/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/topic.hbs
@@ -17,7 +17,7 @@
       {{#topic-title cancelled=(action "cancelEditingTopic") save=(action "finishedEditingTopic") model=model}}
         {{#if editingTopic}}
           <div class="edit-topic-title">
-            {{private-message-glyph shouldShow=model.isPrivateMessage}}
+            {{private-message-glyph shouldShow=model.isPrivateMessage tagName=""}}
 
             {{text-field id="edit-title" value=buffered.title maxlength=siteSettings.max_topic_title_length autofocus="true"}}
 
@@ -65,9 +65,10 @@
                   href=pmPath
                   title="topic_statuses.personal_message.title"
                   ariaLabel="user.messages.inbox"
+                  tagName=""
                 }}
               {{else}}
-                {{private-message-glyph shouldShow=model.isPrivateMessage}}
+                {{private-message-glyph shouldShow=model.isPrivateMessage  tagName=""}}
               {{/if}}
             {{/unless}}
 
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 69ebcbb25b9..cc0485062aa 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -748,7 +748,7 @@ table {
     display: inline-flex;
     color: var(--primary-medium);
     .d-icon {
-      height: 0.76em;
+      height: 0.74em;
       width: 0.75em;
     }
     &:not(:last-child) {
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index f9bc31a50c6..bb36aef0d40 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -114,7 +114,7 @@
     display: inline-block;
   }
   .topic-statuses {
-    line-height: 1.2em;
+    line-height: 1.2;
     margin-right: 0.15em;
     &:empty {
       margin-right: 0;
@@ -181,16 +181,13 @@ a.badge-category {
 }
 
 .private-message-glyph {
-  color: var(--primary-low-mid-or-secondary-high);
+  color: var(--primary-medium);
+  height: 0.95em;
 }
 
 .private-message-glyph-wrapper {
   float: left;
-
-  .private-message-glyph {
-    margin: 0 5px 0 0;
-    display: inline-block;
-  }
+  margin-right: 0.25em;
 }
 
 .private_message {
diff --git a/app/assets/stylesheets/mobile/topic.scss b/app/assets/stylesheets/mobile/topic.scss
index 7cad30b2723..394bd9a39df 100644
--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@@ -184,10 +184,6 @@ sub sub {
     width: 100%;
     margin-top: 0;
   }
-
-  .topic-statuses {
-    line-height: $line-height-small;
-  }
 }
 
 // make mobile timeline top and bottom dates easier to select