UX: displays avatar instead of icon on desktop

UX: displays avatar instead of icon on desktop

diff --git a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6 b/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6
index 7d31365..b0ed936 100644
--- a/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6
+++ b/assets/javascripts/discourse-assign/initializers/extend-for-assigns.js.es6
@@ -23,7 +23,11 @@ function registerTopicFooterButtons(api) {
     id: "assign",
     icon() {
       const hasAssignement = this.get("topic.assigned_to_user");
-      return hasAssignement ? "user-times" : "user-plus";
+      return hasAssignement
+        ? this.site.mobileView
+          ? "user-times"
+          : null
+        : "user-plus";
     },
     priority: 250,
     translatedTitle() {
@@ -49,10 +53,10 @@ function registerTopicFooterButtons(api) {
           );
         } else {
           return htmlSafe(
-            `<span class="unassign-label">${label}</span>${renderAvatar(user, {
+            `${renderAvatar(user, {
               imageSize: "tiny",
               ignoreTitle: true
-            })}`
+            })}<span class="unassign-label">${label}</span>`
           );
         }
       } else {
diff --git a/assets/stylesheets/assigns.scss b/assets/stylesheets/assigns.scss
index 6e85676..2013ea6 100644
--- a/assets/stylesheets/assigns.scss
+++ b/assets/stylesheets/assigns.scss
@@ -88,12 +88,10 @@
   padding: 0 12px;
 
   .d-button-label {
-    display: inline-flex;
-    align-items: center;
-
     .avatar {
-      margin-left: 0.25em;
+      margin-right: 0.25em;
       margin-top: -1px;
+      vertical-align: sub;
     }
   }
 }

GitHub sha: cddc0a2e

1 Like