DeleteProjectDialog update to Modal (#70)

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

@@ -1,20 +1,13 @@
 import { useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
-import { Project } from 'gql-client';
 
-import {
-  Button,
-  Dialog,
-  DialogHeader,
-  DialogBody,
-  DialogFooter,
-  Input,
-  Typography,
-} from '@snowballtools/material-tailwind-react-fork';
-
-import { useGQLClient } from '../../../../context/GQLClientContext';
+import { useGQLClient } from 'context/GQLClientContext';
 import { useToast } from 'components/shared/Toast';
+import { Modal } from 'components/shared/Modal';
+import { Button } from 'components/shared/Button';
+import { Input } from 'components/shared/Input';
+import { Project } from 'gql-client';
 
 interface DeleteProjectDialogProp {
   open: boolean;
@@ -60,51 +53,36 @@ const DeleteProjectDialog = ({
   }, [client, project, handleOpen]);
 
   return (
-    <Dialog open={open} handler={handleOpen}>
-      <DialogHeader className="flex justify-between">
-        <div>Delete project?</div>
-        <Button
-          variant="outlined"
-          onClick={handleOpen}
-          className="mr-1 rounded-3xl"
-        >
-          X
-        </Button>
-      </DialogHeader>
-      <form onSubmit={handleSubmit(deleteProjectHandler)}>
-        <DialogBody className="flex flex-col gap-2">
-          <Typography variant="paragraph">
-            Deleting your project is irreversible. Enter your project’s
-            name&nbsp;
-            <span className="bg-blue-100 text-blue-700">({project.name})</span>
-            &nbsp;below to confirm you want to permanently delete it:
-          </Typography>
-          <Input
-            id="input"
-            {...register('projectName', {
-              required: 'Project name is required',
-              validate: (value) => value === project.name,
-            })}
-          />
-          <Typography variant="small" color="red">
-            ^ Deleting your project is irreversible.
-          </Typography>
-        </DialogBody>
-        <DialogFooter className="flex justify-start">
-          <Button variant="outlined" onClick={handleOpen} className="mr-1">
-            Cancel
-          </Button>
-          <Button
-            variant="gradient"
-            color="red"
-            type="submit"
-            disabled={!isValid}
-          >
-            Yes, Delete project
-          </Button>
-        </DialogFooter>
-      </form>
-    </Dialog>
+    <Modal open={open} onOpenChange={handleOpen}>
+      <Modal.Content>
+        <Modal.Header>Delete project?</Modal.Header>
+        <form onSubmit={handleSubmit(deleteProjectHandler)}>
+          <Modal.Body>
+            <Input
+              label={
+                "Deleting your project is irreversible. Enter your project's name " +
+                project.name +
+                ' below to confirm you want to permanently delete it:'
+              }
+              id="input"
+              {...register('projectName', {
+                required: 'Project name is required',
+                validate: (value) => value === project.name,
+              })}
+              helperText="Deleting your project is irreversible."
+            />
+          </Modal.Body>
+          <Modal.Footer className="flex justify-start">
+            <Button onClick={handleOpen} variant="tertiary">
+              Cancel
+            </Button>
+            <Button variant="danger" type="submit" disabled={!isValid}>
+              Yes, delete project
+            </Button>
+          </Modal.Footer>
+        </form>
+      </Modal.Content>
+    </Modal>
   );
 };