From 8012d665ae4598aa536f8319bc7da74dc418d660 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Sat, 23 Sep 2023 13:25:39 +1000
Subject: [PATCH] fix: firefox signing fields

---
 .../single-player-mode/single-player-mode-success.tsx    | 9 ++++++++-
 apps/web/src/app/(signing)/sign/[token]/date-field.tsx   | 2 +-
 apps/web/src/app/(signing)/sign/[token]/email-field.tsx  | 2 +-
 apps/web/src/app/(signing)/sign/[token]/name-field.tsx   | 2 +-
 .../src/app/(signing)/sign/[token]/signature-field.tsx   | 2 +-
 .../(signing)/sign/[token]/signing-field-container.tsx   | 8 ++++++--
 .../document-flow/single-player-mode-fields.tsx          | 4 ++--
 7 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx b/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx
index 6db202890..a712b36c7 100644
--- a/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx
+++ b/apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 
 import { Share } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
@@ -29,6 +30,10 @@ export default function SinglePlayerModeSuccess({
   className,
   document,
 }: SinglePlayerModeSuccessProps) {
+  const { getFlag } = useFeatureFlags();
+
+  const isConfettiEnabled = getFlag('marketing_spm_confetti');
+
   const [showDocumentDialog, setShowDocumentDialog] = useState(false);
   const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
   const [documentFile, setDocumentFile] = useState<string | null>(null);
@@ -66,7 +71,9 @@ export default function SinglePlayerModeSuccess({
 
   return (
     <div className="flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center sm:min-h-[calc(100vh-13rem)]">
-      <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+      {isConfettiEnabled && (
+        <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+      )}
 
       <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
         You have signed
diff --git a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
index 8e2201df9..9cff29c64 100644
--- a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
@@ -77,7 +77,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/email-field.tsx b/apps/web/src/app/(signing)/sign/[token]/email-field.tsx
index 05c1cb31c..f6f790799 100644
--- a/apps/web/src/app/(signing)/sign/[token]/email-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/email-field.tsx
@@ -81,7 +81,7 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/name-field.tsx b/apps/web/src/app/(signing)/sign/[token]/name-field.tsx
index 9688619fa..275a6ede8 100644
--- a/apps/web/src/app/(signing)/sign/[token]/name-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/name-field.tsx
@@ -100,7 +100,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
index cb70ea4db..8969c88a2 100644
--- a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
@@ -115,7 +115,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}
diff --git a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx
index 72e4e7a70..046e5b3df 100644
--- a/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx
@@ -39,12 +39,16 @@ export const SigningFieldContainer = ({
   return (
     <FieldRootContainer field={field}>
       {!field.inserted && !loading && (
-        <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
+        <button
+          type="submit"
+          className="absolute inset-0 z-10 h-full w-full"
+          onClick={onSignFieldClick}
+        />
       )}
 
       {field.inserted && !loading && (
         <button
-          className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
+          className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
           onClick={onRemoveSignedFieldClick}
         >
           Remove
diff --git a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
index 7ad9a90bc..901e8b4a6 100644
--- a/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
+++ b/packages/ui/primitives/document-flow/single-player-mode-fields.tsx
@@ -110,7 +110,7 @@ export function SinglePlayerModeSignatureField({
       ) : (
         <button
           onClick={() => onClick?.()}
-          className="group-hover:text-primary text-muted-foreground absolute inset-0 duration-200"
+          className="group-hover:text-primary text-muted-foreground absolute inset-0 h-full w-full duration-200"
         >
           Signature
         </button>
@@ -166,7 +166,7 @@ export function SinglePlayerModeCustomTextField({
       ) : (
         <button
           onClick={() => onClick?.()}
-          className="group-hover:text-primary text-muted-foreground absolute inset-0 text-lg duration-200"
+          className="group-hover:text-primary text-muted-foreground absolute inset-0 h-full w-full text-lg duration-200"
         >
           {match(field.type)
             .with(FieldType.DATE, () => 'Date')