#13 QR code centered

src/pages/lesson-details.tsx

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