Files
esign/packages/email/template-components/template-document-completed.tsx
zooqueen f31a87bf93 style: draw every state in the monochrome palette
State now reads through shape, weight and tone rather than hue: the
active editor step and selected file carry a filled mark and heavier
label, recipients are told apart by six neutral tones, and status icons
lean on the clock/check/file glyphs they already draw. Red stays as the
one accent, reserved for destructive and rejected.

Drops the unreferenced --new-* ramps and the dawn/water scales, points
the stock Tailwind ring at --ring, and desaturates the sign scale so the
PDF certificate, audit log and email templates match the app.
2026-08-14 01:59:50 -07:00

66 lines
1.9 KiB
TypeScript

import { Trans } from '@lingui/react/macro';
import { Button, Column, Img, Section, Text } from '../components';
import { TemplateDocumentImage } from './template-document-image';
export interface TemplateDocumentCompletedProps {
downloadLink: string;
documentName: string;
assetBaseUrl: string;
customBody?: string;
}
export const TemplateDocumentCompleted = ({
downloadLink,
documentName,
assetBaseUrl,
customBody,
}: TemplateDocumentCompletedProps) => {
const getAssetUrl = (path: string) => {
return new URL(path, assetBaseUrl).toString();
};
return (
<>
<TemplateDocumentImage className="mt-6" assetBaseUrl={assetBaseUrl} />
<Section>
<Section className="mb-4">
<Column align="center">
<Text className="text-base font-semibold text-black">
<Img
src={getAssetUrl('/static/completed.png')}
className="-mt-0.5 mr-2 inline h-7 w-7 align-middle"
/>
<Trans>Completed</Trans>
</Text>
</Column>
</Section>
<Text className="mb-0 text-center text-lg font-semibold text-primary">
{customBody || <Trans>“{documentName}” was signed by all signers</Trans>}
</Text>
<Text className="my-1 text-center text-base text-slate-400">
<Trans>Continue by downloading the document.</Trans>
</Text>
<Section className="mb-6 mt-8 text-center">
<Button
className="rounded-lg border border-solid border-slate-200 px-4 py-2 text-center text-sm font-medium text-black no-underline"
href={downloadLink}
>
<Img
src={getAssetUrl('/static/download.png')}
className="mb-0.5 mr-2 inline h-5 w-5 align-middle"
/>
<Trans>Download</Trans>
</Button>
</Section>
</Section>
</>
);
};
export default TemplateDocumentCompleted;