chore(ui): change counter badge background color to light for light theme

ui/src/Components/Labels/FilteringCounterBadge/index.js

@@ -20,11 +20,22 @@ const FilteringCounterBadge = observer(
       value: PropTypes.string.isRequired,
       counter: PropTypes.number.isRequired,
       themed: PropTypes.bool.isRequired,
-      alwaysVisible: PropTypes.bool
+      alwaysVisible: PropTypes.bool,
+      defaultColor: PropTypes.oneOf(["light", "primary"])
+    };
+    static defaultProps = {
+      defaultColor: "light"
     };
 
     render() {
-      const { name, value, counter, themed, alwaysVisible } = this.props;
+      const {
+        name,
+        value,
+        counter,
+        themed,
+        alwaysVisible,
+        defaultColor
+      } = this.props;
 
       if (!alwaysVisible && counter === 0) return null;
 
@@ -44,7 +55,8 @@ const FilteringCounterBadge = observer(
                 themed
                   ? cs.className
                   : [
-                      "badge-primary badge-pill components-label-with-hover",
+                      `badge-${defaultColor}`,
+                      "badge-pill components-label-with-hover",
                       ...cs.baseClassNames
                     ].join(" ")
               }

ui/src/Components/Labels/FilteringCounterBadge/index.test.js

@@ -66,8 +66,8 @@ describe("<FilteringCounterBadge />", () => {
   it("themed @state=suppressed counter badge should have className 'badge-secondary'", () => {
     validateClassName("suppressed", "badge-success", true);
   });
-  it("unthemed @state=suppressed counter badge should have className 'badge-primary'", () => {
-    validateClassName("suppressed", "badge-primary", false);
+  it("unthemed @state=suppressed counter badge should have className 'badge-light'", () => {
+    validateClassName("suppressed", "badge-light", false);
   });
 
   it("@state=unprocessed counter badge should have empty style", () => {

ui/src/Components/ManagedSilence/SilenceComment.js

@@ -85,6 +85,7 @@ const SilenceComment = ({
               counter={alertCount}
               themed={false}
               alwaysVisible={alertCountAlwaysVisible}
+              defaultColor="primary"
             />
             <FontAwesomeIcon
               icon={collapsed ? faChevronUp : faChevronDown}