Merge pull request #76 from flarum/ds/fix-align-color-issues

Fix alignments and checked colors in TagDiscussionModal

extensions/tags/js/src/common/helpers/tagIcon.js

@@ -1,8 +1,14 @@
+import classList from 'flarum/utils/classList';
+
 export default function tagIcon(tag, attrs = {}, settings = {}) {
   const hasIcon = tag && tag.icon();
   const { useColor = true } = settings;
 
-  attrs.className = 'icon TagIcon '+ (attrs.className || '') + ' ' + (hasIcon ? tag.icon() : 'default');
+  attrs.className = classList([
+    attrs.className,
+    'icon',
+    hasIcon ? tag.icon() : 'TagIcon'
+  ]);
 
   if (tag) {
     attrs.style = attrs.style || {};

extensions/tags/less/common/TagIcon.less

@@ -1,19 +1,14 @@
 .TagIcon {
+  border-radius: @border-radius;
   width: 16px;
   height: 16px;
   display: inline-block;
+  vertical-align: -3px;
   margin-left: 1px;
-  text-align: center;
-  font-size: 1rem;
+  background: @control-bg;
 
   &.untagged {
     border: 1px dotted @muted-color;
     background: transparent;
   }
-
-  &.default {
-    border-radius: @border-radius;
-    background: @control-bg;
-    vertical-align: -3px;
-  }
 }

extensions/tags/less/forum/TagDiscussionModal.less

@@ -107,15 +107,24 @@
     &.active {
       background: @control-bg;
     }
+
+    .icon::before {
+      display: inline-block;
+      width: 16px;
+      text-align: center;
+      vertical-align: middle;
+    }
+
     &.selected {
       .icon::before {
         .fa();
         content: @fa-var-check !important;
-        color: @muted-color !important;
+        color: @muted-color;
         font-size: 14px;
-        width: 100%;
         text-align: center;
+        vertical-align: 1px;
       }
+
       &.colored .TagIcon:before {
         color: #fff;
       }
@@ -123,6 +132,7 @@
     .TagIcon {
       vertical-align: top;
       margin-top: 3px;
+      margin-left: 0;
     }
   }
 }