feat: upgrade to tailwind@4

This commit is contained in:
Lucas Smith
2026-06-29 13:26:14 +10:00
parent 187b612568
commit b79895b38c
289 changed files with 1477 additions and 1941 deletions
@@ -173,7 +173,7 @@ export const AddSettingsFormPartial = ({
)}
<Form {...form}>
<fieldset className="flex h-full flex-col space-y-6" disabled={form.formState.isSubmitting}>
<fieldset className="twv3-space-y-6 flex h-full flex-col" disabled={form.formState.isSubmitting}>
<FormField
control={form.control}
name="title"
@@ -209,7 +209,7 @@ export const AddSettingsFormPartial = ({
<InfoIcon className="mx-2 h-4 w-4" />
</TooltipTrigger>
<TooltipContent className="max-w-md space-y-2 p-4 text-foreground">
<TooltipContent className="twv3-space-y-2 max-w-md p-4 text-foreground">
<Trans>
Controls the language for the document, including the language to be used for email
notifications, and the final certificate that is generated and attached to the document.
@@ -327,12 +327,12 @@ export const AddSettingsFormPartial = ({
<Accordion type="multiple" className="mt-6">
<AccordionItem value="advanced-options" className="border-none">
<AccordionTrigger className="mb-2 rounded border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<AccordionTrigger className="mb-2 rounded-sm border px-3 py-2 text-left text-foreground hover:bg-neutral-200/30 hover:no-underline">
<Trans>Advanced Options</Trans>
</AccordionTrigger>
<AccordionContent className="-mx-1 px-1 pt-2 text-muted-foreground text-sm leading-relaxed">
<div className="flex flex-col space-y-6">
<div className="twv3-space-y-6 flex flex-col">
<FormField
control={form.control}
name="externalId"
@@ -524,7 +524,7 @@ export const AddSignersFormPartial = ({
control={form.control}
name="signingOrder"
render={({ field }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -581,7 +581,7 @@ export const AddSignersFormPartial = ({
control={form.control}
name="allowDictateNextSigner"
render={({ field: { value, ...field } }) => (
<FormItem className="mb-6 flex flex-row items-center space-x-2 space-y-0">
<FormItem className="twv3-space-x-2 twv3-space-y-0 mb-6 flex flex-row items-center">
<FormControl>
<Checkbox
{...field}
@@ -669,13 +669,13 @@ export const AddSignersFormPartial = ({
name={`signers.${index}.signingOrder`}
render={({ field }) => (
<FormItem
className={cn('col-span-2 mt-auto flex items-center gap-x-1 space-y-0', {
className={cn('twv3-space-y-0 col-span-2 mt-auto flex items-center gap-x-1', {
'mb-6':
form.formState.errors.signers?.[index] &&
!form.formState.errors.signers[index]?.signingOrder,
})}
>
<GripVerticalIcon className="h-5 w-5 flex-shrink-0 opacity-40" />
<GripVerticalIcon className="h-5 w-5 shrink-0 opacity-40" />
<FormControl>
<Input
type="number"
@@ -906,7 +906,7 @@ export const AddSignersFormPartial = ({
/>
<div
className={cn('mt-2 flex flex-row items-center space-x-4', {
className={cn('twv3-space-x-4 mt-2 flex flex-row items-center', {
'mt-4': showAdvancedSettings,
})}
>
@@ -78,7 +78,7 @@ export const DocumentFlowFormContainerFooter = ({
...props
}: DocumentFlowFormContainerFooterProps) => {
return (
<div className={cn('mt-4 flex-shrink-0', className)} {...props}>
<div className={cn('mt-4 shrink-0', className)} {...props}>
{children}
</div>
);
@@ -175,8 +175,8 @@ export const FieldContent = ({ field, documentMeta }: FieldIconProps) => {
className={cn(
'w-full whitespace-pre-wrap text-left text-[clamp(0.07rem,25cqw,0.825rem)] text-foreground duration-200',
{
'!text-center': textAlign === 'center' || !textToDisplay,
'!text-right': textAlign === 'right',
'text-center!': textAlign === 'center' || !textToDisplay,
'text-right!': textAlign === 'right',
'font-signature text-[clamp(0.07rem,25cqw,1.125rem)]': isSignatureField,
},
)}
@@ -315,7 +315,7 @@ const FieldItemInner = ({
'flex h-5 w-5 flex-col items-center justify-center rounded-r-md font-bold text-[0.5rem] text-white opacity-0 transition duration-200 group-hover/field-item:opacity-100',
signerStyles.fieldItemInitials,
{
'!opacity-50': disabled || passive,
'opacity-50!': disabled || passive,
},
)}
>
@@ -324,7 +324,7 @@ const FieldItemInner = ({
</div>
{isDevMode && (
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
<div className="absolute bottom-full left-1/2 z-50 mb-1 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-xs backdrop-blur-xs">
<div className="flex flex-col gap-0.5 text-[9px]">
{field.nativeId && (
<span>
@@ -375,7 +375,7 @@ const FieldItemInner = ({
{advancedField && (
<button
title={_(msg`Advanced settings`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onAdvancedSettings}
onTouchEnd={onAdvancedSettings}
>
@@ -385,7 +385,7 @@ const FieldItemInner = ({
<button
title={_(msg`Duplicate`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onDuplicate}
onTouchEnd={onDuplicate}
>
@@ -394,7 +394,7 @@ const FieldItemInner = ({
<button
title={_(msg`Duplicate on all pages`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onDuplicateAllPages}
onTouchEnd={onDuplicateAllPages}
>
@@ -403,7 +403,7 @@ const FieldItemInner = ({
<button
title={_(msg`Remove`)}
className="rounded-sm p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
className="rounded-xs p-1.5 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100"
onClick={onRemove}
onTouchEnd={onRemove}
>