Improve UI design

rsconcept/frontend/src/components/Common/Dropdown.tsx

@@ -7,7 +7,7 @@ interface DropdownProps {
 function Dropdown({ children, dimensions = 'w-fit', stretchLeft }: DropdownProps) {
   return (
     <div className='relative text-sm'>
-    <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} mt-2 py-1 z-tooltip flex flex-col items-stretch justify-start origin-top-right border divide-y divide-inherit rounded-md shadow-lg clr-input ${dimensions}`}>
+    <div className={`absolute ${stretchLeft ? 'right-0' : 'left-0'} mt-2 z-tooltip flex flex-col items-stretch justify-start origin-top-right border divide-y divide-inherit rounded-md shadow-lg clr-input ${dimensions}`}>
       {children}
     </div>
     </div>

rsconcept/frontend/src/components/Common/Form.tsx

@@ -11,7 +11,7 @@ function Form({ title, onSubmit, dimensions = 'max-w-xs', children }: FormProps)
       className={`border shadow-md py-2 clr-app px-6 flex flex-col gap-3 ${dimensions}`}
       onSubmit={onSubmit}
     >
-      { title && <h1 className='text-xl font-bold whitespace-nowrap'>{title}</h1> }
+      { title && <h1 className='text-xl whitespace-nowrap'>{title}</h1> }
       {children}
     </form>
   );

rsconcept/frontend/src/components/Common/SelectMulti.tsx

@@ -35,6 +35,10 @@ function SelectMulti<
       borderWidth: '1px',
       borderColor: colors.border
     }),
+    menuList: (styles) => ({
+      ...styles,
+      padding: '0px'
+    }),
     input: (styles) => ({...styles}),
     placeholder: (styles) => ({...styles}),
     multiValue: styles => ({

rsconcept/frontend/src/components/Common/SelectSingle.tsx

@@ -27,6 +27,10 @@ function SelectSingle<
       borderRadius: '0.25rem',
       cursor: isDisabled ? 'not-allowed' : 'pointer'
     }),
+    menuList: (styles) => ({
+      ...styles,
+      padding: '0px'
+    }),
     option: (styles, { isSelected }) => ({
       ...styles,
       backgroundColor: isSelected ? colors.bgSelected : styles.backgroundColor,

rsconcept/frontend/src/components/Navigation/UserDropdown.tsx

@@ -1,7 +1,6 @@
 import { useAuth } from '../../context/AuthContext';
 import { useConceptNavigation } from '../../context/NagivationContext';
 import { useConceptTheme } from '../../context/ThemeContext';
-import { LibraryFilterStrategy } from '../../models/miscelanious';
 import Dropdown from '../Common/Dropdown';
 import DropdownButton from '../Common/DropdownButton';
 
@@ -25,11 +24,6 @@ function UserDropdown({ hideDropdown }: UserDropdownProps) {
     logout(() => navigateTo('/login/'));
   };
 
-  const navigateMyWork = () => {
-    hideDropdown();
-    navigateTo(`/library?filter=${LibraryFilterStrategy.PERSONAL}`);
-  };
-
   return (
     <Dropdown dimensions='w-36' stretchLeft>
       <DropdownButton
@@ -44,9 +38,6 @@ function UserDropdown({ hideDropdown }: UserDropdownProps) {
       >
         {darkMode ? 'Светлая тема' : 'Темная тема'}
       </DropdownButton>
-      <DropdownButton onClick={navigateMyWork}>
-        Мои схемы
-      </DropdownButton>
       <DropdownButton onClick={logoutAndRedirect}>
         <b>Выйти...</b>
       </DropdownButton>

rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx

@@ -229,7 +229,7 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
     canSubmit={isValid}
     onSubmit={handleSubmit}
   >
-  <div className='min-w-[40rem] max-w-[40rem] flex flex-col gap-4 mb-4 mt-2 min-h-[34rem]'>
+  <div className='min-w-[40rem] max-w-[40rem] flex flex-col gap-4 mb-4 min-h-[34rem]'>
     <div className='flex items-center self-center flex-start'>
       <ReferenceTypeButton 
         type={ReferenceType.ENTITY}

rsconcept/frontend/src/components/RefsInput/ReferenceTypeButton.tsx

@@ -12,7 +12,7 @@ function ReferenceTypeButton({ type, isSelected, onSelect, ...props }: Reference
   return (
     <button type='button' tabIndex={-1}
       onClick={() => onSelect(type)}
-      className={`min-w-[12rem] px-2 py-1 border font-semibold rounded-none cursor-pointer clr-btn-clear clr-hover ${isSelected ? 'clr-selected': ''}`}
+      className={`min-w-[12rem] px-2 py-1 border font-semibold small-caps rounded-none cursor-pointer clr-btn-clear clr-hover ${isSelected ? 'clr-selected': ''}`}
       {...props}
     >
       {labelReferenceType(type)}

rsconcept/frontend/src/index.css

@@ -122,7 +122,11 @@
 
 @layer components {
   h1 {
-    @apply text-lg font-bold text-center
+    @apply text-lg font-semibold text-center
+  }
+
+  b {
+    @apply font-semibold
   }
 
   .border {

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

@@ -9,8 +9,8 @@ interface TopicsListProps {
 
 function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
   return (
-    <div className='sticky top-0 left-0 border-r border-b min-w-[13rem] pt-2 select-none flex flex-col clr-controls'>
+    <div className='sticky top-0 left-0 border-x min-w-[13rem] select-none flex flex-col clr-controls small-caps h-fit'>
-      <div className='mb-2 font-semibold text-center'>Справка</div>
+      <div className='my-2 text-lg text-center'>Справка</div>
       { Object.values(HelpTopic).map(
       (topic, index) => {
         return (

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

@@ -34,7 +34,7 @@ function ManualsPage() {
   }, [search, setActiveTopic, navigateTopic]);
 
   return (
-    <div className='flex w-full gap-2 justify-stretch' style={{minHeight: mainHeight}}>
+    <div className='flex w-full gap-2 justify-start items-start' style={{minHeight: mainHeight}}>
       <TopicsList 
         activeTopic={activeTopic}
         onChangeTopic={topic => onSelectTopic(topic)}

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

@@ -136,8 +136,8 @@ function EditorConstituenta({
   }
 
   return (
-  <div className='flex w-full max-w-[1500px] gap-2 mt-2 justify-stretch'>
+  <div className='flex w-full max-w-[1500px] gap-2 justify-stretch'>
-    <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2 border'>
+    <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2'>
       <div className='relative w-full'>
       <div className='absolute top-0 right-0 flex items-start justify-between w-full'>
         {activeCst && 
@@ -249,7 +249,7 @@ function EditorConstituenta({
       </div>
     </form>
     {(windowSize.width ?? 0) >= SIDELIST_HIDE_THRESHOLD &&
-    <div className='self-stretch w-full border'>
+    <div className='self-stretch w-full border mt-10'>
       <ViewSideConstituents
         expression={expression}
         baseHeight={UNFOLDED_HEIGHT}

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

@@ -60,7 +60,7 @@ function RSTabs() {
     cstCreate, cstDelete, cstRename, subscribe, unsubscribe, cstUpdate
   } = useRSForm();
   const { destroySchema } = useLibrary();
-  const { setNoFooter } = useConceptTheme();
+  const { setNoFooter, noNavigation } = useConceptTheme();
 
   const { isModified, setIsModified } = useModificationPrompt();
 
@@ -89,6 +89,13 @@ function RSTabs() {
 
   const [showEditTerm, setShowEditTerm] = useState(false);
 
+  const panelHeight = useMemo(
+  () => {
+    return !noNavigation ? 
+      'calc(100vh - 4.8rem - 4px)'
+    : 'calc(100vh - 2rem - 4px)';
+  }, [noNavigation]);
+
   useLayoutEffect(() => {
     if (schema) {
       const oldTitle = document.title
@@ -386,48 +393,50 @@ function RSTabs() {
         <ConceptTab className='min-w-[6.5rem]'>Граф термов</ConceptTab>
       </TabList>
 
-      <TabPanel className='flex gap-4 w-fit'>
+      <div className='overflow-y-auto' style={{ maxHeight: panelHeight}}>
-        <EditorRSForm
+        <TabPanel className='flex gap-4 w-fit'>
-          isModified={isModified}
+          <EditorRSForm
-          setIsModified={setIsModified}
+            isModified={isModified}
-          onDownload={onDownloadSchema}
+            setIsModified={setIsModified}
-          onDestroy={onDestroySchema}
+            onDownload={onDownloadSchema}
-          onClaim={onClaimSchema}
+            onDestroy={onDestroySchema}
-          onShare={onShareSchema}
+            onClaim={onClaimSchema}
-        />
+            onShare={onShareSchema}
-        {schema.stats && <RSFormStats stats={schema.stats}/>}
+          />
-      </TabPanel>
+          {schema.stats && <RSFormStats stats={schema.stats}/>}
+        </TabPanel>
 
-      <TabPanel className='w-full'>
+        <TabPanel className='w-full'>
-        <EditorItems
+          <EditorItems
-          onOpenEdit={onOpenCst}
+            onOpenEdit={onOpenCst}
-          onCreateCst={promptCreateCst}
+            onCreateCst={promptCreateCst}
-          onDeleteCst={promptDeleteCst}
+            onDeleteCst={promptDeleteCst}
-        />
+          />
-      </TabPanel>
+        </TabPanel>
 
-      <TabPanel className='flex justify-center w-full'>
+        <TabPanel className='flex justify-center w-full'>
-        <EditorConstituenta
+          <EditorConstituenta
-          isModified={isModified}
+            isModified={isModified}
-          setIsModified={setIsModified}
+            setIsModified={setIsModified}
-          activeID={activeID}
+            activeID={activeID}
-          activeCst={activeCst}
+            activeCst={activeCst}
-          onOpenEdit={onOpenCst}
+            onOpenEdit={onOpenCst}
-          onShowAST={onShowAST}
+            onShowAST={onShowAST}
-          onCreateCst={promptCreateCst}
+            onCreateCst={promptCreateCst}
-          onDeleteCst={promptDeleteCst}
+            onDeleteCst={promptDeleteCst}
-          onRenameCst={promptRenameCst}
+            onRenameCst={promptRenameCst}
-          onEditTerm={promptShowEditTerm}
+            onEditTerm={promptShowEditTerm}
-        />
+          />
-      </TabPanel>
+        </TabPanel>
 
-      <TabPanel>
+        <TabPanel>
-        <EditorTermGraph 
+          <EditorTermGraph 
-          onOpenEdit={onOpenCst}
+            onOpenEdit={onOpenCst}
-          onCreateCst={promptCreateCst}
+            onCreateCst={promptCreateCst}
-          onDeleteCst={promptDeleteCst}
+            onDeleteCst={promptDeleteCst}
-        />
+          />
-      </TabPanel>
+        </TabPanel>
+      </div>
     </Tabs>
     </>}
   </div>);

rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx

@@ -206,8 +206,8 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
   () => {
     const siblingHeight = `${baseHeight} - ${LOCAL_NAVIGATION_H}`
     return (noNavigation ? 
-      `calc(min(100vh - 5.2rem, ${siblingHeight}))`
+      `calc(min(100vh - 7.2rem, ${siblingHeight}))`
-    : `calc(min(100vh - 8.7rem, ${siblingHeight}))`);
+    : `calc(min(100vh - 10.7rem, ${siblingHeight}))`);
   }, [noNavigation, baseHeight]);
 
   return (<>