Mathis/lemma
1
0
Fork 0
mirror of https://github.com/lordmathis/lemma.git synced 2025-11-06 16:04:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate modals

Browse Source
This commit is contained in:
Matúš Námešný
2024-10-09 20:30:50 +02:00
parent 221d8f5742
commit f365eed4dd
3 changed files with 58 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
frontend/src/components/modals/CommitMessageModal.js
View File

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

33
frontend/src/components/modals/CreateFileModal.js
View File

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

26
frontend/src/components/modals/DeleteFileModal.js
View File

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