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

Added margins and borders

Browse Source
This commit is contained in:
litaesther10
2023-03-22 11:10:01 +01:00
parent 6c7ee3edf4
commit 7656d4259e
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,17 +85,17 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
<Head> <Head>
<title>{title}</title> <title>{title}</title>
</Head> </Head>
<div className="mt-10"> <div className="px-6 mt-10 sm:px-0">
<div> <div>
<Breadcrumb document={props.document} items={breadcrumbItems} /> <Breadcrumb document={props.document} items={breadcrumbItems} />
</div> </div>
<div className="mt-2 md:flex md:items-center md:justify-between"> <div className="mt-2 md:flex md:items-center md:justify-between">
<div className="min-w-0 flex-1"> <div className="flex-1 min-w-0">
<h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight"> <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
{props.document.title} {props.document.title}
</h2> </h2>
</div> </div>
<div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4"> <div className="flex flex-shrink-0 mt-4 md:mt-0 md:ml-4">
<Button <Button
icon={PencilSquareIcon} icon={PencilSquareIcon}
color="secondary" color="secondary"
@ -132,12 +132,12 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</Button> </Button>
</div> </div>
</div> </div>
<div className="overflow-hidden rounded-md bg-white shadow mt-10 p-6"> <div className="p-4 mt-10 overflow-hidden bg-white rounded-md shadow sm:p-6">
<div className="border-b border-gray-200 pb-5"> <div className="pb-3 border-b border-gray-200 sm:pb-5">
<h3 className="text-lg font-medium leading-6 text-gray-900"> <h3 className="text-base font-medium leading-4 text-gray-900 sm:leading-6 sm:text-lg">
Signers Signers
</h3> </h3>
<p className="mt-2 max-w-4xl text-sm text-gray-500"> <p className="max-w-4xl mt-2 text-sm text-gray-500">
The people who will sign the document. The people who will sign the document.
</p> </p>
</div> </div>
@ -151,12 +151,15 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
{fields.map((item: any, index: number) => ( {fields.map((item: any, index: number) => (
<li <li
key={index} key={index}
className="px-0 py-4 w-full hover:bg-green-50 border-0 group" className="w-full px-2 py-3 border-0 hover:bg-green-50 group sm:py-4"
> >
<div id="container" className="flex w-full"> <div
id="container"
className="block w-full space-y-2 sm:space-x-2 sm:space-y-0 sm:flex"
>
<div <div
className={classNames( className={classNames(
"ml-3 w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon", "sm:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
item.sendStatus === "SENT" ? "bg-gray-100" : "" item.sendStatus === "SENT" ? "bg-gray-100" : ""
)} )}
> >
@ -188,7 +191,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
documentId: props.document.id, documentId: props.document.id,
}); });
}} }}
className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit" className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
placeholder="john.dorian@loremipsum.com" placeholder="john.dorian@loremipsum.com"
/> />
{errors?.signers?.[index] ? ( {errors?.signers?.[index] ? (
@ -204,7 +207,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</div> </div>
<div <div
className={classNames( className={classNames(
"ml-3 w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon", "sm:w-[250px] rounded-md border border-gray-300 px-3 py-2 shadow-sm focus-within:border-neon focus-within:ring-1 focus-within:ring-neon",
item.sendStatus === "SENT" ? "bg-gray-100" : "" item.sendStatus === "SENT" ? "bg-gray-100" : ""
)} )}
> >
@ -236,12 +239,12 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
documentId: props.document.id, documentId: props.document.id,
}); });
}} }}
className="block w-full border-0 p-0 text-gray-900 placeholder-gray-500 sm:text-sm outline-none bg-inherit" className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
placeholder="John Dorian" placeholder="John Dorian"
/> />
</div> </div>
<div className="ml-auto flex"> <div className="flex mx-2 sm:ml-auto sm:mx-0">
<div key={item.id}> <div key={item.id} className="space-x-2 sm:space-x-0">
{item.sendStatus === "NOT_SENT" ? ( {item.sendStatus === "NOT_SENT" ? (
<span <span
id="sent_icon" id="sent_icon"
@ -259,8 +262,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
id="sent_icon" id="sent_icon"
className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800" className="inline-block mt-3 flex-shrink-0 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-gray-800"
> >
<CheckIcon className="inline h-5 mr-1"></CheckIcon>{" "} <CheckIcon className="inline h-5 mr-1" /> Sent
Sent
</span> </span>
</span> </span>
) : ( ) : (
@ -296,7 +298,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
)} )}
</div> </div>
</div> </div>
<div className="ml-auto flex mr-1"> <div className="flex ml-auto mr-1">
<IconButton <IconButton
icon={PaperAirplaneIcon} icon={PaperAirplaneIcon}
disabled={ disabled={
@ -306,7 +308,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
loading loading
} }
color="secondary" color="secondary"
className="mr-4 h-9 my-auto" className="my-auto mr-4 h-9"
onClick={() => { onClick={() => {
if (confirm("Resend this signing request?")) { if (confirm("Resend this signing request?")) {
setLoading(true); setLoading(true);
@ -370,11 +372,11 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> <div className="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -384,11 +386,11 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"> <Dialog.Panel className="relative px-4 pt-5 pb-4 overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
<div> <div>
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"> <div className="flex items-center justify-center w-12 h-12 mx-auto bg-green-100 rounded-full">
<EnvelopeIcon <EnvelopeIcon
className="h-6 w-6 text-green-600" className="w-6 h-6 text-green-600"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>