Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2026-07-12 05:55:12 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: standardise checkboxes

Browse Source 
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.
This commit is contained in:
Mythie
2024-12-31 11:55:49 +11:00
parent 22fd1b5be1
commit 9d83bda12c
12 changed files with 5 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/(dashboard)/documents/_action-items/resend-document.tsx
+2 -3
View File
@@ -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}
>
apps/web/src/app/(dashboard)/templates/use-template-dialog.tsx
-1
View File
@@ -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
-2
View File
@@ -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
-35
View File
@@ -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
-7
View File
@@ -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
+1 -1
View File
@@ -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
-1
View File
@@ -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
-2
View File
@@ -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
-1
View File
@@ -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
+2 -3
View File
@@ -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" />
packages/ui/primitives/template-flow/add-template-fields.tsx
-1
View File
@@ -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
-2
View File
@@ -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))}
/>