UX: category icon compatibility improvements (#29)

common/common.scss

@@ -18,25 +18,7 @@ div[class^="category-title-header"] {
     .d-icon-lock {
       height: 0.75em;
       width: 0.75em;
-      margin-right: 0.25em;
-    }
-
-    .category-title {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .category-icon-widget {
-      display: flex;
-      .category-icon {
-        display: flex;
-        .d-icon {
-          height: 0.75em;
-          width: 0.75em;
-          margin-right: 0.25em;
-        }
-      }
+      vertical-align: 0;
     }
   }
 
@@ -47,4 +29,24 @@ div[class^="category-title-header"] {
       text-decoration: underline;
     }
   }
+
+  // styles that impact the category icons theme component
+
+  .category-icon-widget-wrapper {
+    display: inline-block;
+
+    .category-icon-widget {
+      display: flex;
+      .category-icon {
+        display: flex;
+        @if $override_category_icon_color == "true" {
+          color: currentColor !important; // overrides inline style
+        }
+        .d-icon {
+          height: 0.75em;
+          width: 0.75em;
+        }
+      }
+    }
+  }
 }

javascripts/discourse/components/discourse-category-banners.hbs

@@ -10,8 +10,12 @@
     <div class="category-title-contents">
       <h1 class="category-title">
         {{#if (and (theme-setting "show_category_icon") this.category)}}
-          {{! For compatibility with https://meta.discourse.org/t/category-icons/104683}}
-          <CategoryIcon @category={{this.category}} />
+          {{#if this.hasIconComponent}}
+            {{! For compatibility with https://meta.discourse.org/t/category-icons/104683}}
+            <CategoryIcon @category={{this.category}} />
+          {{else}}
+            {{this.consoleWarn}}
+          {{/if}}
         {{/if}}
         {{#if this.category.read_restricted}}
           {{d-icon "lock"}}

javascripts/discourse/components/discourse-category-banners.js

@@ -4,6 +4,7 @@ import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import { getOwner } from "@ember/application";
 
 export default class DiscourseCategoryBanners extends Component {
   @service router;
@@ -11,6 +12,17 @@ export default class DiscourseCategoryBanners extends Component {
   @tracked category = null;
   @tracked keepDuringLoadingRoute = false;
 
+  get hasIconComponent() {
+    return getOwner(this).hasRegistration("component:category-icon");
+  }
+
+  get consoleWarn() {
+    // eslint-disable-next-line no-console
+    return console.warn(
+      "The category banners component is trying to use the category icons component, but it is not available. https://meta.discourse.org/t/category-icons/104683"
+    );
+  }
+
   get isVisible() {
     if (this.categorySlugPathWithID) {
       this.keepDuringLoadingRoute = true;

settings.yml

@@ -45,3 +45,7 @@ show_below_site_header:
 show_category_icon:
   default: false
   description: Show category icon from the <a href="https://meta.discourse.org/t/category-icons/104683" target="_blank">Discourse Category Icons component</a>
+
+override_category_icon_color:
+  default: false
+  description: When the category icons are used, enabling this will make the icon match the banner text color