From 2bc14c24bdac9de80a95ccbf6f84de74c83553fd Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Sat, 14 Oct 2023 17:14:40 +0300
Subject: [PATCH] Improve UI design

---
 .../src/components/Common/Dropdown.tsx        |  2 +-
 .../frontend/src/components/Common/Form.tsx   |  2 +-
 .../src/components/Common/SelectMulti.tsx     |  4 +
 .../src/components/Common/SelectSingle.tsx    |  4 +
 .../components/Navigation/UserDropdown.tsx    |  9 --
 .../components/RefsInput/DlgEditReference.tsx |  2 +-
 .../RefsInput/ReferenceTypeButton.tsx         |  2 +-
 rsconcept/frontend/src/index.css              |  6 +-
 .../src/pages/ManualsPage/TopicsList.tsx      |  4 +-
 .../frontend/src/pages/ManualsPage/index.tsx  |  2 +-
 .../pages/RSFormPage/EditorConstituenta.tsx   |  6 +-
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  | 89 ++++++++++---------
 .../elements/ViewSideConstituents.tsx         |  4 +-
 13 files changed, 74 insertions(+), 62 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/Dropdown.tsx b/rsconcept/frontend/src/components/Common/Dropdown.tsx
index 6b669ea6..dd57ca5e 100644
--- a/rsconcept/frontend/src/components/Common/Dropdown.tsx
+++ b/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>
diff --git a/rsconcept/frontend/src/components/Common/Form.tsx b/rsconcept/frontend/src/components/Common/Form.tsx
index 417016d1..8290359d 100644
--- a/rsconcept/frontend/src/components/Common/Form.tsx
+++ b/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>
   );
diff --git a/rsconcept/frontend/src/components/Common/SelectMulti.tsx b/rsconcept/frontend/src/components/Common/SelectMulti.tsx
index b146d5aa..bfa68d7f 100644
--- a/rsconcept/frontend/src/components/Common/SelectMulti.tsx
+++ b/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 => ({
diff --git a/rsconcept/frontend/src/components/Common/SelectSingle.tsx b/rsconcept/frontend/src/components/Common/SelectSingle.tsx
index 581558d3..4bb57e61 100644
--- a/rsconcept/frontend/src/components/Common/SelectSingle.tsx
+++ b/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,
diff --git a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx b/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
index 904f1d6b..f26946b0 100644
--- a/rsconcept/frontend/src/components/Navigation/UserDropdown.tsx
+++ b/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>
diff --git a/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx b/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx
index 9d7651dc..0d9dfd70 100644
--- a/rsconcept/frontend/src/components/RefsInput/DlgEditReference.tsx
+++ b/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}
diff --git a/rsconcept/frontend/src/components/RefsInput/ReferenceTypeButton.tsx b/rsconcept/frontend/src/components/RefsInput/ReferenceTypeButton.tsx
index 2a67d2d1..886459b6 100644
--- a/rsconcept/frontend/src/components/RefsInput/ReferenceTypeButton.tsx
+++ b/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)}
diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css
index b6583729..aac11cf5 100644
--- a/rsconcept/frontend/src/index.css
+++ b/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 {
diff --git a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx b/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
index 5623e6af..054c370a 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx
+++ b/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='mb-2 font-semibold text-center'>Справка</div>
+    <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='my-2 text-lg text-center'>Справка</div>
       { Object.values(HelpTopic).map(
       (topic, index) => {
         return (
diff --git a/rsconcept/frontend/src/pages/ManualsPage/index.tsx b/rsconcept/frontend/src/pages/ManualsPage/index.tsx
index 3bf88c91..290ca85a 100644
--- a/rsconcept/frontend/src/pages/ManualsPage/index.tsx
+++ b/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)}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 7e222c1f..905dd30c 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/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'>
-    <form onSubmit={handleSubmit} className='min-w-[50rem] max-w-min px-4 py-2 border'>
+  <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'>
       <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}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index d670ba30..9a8ea61a 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/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'>
-        <EditorRSForm
-          isModified={isModified}
-          setIsModified={setIsModified}
-          onDownload={onDownloadSchema}
-          onDestroy={onDestroySchema}
-          onClaim={onClaimSchema}
-          onShare={onShareSchema}
-        />
-        {schema.stats && <RSFormStats stats={schema.stats}/>}
-      </TabPanel>
+      <div className='overflow-y-auto' style={{ maxHeight: panelHeight}}>
+        <TabPanel className='flex gap-4 w-fit'>
+          <EditorRSForm
+            isModified={isModified}
+            setIsModified={setIsModified}
+            onDownload={onDownloadSchema}
+            onDestroy={onDestroySchema}
+            onClaim={onClaimSchema}
+            onShare={onShareSchema}
+          />
+          {schema.stats && <RSFormStats stats={schema.stats}/>}
+        </TabPanel>
 
-      <TabPanel className='w-full'>
-        <EditorItems
-          onOpenEdit={onOpenCst}
-          onCreateCst={promptCreateCst}
-          onDeleteCst={promptDeleteCst}
-        />
-      </TabPanel>
+        <TabPanel className='w-full'>
+          <EditorItems
+            onOpenEdit={onOpenCst}
+            onCreateCst={promptCreateCst}
+            onDeleteCst={promptDeleteCst}
+          />
+        </TabPanel>
 
-      <TabPanel className='flex justify-center w-full'>
-        <EditorConstituenta
-          isModified={isModified}
-          setIsModified={setIsModified}
-          activeID={activeID}
-          activeCst={activeCst}
-          onOpenEdit={onOpenCst}
-          onShowAST={onShowAST}
-          onCreateCst={promptCreateCst}
-          onDeleteCst={promptDeleteCst}
-          onRenameCst={promptRenameCst}
-          onEditTerm={promptShowEditTerm}
-        />
-      </TabPanel>
+        <TabPanel className='flex justify-center w-full'>
+          <EditorConstituenta
+            isModified={isModified}
+            setIsModified={setIsModified}
+            activeID={activeID}
+            activeCst={activeCst}
+            onOpenEdit={onOpenCst}
+            onShowAST={onShowAST}
+            onCreateCst={promptCreateCst}
+            onDeleteCst={promptDeleteCst}
+            onRenameCst={promptRenameCst}
+            onEditTerm={promptShowEditTerm}
+          />
+        </TabPanel>
 
-      <TabPanel>
-        <EditorTermGraph 
-          onOpenEdit={onOpenCst}
-          onCreateCst={promptCreateCst}
-          onDeleteCst={promptDeleteCst}
-        />
-      </TabPanel>
+        <TabPanel>
+          <EditorTermGraph 
+            onOpenEdit={onOpenCst}
+            onCreateCst={promptCreateCst}
+            onDeleteCst={promptDeleteCst}
+          />
+        </TabPanel>
+      </div>
     </Tabs>
     </>}
   </div>);
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index 5fcf920b..edc1680b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/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 - 8.7rem, ${siblingHeight}))`);
+      `calc(min(100vh - 7.2rem, ${siblingHeight}))`
+    : `calc(min(100vh - 10.7rem, ${siblingHeight}))`);
   }, [noNavigation, baseHeight]);
 
   return (<>