UX: PM title glyph alignment and consistency improvement (#11314)

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

* minor fixes

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}}

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}}
 

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) {

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 {

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