Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-23 05:01:54 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: reduce text size?

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2024-02-15 10:05:36 +00:00
parent be3ab09738
commit 536adf6e0a
1 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/app/(signing)/sign/[token]/form.tsx
View File

@ -10,6 +10,12 @@ import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
import { useElementScaleSize } from '@documenso/lib/client-only/hooks/use-element-scale-size';
import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
import {
DEFAULT_HANDWRITING_FONT_SIZE,
MIN_HANDWRITING_FONT_SIZE,
} from '@documenso/lib/constants/pdf';
import { sortFieldsByPosition, validateFieldsInserted } from '@documenso/lib/utils/fields';
import type { Document, Field, Recipient } from '@documenso/prisma/client';
import { trpc } from '@documenso/trpc/react';
@ -43,7 +49,14 @@ const ZSigningpadSchema = z.union([
export type TSigningpadSchema = z.infer<typeof ZSigningpadSchema>;
export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
export const SigningForm = ({ document: _document, recipient, fields }: SigningFormProps) => {
const fontVariable = '--font-signature';
const minFontSize = MIN_HANDWRITING_FONT_SIZE;
const maxFontSize = DEFAULT_HANDWRITING_FONT_SIZE;
const fontVariableValue = getComputedStyle(document.documentElement).getPropertyValue(
fontVariable,
);
const router = useRouter();
const analytics = useAnalytics();
const { data: session } = useSession();
@ -70,6 +83,8 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
resolver: zodResolver(ZSigningpadSchema),
});
const { height, width } = useFieldPageCoords(fields.find((field) => field.type === 'SIGNATURE')!);
const signatureDataUrl = watch('signatureDataUrl');
const signatureText = watch('signatureText');
@ -93,18 +108,30 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
await completeDocumentWithToken({
token: recipient.token,
documentId: document.id,
documentId: _document.id,
});
analytics.capture('App: Recipient has completed signing', {
signerId: recipient.id,
documentId: document.id,
documentId: _document.id,
timestamp: new Date().toISOString(),
});
router.push(`/sign/${recipient.token}/complete`);
};
const scalingFactor = useElementScaleSize(
{
height,
width,
},
signatureText || '',
maxFontSize,
fontVariableValue,
);
const fontSize = maxFontSize * scalingFactor;
return (
<form
className={cn(
@ -172,7 +199,15 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
)}
{signatureText && (
<p className={cn('text-foreground font-signature text-4xl font-semibold')}>
<p
style={{
fontSize: `clamp(${minFontSize}px, ${fontSize}px, ${maxFontSize}px)`,
fontFamily: `var(${fontVariable})`,
}}
className={cn(
'text-foreground font-signature max-w-[18rem] text-4xl font-semibold',
)}
>
{signatureText}
</p>
)}
@ -241,7 +276,7 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
<SignDialog
isSubmitting={isSubmitting}
onSignatureComplete={handleSubmit(onFormSubmit)}
document={document}
document={_document}
fields={fields}
fieldsValidated={fieldsValidated}
/>