From 9d83bda12cc16ed5796cd1c690634c759fb31b10 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Tue, 31 Dec 2024 11:55:49 +1100
Subject: [PATCH] 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.
---
 .../_action-items/resend-document.tsx         |  5 ++-
 .../templates/use-template-dialog.tsx         |  1 -
 .../(signing)/sign/[token]/checkbox-field.tsx |  2 --
 .../(teams)/dialogs/transfer-team-dialog.tsx  | 35 -------------------
 .../document/document-email-checkboxes.tsx    |  7 ----
 packages/ui/primitives/checkbox.tsx           |  2 +-
 .../primitives/document-flow/add-fields.tsx   |  1 -
 .../primitives/document-flow/add-signers.tsx  |  2 --
 .../advanced-fields/checkbox.tsx              |  1 -
 .../checkbox-field.tsx                        |  5 ++-
 .../template-flow/add-template-fields.tsx     |  1 -
 .../add-template-placeholder-recipients.tsx   |  2 --
 12 files changed, 5 insertions(+), 59 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx b/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
index 54bc20b42..01b532887 100644
--- a/apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
+++ b/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"
-                          checkClassName="text-white"
+                          className="h-5 w-5 rounded-full"
                           value={recipient.id}
                           checked={value.includes(recipient.id)}
                           onCheckedChange={(checked: boolean) =>
@@ -179,7 +178,7 @@ export const ResendDocumentActionItem = ({
             <DialogClose asChild>
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1  bg-black/5 hover:bg-black/10"
+                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
                 disabled={isSubmitting}
               >
diff --git a/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx b/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
index ee07d8b29..544cf4d72 100644
--- a/apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
+++ b/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}
                           />
diff --git a/apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx b/apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx
index 0757eeea7..b5a04819a 100644
--- a/apps/web/src/app/(signing)/sign/[token]/checkbox-field.tsx
+++ b/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}
diff --git a/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx b/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
index 2fb5f31bf..fa991099b 100644
--- a/apps/web/src/components/(teams)/dialogs/transfer-team-dialog.tsx
+++ b/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
diff --git a/packages/ui/components/document/document-email-checkboxes.tsx b/packages/ui/components/document/document-email-checkboxes.tsx
index 5da263dc4..d94dd6b77 100644
--- a/packages/ui/components/document/document-email-checkboxes.tsx
+++ b/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) })
diff --git a/packages/ui/primitives/checkbox.tsx b/packages/ui/primitives/checkbox.tsx
index 155f08df9..d76b8123b 100644
--- a/packages/ui/primitives/checkbox.tsx
+++ b/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>
diff --git a/packages/ui/primitives/document-flow/add-fields.tsx b/packages/ui/primitives/document-flow/add-fields.tsx
index 735a2c528..79a22e83c 100644
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/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}
diff --git a/packages/ui/primitives/document-flow/add-signers.tsx b/packages/ui/primitives/document-flow/add-signers.tsx
index 5e543385e..395ed6dcd 100644
--- a/packages/ui/primitives/document-flow/add-signers.tsx
+++ b/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))}
                 />
diff --git a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
index a846e367e..5fb8c1058 100644
--- a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
+++ b/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}
             />
diff --git a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx b/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
index 58eec3e33..d936adc3b 100644
--- a/packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx
+++ b/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"
-                checkClassName="text-white"
+                className="data-[state=checked]:bg-primary border-foreground/30 h-5 w-5"
                 checked={value.checked}
                 onCheckedChange={(checked) => handleCheckboxValue(index, 'checked', checked)}
               />
@@ -217,7 +216,7 @@ export const CheckboxFieldAdvancedSettings = ({
               />
               <button
                 type="button"
-                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center  text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
+                className="col-span-1 mt-auto inline-flex h-10 w-10 items-center text-slate-500 hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50"
                 onClick={() => removeValue(index)}
               >
                 <Trash className="h-5 w-5" />
diff --git a/packages/ui/primitives/template-flow/add-template-fields.tsx b/packages/ui/primitives/template-flow/add-template-fields.tsx
index 225621e89..7f7f11df5 100644
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/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}
diff --git a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx b/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
index 50335dac1..bf8dc0bd0 100644
--- a/packages/ui/primitives/template-flow/add-template-placeholder-recipients.tsx
+++ b/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))}
                 />