Small UI improvement

rsconcept/frontend/README.md

@@ -9,7 +9,7 @@ Styling conventions
   <pre>
   - layer: z-position
   - outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
-  - rectangle: mt-3 min-w-fit min-w-10 flex-grow
+  - rectangle: mt-3 min-w-fit min-w-10 flex-grow shrink-0
   - inner layout: px-3 py-2 flex flex-col gap-3 justify-start items-center
   - overflow behavior: overflow-scroll
   - border: borer-2 outline-none shadow-md

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

@@ -131,7 +131,7 @@ function FormConstituenta({
   </Overlay>
   <form id={id}
     className={clsx(
-      'mt-1 min-w-[47.8rem] max-w-[47.8rem]',
+      'mt-1 w-[47.8rem] shrink-0',
       'px-4 py-1',
       classnames.flex_col
     )}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx

@@ -2,7 +2,6 @@
 
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import { BiBug } from 'react-icons/bi';
 
 import { ConceptLoader } from '@/components/Common/ConceptLoader';
 import { useConceptTheme } from '@/context/ThemeContext';
@@ -13,6 +12,8 @@ import { IExpressionParse, ParsingStatus } from '@/models/rslang';
 import { colorbgCstStatus } from '@/utils/color';
 import { labelExpressionStatus } from '@/utils/labels';
 
+import StatusIcon from './StatusIcon';
+
 interface StatusBarProps {
   processing?: boolean
   isModified?: boolean
@@ -39,7 +40,7 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze
     title='Проверить определение [Ctrl + Q]'
     className={clsx(
       'w-[10rem] h-[1.75rem]',
-      'px-3',
+      'px-2 flex items-center justify-center gap-2',
       'border',
       'select-none',
       'cursor-pointer',
@@ -50,12 +51,12 @@ function StatusBar({ isModified, processing, constituenta, parseData, onAnalyze
   >
     {processing ?
       <ConceptLoader size={3} /> :
-      <div className='flex items-center justify-center h-full gap-2'>
+      <>
-        <BiBug size='1rem' className='translate-y-[0.1rem]' />
+        <StatusIcon status={status} />
-        <span className='font-semibold small-caps'>
+        <span className='pb-[0.125rem] font-semibold small-caps pr-2'>
           {labelExpressionStatus(status)}
         </span>
-      </div>
+      </>
     }
   </div>);
 }

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusIcon.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { BiBug, BiCheckCircle, BiHelpCircle, BiPauseCircle } from 'react-icons/bi';
+
+import { ExpressionStatus } from '@/models/rsform';
+
+interface StatusIconProps {
+  status: ExpressionStatus
+}
+
+function StatusIcon({ status }: StatusIconProps) {
+  if (status === ExpressionStatus.VERIFIED || status === ExpressionStatus.PROPERTY) {
+    return <BiCheckCircle size='1rem' />;
+  } else if (status === ExpressionStatus.UNKNOWN) {
+    return <BiHelpCircle size='1rem' />;
+  } else if (status === ExpressionStatus.INCALCULABLE) {
+    return <BiPauseCircle size='1rem' />;
+  }else {
+    return <BiBug size='1rem' />;
+  }
+}
+
+export default StatusIcon;

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

@@ -399,7 +399,7 @@ function RSTabs() {
     className='flex flex-col min-w-[45rem]'
   >
     <TabList className={clsx(
-      'h-[1.9rem] mx-auto',
+      'mx-auto',
       'flex', 
       'border-b-2 border-x-2 divide-x-2'
     )}>