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,41 +102,39 @@ 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">
-        <a href={userUrl}>
-          <QRCanvas ref={canvRef} />
-        </a>
-        <UnorderList>
-          {studentsArr.map((student) => (
-            <LessonItem key={student.sub} warn={!student.present}>
-              <Lessonname>
-                {student.name || student.preferred_username}{' '}
-                {!student.present && (
-                  <AddMissedButton
-                    onClick={() => manualAdd({ lessonId, user: student })}
-                  >
-                    add
-                  </AddMissedButton>
-                )}
-              </Lessonname>
-            </LessonItem>
-          ))}
-        </UnorderList>
-      </HStack>
-    </Container>
+        </span>
+        <Wrapper>
+          <a href={userUrl}>
+            <QRCanvas ref={canvRef} />
+          </a>
+          <UnorderList>
+            {studentsArr.map((student) => (
+              <LessonItem key={student.sub} warn={!student.present}>
+                <Lessonname>
+                  {student.name || student.preferred_username}{' '}
+                  {!student.present && (
+                    <AddMissedButton
+                      onClick={() => manualAdd({ lessonId, user: student })}
+                    >
+                      add
+                    </AddMissedButton>
+                  )}
+                </Lessonname>
+              </LessonItem>
+            ))}
+          </UnorderList>
+        </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",