♻️ refactor: create remove member dialog component

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 (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Remove member?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, remove member"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Once removed, {formatAddress(memberName)} ({formatAddress(ethAddress)}@
+        {emailDomain}) will not be able to access this project.
+      </p>
+    </ConfirmDialog>
+  );
+};

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 = ({
           </div>
         )}
       </div>
-      <ConfirmDialog
+      <RemoveMemberDialog
-        dialogTitle="Remove member?"
+        handleCancel={() => setRemoveMemberDialogOpen((preVal) => !preVal)}
-        handleOpen={() => setRemoveMemberDialogOpen((preVal) => !preVal)}
         open={removeMemberDialogOpen}
-        confirmButtonTitle="Yes, Remove member"
         handleConfirm={() => {
           setRemoveMemberDialogOpen((preVal) => !preVal);
           if (onRemoveProjectMember) {
             onRemoveProjectMember();
           }
         }}
-        color="red"
+        memberName={member.name ?? ''}
-      >
+        ethAddress={ethAddress}
-        <Typography variant="small" placeholder={''}>
+        emailDomain={emailDomain}
-          Once removed, {formatAddress(member.name ?? '')} (
+      />
-          {formatAddress(ethAddress)}@{emailDomain}) will not be able to access
-          this project.
-        </Typography>
-      </ConfirmDialog>
     </div>
   );
 };