Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-12 15:53:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update prettier styling

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-04-04 22:10:30 +00:00
parent 84b57d715c
commit 964e749039
34 changed files with 258 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/components/editor/pdf-editor.tsx
View File

@ -92,9 +92,15 @@ export default function PDFEditor(props: any) {
<div
hidden={noRecipients}
className="fixed left-0 top-1/3 max-w-xs rounded-md border border-slate-300 bg-white py-4 pr-5">
<RecipientSelector recipients={props?.document?.Recipient} onChange={setSelectedRecipient} />
<RecipientSelector
recipients={props?.document?.Recipient}
onChange={setSelectedRecipient}
/>
<hr className="m-3 border-slate-300"></hr>
<FieldTypeSelector selectedRecipient={selectedRecipient} onChange={setSelectedFieldType} />
<FieldTypeSelector
selectedRecipient={selectedRecipient}
onChange={setSelectedFieldType}
/>
</div>
</div>
</>

14
apps/web/components/editor/pdf-signer.tsx
View File

@ -87,9 +87,13 @@ export default function PDFSigner(props: any) {
icon={CheckBadgeIcon}
className="float-right"
onClick={() => {
signDocument(props.document, localSignatures, `${router.query.token}`).then(() => {
router.push(`/documents/${props.document.id}/signed?token=${router.query.token}`);
});
signDocument(props.document, localSignatures, `${router.query.token}`).then(
() => {
router.push(
`/documents/${props.document.id}/signed?token=${router.query.token}`
);
}
);
}}>
Done
</Button>
@ -135,7 +139,9 @@ export default function PDFSigner(props: any) {
// Check if all fields are signed..
if (signatureFields.length > 0) {
// If there are no fields to sign at least one signature is enough
return fields.filter((field) => field.type === FieldType.SIGNATURE).every((field) => field.signature);
return fields
.filter((field) => field.type === FieldType.SIGNATURE)
.every((field) => field.signature);
} else {
return localSignatures.length > 0;
}

11
apps/web/components/editor/pdf-viewer.jsx
View File

@ -30,7 +30,10 @@ export default function PDFViewer(props) {
return (
<>
<div hidden={loading} onMouseUp={props.onMouseUp} style={{ height: numPages * pageHeight + 1000 }}>
<div
hidden={loading}
onMouseUp={props.onMouseUp}
style={{ height: numPages * pageHeight + 1000 }}>
<div className="mt-6 max-w-xs"></div>
<Document
file={props.pdfUrl}
@ -76,7 +79,11 @@ export default function PDFViewer(props) {
onDelete={onDeleteHandler}></SignableField>
) : (
<EditableField
hidden={field.Signature || field.inserted || field.type === FieldType.FREE_SIGNATURE}
hidden={
field.Signature ||
field.inserted ||
field.type === FieldType.FREE_SIGNATURE
}
key={field.id}
field={field}
className="absolute"

4
apps/web/components/editor/signature-dialog.tsx
View File

@ -71,7 +71,9 @@ export default function SignatureDialog(props: any) {
aria-current={tab.current ? "page" : undefined}>
<tab.icon
className={classNames(
tab.current ? "text-neon" : "text-gray-400 group-hover:text-gray-500",
tab.current
? "text-neon"
: "text-gray-400 group-hover:text-gray-500",
"-ml-0.5 mr-2 h-5 w-5"
)}
aria-hidden="true"

4
apps/web/components/login.tsx
View File

@ -148,7 +148,9 @@ export default function Login(props: any) {
) : (
<p className="mt-2 text-center text-sm text-gray-600">
Like Documenso{" "}
<Link href="https://documenso.com" className="text-neon hover:text-neon font-medium">
<Link
href="https://documenso.com"
className="text-neon hover:text-neon font-medium">
Hosted Documenso will be availible soon™
</Link>
</p>

4
apps/web/components/settings.tsx
View File

@ -77,7 +77,9 @@ export default function Setttings() {
<h1 className="text-brown text-3xl font-bold leading-tight tracking-tight">Settings</h1>
</div>
</header>
<div className="mx-auto max-w-screen-xl px-4 pb-6 sm:px-6 lg:px-8 lg:pb-16" hidden={!user.email}>
<div
className="mx-auto max-w-screen-xl px-4 pb-6 sm:px-6 lg:px-8 lg:pb-16"
hidden={!user.email}>
<div className="overflow-hidden rounded-lg bg-white shadow">
<div className="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
<aside className="py-6 lg:col-span-3">

4
apps/web/pages/404.jsx
View File

@ -12,7 +12,9 @@ export default function Custom404() {
<div className="mx-auto max-w-7xl px-6 py-48 text-center sm:py-40 lg:px-8">
<p className="text-brown text-base font-semibold leading-8">404</p>
<h1 className="text-brown mt-4 text-3xl font-bold tracking-tight sm:text-5xl">Page not found</h1>
<h1 className="text-brown mt-4 text-3xl font-bold tracking-tight sm:text-5xl">
Page not found
</h1>
<p className="mt-4 text-base text-gray-700 sm:mt-6">
Sorry, we couldn’t find the page you’re looking for.
</p>

4
apps/web/pages/500.jsx
View File

@ -15,7 +15,9 @@ export default function Custom500() {
<p className="inline-flex items-center text-3xl font-bold sm:text-5xl">
500
<span className="relative -top-1.5 px-3 font-thin sm:text-6xl">|</span>{" "}
<span className="align-middle text-base font-semibold sm:text-2xl">Something went wrong.</span>
<span className="align-middle text-base font-semibold sm:text-2xl">
Something went wrong.
</span>
</p>
<div className="mt-10 flex justify-center">
<Button color="secondary" href="/" icon={ArrowSmallLeftIcon}>

5
apps/web/pages/_app.tsx
View File

@ -18,7 +18,10 @@ type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
export default function App({ Component, pageProps: { session, ...pageProps } }: AppPropsWithLayout) {
export default function App({
Component,
pageProps: { session, ...pageProps },
}: AppPropsWithLayout) {
const getLayout = Component.getLayout || ((page: any) => page);
return (
<SessionProvider session={session}>

15
apps/web/pages/dashboard.tsx
View File

@ -12,7 +12,12 @@ import {
ExclamationTriangleIcon,
UsersIcon,
} from "@heroicons/react/24/outline";
import { DocumentStatus, Document as PrismaDocument, SendStatus, SigningStatus } from "@prisma/client";
import {
DocumentStatus,
Document as PrismaDocument,
SendStatus,
SigningStatus,
} from "@prisma/client";
import { truncate } from "fs";
import { Tooltip as ReactTooltip } from "react-tooltip";
@ -50,7 +55,9 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
<div className="py-10 max-sm:px-4">
<header>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">Dashboard</h1>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
Dashboard
</h1>
</header>
<dl className="mt-8 grid gap-5 md:grid-cols-3 ">
{stats.map((item) => (
@ -143,7 +150,9 @@ export async function getServerSideProps(context: any) {
e.Recipient.some((r: any) => r.signingStatus === SigningStatus.NOT_SIGNED)
);
const completed: PrismaDocument[] = documents.filter((d) => d.status === DocumentStatus.COMPLETED);
const completed: PrismaDocument[] = documents.filter(
(d) => d.status === DocumentStatus.COMPLETED
);
return {
props: {

44
apps/web/pages/documents.tsx
View File

@ -107,7 +107,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
<div className="mt-10 sm:flex sm:items-center">
<div className="sm:flex-auto">
<header>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">Documents</h1>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
Documents
</h1>
</header>
</div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
@ -165,16 +167,24 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<tr>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Title
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Recipients
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Status
</th>
<th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
<th
scope="col"
className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">
Created
</th>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
@ -215,7 +225,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
) : (
""
)}
{item.readStatus === "OPENED" && item.signingStatus === "NOT_SIGNED" ? (
{item.readStatus === "OPENED" &&
item.signingStatus === "NOT_SIGNED" ? (
<span id="read_icon">
<span
id="sent_icon"
@ -231,7 +242,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
{item.signingStatus === "SIGNED" ? (
<span id="signed_icon">
<span className="inline-block flex-shrink-0 rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
<CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon> {item.email}
<CheckBadgeIcon className="mr-1 inline h-5"></CheckBadgeIcon>{" "}
{item.email}
</span>
</span>
) : (
@ -260,8 +272,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
{formatDocumentStatus(document.status)}
<p>
<small hidden={document.Recipient.length === 0}>
{document.Recipient.filter((r: any) => r.signingStatus === "SIGNED").length ||
0}
{document.Recipient.filter((r: any) => r.signingStatus === "SIGNED")
.length || 0}
/{document.Recipient.length || 0}
</small>
</p>
@ -317,8 +329,8 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</table>
</div>
<div hidden={filteredDocuments.length > 0} className="mx-auto mt-12 w-fit p-3">
<FunnelIcon className="mr-1 inline w-5 align-middle" /> Nothing here. Maybe try a different
filter.
<FunnelIcon className="mr-1 inline w-5 align-middle" /> Nothing here. Maybe try a
different filter.
</div>
</div>
</div>
@ -339,7 +351,9 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</svg>
<h3 className="mt-2 text-sm font-medium text-gray-900">No documents</h3>
<p className="mt-1 text-sm text-gray-500">Get started by adding a document. Any PDF will do.</p>
<p className="mt-1 text-sm text-gray-500">
Get started by adding a document. Any PDF will do.
</p>
<div className="mt-6">
<Button
icon={PlusIcon}
@ -359,7 +373,11 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
/>
</div>
</div>
<ReactTooltip anchorId="empty" place="bottom" content="No preparation needed. Any PDF will do." />
<ReactTooltip
anchorId="empty"
place="bottom"
content="No preparation needed. Any PDF will do."
/>
</>
);
};

9
apps/web/pages/documents/[id]/index.tsx
View File

@ -40,7 +40,10 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
</h2>
<div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
<div className="mt-2 flex items-center text-sm text-gray-500">
<UsersIcon className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />
<UsersIcon
className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
aria-hidden="true"
/>
<Link href={`/documents/${props.document.id}/recipients`}>
{props?.document?.Recipient?.length} Recipients
@ -61,7 +64,9 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
className="ml-3"
href={NEXT_PUBLIC_WEBAPP_URL + "/documents/" + props.document.id + "/recipients"}
onClick={() => {
if (confirm(`Send document out to ${props?.document?.Recipient?.length} recipients?`)) {
if (
confirm(`Send document out to ${props?.document?.Recipient?.length} recipients?`)
) {
}
}}>
Prepare to Send

12
apps/web/pages/documents/[id]/recipients.tsx
View File

@ -105,7 +105,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
}}
disabled={
(formValues.length || 0) === 0 ||
!formValues.some((r: any) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT") ||
!formValues.some(
(r: any) => r.email && !hasEmailError(r) && r.sendStatus === "NOT_SENT"
) ||
loading
}>
Send
@ -115,7 +117,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
<div className="mt-10 overflow-hidden rounded-md bg-white p-4 shadow sm:p-6">
<div className="border-b border-gray-200 pb-3 sm:pb-5">
<h3 className="text-lg font-medium leading-6 text-gray-900 ">Signers</h3>
<p className="mt-2 max-w-4xl text-sm text-gray-500">The people who will sign the document.</p>
<p className="mt-2 max-w-4xl text-sm text-gray-500">
The people who will sign the document.
</p>
</div>
<FormProvider {...form}>
<form
@ -124,7 +128,9 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
}}>
<ul role="list" className="divide-y divide-gray-200">
{fields.map((item: any, index: number) => (
<li key={index} className="group w-full border-0 px-2 py-3 hover:bg-green-50 sm:py-4">
<li
key={index}
className="group w-full border-0 px-2 py-3 hover:bg-green-50 sm:py-4">
<div id="container" className="block w-full lg:flex lg:justify-between">
<div className="block space-y-2 md:flex md:space-x-2 md:space-y-0">
<div

4
apps/web/pages/documents/[id]/sign.tsx
View File

@ -22,8 +22,8 @@ const SignPage: NextPageWithLayout = (props: any) => {
<h1 className="text-neon inline align-middle text-base font-medium">Time flies.</h1>
<p className="mt-2 text-4xl font-bold tracking-tight">This signing link is expired.</p>
<p className="mt-2 text-base text-gray-500">
Please ask {props.document.User.name ? `${props.document.User.name}` : `the sender`} to resend
it.
Please ask {props.document.User.name ? `${props.document.User.name}` : `the sender`}{" "}
to resend it.
</p>
<div className="mx-auto w-fit pt-20 text-xl"></div>
</div>

12
apps/web/pages/documents/[id]/signed.tsx
View File

@ -8,7 +8,9 @@ import { ArrowDownTrayIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
const Signed: NextPageWithLayout = (props: any) => {
const router = useRouter();
const allRecipientsSigned = props.document.Recipient?.every((r: any) => r.signingStatus === "SIGNED");
const allRecipientsSigned = props.document.Recipient?.every(
(r: any) => r.signingStatus === "SIGNED"
);
return (
<>
@ -18,7 +20,9 @@ const Signed: NextPageWithLayout = (props: any) => {
<div className="mx-auto w-fit px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
<CheckBadgeIcon className="text-neon mr-1 inline w-10"></CheckBadgeIcon>
<h1 className="text-neon inline align-middle text-base font-medium">It's done!</h1>
<p className="mt-2 text-4xl font-bold tracking-tight">You signed "{props.document.title}"</p>
<p className="mt-2 text-4xl font-bold tracking-tight">
You signed "{props.document.title}"
</p>
<p className="mt-2 max-w-sm text-base text-gray-500" hidden={allRecipientsSigned}>
You will be notfied when all recipients have signed.
</p>
@ -32,7 +36,9 @@ const Signed: NextPageWithLayout = (props: any) => {
onClick={(event: any) => {
event.preventDefault();
event.stopPropagation();
router.push("/api/documents/" + props.document.id + "?token=" + props.recipient.token);
router.push(
"/api/documents/" + props.document.id + "?token=" + props.recipient.token
);
}}>
Download "{props.document.title}"
</Button>

8
apps/web/styles/tailwind.css
View File

@ -24,8 +24,8 @@ body,
font-weight: 400;
font-display: swap;
src: url("/fonts/montserrat.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@ -35,6 +35,6 @@ body,
font-weight: 700;
font-display: swap;
src: url("/fonts/montserrat.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}