src/pages/lesson-details.tsx

@@ -3,22 +3,16 @@ import { useParams, Link } from 'react-router-dom'
 import dayjs from 'dayjs'
 import QRCode from 'qrcode'
 import { getConfigValue, getNavigationsValue } from '@ijl/cli'
-import {
-  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  Container,
-  HStack,
-  VStack,
-  Heading,
-} from '@chakra-ui/react'
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'
 
 import {
+  MainWrapper,
+  StartWrapper,
   QRCanvas,
   LessonItem,
   Lessonname,
   AddMissedButton,
+  Wrapper,
   UnorderList,
 } from './style'
 import { api } from '../__data__/api/api'
@@ -86,8 +80,8 @@ const LessonDetail = () => {
   }, [accessCode?.body, AllStudents.data])
 
   return (
-    <Container maxW="container.xl" centerContent px="200">
-      <VStack align="left">
+    <MainWrapper>
+      <StartWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
             <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@@ -108,20 +102,17 @@ const LessonDetail = () => {
             <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-        <Heading as='h3' mt='4' mb='3'>
-          Тема занятия: 
-        </Heading>
-        <Box as="span">
-          {accessCode?.body?.lesson?.name}
-        </Box>
-        <Box as='span'>
+
+        <h1 style={{ width: '70%' }}>
+          Тема занятия - {accessCode?.body?.lesson?.name}
+        </h1>
+        <span style={{ display: 'flex' }}>
           {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
           Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
           {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
           человек
-        </Box>
-      </VStack>
-      <HStack spacing="8">
+        </span>
+        <Wrapper>
           <a href={userUrl}>
             <QRCanvas ref={canvRef} />
           </a>
@@ -141,8 +132,9 @@ const LessonDetail = () => {
               </LessonItem>
             ))}
           </UnorderList>
-      </HStack>
-    </Container>
+        </Wrapper>
+      </StartWrapper>
+    </MainWrapper>
   )
 }
 

stubs/mocks/lessons/access-code/create/success.json

@@ -4,7 +4,7 @@
       "expires": "2024-03-01T07:52:16.374Z",
       "lesson": {
           "_id": "65df996c584b172772d69706",
-          "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
+          "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
           "students": [
               {
                   "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",

stubs/mocks/lessons/access-code/get/success.json

@@ -20,7 +20,7 @@
           "expires": "2024-03-01T07:52:09.233Z",
           "lesson": {
               "_id": "65df996c584b172772d69706",
-              "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
+              "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
               "students": [],
               "date": "2024-02-28T20:37:00.057Z",
               "created": "2024-02-28T20:37:00.057Z",