UX: removes color on categories if no style chosen (#9346)

UX: removes color on categories if no style chosen (#9346)

  • UX: removes color on categories if no style chosen

  • Update app/assets/javascripts/discourse/templates/components/categories-only.hbs

  • Update messages.hbs

Co-authored-by: Robin Ward robin.ward@gmail.com

diff --git a/app/assets/javascripts/discourse/components/categories-only.js b/app/assets/javascripts/discourse/components/categories-only.js
index 89720fb..d218d69 100644
--- a/app/assets/javascripts/discourse/components/categories-only.js
+++ b/app/assets/javascripts/discourse/components/categories-only.js
@@ -1,4 +1,7 @@
 import Component from "@ember/component";
+import { equal } from "@ember/object/computed";
+
 export default Component.extend({
-  tagName: ""
+  tagName: "",
+  noCategoryStyle: equal("siteSettings.category_style", "none")
 });
diff --git a/app/assets/javascripts/discourse/templates/components/categories-only.hbs b/app/assets/javascripts/discourse/templates/components/categories-only.hbs
index 24d02fe..6c02050 100644
--- a/app/assets/javascripts/discourse/templates/components/categories-only.hbs
+++ b/app/assets/javascripts/discourse/templates/components/categories-only.hbs
@@ -12,7 +12,7 @@
     <tbody aria-labelledby="categories-only-category">
       {{#each categories as |c|}}
         <tr data-category-id={{c.id}} data-notification-level={{c.notificationLevelString}} class="{{if c.description_excerpt 'has-description' 'no-description'}} {{if c.uploaded_logo.url 'has-logo' 'no-logo'}}">
-          <td class="category {{if c.isMuted 'muted'}}" style={{border-color c.color}}>
+          <td class="category {{if c.isMuted 'muted'}} {{if noCategoryStyle "no-category-style"}}" style={{unless noCategoryStyle (border-color c.color)}}>
             {{category-title-link category=c}}
             {{#unless c.isMuted}}
             {{#if c.description_excerpt}}
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 50801d9..c577410 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -94,6 +94,11 @@
 
   tbody {
     .category {
+      &.no-category-style {
+        border-color: transparent;
+        border-left: 0px;
+        padding-left: 0px;
+      }
       border-left: 6px solid;
       h3,
       h4 {

GitHub sha: 751f2296

This commit appears in #9346 which was approved by eviltrout. It was merged by jordanvidrine.