diff --git a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6 b/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6 index 26d54b7ac5b..40237b9c6cd 100644 --- a/app/assets/javascripts/discourse/widgets/header-topic-info.js.es6 +++ b/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 }) ); diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss index 7cc099f7c62..081c35c25cf 100644 --- a/app/assets/stylesheets/common/base/header.scss +++ b/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 {