Добавлено расширение темы Chakra UI, реализован компонент AppHeader с переключением темной/светлой темы, обновлены стили для поддержки темной темы, улучшена загрузка компонентов с учетом цветовой схемы.

src/pages/attendance/attendance.tsx

@@ -130,7 +130,7 @@ const ShortText = ({ text }: { text: string }) => {
 
   if (needShortText) {
     return (
-      <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+      <Tooltip label={text} fontSize="12px" top="16px">
         <Text>{text.slice(0, 20)}...</Text>
       </Tooltip>
     )

src/pages/course-list/course-list.tsx

@@ -19,38 +19,14 @@ import {
   useColorMode,
 } from '@chakra-ui/react'
 import { useForm, Controller } from 'react-hook-form'
-
-const MENU_SCRIPT_URL = 'https://admin.bro-js.ru/remote-assets/lib/serviceMenu/serviceMenu.js'
-
-const loadServiceMenu = () => {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = MENU_SCRIPT_URL
-    script.onload = () => setTimeout(() => resolve(true), 1000)
-    script.onerror = reject
-    document.body.appendChild(script)
-  })
-}
+import { AddIcon } from '@chakra-ui/icons'
 
 import { ErrorSpan } from '../style'
-declare global {
-  interface Window {
-    createServiceMenu?: (options: any) => {
-      show: () => void;
-      hide: () => void;
-      update: () => void;
-      destroy: () => void;
-    };
-  }
-}
-
 import { useAppSelector } from '../../__data__/store'
 import { api } from '../../__data__/api/api'
 import { isTeacher } from '../../utils/user'
-import { AddIcon } from '@chakra-ui/icons'
 import { PageLoader } from '../../components/page-loader/page-loader'
 import { CourseCard } from './course-card'
-import { keycloak } from '../../__data__/kc'
 
 interface NewCourseForm {
   startDt: string
@@ -65,13 +41,7 @@ export const CoursesList = () => {
   const [showForm, setShowForm] = useState(false)
   const toastRef = useRef(null)
 
-  const [serviceMenu, setServiceMenu] = useState(false)
-
-  useEffect(() => {
-    loadServiceMenu().then(() => {
-      setServiceMenu(true)
-    }).catch(console.error)
-  }, [])
+  const { colorMode } = useColorMode();
 
   const {
     control,
@@ -111,39 +81,6 @@ export const CoursesList = () => {
     }
   }, [crucQuery.isSuccess])
 
-  const serviceMenuContainerRef = useRef<HTMLDivElement>(null)
-  const serviceMenuInstanceRef = useRef<any>(null)
-
-  useEffect(() => {
-    // Проверяем, что библиотека загружена и есть контейнер для меню
-    if (window.createServiceMenu && serviceMenuContainerRef.current) {
-      // Создаем меню сервисов
-      serviceMenuInstanceRef.current = window.createServiceMenu({
-        accessToken: keycloak.token,
-        apiUrl: 'https://admin.bro-js.ru',
-        targetElement: serviceMenuContainerRef.current,
-        styles: {
-          dotColor: '#333',
-          hoverColor: '#eee',
-          backgroundColor: '#fff',
-          textColor: '#333',
-        },
-        translations: {
-          menuTitle: 'Сервисы BRO',
-          menuAriaLabel: 'Сервисы BRO',
-        }
-      });
-    }
-
-    // Очистка при размонтировании
-    return () => {
-      if (serviceMenuInstanceRef.current) {
-        serviceMenuInstanceRef.current.destroy();
-        serviceMenuInstanceRef.current = null;
-      }
-    };
-  }, [keycloak.token, serviceMenu]);
-
   if (isLoading) {
     return (
       <PageLoader />
@@ -151,8 +88,6 @@ export const CoursesList = () => {
   }
 
   return (
-    <>
-    <div style={{ position: 'absolute', top: 6, left: 6 }} id="dots" ref={serviceMenuContainerRef}></div>
     <Container maxW="container.xl">
       {isTeacher(user) && (
         <Box mt="15" mb="15">
@@ -263,6 +198,5 @@ export const CoursesList = () => {
         ))}
       </VStack>
     </Container>
-        </>
   )
 }

src/pages/lesson-list/components/item.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import dayjs from 'dayjs'
 import { Link } from 'react-router-dom'
-import { getNavigationsValue, getFeatures } from '@brojs/cli'
+import { getNavigationValue, getFeatures } from '@brojs/cli'
 import {
   Button,
   Tr,
@@ -105,7 +105,7 @@ export const Item: React.FC<ItemProps> = ({
       {isTeacher && (
         <Td>
           <Link
-            to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
+            to={`${getNavigationValue('journal.main')}/lesson/${courseId}/${id}`}
             style={{ display: 'flex' }}
           >
             <img width={24} src={qrCode} style={{ margin: '0 auto' }} />

src/pages/style.ts

@@ -31,9 +31,14 @@ export const QRCanvas = styled.canvas`
 `
 
 export const ErrorSpan = styled.span`
-  color: #f9e2e2;
+  color: var(--chakra-colors-red-100);
   display: block;
   padding: 16px;
-  background-color: #d32f0b;
+  background-color: var(--chakra-colors-red-600);
   border-radius: 11px;
+
+  .chakra-ui-dark & {
+    color: var(--chakra-colors-red-200);
+    background-color: var(--chakra-colors-red-800);
+  }
 `