chore: remove share button from top level, texts (#653)

apps/web/src/app/(dashboard)/documents/data-table-action-button.tsx

@@ -2,12 +2,15 @@
 
 import Link from 'next/link';
 
-import { Edit, Pencil, Share } from 'lucide-react';
+import { Download, Edit, Pencil } from 'lucide-react';
 import { useSession } from 'next-auth/react';
 import { match } from 'ts-pattern';
 
-import { Document, DocumentStatus, Recipient, SigningStatus, User } from '@documenso/prisma/client';
-import { DocumentShareButton } from '@documenso/ui/components/document/document-share-button';
+import { getFile } from '@documenso/lib/universal/upload/get-file';
+import type { Document, Recipient, User } from '@documenso/prisma/client';
+import { DocumentStatus, SigningStatus } from '@documenso/prisma/client';
+import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
+import { trpc as trpcClient } from '@documenso/trpc/client';
 import { Button } from '@documenso/ui/primitives/button';
 
 export type DataTableActionButtonProps = {
@@ -33,6 +36,41 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
   const isComplete = row.status === DocumentStatus.COMPLETED;
   const isSigned = recipient?.signingStatus === SigningStatus.SIGNED;
 
+  const onDownloadClick = async () => {
+    let document: DocumentWithData | null = null;
+
+    if (!recipient) {
+      document = await trpcClient.document.getDocumentById.query({
+        id: row.id,
+      });
+    } else {
+      document = await trpcClient.document.getDocumentByToken.query({
+        token: recipient.token,
+      });
+    }
+
+    const documentData = document?.documentData;
+
+    if (!documentData) {
+      return;
+    }
+
+    const documentBytes = await getFile(documentData);
+
+    const blob = new Blob([documentBytes], {
+      type: 'application/pdf',
+    });
+
+    const link = window.document.createElement('a');
+
+    link.href = window.URL.createObjectURL(blob);
+    link.download = row.title || 'document.pdf';
+
+    link.click();
+
+    window.URL.revokeObjectURL(link.href);
+  };
+
   return match({
     isOwner,
     isRecipient,
@@ -42,7 +80,7 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
     isSigned,
   })
     .with({ isOwner: true, isDraft: true }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/documents/${row.id}`}>
           <Edit className="-ml-1 mr-2 h-4 w-4" />
           Edit
@@ -50,23 +88,24 @@ export const DataTableActionButton = ({ row }: DataTableActionButtonProps) => {
       </Button>
     ))
     .with({ isRecipient: true, isPending: true, isSigned: false }, () => (
-      <Button className="w-24" asChild>
+      <Button className="w-32" asChild>
         <Link href={`/sign/${recipient?.token}`}>
           <Pencil className="-ml-1 mr-2 h-4 w-4" />
           Sign
         </Link>
       </Button>
     ))
-    .otherwise(() => (
-      <DocumentShareButton
-        documentId={row.id}
-        token={recipient?.token}
-        trigger={({ loading }) => (
-          <Button className="w-24" loading={loading}>
-            {!loading && <Share className="-ml-1 mr-2 h-4 w-4" />}
-            Share
-          </Button>
-        )}
-      />
-    ));
+    .with({ isPending: true, isSigned: true }, () => (
+      <Button className="w-32" disabled={true}>
+        <Pencil className="-ml-1 mr-2 inline h-4 w-4" />
+        Sign
+      </Button>
+    ))
+    .with({ isComplete: true }, () => (
+      <Button className="w-32" onClick={onDownloadClick}>
+        <Download className="-ml-1 mr-2 inline h-4 w-4" />
+        Download
+      </Button>
+    ))
+    .otherwise(() => <div></div>);
 };

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -147,12 +147,12 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
 
         <DocumentShareButton
           documentId={row.id}
-          token={recipient?.token}
+          token={isOwner ? undefined : recipient?.token}
           trigger={({ loading, disabled }) => (
             <DropdownMenuItem disabled={disabled || isDraft} onSelect={(e) => e.preventDefault()}>
               <div className="flex items-center">
                 {loading ? <Loader className="mr-2 h-4 w-4" /> : <Share className="mr-2 h-4 w-4" />}
-                Share
+                Share Signing Card
               </div>
             </DropdownMenuItem>
           )}

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -80,7 +80,7 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
               ].map((value) => (
                 <TabsTrigger
                   key={value}
-                  className="hover:text-primary min-w-[60px]"
+                  className="hover:text-foreground min-w-[60px]"
                   value={value}
                   asChild
                 >

apps/web/src/app/(share)/share/[slug]/opengraph/route.tsx

@@ -3,15 +3,14 @@ import { NextResponse } from 'next/server';
 
 import { P, match } from 'ts-pattern';
 
-import { Logo } from '~/components/branding/logo';
-import { ShareHandlerAPIResponse } from '~/pages/api/share';
+import type { ShareHandlerAPIResponse } from '~/pages/api/share';
 
 export const runtime = 'edge';
 
-const CARD_OFFSET_TOP = 152;
-const CARD_OFFSET_LEFT = 350;
-const CARD_WIDTH = 500;
-const CARD_HEIGHT = 250;
+const CARD_OFFSET_TOP = 173;
+const CARD_OFFSET_LEFT = 307;
+const CARD_WIDTH = 590;
+const CARD_HEIGHT = 337;
 
 const IMAGE_SIZE = {
   width: 1200,
@@ -33,7 +32,7 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
     fetch(new URL('@documenso/assets/fonts/caveat-regular.ttf', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
-    fetch(new URL('@documenso/assets/static/og-share-frame.png', import.meta.url)).then(
+    fetch(new URL('@documenso/assets/static/og-share-frame2.png', import.meta.url)).then(
       async (res) => res.arrayBuffer(),
     ),
   ]);
@@ -72,11 +71,6 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
         {/* @ts-expect-error Lack of typing from ImageResponse */}
         <img src={shareFrameImage} alt="og-share-frame" tw="absolute inset-0 w-full h-full" />
 
-        <div tw="absolute top-20 flex w-full items-center justify-center">
-          {/* @ts-expect-error Lack of typing from ImageResponse */}
-          <Logo tw="h-8 w-60" />
-        </div>
-
         {signatureImage ? (
           <div
             tw="absolute py-6 px-12 flex items-center justify-center text-center"
@@ -109,21 +103,21 @@ export async function GET(_request: Request, { params: { slug } }: SharePageOpen
         )}
 
         <div
-          tw="absolute flex flex-col items-center justify-center pt-12 w-full"
+          tw="absolute flex w-full"
           style={{
-            top: `${CARD_OFFSET_TOP + CARD_HEIGHT}px`,
+            top: `${CARD_OFFSET_TOP - 78}px`,
+            left: `${CARD_OFFSET_LEFT}px`,
           }}
         >
           <h2
-            tw="text-3xl text-slate-500"
+            tw="text-xl"
             style={{
+              color: '#828282',
               fontFamily: 'Inter',
-              fontWeight: 600,
+              fontWeight: 700,
             }}
           >
-            {isRecipient
-              ? 'I just signed with Documenso and you can too!'
-              : 'I just sent a document with Documenso and you can too!'}
+            {isRecipient ? 'Document Signed!' : 'Document Sent!'}
           </h2>
         </div>
       </div>

apps/web/src/app/(share)/share/[slug]/page.tsx

@@ -11,7 +11,7 @@ type SharePageProps = {
 export function generateMetadata({ params: { slug } }: SharePageProps) {
   return {
     title: 'Documenso - Share',
-    description: 'I just signed a document with Documenso!',
+    description: 'I just signed a document in style with Documenso!',
     openGraph: {
       title: 'Documenso - Join the open source signing revolution',
       description: 'I just signed with Documenso!',