From f1a832921a64cf3352bc3c4791ff610ea46d7829 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 1 Apr 2025 10:30:07 +0100
Subject: [PATCH] fix form builder dark mode (#20474)

---
 packages/features/form-builder/Components.tsx  | 10 ++++------
 packages/features/form-builder/FormBuilder.tsx |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 093feeb850..4df47ec082 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AddressInput } from "@calcom/ui/components/address";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Label, CheckboxField, EmailField, InputField } from "@calcom/ui/components/form";
+import { Label, CheckboxField, EmailField, InputField, Checkbox } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
 import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -334,17 +334,15 @@ export const Components: Record<FieldType, Component> = {
           {options.map((option, i) => {
             return (
               <label key={i} className="block">
-                <input
-                  type="checkbox"
+                <Checkbox
                   disabled={readOnly}
-                  onChange={(e) => {
+                  onCheckedChange={(checked) => {
                     const newValue = value.filter((v) => v !== option.value);
-                    if (e.target.checked) {
+                    if (checked) {
                       newValue.push(option.value);
                     }
                     setValue(newValue);
                   }}
-                  className="border-default dark:border-default hover:bg-subtle checked:hover:bg-brand-default checked:bg-brand-default dark:checked:bg-brand-default dark:hover:bg-subtle dark:checked:hover:bg-brand-default h-4 w-4 cursor-pointer rounded transition ltr:mr-2 rtl:ml-2"
                   value={option.value}
                   checked={value.includes(option.value)}
                 />
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index f3940f3fe8..3ce33a6775 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -365,7 +365,7 @@ function Options({
     <div className={className}>
       <Label>{label}</Label>
       <div className="bg-muted rounded-md p-4">
-        <ul ref={animationRef}>
+        <ul ref={animationRef} className="flex flex-col gap-1">
           {value?.map((option, index) => (
             <li key={index}>
               <div className="flex items-center">