implemented comments suggestions

src/constants/translations/en/cooperation-details.json

@@ -29,5 +29,9 @@
     "yourProgress": "Your progress",
     "completed": "completed",
     "needToComplete": "to complete"
-  }
+  },
+  "closingMessage1": " started a closing process for the current cooperation. You will have ",
+  "accessDuration": "1 month of access",
+  "closingMessage2": " to study materials after the cooperation has been closed.",
+  "acceptBtn": "Accept"
 }

src/constants/translations/en/titles.json

@@ -2,5 +2,6 @@
   "confirmTitle": "Please Confirm",
   "discardOffer": "Discard offer changes?",
   "discardChanges": "Discard recent changes?",
-  "confirmCooperationClosing": "Confirmation of cooperation closing"
+  "confirmCooperationClosing": "Confirmation of cooperation closing",
+  "acceptCooperationClosing": "Cooperation closing process"
 }

src/constants/translations/uk/cooperation-details.json

@@ -29,5 +29,9 @@
     "yourProgress": "Ваш прогрес",
     "completed": "виконано",
     "needToComplete": "до завершення"
-  }
+  },
+  "closingMessage1": " ініціював(-ла) процес припинення співпраці. У вас залишиться доступ до матеріалів поточної співпраці протягом ",
+  "accessDuration": "1 місяця",
+  "closingMessage2": " з моменту закриття.",
+  "acceptBtn": "Прийняти"
 }

src/constants/translations/uk/cooperations-page.json

@@ -86,6 +86,6 @@
     "confirmDeletionTitle": "Ви підтверджуєте видалення нотатки?"
   },
   "closeCooperationModal": {
-    "message": "Ви впевнені, що хочете завершити кооперацію?"
+    "message": "Ви впевнені, що хочете завершити співпрацю?"
   }
 }

src/constants/translations/uk/titles.json

@@ -2,5 +2,6 @@
   "confirmTitle": "Підтвердіть вихід",
   "discardOffer": "Відхилити зміни пропозиції?",
   "discardChanges": "Зберегти останні зміни?",
-  "confirmCooperationClosing": "Підтвердження закриття кооперації"
+  "confirmCooperationClosing": "Підтвердження припинення cпівпраці",
+  "acceptCooperationClosing": "Процес припинення співпраці"
 }

src/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing.styles.ts

@@ -3,12 +3,12 @@ import palette from '~/styles/app-theme/app.pallete'
 export const styles = {
   root: {
     display: 'flex',
-    flexDirection: 'row',
     alignItems: 'center',
     border: `1px solid ${palette.basic.pinkishRed}`,
     backgroundColor: palette.basic.softGray,
     borderRadius: '5px',
     padding: '24px',
+    justifyContent: 'space-between',
     gap: '16px'
   },
   span: {
@@ -18,15 +18,10 @@ export const styles = {
     color: palette.basic.mediumRed,
     fontWeight: '500',
     display: 'flex',
-    flexDirection: 'row',
     gap: '8px',
     mb: '4px'
   },
   body: {
     color: palette.basic.darkGray
-  },
-  button: {
-    color: `${palette.basic.deepRed} !important`,
-    backgroundColor: `${palette.basic.lightRed} !important`
   }
 }

src/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing.tsx

@@ -1,42 +1,41 @@
-import { Box, Typography } from '@mui/material'
+import { Box, styled, Typography } from '@mui/material'
 import { FC } from 'react'
-import AppButton from '~/components/app-button/AppButton'
-
 import { styles } from './AcceptCooperationClosing.styles'
 import { ErrorOutlineRounded } from '@mui/icons-material'
-import { SizeEnum } from '~/types'
+import Button from '~/design-system/components/button/Button'
+import { useTranslation } from 'react-i18next'
 
 interface AcceptCooperationClosureProps {
   user: string
   onAccept: () => void
 }
 
+const BoldText = styled('span')({
+  fontWeight: 500
+})
+
 const AcceptCooperationClosing: FC<AcceptCooperationClosureProps> = ({
   user,
   onAccept
 }) => {
+  const { t } = useTranslation()
   return (
     <Box sx={styles.root}>
       <Box>
         <Box sx={styles.title}>
           <ErrorOutlineRounded />
-          <Typography>Cooperation closing process</Typography>
+          <Typography>{t('titles.acceptCooperationClosing')}</Typography>
         </Box>
         <Typography sx={styles.body}>
-          <span style={styles.span}>{user}</span> started a closing process for
-          the current cooperation. You will have{' '}
-          <span style={styles.span}> 1 month of access</span> to study materials
-          after the cooperation has been closed.
+          <BoldText>{user}</BoldText>
+          {t('cooperationDetailsPage.closingMessage1')}
+          <BoldText>{t('cooperationDetailsPage.accessDuration')}</BoldText>
+          {t('cooperationDetailsPage.closingMessage2')}
         </Typography>
       </Box>
-      <AppButton
-        color='error'
-        onClick={onAccept}
-        size={SizeEnum.Small}
-        sx={styles.button}
-      >
-        Accept
-      </AppButton>
+      <Button color='tonal-error' onClick={onAccept} size='xs'>
+        {t('cooperationDetailsPage.acceptBtn')}
+      </Button>
     </Box>
   )
 }

src/containers/my-cooperations/cooperation-completion/CooperationCompletion.styles.ts

@@ -18,14 +18,5 @@ export const styles = {
   dropdown: {
     maxWidth: '216px',
     ml: '15px'
-  },
-  closeCooperationModal: {
-    text: {
-      padding: '30px'
-    },
-    button: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
   }
 }

src/containers/my-cooperations/cooperation-details/CooperationDetails.tsx

@@ -46,7 +46,7 @@ import {
   setCooperationStatus,
   setIsActivityCreated
 } from '~/redux/features/cooperationsSlice'
-import AcceptCooperationClosing from '../accept-cooperation-close/AcceptCooperationClosing'
+import AcceptCooperationClosing from '~/containers/my-cooperations/accept-cooperation-close/AcceptCooperationClosing'
 
 const CooperationDetails = () => {
   const dispatch = useAppDispatch()
@@ -139,7 +139,7 @@ const CooperationDetails = () => {
     return cooperationContent
   }
 
-  const handleCooperationStatusUpdate = async () => {
+  const isCooperationStatusUpdated = async () => {
     await cooperationService.updateCooperation({
       _id: id,
       status: StatusEnum.Closed
@@ -149,7 +149,7 @@ const CooperationDetails = () => {
   }
 
   const handleCooperationCloseAccept = () => {
-    void handleCooperationStatusUpdate()
+    void isCooperationStatusUpdated()
   }
 
   const cooperationCompletionConditions =

src/containers/my-cooperations/my-cooperations-details/MyCooperationsDetails.tsx

@@ -133,7 +133,7 @@ const MyCooperationsDetails = () => {
 
   const handleCooperationStatusUpdate = async () => {
     const confirmed = await checkConfirmation({
-      title: 'titles.confirmCooperationClosing',
+      title: t('titles.confirmCooperationClosing'),
       message: t('cooperationsPage.closeCooperationModal.message'),
       check: true
     })