From 19e58aa322125c0f6adeefda5ddd6ac0e721d2d0 Mon Sep 17 00:00:00 2001 From: wolflu05 <76838159+wolflu05@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:17:54 +0200 Subject: [PATCH] fix bug with styling of unchecked checkboxes --- .../components/LabelEditor/panels/Components.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 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 index 766b222..0f75c6a 100644 --- a/inventree_template_editor/frontend/src/components/LabelEditor/panels/Components.tsx +++ b/inventree_template_editor/frontend/src/components/LabelEditor/panels/Components.tsx @@ -220,6 +220,7 @@ export const InputGroup = ({ state }: { state: UseInputGroupSta } if (input.type === "checkbox") { + const indeterminate = input.icon ? !value[key] : false; return ( ({ state }: { state: UseInputGroupSta 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 ? : } 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);