From 318149fbf30f17bf5b021edd6d8852e3191ae273 Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Wed, 2 Oct 2024 07:45:16 +0000
Subject: [PATCH] chore: field fonts (#1350)

Before
![CleanShot 2024-09-16 at 12 25
44](https://github.com/user-attachments/assets/9ca7672d-b132-4c24-80b0-03fa13822e50)


After
![CleanShot 2024-09-16 at 12 24
07](https://github.com/user-attachments/assets/9e17b025-8064-4151-a9e2-817108b8da2a)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new font style for signature fields, enhancing visual
distinction.
	- Increased text size for signature fields to improve prominence.

- **Bug Fixes**
- Adjusted the text size for signature display on larger screens for
better visual hierarchy.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../document/document-read-only-fields.tsx          |  4 ++--
 .../ui/primitives/document-flow/show-field-item.tsx | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/document/document-read-only-fields.tsx b/apps/web/src/components/document/document-read-only-fields.tsx
index cbf566b25..84b77e0d5 100644
--- a/apps/web/src/components/document/document-read-only-fields.tsx
+++ b/apps/web/src/components/document/document-read-only-fields.tsx
@@ -89,7 +89,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                           className="h-full w-full object-contain dark:invert"
                         />
                       ) : (
-                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
+                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl">
                           {field.Signature?.typedSignature}
                         </p>
                       ),
@@ -122,7 +122,7 @@ export const DocumentReadOnlyFields = ({ documentMeta, fields }: DocumentReadOnl
                 {field.Recipient.signingStatus === SigningStatus.NOT_SIGNED && (
                   <p
                     className={cn('text-muted-foreground text-lg duration-200', {
-                      'font-signature sm:text-xl md:text-2xl lg:text-3xl':
+                      'font-signature sm:text-xl md:text-2xl':
                         field.type === FieldType.SIGNATURE ||
                         field.type === FieldType.FREE_SIGNATURE,
                     })}
diff --git a/packages/ui/primitives/document-flow/show-field-item.tsx b/packages/ui/primitives/document-flow/show-field-item.tsx
index 4e4a0dc99..5cc2885d6 100644
--- a/packages/ui/primitives/document-flow/show-field-item.tsx
+++ b/packages/ui/primitives/document-flow/show-field-item.tsx
@@ -1,14 +1,24 @@
 'use client';
 
+import { Caveat } from 'next/font/google';
+
 import type { Prisma } from '@prisma/client';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
+import { FieldType } from '@documenso/prisma/client';
 
 import { cn } from '../../lib/utils';
 import { Card, CardContent } from '../card';
 import { FRIENDLY_FIELD_TYPE } from './types';
 
+const fontCaveat = Caveat({
+  weight: ['500'],
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-caveat',
+});
+
 export type ShowFieldItemProps = {
   field: Prisma.FieldGetPayload<null>;
   recipients: Prisma.RecipientGetPayload<null>[];
@@ -33,7 +43,8 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
       <Card className={cn('bg-background h-full w-full')}>
         <CardContent
           className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2',
+            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2 text-xl',
+            field.type === FieldType.SIGNATURE && fontCaveat.className,
           )}
         >
           {FRIENDLY_FIELD_TYPE[field.type]}