♻️ refactor: create disconnect repository dialog component

packages/frontend/src/components/projects/Dialog/DisconnectRepositoryDialog.tsx

@@ -0,0 +1,30 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface DisconnectRepositoryDialogProps extends ConfirmDialogProps {}
+
+export const DisconnectRepositoryDialog = ({
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: DisconnectRepositoryDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Disconnect repository?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, confirm disconnect"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Any data tied to your Git project may become misconfigured. Are you sure
+        you want to continue?
+      </p>
+    </ConfirmDialog>
+  );
+};

packages/frontend/src/components/projects/project/settings/RepoConnectedSection.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 
 import { Button, Typography } from '@material-tailwind/react';
 
-import { GitRepositoryDetails } from '../../../../types';
-import ConfirmDialog from '../../../shared/ConfirmDialog';
+import { GitRepositoryDetails } from 'types';
+import { DisconnectRepositoryDialog } from 'components/projects/Dialog/DisconnectRepositoryDialog';
 
 const RepoConnectedSection = ({
   linkedRepo,
@@ -34,21 +34,13 @@ const RepoConnectedSection = ({
           ^ Disconnect
         </Button>
       </div>
-      <ConfirmDialog
-        dialogTitle="Disconnect repository?"
-        handleOpen={() => setDisconnectRepoDialogOpen((preVal) => !preVal)}
+      <DisconnectRepositoryDialog
+        handleCancel={() => setDisconnectRepoDialogOpen((preVal) => !preVal)}
         open={disconnectRepoDialogOpen}
-        confirmButtonTitle="Yes, confirm disconnect"
         handleConfirm={() => {
           setDisconnectRepoDialogOpen((preVal) => !preVal);
         }}
-        color="red"
-      >
-        <Typography variant="small" placeholder={''}>
-          Any data tied to your Git project may become misconfigured. Are you
-          sure you want to continue?
-        </Typography>
-      </ConfirmDialog>
+      />
     </div>
   );
 };