From 2b53f796bd11bd90e62a30af12a224aba6f95a0d Mon Sep 17 00:00:00 2001
From: Adithya Krishna <adikrish@redhat.com>
Date: Sat, 26 Aug 2023 13:18:58 +0530
Subject: [PATCH] chore: updated signing fields

Signed-off-by: Adithya Krishna <adikrish@redhat.com>
---
 .../app/(signing)/sign/[token]/date-field.tsx | 18 +++++++++------
 .../sign/[token]/signature-field.tsx          |  4 ++--
 .../sign/[token]/signing-field-container.tsx  | 23 ++++++++-----------
 3 files changed, 23 insertions(+), 22 deletions(-)

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..599aa8358 100644
--- a/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/date-field.tsx
@@ -82,13 +82,17 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
         </div>
       )}
 
-      {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-lg duration-200">Date</p>
-      )}
-
-      {field.inserted && (
-        <p className="text-muted-foreground text-sm duration-200">{field.customText}</p>
-      )}
+      <p
+        className={`
+          ${
+            !field.inserted
+              ? 'group-hover:text-primary text-muted-foreground text-lg duration-200'
+              : 'text-muted-foreground text-sm duration-200'
+          }
+        `}
+      >
+        {field.inserted ? field.customText : 'Date'}
+      </p>
     </SigningFieldContainer>
   );
 };
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 03fc40914..cada25e06 100644
--- a/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/signature-field.tsx
@@ -139,9 +139,9 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         />
       )}
 
-      {state === 'signed-text' && (
+      {state === 'signed-text' && signature?.typedSignature && (
         <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl lg:text-3xl">
-          {signature?.typedSignature}
+          {signature.typedSignature}
         </p>
       )}
 
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 d5efcb3df..329b9938b 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
@@ -60,19 +60,16 @@ export const SigningFieldContainer = ({
             'text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2',
           )}
         >
-          {!field.inserted && !loading && (
-            <button type="submit" className="absolute inset-0 z-10" 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"
-              onClick={onRemoveSignedFieldClick}
-            >
-              Remove
-            </button>
-          )}
-
+          <button
+            type="submit"
+            className={`
+              absolute inset-0 z-10 ${field.inserted ? 'text-destructive bg-background/40' : ''}
+            `}
+            onClick={field.inserted ? onRemoveSignedFieldClick : onSignFieldClick}
+            disabled={loading}
+          >
+            {field.inserted ? 'Remove' : ''}
+          </button>
           {children}
         </CardContent>
       </Card>