refactor: improve layout of completed signing page (#2209)

This commit is contained in:
Catalin Pit
2025-11-20 02:04:41 +02:00
committed by GitHub
parent 11d9bde8f8
commit 374477e692
3 changed files with 28 additions and 12 deletions

View File

@ -84,6 +84,13 @@ export async function loader({ params, request }: Route.LoaderArgs) {
const canSignUp = !isExistingUser && env('NEXT_PUBLIC_DISABLE_SIGNUP') !== 'true';
const canRedirectToFolder =
user && document.userId === user.id && document.folderId && document.team?.url;
const returnToHomePath = canRedirectToFolder
? `/t/${document.team.url}/documents/f/${document.folderId}`
: '/';
return {
isDocumentAccessValid: true,
canSignUp,
@ -92,6 +99,7 @@ export async function loader({ params, request }: Route.LoaderArgs) {
signatures,
document,
recipient,
returnToHomePath,
};
}
@ -109,6 +117,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
document,
recipient,
recipientEmail,
returnToHomePath,
} = loaderData;
if (!isDocumentAccessValid) {
@ -118,7 +127,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
return (
<div
className={cn(
'-mx-4 flex flex-col items-center overflow-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
'-mx-4 flex flex-col items-center overflow-hidden px-4 pt-16 md:-mx-8 md:px-8 lg:pt-20 xl:pt-28',
{ 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
)}
>
@ -202,8 +211,12 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
</p>
))}
<div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
<DocumentShareButton documentId={document.id} token={recipient.token} />
<div className="mt-8 flex w-full max-w-xs flex-col items-stretch gap-4 md:w-auto md:max-w-none md:flex-row md:items-center">
<DocumentShareButton
documentId={document.id}
token={recipient.token}
className="w-full max-w-none md:flex-1"
/>
{isDocumentCompleted(document.status) && (
<EnvelopeDownloadDialog
@ -212,13 +225,21 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
envelopeItems={document.envelopeItems}
token={recipient?.token}
trigger={
<Button type="button" variant="outline" className="flex-1">
<Button type="button" variant="outline" className="flex-1 md:flex-initial">
<DownloadIcon className="mr-2 h-5 w-5" />
<Trans>Download</Trans>
</Button>
}
/>
)}
{user && (
<Button asChild>
<Link to={returnToHomePath}>
<Trans>Go Back Home</Trans>
</Link>
</Button>
)}
</div>
</div>
@ -238,12 +259,6 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
<ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
</div>
)}
{user && (
<Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-2">
<Trans>Go Back Home</Trans>
</Link>
)}
</div>
</div>