From c7a0de77d0420f3b7921fea0ba0aa5dd9206fa20 Mon Sep 17 00:00:00 2001
From: IRBorisov <8611739+IRBorisov@users.noreply.github.com>
Date: Tue, 19 Dec 2023 02:21:44 +0300
Subject: [PATCH] Small UI improvement

---
 rsconcept/frontend/README.md                  |  2 +-
 .../EditorConstituenta/FormConstituenta.tsx   |  2 +-
 .../EditorRSExpression/StatusBar.tsx          | 13 ++++++-----
 .../EditorRSExpression/StatusIcon.tsx         | 23 +++++++++++++++++++
 .../frontend/src/pages/RSFormPage/RSTabs.tsx  |  2 +-
 5 files changed, 33 insertions(+), 9 deletions(-)
 create mode 100644 rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusIcon.tsx

diff --git a/rsconcept/frontend/README.md b/rsconcept/frontend/README.md
index 0c887ddf..757dc560 100644
--- a/rsconcept/frontend/README.md
+++ b/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
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
index be2dd4c5..15d44525 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx
+++ b/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
     )}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
index 0847a9c9..4363461d 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx
+++ b/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]' />
-        <span className='font-semibold small-caps'>
+      <>
+        <StatusIcon status={status} />
+        <span className='pb-[0.125rem] font-semibold small-caps pr-2'>
           {labelExpressionStatus(status)}
         </span>
-      </div>
+      </>
     }
   </div>);
 }
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusIcon.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusIcon.tsx
new file mode 100644
index 00000000..a2fdc5de
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx b/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
index f35b7fc0..c2d33fe9 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx
+++ b/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'
     )}>