fix: standardise checkboxes

Checkboxes were previously styled super wonky due to
the usage of checkboxClassName which styled the checkbox
trigger.

This change reverts all that and leaves it with sensible defaults
across dark and light mode.

apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx

@@ -155,8 +155,7 @@ export const ResendDocumentActionItem = ({
 
                       <FormControl>
                         <Checkbox
-                          className="h-5 w-5 rounded-full data-[state=checked]:border-black data-[state=checked]:bg-black"
+                          className="h-5 w-5 rounded-full"
-                          checkClassName="text-white"
                           value={recipient.id}
                           checked={value.includes(recipient.id)}
                           onCheckedChange={(checked: boolean) =>

apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx

@@ -313,7 +313,6 @@ export function UseTemplateDialog({
                           <Checkbox
                             id="distributeDocument"
                             className="h-5 w-5"
-                            checkClassName="dark:text-white text-primary"
                             checked={field.value}
                             onCheckedChange={field.onChange}
                           />

apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx

@@ -258,7 +258,6 @@ export const CheckboxField = ({
                 <div key={index} className="flex items-center gap-x-1.5">
                   <Checkbox
                     className="h-4 w-4"
-                    checkClassName="text-white"
                     id={`checkbox-${index}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
@@ -282,7 +281,6 @@ export const CheckboxField = ({
               <div key={index} className="flex items-center gap-x-1.5">
                 <Checkbox
                   className="h-3 w-3"
-                  checkClassName="text-white"
                   id={`checkbox-${index}`}
                   checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}

apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx

@@ -217,45 +217,10 @@ export const TransferTeamDialog = ({
                   )}
                 />
 
-                {/* Temporary removed.  */}
-                {/* {IS_BILLING_ENABLED && (
-                  <FormField
-                    control={form.control}
-                    name="clearPaymentMethods"
-                    render={({ field }) => (
-                      <FormItem>
-                        <div className="flex flex-row items-center">
-                          <Checkbox
-                            id="clearPaymentMethods"
-                            className="h-5 w-5 rounded-full"
-                            checkClassName="dark:text-white text-primary"
-                            checked={field.value}
-                            onCheckedChange={field.onChange}
-                          />
-
-                          <label
-                            className="text-muted-foreground ml-2 text-sm"
-                            htmlFor="clearPaymentMethods"
-                          >
-                            Clear current payment methods
-                          </label>
-                        </div>
-                      </FormItem>
-                    )}
-                  />
-                )} */}
-
                 <Alert variant="neutral">
                   <AlertDescription>
                     <ul className="list-outside list-disc space-y-2 pl-4">
                       {IS_BILLING_ENABLED() && (
-                        // Temporary removed.
-                        // <li>
-                        //   {form.getValues('clearPaymentMethods')
-                        //     ? 'You will not be billed for any upcoming invoices'
-                        //     : 'We will continue to bill current payment methods if required'}
-                        // </li>
-
                         <li>
                           <Trans>
                             Any payment methods attached to this team will remain attached to this

packages/ui/components/document/document-email-checkboxes.tsx

@@ -27,7 +27,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.RecipientSigned}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.recipientSigned}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.RecipientSigned]: Boolean(checked) })
@@ -66,7 +65,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.RecipientSigningRequest}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.recipientSigningRequest}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.RecipientSigningRequest]: Boolean(checked) })
@@ -105,7 +103,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.RecipientRemoved}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.recipientRemoved}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.RecipientRemoved]: Boolean(checked) })
@@ -144,7 +141,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.DocumentPending}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.documentPending}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.DocumentPending]: Boolean(checked) })
@@ -184,7 +180,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.DocumentCompleted}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.documentCompleted}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.DocumentCompleted]: Boolean(checked) })
@@ -223,7 +218,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.DocumentDeleted}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.documentDeleted}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.DocumentDeleted]: Boolean(checked) })
@@ -262,7 +256,6 @@ export const DocumentEmailCheckboxes = ({
         <Checkbox
           id={DocumentEmailEvents.OwnerDocumentCompleted}
           className="h-5 w-5"
-          checkClassName="dark:text-white text-primary"
           checked={value.ownerDocumentCompleted}
           onCheckedChange={(checked) =>
             onChange({ ...value, [DocumentEmailEvents.OwnerDocumentCompleted]: Boolean(checked) })

packages/ui/primitives/checkbox.tsx

@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      className={cn('text-primary flex items-center justify-center', checkClassName)}
+      className={cn('text-primary-foreground flex items-center justify-center', checkClassName)}
     >
       <Check className="h-3 w-3 stroke-[3px]" />
     </CheckboxPrimitive.Indicator>

packages/ui/primitives/document-flow/add-fields.tsx

@@ -800,7 +800,6 @@ export const AddFieldsFormPartial = ({
                         <Checkbox
                           {...field}
                           id="typedSignatureEnabled"
-                          checkClassName="text-white"
                           checked={value}
                           onCheckedChange={(checked) => field.onChange(checked)}
                           disabled={form.formState.isSubmitting}

packages/ui/primitives/document-flow/add-signers.tsx

@@ -383,7 +383,6 @@ export const AddSignersFormPartial = ({
                     <Checkbox
                       {...field}
                       id="signingOrder"
-                      checkClassName="text-white"
                       checked={field.value === DocumentSigningOrder.SEQUENTIAL}
                       onCheckedChange={(checked) =>
                         field.onChange(
@@ -697,7 +696,6 @@ export const AddSignersFormPartial = ({
                 <Checkbox
                   id="showAdvancedRecipientSettings"
                   className="h-5 w-5"
-                  checkClassName="dark:text-white text-primary"
                   checked={showAdvancedSettings}
                   onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                 />

packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx

@@ -34,7 +34,6 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
           <div key={index} className="flex items-center gap-x-1.5">
             <Checkbox
               className="dark:border-field-border h-3 w-3 bg-white"
-              checkClassName="text-white"
               id={`checkbox-${index}`}
               checked={item.checked}
             />

packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx

@@ -205,8 +205,7 @@ export const CheckboxFieldAdvancedSettings = ({
           {values.map((value, index) => (
             <div key={index} className="mt-2 flex items-center gap-4">
               <Checkbox
-                className="data-[state=checked]:bg-documenso border-foreground/30 h-5 w-5"
+                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
-                checkClassName="text-white"
                 checked={value.checked}
                 onCheckedChange={(checked) => handleCheckboxValue(index, 'checked', checked)}
               />

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -587,7 +587,6 @@ export const AddTemplateFieldsFormPartial = ({
                         <Checkbox
                           {...field}
                           id="typedSignatureEnabled"
-                          checkClassName="text-white"
                           checked={value}
                           onCheckedChange={(checked) => field.onChange(checked)}
                           disabled={form.formState.isSubmitting}

packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx

@@ -352,7 +352,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                     <Checkbox
                       {...field}
                       id="signingOrder"
-                      checkClassName="text-white"
                       checked={field.value === DocumentSigningOrder.SEQUENTIAL}
                       onCheckedChange={(checked) =>
                         field.onChange(
@@ -651,7 +650,6 @@ export const AddTemplatePlaceholderRecipientsFormPartial = ({
                 <Checkbox
                   id="showAdvancedRecipientSettings"
                   className="h-5 w-5"
-                  checkClassName="dark:text-white text-primary"
                   checked={showAdvancedSettings}
                   onCheckedChange={(value) => setShowAdvancedSettings(Boolean(value))}
                 />