♻️ refactor: create delete domain dialog component

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

@@ -0,0 +1,42 @@
+import ConfirmDialog, {
+  ConfirmDialogProps,
+} from 'components/shared/ConfirmDialog';
+import React from 'react';
+
+interface DeleteDomainDialogProps extends ConfirmDialogProps {
+  projectName: string;
+  domainName: string;
+}
+
+export const DeleteDomainDialog = ({
+  projectName,
+  domainName,
+  open,
+  handleCancel,
+  handleConfirm,
+  ...props
+}: DeleteDomainDialogProps) => {
+  return (
+    <ConfirmDialog
+      {...props}
+      dialogTitle="Delete domain?"
+      handleCancel={handleCancel}
+      open={open}
+      confirmButtonTitle="Yes, delete domain"
+      handleConfirm={handleConfirm}
+      confirmButtonProps={{ variant: 'danger' }}
+    >
+      <p className="text-sm text-elements-high-em">
+        Once deleted, the project{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {projectName}
+        </span>{' '}
+        will not be accessible from the domain{' '}
+        <span className="text-sm font-mono text-elements-on-secondary bg-controls-secondary rounded px-0.5">
+          {domainName}
+        </span>
+        .
+      </p>
+    </ConfirmDialog>
+  );
+};

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

@@ -12,9 +12,9 @@ import {
   Card,
 } from '@material-tailwind/react';
 
-import ConfirmDialog from '../../../shared/ConfirmDialog';
 import EditDomainDialog from './EditDomainDialog';
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
+import { DeleteDomainDialog } from 'components/projects/Dialog/DeleteDomainDialog';
 
 enum RefreshStatus {
   IDLE,
@@ -118,28 +118,16 @@ const DomainCard = ({
           </Menu>
         </div>
 
-        <ConfirmDialog
+        <DeleteDomainDialog
-          dialogTitle="Delete domain?"
+          handleCancel={() => setDeleteDialogOpen((preVal) => !preVal)}
-          handleOpen={() => setDeleteDialogOpen((preVal) => !preVal)}
           open={deleteDialogOpen}
-          confirmButtonTitle="Yes, Delete domain"
           handleConfirm={() => {
             deleteDomain();
             setDeleteDialogOpen((preVal) => !preVal);
           }}
-          color="red"
+          projectName={project.name}
-        >
+          domainName={domain.name}
-          <Typography variant="small" placeholder={''}>
+        />
-            Once deleted, the project{' '}
-            <span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
-              {project.name}
-            </span>{' '}
-            will not be accessible from the domain{' '}
-            <span className="bg-blue-100 rounded-sm p-0.5 text-blue-700">
-              {domain.name}.
-            </span>
-          </Typography>
-        </ConfirmDialog>
       </div>
 
       <Typography variant="small" placeholder={''}>