md screens margins and items center

This commit is contained in:
litaesther10
2023-03-23 12:42:29 +01:00
parent d4324538cc
commit 2b83e28e6d

View File

@@ -160,11 +160,12 @@ 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 className="block space-y-2 md:space-x-2 md:space-y-0 md:flex">
<div <div
className={classNames( 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", "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" : "" item.sendStatus === "SENT" ? "bg-gray-100" : ""
)} )}
> >
@@ -177,7 +178,8 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
<input <input
type="email" type="email"
{...register(`signers.${index}.email`, { {...register(`signers.${index}.email`, {
pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, pattern:
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
})} })}
defaultValue={item.email} defaultValue={item.email}
disabled={item.sendStatus === "SENT" || loading} disabled={item.sendStatus === "SENT" || loading}
@@ -212,7 +214,7 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
</div> </div>
<div <div
className={classNames( 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", "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" : "" item.sendStatus === "SENT" ? "bg-gray-100" : ""
)} )}
> >
@@ -248,13 +250,14 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
placeholder="John Dorian" placeholder="John Dorian"
/> />
</div> </div>
<div className="flex items-center space-x-2"> </div>
<div className="flex mb-2 mr-2 sm:ml-auto sm:mr-0"> <div className="flex items-center space-x-2 lg:ml-2">
<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={