UI changes

rsconcept/frontend/src/App.tsx

@@ -18,7 +18,7 @@ import UserProfilePage from './pages/UserProfilePage';
 function Root() {
   const { noNavigation, noFooter, viewportHeight, mainHeight } = useConceptTheme();
   return (
-    <div className='antialiased clr-app'>
+    <div className='w-screen antialiased clr-app'>
       <Navigation />
       <ToasterThemed
         className='mt-[4rem] text-sm'
@@ -26,11 +26,11 @@ function Root() {
         draggable={false}
         pauseOnFocusLoss={false}
       />
-      <div className='overflow-auto' style={{maxHeight: viewportHeight}}>
+      <div className='w-full overflow-auto' style={{maxHeight: viewportHeight}}>
-      <main className='h-full' style={{minHeight: mainHeight}}>
+      <main className='w-full h-full' style={{minHeight: mainHeight}}>
         <Outlet />
       </main>
-      {!noNavigation && !noFooter && <Footer />}
+        {!noNavigation && !noFooter && <Footer />}
       </div>
     </div>
   );

rsconcept/frontend/src/components/Footer.tsx

@@ -4,7 +4,7 @@ import { urls } from '../utils/constants';
 
 function Footer() {
   return (
-    <footer className='z-50 px-4 pt-2 pb-4 text-sm border-t-2 border-white select-none whitespace-nowrap clr-footer'>
+    <footer className='z-50 px-4 pt-2 pb-4 text-sm select-none whitespace-nowrap clr-footer'>
       <div className='justify-center w-full mx-auto'>
         <div className='mb-2 text-center'>
           <Link className='mx-2 hover:underline' to='/library' tabIndex={-1}>Библиотека</Link> 

rsconcept/frontend/src/components/Help/HelpLibrary.tsx

@@ -2,7 +2,7 @@ import { EducationIcon, EyeIcon, GroupIcon } from '../Icons';
 
 function HelpLibrary() {
   return (
-    <div className=''>
+    <div className='w-full'>
       <h1>Библиотека концептуальных схем</h1>
       <p>В библиотеки собраны различные концептуальные схемы.</p>
       <p>Группировка и классификации схем на данный момент не проводится.</p>
@@ -18,7 +18,7 @@ function HelpLibrary() {
       </div>
       <div className='flex items-center gap-2'>
         <EducationIcon size={4}/>
-        <p>Аттрибут <b>библиотечная</b> выделяет неизменяемые стандартные схемы.</p>
+        <p>Аттрибут <b>неизменяемая</b> выделяет неизменяемые стандартные схемы.</p>
       </div>
     </div>
   );

rsconcept/frontend/src/components/Help/HelpMain.tsx

@@ -4,19 +4,19 @@ import TextURL from '../Common/TextURL';
 
 function HelpMain() {
   return (
-    <div className='w-full lg:text-justify'>
+    <div className='w-full'>
       <h1>Портал</h1>
-      <p className='lg:text-left indent-6'>Портал позволяет анализировать предметные области, формально записывать системы определений (концептуальные схемы) и синтезировать их с помощью математического аппарата родов структур.</p>
+      <p className='lg:text-left indent-10'>Портал позволяет анализировать предметные области, формально записывать системы определений (концептуальные схемы) и синтезировать их с помощью математического аппарата родов структур.</p>
-      <p className='lg:text-left indent-6'>Навигация по порталу осуществляется верхнюю панель или ссылки в "подвале" страницы. Их можно скрыть с помощью кнопки в правом верхнем углу</p>
+      <p className='lg:text-left indent-10'>Навигация по порталу осуществляется верхнюю панель или ссылки в "подвале" страницы. Их можно скрыть с помощью кнопки в правом верхнем углу</p>
-      <p className='lg:text-left indent-6'>В меню пользователя (правый верхний угол) редактирование данных пользователя и изменение цветовой темы.</p>
+      <p className='lg:text-left indent-10'>В меню пользователя (правый верхний угол) редактирование данных пользователя и изменение цветовой темы.</p>
       <p className='mt-4 mb-1 text-center'><b>Основные разделы</b></p>
-      <li><TextURL text='Библиотека' href='/library' /> - все схемы доступные пользователю</li>
+      <li className='lg:text-left indent-5'><TextURL text='Библиотека' href='/library' /> - все схемы доступные пользователю</li>
-      <li><TextURL text='Общие схемы' href={`/library?filter=${LibraryFilterStrategy.COMMON}`} /> - общедоступные схемы и инструменты поиска и навигации по ним</li>
+      <li className='lg:text-left indent-5'><TextURL text='Общие схемы' href={`/library?filter=${LibraryFilterStrategy.COMMON}`} /> - общедоступные схемы и инструменты поиска и навигации по ним</li>
-      <li><TextURL text='Мои схемы' href={`/library?filter=${LibraryFilterStrategy.PERSONAL}`} /> - отслеживаемые и редактируемые схемы. Основной рабочий раздел</li>
+      <li className='lg:text-left indent-5'><TextURL text='Мои схемы' href={`/library?filter=${LibraryFilterStrategy.PERSONAL}`} /> - отслеживаемые и редактируемые схемы. Основной рабочий раздел</li>
-      <li><TextURL text='Профиль' href='/profile' /> - данные пользователя и смена пароля</li>
+      <li className='lg:text-left indent-5'><TextURL text='Профиль' href='/profile' /> - данные пользователя и смена пароля</li>
       <p className='mt-4 mb-1 text-center'><b>Поддержка</b></p>
-      <p className='lg:text-left indent-6'>Портал разрабатывается <TextURL text='Центром Концепт' href={urls.concept}/> и является проектом с открытым исходным кодом, доступным на <TextURL text='Github' href={urls.gitrepo}/>.</p>
+      <p className='lg:text-left indent-10'>Портал разрабатывается <TextURL text='Центром Концепт' href={urls.concept}/> и является проектом с открытым исходным кодом, доступным на <TextURL text='Github' href={urls.gitrepo}/>.</p>
-      <p className='lg:text-left indent-6'>Ждём Ваши пожелания по доработке, найденные ошибки и иные предложения по адресу <TextURL href={urls.mailportal} text='portal@acconcept.ru'/></p>
+      <p className='lg:text-left indent-10'>Ждём Ваши пожелания по доработке, найденные ошибки и иные предложения по адресу <TextURL href={urls.mailportal} text='portal@acconcept.ru'/></p>
       <p></p>
     </div>
   );

rsconcept/frontend/src/components/Help/HelpRSFormMeta.tsx

@@ -1,7 +1,7 @@
 function HelpRSFormMeta() {
   return (
     <div>
-      <h1>Концептуальная схема</h1>
+      <h1>Паспорт схемы</h1>
       <p><b>Владелец</b> - пользователь, обладающий правом редактирования</p>
       <p>Для <b>общедоступных</b> схем владельцем может стать любой пользователь</p>
       <p>Для <b>библиотечных</b> схем правом редактирования обладают только администраторы</p>

rsconcept/frontend/src/components/Help/HelpRSLang.tsx

@@ -20,7 +20,7 @@ function HelpRSLang() {
     <div className='flex flex-col w-full gap-4'>
       <div>
         <h1>Язык родов структур</h1>
-        <p>Формальная запись (<u>экспликация</u>) концептуальных схем осуществляется с помощью языка родов структур.</p>
+        <p>Формальная запись (<i>экспликация</i>) концептуальных схем осуществляется с помощью языка родов структур.</p>
         <p>Данный математический аппарат основан на аксиоматической теории множеств Цермелло-Френкеля и аппарате родов структур Н.Бурбаки.</p>
         <p>Для ознакомления с основами родов структур можно использовать следующие материалы:</p>
         <ul>

rsconcept/frontend/src/components/Help/HelpTermGraph.tsx

@@ -4,7 +4,7 @@ import InfoCstStatus from './InfoCstStatus';
 
 function HelpTermGraph() {
   return (
-    <div className='flex text-sm'>
+    <div className='flex'>
       <div> 
         <h1>Настройка графа</h1>
         <p><b>Цвет</b> - выбор правила покраски узлов</p>
@@ -20,7 +20,7 @@ function HelpTermGraph() {
       <div>
         <h1>Горячие клавиши</h1>
         <p><b>Клик на конституенту</b> - выделение, включая скрытые конституенты</p>
-        <p><b>Довйной клик</b> - редактирование конституенты</p>
+        <p><b>Двойной клик</b> - редактирование конституенты</p>
         <p><b>Delete</b> - удалить выбранные</p>
 
         <Divider margins='mt-2' />

rsconcept/frontend/src/components/Help/InfoCstClass.tsx

@@ -17,7 +17,7 @@ function InfoCstClass({ title }: InfoCstClassProps) {
         return (
         <p key={`${prefixes.cst_status_list}${index}`}>
           <span
-            className='px-1 inline-block font-semibold min-w-[6.5rem] text-center borde'
+            className='px-1 inline-block font-semibold min-w-[7rem] text-center border'
             style={{backgroundColor: getCstClassColor(cstClass, colors)}}
           
           >

rsconcept/frontend/src/components/Help/InfoCstStatus.tsx

@@ -17,7 +17,7 @@ function InfoCstStatus({ title }: InfoCstStatusProps) {
         return (
         <p key={`${prefixes.cst_status_list}${index}`}>
           <span
-            className='px-1 inline-block font-semibold min-w-[4rem] text-center border'
+            className='px-1 inline-block font-semibold min-w-[5rem] text-center border'
             style={{backgroundColor: getCstStatusColor(status, colors)}}
           >
             {info.text}

rsconcept/frontend/src/index.css

@@ -27,11 +27,11 @@
 
 @layer components {
   :root {
-    @apply bg-gray-50
+    @apply bg-gray-50;
   }
 
   .dark {
-    @apply text-zinc-200 bg-gray-800
+    @apply text-zinc-200 bg-[#181818]
   }
 
   h1 {
@@ -63,7 +63,7 @@
   }
 
   .clr-modal {
-    @apply bg-gray-300 dark:bg-gray-800 
+    @apply bg-gray-300 dark:bg-[#272727] 
   }
 
   .clr-nav {
@@ -71,7 +71,7 @@
   }
 
   .clr-input {
-    @apply dark:bg-[#070b12] bg-white disabled:bg-[#c6c6c6] dark:disabled:bg-[#181818]
+    @apply dark:bg-[#181818] bg-white disabled:bg-[#c6c6c6] dark:disabled:bg-[#181818]
   }
 
   .clr-footer {
@@ -79,11 +79,11 @@
   }
 
   .clr-card {
-    @apply bg-gray-50 dark:bg-gray-600 
+    @apply bg-gray-50 dark:bg-[#272727]
   }
 
   .clr-tab {
-    @apply clr-border text-gray-600 dark:text-zinc-200 hover:bg-gray-300 dark:hover:bg-gray-400 
+    @apply clr-border text-gray-700 dark:text-zinc-200 hover:bg-blue-200 dark:hover:bg-[#EA580C]
   }
 
   .clr-hover {
@@ -106,7 +106,7 @@
     @apply text-white bg-blue-400 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-400 dark:text-black disabled:bg-gray-400 dark:disabled:bg-gray-600
   }
   .clr-btn-default {
-    @apply bg-[#f0f2f7] hover:bg-gray-300 dark:bg-gray-600 dark:hover:bg-gray-400 text-btn
+    @apply bg-[#f0f2f7] hover:bg-gray-300 dark:bg-[#434343] dark:hover:bg-[#606060] text-btn
   }
 
   /* Transparent button */
@@ -115,7 +115,7 @@
   }
 
   .clr-checkbox {
-    @apply bg-white dark:bg-gray-900 checked:bg-blue-700 dark:checked:bg-orange-500
+    @apply bg-white dark:bg-[#181818] checked:bg-blue-700 dark:checked:bg-orange-500
   }
 
   .clr-input-red {

rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx

@@ -43,9 +43,9 @@ function ViewLibrary({ items, cleanQuery }: ViewLibraryProps) {
             className='flex items-center justify-start gap-1'
             id={`${prefixes.library_list}${item.id}`}
           >
-            {user && user.subscriptions.includes(item.id) && <EyeIcon size={3}/>}
+            {user && user.subscriptions.includes(item.id) && <p title="Отслеживаемая"><EyeIcon size={3}/></p>}
-            {item.is_common && <GroupIcon size={3}/>}
+            {item.is_common && <p title="Общедоступная"><GroupIcon size={3}/></p>}
-            {item.is_canonical && <EducationIcon size={3}/>}
+            {item.is_canonical && <p title="Неизменяемая"><EducationIcon size={3}/></p>}
           </div>
         </>);
       },

rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx

@@ -15,7 +15,7 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
       ([topic, info], index) => {
         return (
           <div key={`${prefixes.topic_list}${index}`}
-            className={`px-3 py-1 border-y cursor-pointer clr-hover clr-border ${activeTopic === topic ? 'font-semibold underline' : ''}`}
+            className={`px-3 py-1 border-y cursor-pointer hover:bg-blue-200 dark:hover:bg-[#EA580C] clr-border ${activeTopic === topic ? 'font-bold bg-blue-200 dark:bg-[#EA580C] ' : ''}`}
             title={info.tooltip}
             onClick={() => onChangeTopic(topic)}
           >

rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx

@@ -15,7 +15,7 @@ interface ViewTopicProps {
 
 function ViewTopic({ topic }: ViewTopicProps) {
   return (
-    <div className='px-2 py-2'>
+    <div className='w-full px-2 py-2'>
       {topic === HelpTopic.MAIN && <HelpMain />}
       {topic === HelpTopic.RSLANG && <HelpRSLang />}
       {topic === HelpTopic.LIBRARY && <HelpLibrary />}

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm.tsx

@@ -138,7 +138,7 @@ function EditorRSForm({ onDestroy, onClaim, onShare, onDownload }: EditorRSFormP
           disabled={!isEditable}
           onChange={event => setCommon(event.target.checked)}
         />
-        <Checkbox id='canonical' label='Библиотечная схема'
+        <Checkbox id='canonical' label='Неизменяемая схема'
           widthClass='w-fit'
           value={canonical}
           tooltip='Только администраторы могут присваивать схемам библиотечный статус'

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -293,7 +293,7 @@ function RSTabs() {
       selectedIndex={activeTab}
       onSelect={onSelectTab}
       defaultFocus={true}
-      selectedTabClassName='font-bold'
+      selectedTabClassName='font-bold bg-blue-200 dark:bg-[#EA580C]'
     >
       <TabList className='flex items-start pl-2 border-b border-r-2 select-none w-fit clr-bg-pop clr-border'>
         <RSTabsMenu 

rsconcept/frontend/src/utils/color.ts

@@ -43,15 +43,15 @@ export const lightT: IColorTheme = {
 export const darkT: IColorTheme = {
   red: '#bf0d00',
   green: '#2b8000',
-  blue: '#394bbf',
+  blue: '#bf0d00',
   teal: '#0099bf',
   orange: '#964600',
 
   text: '#e4e4e7',
   
-  input: '#070b12',
+  input: '#181818',
-  inputDisabled: '#374151', // bg-gray-700
+  inputDisabled: '#272727', // bg-gray-700
-  selection: '#8c6000',
+  selection: '#394bbf',
   selectionError: '#592b2b'
 };
 

rsconcept/frontend/src/utils/staticUI.ts

@@ -361,23 +361,23 @@ export const mapTopicInfo: Map<HelpTopic, IDescriptor> = new Map([
     tooltip: 'Справка по языку родов структур и экспликации'
   }],
   [ HelpTopic.LIBRARY, {
-    text: 'Библиотека',
+    text: 'Библиотека:',
     tooltip: 'Интерфейс работы с библиотекой схем'
   }],
   [ HelpTopic.RSFORM, {
-    text: 'Концептуальная схема',
+    text: '- паспорт схемы',
     tooltip: 'Интерфейс работы с описанием схемы'
   }],
   [ HelpTopic.CSTLIST, {
-    text: 'Список конституент',
+    text: '- список конституент',
     tooltip: 'Интерфейс работы со списком конституент'
   }],
   [ HelpTopic.CONSTITUENTA, {
-    text: 'Конституента',
+    text: '- конституента',
     tooltip: 'Интерфейс редактирования конституенты'
   }],
   [ HelpTopic.GRAPH_TERM, {
-    text: 'Граф термов',
+    text: '- граф термов',
     tooltip: 'Интерфейс работ с графом термов схемы'
   }],
   [ HelpTopic.EXTEOR, {