UX: Add group name next to PM recipient avatar

Also changed group icon color and did minor refactoring

app/assets/javascripts/discourse/widgets/header-topic-info.js.es6

@@ -16,17 +16,18 @@ createWidget("topic-header-participant", {
 
   html(attrs) {
     const { user, group } = attrs;
-    let avatar, url;
+    let content, url;
 
     if (attrs.type === "user") {
-      avatar = avatarImg("tiny", {
+      content = avatarImg("tiny", {
         template: user.avatar_template,
         username: user.username
       });
       url = user.get("path");
     } else {
-      avatar = iconNode("users");
+      content = [iconNode("users")];
       url = Discourse.getURL(`/groups/${group.name}`);
+      content.push(h("span", group.name));
     }
 
     return h(
@@ -38,7 +39,7 @@ createWidget("topic-header-participant", {
           title: attrs.username
         }
       },
-      avatar
+      content
     );
   },
 
@@ -136,7 +137,7 @@ export default createWidget("header-topic-info", {
           participants.push(
             this.attach("topic-header-participant", {
               type: "user",
-              user: user,
+              user,
               username: user.username
             })
           );
@@ -150,7 +151,7 @@ export default createWidget("header-topic-info", {
           participants.push(
             this.attach("topic-header-participant", {
               type: "group",
-              group: group,
+              group,
               username: group.name
             })
           );

app/assets/stylesheets/common/base/header.scss

@@ -310,8 +310,20 @@
   }
 
   .trigger-group-card {
-    line-height: 20px;
+    height: 16px;
     margin: 0 4px;
+    padding: 1px 4px;
+    border: 1px solid $primary-low;
+    border-radius: 0.25em;
+    align-items: center;
+
+    a {
+      color: $primary-high;
+
+      .d-icon {
+        margin-right: 4px;
+      }
+    }
   }
 
   .more-participants {