From 704306fd21d64027b3d45d0fcb2c44b4cc0e1194 Mon Sep 17 00:00:00 2001
From: Mythie <me@lucasjamessmith.me>
Date: Wed, 27 Sep 2023 14:58:10 +1000
Subject: [PATCH] chore: styling updates

---
 .../single-player-mode-success.tsx            |  8 +-
 .../(signing)/sign/[token]/complete/page.tsx  | 75 ++++++++++---------
 packages/ui/components/signing-card.tsx       | 10 +--
 3 files changed, 48 insertions(+), 45 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 70bf58926..0c85fc65c 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
@@ -73,7 +73,7 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
         <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">
+      <h2 className="relative z-10 text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
         You have signed
         <span className="mt-2 block">{document.title}</span>
       </h2>
@@ -84,17 +84,17 @@ export const SinglePlayerModeSuccess = ({ className, document }: SinglePlayerMod
         signingCelebrationImage={signingCelebration}
       />
 
-      <div className="mt-8 w-full">
+      <div className="relative mt-8 w-full">
         <div className={cn('flex flex-col items-center', className)}>
           <div className="grid w-full max-w-sm grid-cols-2 gap-4">
             {/* TODO: Hook this up */}
-            <Button variant="outline" className="flex-1" disabled>
+            <Button variant="outline" className="flex-1 bg-transparent backdrop-blur-sm" disabled>
               <Share className="mr-2 h-5 w-5" />
               Share
             </Button>
 
             <DocumentDownloadButton
-              className="flex-1"
+              className="flex-1 bg-transparent backdrop-blur-sm"
               fileName={document.title}
               documentData={document.documentData}
               disabled={document.status !== DocumentStatus.COMPLETED}
diff --git a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
index e87b2fced..fe8052291 100644
--- a/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
+++ b/apps/web/src/app/(signing)/sign/[token]/complete/page.tsx
@@ -51,11 +51,11 @@ export default async function CompletedSigningPage({
     recipient.email;
 
   return (
-    <div className="flex flex-col items-center pt-24">
+    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
       {/* Card with recipient */}
       <SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} />
 
-      <div className="mt-6">
+      <div className="relative mt-6 flex w-full flex-col items-center">
         {match(document.status)
           .with(DocumentStatus.COMPLETED, () => (
             <div className="text-documenso-700 flex items-center text-center">
@@ -69,41 +69,44 @@ export default async function CompletedSigningPage({
               <span className="text-sm">Waiting for others to sign</span>
             </div>
           ))}
+
+        <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
+          You have signed "{document.title}"
+        </h2>
+
+        {match(document.status)
+          .with(DocumentStatus.COMPLETED, () => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              Everyone has signed! You will receive an Email copy of the signed document.
+            </p>
+          ))
+          .otherwise(() => (
+            <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
+              You will receive an Email copy of the signed document once everyone has signed.
+            </p>
+          ))}
+
+        <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
+          <ShareButton documentId={document.id} token={recipient.token} />
+
+          <DocumentDownloadButton
+            className="flex-1"
+            fileName={document.title}
+            documentData={documentData}
+            disabled={document.status !== DocumentStatus.COMPLETED}
+          />
+        </div>
+
+        <p className="text-muted-foreground/60 mt-36 text-sm">
+          Want to send slick signing links like this one?{' '}
+          <Link
+            href="https://documenso.com"
+            className="text-documenso-700 hover:text-documenso-600"
+          >
+            Check out Documenso.
+          </Link>
+        </p>
       </div>
-
-      <h2 className="mt-6 max-w-[35ch] text-center text-2xl font-semibold leading-normal md:text-3xl lg:text-4xl">
-        You have signed "{document.title}"
-      </h2>
-
-      {match(document.status)
-        .with(DocumentStatus.COMPLETED, () => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            Everyone has signed! You will receive an Email copy of the signed document.
-          </p>
-        ))
-        .otherwise(() => (
-          <p className="text-muted-foreground/60 mt-2.5 max-w-[60ch] text-center text-sm font-medium md:text-base">
-            You will receive an Email copy of the signed document once everyone has signed.
-          </p>
-        ))}
-
-      <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-        <ShareButton documentId={document.id} token={recipient.token} />
-
-        <DocumentDownloadButton
-          className="flex-1"
-          fileName={document.title}
-          documentData={documentData}
-          disabled={document.status !== DocumentStatus.COMPLETED}
-        />
-      </div>
-
-      <p className="text-muted-foreground/60 mt-36 text-sm">
-        Want to send slick signing links like this one?{' '}
-        <Link href="https://documenso.com" className="text-documenso-700 hover:text-documenso-600">
-          Check out Documenso.
-        </Link>
-      </p>
     </div>
   );
 }
diff --git a/packages/ui/components/signing-card.tsx b/packages/ui/components/signing-card.tsx
index 496e451d0..a2dd66bae 100644
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@@ -148,7 +148,7 @@ const SigningCardContent = ({ className, name }: SigningCardContentProps) => {
   return (
     <Card
       className={cn(
-        'group mx-auto flex aspect-[21/9] w-full items-center justify-center',
+        'group z-10 mx-auto flex aspect-[21/9] w-full items-center justify-center',
         className,
       )}
       degrees={-145}
@@ -180,14 +180,14 @@ type SigningCardImageProps = {
 const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) => {
   return (
     <motion.div
-      className="pointer-events-none absolute -inset-32 -z-10 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
+      className="pointer-events-none absolute -inset-32 -z-50 flex items-center justify-center md:-inset-44 xl:-inset-60 2xl:-inset-80"
       initial={{
         opacity: 0,
-        scale: 0.8,
+        scale: 0.6,
       }}
       animate={{
         scale: 1,
-        opacity: 0.5,
+        opacity: 0.6,
       }}
       transition={{
         delay: 0.5,
@@ -197,7 +197,7 @@ const SigningCardImage = ({ signingCelebrationImage }: SigningCardImageProps) =>
       <Image
         src={signingCelebrationImage}
         alt="background pattern"
-        className="w-full dark:invert dark:sepia"
+        className="w-full dark:brightness-150 dark:contrast-[70%] dark:invert dark:sepia"
         style={{
           mask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',
           WebkitMask: 'radial-gradient(rgba(255, 255, 255, 1) 0%, transparent 67%)',