From a38cca9c0d4b447d8ba172d7175b08449c784824 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Wed, 9 Aug 2023 10:33:42 +0300
Subject: [PATCH] UI fixes

---
 .../frontend/src/components/Common/Button.tsx    |  4 +++-
 .../src/pages/RSFormPage/EditorConstituenta.tsx  |  4 ++--
 .../frontend/src/pages/RSFormPage/RSTabsMenu.tsx |  5 ++++-
 .../pages/RSFormPage/elements/RSFormStats.tsx    |  9 ++++-----
 .../RSFormPage/elements/ViewSideConstituents.tsx | 16 ++++------------
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/rsconcept/frontend/src/components/Common/Button.tsx b/rsconcept/frontend/src/components/Common/Button.tsx
index 90d5b03f..0e2f9524 100644
--- a/rsconcept/frontend/src/components/Common/Button.tsx
+++ b/rsconcept/frontend/src/components/Common/Button.tsx
@@ -13,7 +13,9 @@ extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'child
 function Button({
   id, text, icon, tooltip,
   dense, disabled,
-  borderClass = 'border rounded', colorClass = 'clr-btn-default', widthClass = 'w-fit h-fit',
+  borderClass = 'border rounded',
+  colorClass = 'clr-btn-default',
+  widthClass = 'w-fit h-fit',
   loading, onClick,
   ...props
 }: ButtonProps) {
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
index 575930f9..c68f6a95 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx
@@ -109,8 +109,8 @@ function EditorConstituenta({ activeID, onShowAST, onCreateCst, onOpenEdit, onDe
   }
 
   return (
-    <div className='flex items-start w-full gap-2'>
-      <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min px-4 py-2 mb-2 border'>
+    <div className='flex items-stretch w-full gap-2 mb-2'>
+      <form onSubmit={handleSubmit} className='flex-grow min-w-[50rem] max-w-min max-h-fit px-4 py-2 border'>
         <div className='flex items-start justify-between'>
             <button type='submit'
               title='Сохранить изменения'
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
index 4e5020c7..e33e8549 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/RSTabsMenu.tsx
@@ -60,12 +60,13 @@ function RSTabsMenu({showUploadDialog, showCloneDialog}: RSTabsMenuProps) {
   }, [schemaMenu]);
 
   return (    
-    <div className='flex items-center w-fit'>
+    <div className='flex items-stretch w-fit'>
       <div ref={schemaMenu.ref}>
         <Button
           tooltip='Действия'
           icon={<MenuIcon size={5}/>}
           borderClass=''
+          widthClass='h-full w-fit'
           dense
           onClick={schemaMenu.toggle}
         />
@@ -107,6 +108,7 @@ function RSTabsMenu({showUploadDialog, showCloneDialog}: RSTabsMenuProps) {
         <Button
           tooltip={'измнение: ' + (isEditable ? '[доступно]' : '[запрещено]')}
           borderClass=''
+          widthClass='h-full w-fit'
           icon={<PenIcon size={5} color={isEditable ? 'text-green' : 'text-red'}/>}
           dense
           onClick={editMenu.toggle}
@@ -143,6 +145,7 @@ function RSTabsMenu({showUploadDialog, showCloneDialog}: RSTabsMenuProps) {
             ? <EyeIcon color='text-primary' size={5}/>
             : <EyeOffIcon size={5}/>
           }
+          widthClass='h-full w-fit'
           borderClass=''
           dense
           onClick={toggleTracking}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
index eef4743d..dcef4ef4 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/RSFormStats.tsx
@@ -1,4 +1,3 @@
-import Card from '../../../components/Common/Card';
 import Divider from '../../../components/Common/Divider';
 import LabeledText from '../../../components/Common/LabeledText';
 import { type IRSFormStats } from '../../../utils/models';
@@ -9,7 +8,7 @@ interface RSFormStatsProps {
 
 function RSFormStats({ stats }: RSFormStatsProps) {
   return (
-    <Card>
+    <div className='px-4 py-2 border'>
       <LabeledText id='count_all'
         label='Всего конституент '
         text={stats.count_all}
@@ -28,12 +27,12 @@ function RSFormStats({ stats }: RSFormStatsProps) {
         label='Невычислимы '
         text={stats.count_incalc}
       />}
-      <Divider />
+      <Divider margins='my-1' />
       <LabeledText id='count_termin'
         label='Термины '
         text={stats.count_termin}
       />
-      <Divider />
+      <Divider margins='my-1' />
       { stats.count_base > 0 &&
       <LabeledText id='count_base'
         label='Базисные множества '
@@ -74,7 +73,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
         label='Теормы '
         text={stats.count_theorem}
       />}
-    </Card>
+    </div>
   );
 }
 
diff --git a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
index a8d83453..3bf5709d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/elements/ViewSideConstituents.tsx
@@ -18,7 +18,7 @@ interface ViewSideConstituentsProps {
 }
 
 function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideConstituentsProps) {
-  const { darkMode, noNavigation } = useConceptTheme();
+  const { darkMode } = useConceptTheme();
   const { schema } = useRSForm();
   
   const [filterMatch, setFilterMatch] = useLocalStorage('side-filter-match', CstMatchMode.ALL);
@@ -139,21 +139,13 @@ function ViewSideConstituents({ expression, activeID, onOpenEdit }: ViewSideCons
     ], []
   );
   
-  const maxHeight = useMemo(
-  () => {
-    // TODO: calculate hieght based on left editor column height
-    return !noNavigation ? 
-      'max-h-[calc(100vh-10.3rem)]'
-    : 'max-h-[calc(100vh-10.3rem)] '; 
-  }, [noNavigation]);
-  
   return (
-    <div className={`${maxHeight} min-h-[40rem] overflow-y-scroll border flex-grow w-full`}>
-      <div className='sticky top-0 left-0 right-0 z-10 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b-2 border-gray-400 rounded dark:bg-gray-700 dark:border-gray-300'>
+    <div className='max-h-[calc(100vh-10.3rem)] min-h-[40rem] overflow-y-scroll border flex-grow w-full'>
+      <div className='sticky top-0 left-0 right-0 z-10 flex items-center justify-between w-full gap-1 px-2 py-1 bg-white border-b rounded clr-bg-pop clr-border'>
         <div className='flex items-center justify-between w-full'>
           <MatchModePicker value={filterMatch} onChange={setFilterMatch}/>
           <input type='text'
-            className='w-full px-2 outline-none dark:bg-gray-700 hover:text-clip'
+            className='w-full px-2 bg-white outline-none hover:text-clip clr-bg-pop clr-border'
             placeholder='наберите текст фильтра'
             value={filterText}
             onChange={event => { setFilterText(event.target.value); }}