From 6753dfc2af6a125f503724aed129bfd98fa06df5 Mon Sep 17 00:00:00 2001
From: ornanovitch <34077099+Ornanovitch@users.noreply.github.com>
Date: Mon, 7 Nov 2022 20:43:20 +0100
Subject: [PATCH] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

👍

Co-authored-by: David Wheatley <david@davwheat.dev>
---
 extensions/tags/js/src/common/helpers/tagLabel.js   | 10 ++--------
 extensions/tags/js/src/forum/addTagLabels.js        |  9 ++-------
 extensions/tags/js/src/forum/components/TagHero.js  |  3 ++-
 extensions/tags/js/src/forum/components/TagsPage.js |  3 ++-
 extensions/tags/less/common/TagLabel.less           | 13 +++++--------
 5 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/extensions/tags/js/src/common/helpers/tagLabel.js b/extensions/tags/js/src/common/helpers/tagLabel.js
index 9d9c5110c..7f3830986 100644
--- a/extensions/tags/js/src/common/helpers/tagLabel.js
+++ b/extensions/tags/js/src/common/helpers/tagLabel.js
@@ -1,6 +1,7 @@
 import extract from 'flarum/common/utils/extract';
 import isDark from 'flarum/common/utils/isDark';
 import Link from 'flarum/common/components/Link';
+import classList from 'flarum/common/utils/classList';
 import tagIcon from './tagIcon';
 
 export default function tagLabel(tag, attrs = {}) {
@@ -14,14 +15,7 @@ export default function tagLabel(tag, attrs = {}) {
     const color = tag.color();
     if (color) {
       attrs.style['--tag-bg'] = color;
-      attrs.className += ' colored';
-
-      if (isDark(color)) {
-        attrs.className += ' tag-dark';
-      }
-      else {
-        attrs.className += ' tag-light';
-      }
+      attrs.className = classList(attrs.className, 'colored', isDark(color) ? 'tag-dark' : 'tag-light');
     }
 
     if (link) {
diff --git a/extensions/tags/js/src/forum/addTagLabels.js b/extensions/tags/js/src/forum/addTagLabels.js
index a213d1486..e6b3e8197 100644
--- a/extensions/tags/js/src/forum/addTagLabels.js
+++ b/extensions/tags/js/src/forum/addTagLabels.js
@@ -2,6 +2,7 @@ import { extend } from 'flarum/common/extend';
 import DiscussionListItem from 'flarum/forum/components/DiscussionListItem';
 import DiscussionHero from 'flarum/forum/components/DiscussionHero';
 import isDark from 'flarum/common/utils/isDark';
+import classList from 'flarum/common/utils/classList';
 
 import tagsLabel from '../common/helpers/tagsLabel';
 import sortTags from '../common/utils/sortTags';
@@ -24,13 +25,7 @@ export default function () {
       const color = tags[0].color();
       if (color) {
         view.attrs.style = { '--hero-bg': color };
-
-        if (isDark(color)) {
-          view.attrs.className += ' DiscussionHero--dark';
-        }
-        else {
-          view.attrs.className += ' DiscussionHero--light';
-        }
+        view.attrs.className = classList(view.attrs.className, 'DiscussionHero--colored', isDark(color) ? 'DiscussionHero--dark' : 'DiscussionHero--light');
       }
     }
   });
diff --git a/extensions/tags/js/src/forum/components/TagHero.js b/extensions/tags/js/src/forum/components/TagHero.js
index 838e314e5..811c89e95 100644
--- a/extensions/tags/js/src/forum/components/TagHero.js
+++ b/extensions/tags/js/src/forum/components/TagHero.js
@@ -1,6 +1,7 @@
 import Component from 'flarum/common/Component';
 import isDark from 'flarum/common/utils/isDark';
 import tagIcon from '../../common/helpers/tagIcon';
+import classList from 'flarum/common/utils/classList';
 
 export default class TagHero extends Component {
   view() {
@@ -8,7 +9,7 @@ export default class TagHero extends Component {
     const color = tag.color();
 
     return (
-      <header className={'Hero TagHero' + (color ? ' TagHero--colored' : '') + (isDark(color) ? ' TagHero--dark' : ' TagHero--light')} style={color ? { '--hero-bg': color } : ''}>
+      <header className={classList('Hero', 'TagHero', { 'TagHero--colored': color }, isDark(color) ? 'TagHero--dark' : 'TagHero--light')} style={color ? { '--hero-bg': color } : ''}>
         <div className="container">
           <div className="containerNarrow">
             <h2 className="Hero-title">
diff --git a/extensions/tags/js/src/forum/components/TagsPage.js b/extensions/tags/js/src/forum/components/TagsPage.js
index 4a46f8cf2..36369babe 100755
--- a/extensions/tags/js/src/forum/components/TagsPage.js
+++ b/extensions/tags/js/src/forum/components/TagsPage.js
@@ -5,6 +5,7 @@ import LoadingIndicator from 'flarum/common/components/LoadingIndicator';
 import listItems from 'flarum/common/helpers/listItems';
 import humanTime from 'flarum/common/helpers/humanTime';
 import isDark from 'flarum/common/utils/isDark';
+import classList from 'flarum/common/utils/classList';
 
 import tagIcon from '../../common/helpers/tagIcon';
 import tagLabel from '../../common/helpers/tagLabel';
@@ -59,7 +60,7 @@ export default class TagsPage extends Page {
                 const children = sortTags(tag.children() || []);
 
                 return (
-                    <li className={'TagTile ' + (tag.color() ? 'colored ' : '') + (isDark(tag.color()) ? 'tag-dark' : 'tag-light')} style={{ '--tag-bg': tag.color() }}>
+                  <li className={classList('TagTile', { 'colored': tag.color() }, isDark(tag.color()) ? 'tag-dark' : 'tag-light')} style={{ '--tag-bg': tag.color() }}>
                     <Link className="TagTile-info" href={app.route.tag(tag)}>
                       {tag.icon() && tagIcon(tag, {}, { useColor: false })}
                       <h3 className="TagTile-name">{tag.name()}</h3>
diff --git a/extensions/tags/less/common/TagLabel.less b/extensions/tags/less/common/TagLabel.less
index db8e1b9cf..75c1b8b08 100644
--- a/extensions/tags/less/common/TagLabel.less
+++ b/extensions/tags/less/common/TagLabel.less
@@ -19,18 +19,15 @@
 
     &.tag-dark {
       --tag-color: @text-on-dark;
-
-      .TagLabel-text {
-        color: var(--tag-color) !important;
-      }
     }
 
     &.tag-light {
       --tag-color: @text-on-light;
-
-      .TagLabel-text {
-        color: var(--tag-color) !important;
-      }
+    }
+    
+    
+    .TagLabel-text {
+      color: var(--tag-color) !important;
     }
   }