chore: member invite modal improvement (#4201)

This commit is contained in:
Anmol Singh Bhatia 2024-04-16 13:21:56 +05:30 committed by GitHub
parent 963d078aba
commit 18b573531f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 11 deletions

View File

@ -142,8 +142,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
if (!memberDetails?.member) return; if (!memberDetails?.member) return;
return { return {
value: `${memberDetails?.member.id}`, value: `${memberDetails?.member.id}`,
query: `${memberDetails?.member.first_name} ${memberDetails?.member query: `${memberDetails?.member.first_name} ${
.last_name} ${memberDetails?.member.display_name.toLowerCase()}`, memberDetails?.member.last_name
} ${memberDetails?.member.display_name.toLowerCase()}`,
content: ( content: (
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
<div className="flex-shrink-0 pt-0.5"> <div className="flex-shrink-0 pt-0.5">
@ -203,8 +204,11 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
<div className="mb-3 space-y-4"> <div className="mb-3 space-y-4">
{fields.map((field, index) => ( {fields.map((field, index) => (
<div key={field.id} className="group mb-1 grid grid-cols-12 items-start gap-x-4 text-sm"> <div
<div className="col-span-7 flex flex-col gap-1"> key={field.id}
className="group mb-1 grid grid-cols-6 sm:grid-cols-12 items-start gap-x-4 text-sm"
>
<div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
<Controller <Controller
control={control} control={control}
name={`members.${index}.member_id`} name={`members.${index}.member_id`}
@ -246,7 +250,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
)} )}
</div> </div>
<div className="col-span-5 flex items-center justify-between gap-2"> <div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
<div className="flex w-full flex-col gap-1"> <div className="flex w-full flex-col gap-1">
<Controller <Controller
name={`members.${index}.role`} name={`members.${index}.role`}
@ -284,8 +288,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
</span> </span>
)} )}
</div> </div>
<div className="flex-item flex w-6">
{fields.length > 1 && ( {fields.length > 1 && (
<div className="flex-item flex w-6">
<button <button
type="button" type="button"
className="place-items-center self-center rounded" className="place-items-center self-center rounded"
@ -293,8 +298,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
> >
<X className="h-4 w-4 text-custom-text-200" /> <X className="h-4 w-4 text-custom-text-200" />
</button> </button>
)} </div>
</div> )}
</div> </div>
</div> </div>
))} ))}

View File

@ -121,8 +121,8 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
<div className="mb-3 space-y-4"> <div className="mb-3 space-y-4">
{fields.map((field, index) => ( {fields.map((field, index) => (
<div key={field.id} className="group relative grid grid-cols-11 items-start gap-4"> <div key={field.id} className="group relative grid grid-cols-12 items-start gap-4">
<div className="col-span-7"> <div className="col-span-9">
<Controller <Controller
control={control} control={control}
name={`emails.${index}.email`} name={`emails.${index}.email`}