fix bug with styling of unchecked checkboxes

wolflu05 · Sep 19, 2024 · 19e58aa · 19e58aa
1 parent 854d767
commit 19e58aa
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/inventree_template_editor/frontend/src/components/LabelEditor/panels/Components.tsx b/inventree_template_editor/frontend/src/components/LabelEditor/panels/Components.tsx
@@ -220,21 +220,30 @@ export const InputGroup = <T extends any[]>({ state }: { state: UseInputGroupSta
     }
 
     if (input.type === "checkbox") {
+      const indeterminate = input.icon ? !value[key] : false;
       return (
         <Checkbox
           mt={10}
           mr={8}
           style={{ alignSelf: "flex-end" }}
           styles={{
             label: { fontSize: "0.875rem", cursor: "pointer" },
-            input: { cursor: "pointer" },
+            input: {
+              cursor: "pointer",
+              ...(indeterminate
+                ? {
+                    background: "var(--mantine-color-gray-4)",
+                    border: "none",
+                  }
+                : {}),
+            },
           }}
           icon={({ className }) =>
             input.icon ? <input.icon className={className} /> : <IconCheck className={className} />
           }
           disabled={input.disabled}
           label={input.label ? input.label : undefined}
-          indeterminate={input.icon ? !value[key] : false}
+          indeterminate={indeterminate}
           checked={value[key]}
           onChange={(e) => {
             setValue(key, e.currentTarget.checked);