diff --git a/frontend/src/components/modals/AddChannelModal/AddChannelModal.jsx b/frontend/src/components/modals/AddChannelModal/AddChannelModal.jsx index 2fb12eb..880fa1b 100644 --- a/frontend/src/components/modals/AddChannelModal/AddChannelModal.jsx +++ b/frontend/src/components/modals/AddChannelModal/AddChannelModal.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; import { - Form, FormGroup, FormControl, FormLabel, Button, + Modal as BootstrapModal, Form, FormGroup, FormControl, FormLabel, Button, } from 'react-bootstrap'; import { toast } from 'react-toastify'; import { useDispatch } from 'react-redux'; @@ -50,49 +50,58 @@ const AddChannelModal = ({ handleClose }) => { }); return ( -
- - - {t('modals.channelName')} - - {formik.errors.name} - - -
- - -
-
+ <> + + + {t('modals.addTitle')} + + + +
+ + + {t('modals.channelName')} + + {formik.errors.name} + + +
+ + +
+
+
+ ); }; diff --git a/frontend/src/components/modals/ModalComponent.jsx b/frontend/src/components/modals/ModalComponent.jsx index 86ec48a..c08a4c9 100644 --- a/frontend/src/components/modals/ModalComponent.jsx +++ b/frontend/src/components/modals/ModalComponent.jsx @@ -1,33 +1,24 @@ import { useSelector, useDispatch } from 'react-redux'; import { Modal as BootstrapModal } from 'react-bootstrap'; -import { useTranslation } from 'react-i18next'; import { selectIsOpen, closeModal, selectType } from '../../store/slices/modalsSlice'; import { MODALS } from './constants'; -const Modal = () => { +const ModalComponent = () => { const dispatch = useDispatch(); const isOpen = useSelector(selectIsOpen); const type = useSelector(selectType); - const { t } = useTranslation(); const handleClose = () => { dispatch(closeModal()); }; - const Component = MODALS[type]; + const ModalContent = MODALS[type]; return ( - - - {t(`modals.${type}ChannelTitle`)} - - - - {Component && } - + {ModalContent && } ); }; -export default Modal; +export default ModalComponent; diff --git a/frontend/src/components/modals/RemoveChannelModal.jsx b/frontend/src/components/modals/RemoveChannelModal.jsx index d786fe8..85ba440 100644 --- a/frontend/src/components/modals/RemoveChannelModal.jsx +++ b/frontend/src/components/modals/RemoveChannelModal.jsx @@ -1,6 +1,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; -import { Button } from 'react-bootstrap'; +import { Modal as BootstrapModal, Button } from 'react-bootstrap'; import { toast } from 'react-toastify'; import { useRemoveChannelMutation } from '../../api/channelsApi'; import { setDefaultChannel, selectCurrentChannelId } from '../../store/slices/channelsSlice'; @@ -29,32 +29,39 @@ const RemoveChannelModal = ({ handleClose }) => { return ( <> -

{t('modals.text')}

-
- - -
+ + + {t('modals.removeTitle')} + + + +

{t('modals.text')}

+
+ + +
+
); }; diff --git a/frontend/src/components/modals/RenameChannelModal/RenameChannelModal.jsx b/frontend/src/components/modals/RenameChannelModal/RenameChannelModal.jsx index 7cadade..ff3a10e 100644 --- a/frontend/src/components/modals/RenameChannelModal/RenameChannelModal.jsx +++ b/frontend/src/components/modals/RenameChannelModal/RenameChannelModal.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useRef } from 'react'; import { useFormik } from 'formik'; import { - Form, FormGroup, FormControl, FormLabel, Button, + Modal as BootstrapModal, Form, FormGroup, FormControl, FormLabel, Button, } from 'react-bootstrap'; import { toast } from 'react-toastify'; import filter from 'leo-profanity'; @@ -59,50 +59,59 @@ const RenameChannelModal = ({ handleClose }) => { }); return ( -
- - - {t('modals.channelName')} - - {formik.errors.name} - - -
- - -
-
+ <> + + + {t('modals.renameTitle')} + + + +
+ + + {t('modals.channelName')} + + {formik.errors.name} + + +
+ + +
+
+
+ ); }; diff --git a/frontend/src/locales/ru.js b/frontend/src/locales/ru.js index e4a29ff..671a459 100644 --- a/frontend/src/locales/ru.js +++ b/frontend/src/locales/ru.js @@ -50,9 +50,9 @@ const translation = { connectionError: 'Ошибка соединения', }, modals: { - addingChannelTitle: 'Добавить канал', - removingChannelTitle: 'Удалить канал', - renamingChannelTitle: 'Переименовать канал', + addTitle: 'Добавить канал', + removeTitle: 'Удалить канал', + renameTitle: 'Переименовать канал', channelName: 'Имя канала', cancel: 'Отменить', send: 'Отправить',