diff --git a/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx b/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx new file mode 100644 index 00000000..6695ff8b --- /dev/null +++ b/packages/frontend/src/components/projects/Dialog/RemoveMemberDialog.tsx @@ -0,0 +1,38 @@ +import ConfirmDialog, { + ConfirmDialogProps, +} from 'components/shared/ConfirmDialog'; +import React from 'react'; +import { formatAddress } from 'utils/format'; + +interface RemoveMemberDialogProps extends ConfirmDialogProps { + memberName: string; + ethAddress: string; + emailDomain: string; +} + +export const RemoveMemberDialog = ({ + memberName, + ethAddress, + emailDomain, + open, + handleCancel, + handleConfirm, + ...props +}: RemoveMemberDialogProps) => { + return ( + +

+ Once removed, {formatAddress(memberName)} ({formatAddress(ethAddress)}@ + {emailDomain}) will not be able to access this project. +

+
+ ); +}; diff --git a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx index 715d8bf4..8dd8fd16 100644 --- a/packages/frontend/src/components/projects/project/settings/MemberCard.tsx +++ b/packages/frontend/src/components/projects/project/settings/MemberCard.tsx @@ -3,15 +3,14 @@ import { Permission, User } from 'gql-client'; import { Select, - Typography, Option, Chip, IconButton, Tooltip, } from '@material-tailwind/react'; -import ConfirmDialog from '../../../shared/ConfirmDialog'; -import { formatAddress } from '../../../../utils/format'; +import { formatAddress } from 'utils/format'; +import { RemoveMemberDialog } from 'components/projects/Dialog/RemoveMemberDialog'; const PERMISSION_OPTIONS = [ { @@ -141,25 +140,19 @@ const MemberCard = ({ )} - setRemoveMemberDialogOpen((preVal) => !preVal)} + setRemoveMemberDialogOpen((preVal) => !preVal)} open={removeMemberDialogOpen} - confirmButtonTitle="Yes, Remove member" handleConfirm={() => { setRemoveMemberDialogOpen((preVal) => !preVal); if (onRemoveProjectMember) { onRemoveProjectMember(); } }} - color="red" - > - - Once removed, {formatAddress(member.name ?? '')} ( - {formatAddress(ethAddress)}@{emailDomain}) will not be able to access - this project. - - + memberName={member.name ?? ''} + ethAddress={ethAddress} + emailDomain={emailDomain} + /> ); };