blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

md screens margins and items center

Browse Source
This commit is contained in:
litaesther10
2023-03-23 12:42:29 +01:00
parent d4324538cc
commit 2b83e28e6d
1 changed files with 87 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -160,101 +160,104 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
> >
<div <div
id="container" id="container"
className="block w-full space-y-2 sm:space-x-2 sm:space-y-0 sm:flex" className="block w-full lg:flex lg:justify-between"
> >
<div <div className="block space-y-2 md:space-x-2 md:space-y-0 md:flex">
className={classNames( <div
"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", className={classNames(
item.sendStatus === "SENT" ? "bg-gray-100" : "" "md: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" : ""
> )}
<label
htmlFor="name"
className="block text-xs font-medium text-gray-900"
> >
Email <label
</label> htmlFor="name"
<input className="block text-xs font-medium text-gray-900"
type="email" >
{...register(`signers.${index}.email`, { Email
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, </label>
})} <input
defaultValue={item.email} type="email"
disabled={item.sendStatus === "SENT" || loading} {...register(`signers.${index}.email`, {
onBlur={() => { pattern:
if (!errors?.signers?.[index]) /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
createOrUpdateRecipient({ })}
...formValues[index], defaultValue={item.email}
documentId: props.document.id, disabled={item.sendStatus === "SENT" || loading}
}); onBlur={() => {
}}
onKeyDown={(event: any) => {
if (event.key === "Enter")
if (!errors?.signers?.[index]) if (!errors?.signers?.[index])
createOrUpdateRecipient({ createOrUpdateRecipient({
...formValues[index], ...formValues[index],
documentId: props.document.id, documentId: props.document.id,
}); });
}} }}
className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit" onKeyDown={(event: any) => {
placeholder="john.dorian@loremipsum.com" if (event.key === "Enter")
/> if (!errors?.signers?.[index])
{errors?.signers?.[index] ? ( createOrUpdateRecipient({
<p ...formValues[index],
className="mt-2 text-sm text-red-600" documentId: props.document.id,
id="email-error" });
> }}
<XMarkIcon className="inline h-5" /> Invalid Email className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
</p> placeholder="john.dorian@loremipsum.com"
) : ( />
"" {errors?.signers?.[index] ? (
)} <p
</div> className="mt-2 text-sm text-red-600"
<div id="email-error"
className={classNames( >
"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", <XMarkIcon className="inline h-5" /> Invalid Email
item.sendStatus === "SENT" ? "bg-gray-100" : "" </p>
)} ) : (
> ""
<label )}
htmlFor="name" </div>
className="block text-xs font-medium text-gray-900" <div
className={classNames(
"md: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" : ""
)}
> >
Name (optional) <label
</label> htmlFor="name"
<input className="block text-xs font-medium text-gray-900"
type="text" >
{...register(`signers.${index}.name`)} Name (optional)
defaultValue={item.name} </label>
disabled={item.sendStatus === "SENT" || loading} <input
onBlur={() => { type="text"
if (!errors?.signers?.[index]) {...register(`signers.${index}.name`)}
createOrUpdateRecipient({ defaultValue={item.name}
...formValues[index], disabled={item.sendStatus === "SENT" || loading}
documentId: props.document.id, onBlur={() => {
}); if (!errors?.signers?.[index])
}} createOrUpdateRecipient({
onKeyDown={(event: any) => { ...formValues[index],
if ( documentId: props.document.id,
event.key === "Enter" && });
!errors?.signers?.[index] }}
) onKeyDown={(event: any) => {
createOrUpdateRecipient({ if (
...formValues[index], event.key === "Enter" &&
documentId: props.document.id, !errors?.signers?.[index]
}); )
}} createOrUpdateRecipient({
className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit" ...formValues[index],
placeholder="John Dorian" documentId: props.document.id,
/> });
}}
className="block w-full p-0 text-gray-900 placeholder-gray-500 border-0 outline-none sm:text-sm bg-inherit"
placeholder="John Dorian"
/>
</div>
</div> </div>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2 lg:ml-2">
<div className="flex mb-2 mr-2 sm:ml-auto sm:mr-0"> <div className="flex mb-2 mr-2 lg:mr-0">
<div key={item.id} className="space-x-2"> <div key={item.id} className="space-x-2">
{item.sendStatus === "NOT_SENT" ? ( {item.sendStatus === "NOT_SENT" ? (
<span <span
id="sent_icon" id="sent_icon"
className="inline-block mt-3 flex-shrink-0 rounded-full bg-gray-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"
> >
Not Sent Not Sent
</span> </span>
@@ -266,7 +269,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
<span id="sent_icon"> <span id="sent_icon">
<span <span
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" /> Sent <CheckIcon className="inline h-5 mr-1" /> Sent
</span> </span>
@@ -304,7 +307,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
)} )}
</div> </div>
</div> </div>
<div className="mr-1 "> <div className="flex mr-1">
<IconButton <IconButton
icon={PaperAirplaneIcon} icon={PaperAirplaneIcon}
disabled={ disabled={