Migrate modals

frontend/src/components/modals/CommitMessageModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Input } from '@geist-ui/core';
+import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../contexts/ModalContext';
 
 const CommitMessageModal = ({ onCommitAndPush }) => {
@@ -17,22 +17,31 @@ const CommitMessageModal = ({ onCommitAndPush }) => {
 
   return (
     <Modal
-      visible={commitMessageModalVisible}
+      opened={commitMessageModalVisible}
       onClose={() => setCommitMessageModalVisible(false)}
+      title="Enter Commit Message"
+      centered
+      size="sm"
     >
-      <Modal.Title>Enter Commit Message</Modal.Title>
-      <Modal.Content>
-        <Input
-          width="100%"
+      <Box maw={400} mx="auto">
+        <TextInput
+          label="Commit Message"
           placeholder="Enter commit message"
           value={message}
-          onChange={(e) => setMessage(e.target.value)}
+          onChange={(event) => setMessage(event.currentTarget.value)}
+          mb="md"
+          w="100%"
         />
-      </Modal.Content>
-      <Modal.Action passive onClick={() => setCommitMessageModalVisible(false)}>
-        Cancel
-      </Modal.Action>
-      <Modal.Action onClick={handleSubmit}>Commit</Modal.Action>
+        <Group justify="flex-end" mt="md">
+          <Button
+            variant="default"
+            onClick={() => setCommitMessageModalVisible(false)}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Commit</Button>
+        </Group>
+      </Box>
     </Modal>
   );
 };

frontend/src/components/modals/CreateFileModal.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Modal, Input } from '@geist-ui/core';
+import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../contexts/ModalContext';
 
 const CreateFileModal = ({ onCreateFile }) => {
@@ -16,22 +16,31 @@ const CreateFileModal = ({ onCreateFile }) => {
 
   return (
     <Modal
-      visible={newFileModalVisible}
+      opened={newFileModalVisible}
       onClose={() => setNewFileModalVisible(false)}
+      title="Create New File"
+      centered
+      size="sm"
     >
-      <Modal.Title>Create New File</Modal.Title>
-      <Modal.Content>
-        <Input
-          width="100%"
+      <Box maw={400} mx="auto">
+        <TextInput
+          label="File Name"
           placeholder="Enter file name"
           value={fileName}
-          onChange={(e) => setFileName(e.target.value)}
+          onChange={(event) => setFileName(event.currentTarget.value)}
+          mb="md"
+          w="100%"
         />
-      </Modal.Content>
-      <Modal.Action passive onClick={() => setNewFileModalVisible(false)}>
-        Cancel
-      </Modal.Action>
-      <Modal.Action onClick={handleSubmit}>Create</Modal.Action>
+        <Group justify="flex-end" mt="md">
+          <Button
+            variant="default"
+            onClick={() => setNewFileModalVisible(false)}
+          >
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit}>Create</Button>
+        </Group>
+      </Box>
     </Modal>
   );
 };

frontend/src/components/modals/DeleteFileModal.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Text } from '@geist-ui/core';
+import { Modal, Text, Button, Group } from '@mantine/core';
 import { useModalContext } from '../../contexts/ModalContext';
 
 const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
@@ -13,17 +13,23 @@ const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
 
   return (
     <Modal
-      visible={deleteFileModalVisible}
+      opened={deleteFileModalVisible}
       onClose={() => setDeleteFileModalVisible(false)}
+      title="Delete File"
+      centered
     >
-      <Modal.Title>Delete File</Modal.Title>
-      <Modal.Content>
-        <Text>Are you sure you want to delete "{selectedFile}"?</Text>
-      </Modal.Content>
-      <Modal.Action passive onClick={() => setDeleteFileModalVisible(false)}>
-        Cancel
-      </Modal.Action>
-      <Modal.Action onClick={handleConfirm}>Delete</Modal.Action>
+      <Text>Are you sure you want to delete "{selectedFile}"?</Text>
+      <Group justify="flex-end" mt="xl">
+        <Button
+          variant="default"
+          onClick={() => setDeleteFileModalVisible(false)}
+        >
+          Cancel
+        </Button>
+        <Button color="red" onClick={handleConfirm}>
+          Delete
+        </Button>
+      </Group>
     </Modal>
   );
 };