Implement edit lesson button (#1117)

* fixed troubles

* added button with redirect

* fixed mistakes

* fixed mistakes

src/pages/lesson-details/LessonDetails.tsx

@@ -1,8 +1,10 @@
 import { useCallback, useState } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { AxiosResponse } from 'axios'
 import Box from '@mui/material/Box'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import EditIcon from '@mui/icons-material/Edit'
 
 import Loader from '~/components/loader/Loader'
 import TitleWithDescription from '~/components/title-with-description/TitleWithDescription'
@@ -15,16 +17,20 @@ import {
 } from '~/pages/lesson-details/LessonDetails.constants'
 import Accordions from '~/components/accordion/Accordions'
 import IconExtensionWithTitle from '~/components/icon-extension-with-title/IconExtensionWithTitle'
+import AppButton from '~/components/app-button/AppButton'
 
 import { errorRoutes } from '~/router/constants/errorRoutes'
+import { authRoutes } from '~/router/constants/authRoutes'
 import { styles } from '~/pages/lesson-details/LessonsDetails.styles'
 import { Lesson, TypographyVariantEnum } from '~/types'
+import { createUrlPath } from '~/utils/helper-functions'
 
 const LessonDetails = () => {
   const [activeItems, setActiveItems] = useState<number[]>([])
 
   const { id } = useParams()
   const navigate = useNavigate()
+  const { t } = useTranslation()
 
   const onChange = (activeItem: number) => {
     setActiveItems((prevActiveItems) => {
@@ -57,6 +63,10 @@ const LessonDetails = () => {
     return <Loader pageLoad />
   }
 
+  const handleEditLesson = () => {
+    navigate(createUrlPath(authRoutes.myResources.editLesson.path, id))
+  }
+
   const attachmentsList = attachmentsMock.map((attachment) => (
     <Box key={attachment.size} sx={styles.attachment}>
       <IconExtensionWithTitle
@@ -79,6 +89,9 @@ const LessonDetails = () => {
 
   return (
     <PageWrapper>
+      <AppButton onClick={handleEditLesson} sx={styles.button}>
+        {t('common.edit')} <EditIcon sx={styles.editIcon} />
+      </AppButton>
       <TitleWithDescription
         description={response.description}
         style={styles.titleWithDescription}

src/pages/lesson-details/LessonsDetails.styles.ts

@@ -1,4 +1,3 @@
-import palette from '~/styles/app-theme/app.pallete'
 import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
@@ -13,12 +12,28 @@ export const styles = {
     gap: '10px'
   },
   attachment: {
-    background: palette.basic.grey,
+    background: 'basic.grey',
     borderRadius: '5px',
     p: '16px 24px',
     display: 'flex',
     justifyContent: 'space-between'
   },
+  button: {
+    marginLeft: 'auto',
+    backgroundColor: 'basic.grey',
+    color: 'basic.black',
+    minWidth: '97px',
+    display: 'flex',
+    alighnItems: 'center',
+    columnGap: '16px',
+    '&:hover': {
+      backgroundColor: 'primary.100'
+    }
+  },
+  editIcon: {
+    width: { xs: '14px', sm: '16px' },
+    ml: '5px'
+  },
   accordion: {
     withIcon: {
       accordion: {