src/components/Filters/CategoryFilterPopup.tsx

@@ -348,28 +348,35 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
     const pathString = path.join(':')
     setIsSingleChecked(selectedSingles.includes(name))
     setIsCombinationChecked(selectedCombinations.includes(pathString))
-
+    // Recursive function to gather all descendant paths
-    const childPaths =
+    const collectChildPaths = (
-      category.sub && Array.isArray(category.sub)
+      category: string | Category,
-        ? category.sub.map((sub) =>
+      basePath: string[]
-            typeof sub === 'string'
+    ) => {
-              ? [...path, sub].join(':')
+      if (!category.sub || !Array.isArray(category.sub)) {
-              : [...path, sub.name].join(':')
+        return []
-          )
+      }
-        : []
+      let paths: string[] = []
+      for (const sub of category.sub) {
+        const subPath =
+          typeof sub === 'string'
+            ? [...basePath, sub].join(':')
+            : [...basePath, sub.name].join(':')
+        paths.push(subPath)
+        if (typeof sub === 'object') {
+          paths = paths.concat(collectChildPaths(sub, [...basePath, sub.name]))
+        }
+      }
+      return paths
+    }
+    const childPaths = collectChildPaths(category, path)
     const anyChildCombinationSelected = childPaths.some((childPath) =>
       selectedCombinations.includes(childPath)
     )
-
+    setIsIndeterminate(
-    if (
+      anyChildCombinationSelected && !selectedCombinations.includes(pathString)
-      anyChildCombinationSelected &&
+    )
-      !selectedCombinations.includes(pathString)
+  }, [category, name, path, selectedCombinations, selectedSingles])
-    ) {
-      setIsIndeterminate(true)
-    } else {
-      setIsIndeterminate(false)
-    }
-  }, [selectedSingles, selectedCombinations, path, name, category.sub])
 
   const handleSingleChange = () => {
     setIsSingleChecked(!isSingleChecked)
@@ -407,17 +414,13 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
                   input.indeterminate = isIndeterminate
                 }
               }}
-              className='CheckboxMain'
+              className={`CheckboxMain  ${
+                isIndeterminate ? 'CheckboxIndeterminate' : ''
+              }`}
               checked={isCombinationChecked}
               onChange={handleCombinationChange}
             />
-            <label
+            <label htmlFor={name} className='form-label labelMain'>
-              htmlFor={name}
-              className='form-label labelMain'
-              style={{
-                color: isIndeterminate ? 'green' : 'white'
-              }}
-            >
               {capitalizeEachWord(name)}
             </label>
             <input

src/styles/styles.css

@@ -530,6 +530,15 @@ h6 {
   align-items: center;
 }
 
+.CheckboxMain.CheckboxIndeterminate::before {
+  content: '\2501';
+  transition: ease 0.2s;
+  transform: scale(1);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 8px 0 rgb(0, 0, 0, 0.1);
+  border-radius: 6px;
+}
+
 .CheckboxMain:checked::before {
   transition: ease 0.2s;
   transform: scale(1);