Minor UI improvements

rsconcept/frontend/src/components/Icons.tsx

@@ -440,6 +440,14 @@ export function CheckIcon(props: IconProps) {
   );
 }
 
+export function CogIcon(props: IconProps) {
+  return (
+    <IconSVG viewbox='0 0 24 24' {...props}>
+      <path d='M2.344 15.271l2 3.46a1 1 0 001.366.365l1.396-.806c.58.457 1.221.832 1.895 1.112V21a1 1 0 001 1h4a1 1 0 001-1v-1.598a8.094 8.094 0 001.895-1.112l1.396.806c.477.275 1.091.11 1.366-.365l2-3.46a1.004 1.004 0 00-.365-1.366l-1.372-.793a7.683 7.683 0 00-.002-2.224l1.372-.793c.476-.275.641-.89.365-1.366l-2-3.46a1 1 0 00-1.366-.365l-1.396.806A8.034 8.034 0 0015 4.598V3a1 1 0 00-1-1h-4a1 1 0 00-1 1v1.598A8.094 8.094 0 007.105 5.71L5.71 4.904a.999.999 0 00-1.366.365l-2 3.46a1.004 1.004 0 00.365 1.366l1.372.793a7.683 7.683 0 000 2.224l-1.372.793c-.476.275-.641.89-.365 1.366zM12 8c2.206 0 4 1.794 4 4s-1.794 4-4 4-4-1.794-4-4 1.794-4 4-4z' />
+    </IconSVG>
+  );
+}
+
 export function CrossIcon(props: IconProps) {
   return (
     <IconSVG viewbox='0 0 21 21' {...props}>

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

@@ -8,7 +8,7 @@ function Logo({ title }: LogoProps) {
   return (
     <Link to='/' className='flex items-center mr-4' tabIndex={-1}>
       <img src='/favicon.svg' className='min-h-[2rem] mr-2 min-w-[2rem]' alt=''/>
-      <span className='self-center hidden text-xl font-semibold md:block whitespace-nowrap dark:text-white'>{title}</span>
+      <span className='self-center hidden text-xl font-semibold small-caps md:block whitespace-nowrap dark:text-white'>{title}</span>
     </Link>
   );
 }

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

@@ -13,7 +13,7 @@ function NavigationButton({ id, icon, description, onClick, text }: NavigationBu
       type='button'
       onClick={onClick}
       tabIndex={-1}
-      className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit whitespace-nowrap clr-btn-nav`}
+      className={`flex items-center h-full gap-1 ${text ? 'px-2' : 'px-4'} mr-1 min-w-fit small-caps whitespace-nowrap clr-btn-nav`}
     >
       {icon && <span>{icon}</span>}
       {text && <span className='font-semibold'>{text}</span>}

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

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import Dropdown from '../../../components/Common/Dropdown';
 import DropdownButton from '../../../components/Common/DropdownButton';
+import { CogIcon } from '../../../components/Icons';
 import useDropdown from '../../../hooks/useDropdown';
 import { DependencyMode } from '../../../models/miscelanious';
 import { labelDependencyMode } from '../../../utils/labels';
@@ -21,14 +22,16 @@ function DependencyModePicker({ value, onChange }: DependencyModePickerProps) {
   }, [pickerMenu, onChange]);
 
   return (
-  <div ref={pickerMenu.ref} className='h-full min-w-[5.8rem] text-right'>
+  <div ref={pickerMenu.ref} className='h-full'>
-    <span
+    <button
-      className='text-sm font-semibold underline cursor-pointer select-none whitespace-nowrap'
+      className='h-full w-[7.5rem] px-1 py-1 border clr-input clr-hover clr-btn-default text-btn inline-flex align-middle gap-1'
+      title='Настройка фильтрации по графу термов'
       tabIndex={-1}
       onClick={pickerMenu.toggle}
     >
-      {labelDependencyMode(value)}
+      <CogIcon color='text-controls' size={5} />
-    </span>
+      <span className='text-sm font-semibold whitespace-nowrap'>{labelDependencyMode(value)}</span>
+    </button>
     { pickerMenu.isActive &&
     <Dropdown stretchLeft >
       <DropdownButton onClick={() => handleChange(DependencyMode.ALL)}>

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

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import Dropdown from '../../../components/Common/Dropdown';
 import DropdownButton from '../../../components/Common/DropdownButton';
+import { FilterCogIcon } from '../../../components/Icons';
 import useDropdown from '../../../hooks/useDropdown';
 import { CstMatchMode } from '../../../models/miscelanious';
 import { labelCstMathchMode } from '../../../utils/labels';
@@ -21,16 +22,18 @@ function MatchModePicker({ value, onChange }: MatchModePickerProps) {
   }, [pickerMenu, onChange]);
 
   return (
-  <div ref={pickerMenu.ref} className='h-full min-w-[3.4rem]'>
+  <div ref={pickerMenu.ref} className='h-full'>
-    <span
+    <button
-      className='text-sm font-semibold underline cursor-pointer select-none whitespace-nowrap'
+      className='h-full w-[6rem] px-1 py-1 border clr-input clr-hover clr-btn-default text-btn inline-flex align-middle gap-1'
+      title='Настройка атрибутов для фильтрации'
       tabIndex={-1}
       onClick={pickerMenu.toggle}
     >
-      {labelCstMathchMode(value)}
+      <FilterCogIcon color='text-controls' size={5} />
-    </span>
+      <span className='text-sm font-semibold whitespace-nowrap'>{labelCstMathchMode(value)}</span>
+    </button>
     { pickerMenu.isActive &&
-      <Dropdown>
+      <Dropdown stretchLeft>
         <DropdownButton onClick={() => handleChange(CstMatchMode.ALL)}>
           <p><b>везде:</b> искать во всех атрибутах</p>
         </DropdownButton>

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

@@ -28,7 +28,7 @@ function StatusBar({ isModified, constituenta, parseData }: StatusBarProps) {
 
   return (
     <div title={describeExpressionStatus(status)}
-      className='text-sm h-[1.6rem] w-[10rem] font-semibold inline-flex border items-center select-none justify-center align-middle'
+      className='text-sm h-[1.6rem] w-[10rem] font-semibold small-caps inline-flex border items-center select-none justify-center align-middle'
       style={{backgroundColor: colorbgCstStatus(status, colors)}}
     >
       {labelExpressionStatus(status)}

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

@@ -1,6 +1,7 @@
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import DataTable, { createColumnHelper, IConditionalStyle, VisibilityState } from '../../../components/DataTable';
+import { MagnifyingGlassIcon } from '../../../components/Icons';
 import { useRSForm } from '../../../context/RSFormContext';
 import { useConceptTheme } from '../../../context/ThemeContext';
 import useLocalStorage from '../../../hooks/useLocalStorage';
@@ -189,17 +190,20 @@ function ViewSideConstituents({ expression, baseHeight, activeID, onOpenEdit }:
   }, [noNavigation, baseHeight]);
 
   return (<>
-    <div className='sticky top-0 left-0 right-0 flex items-start justify-between w-full gap-1 px-2 py-1 border-b rounded clr-input'>
+    <div className='sticky top-0 left-0 right-0 flex items-center justify-start w-full gap-1 px-2 border-b rounded clr-input'>
+      <div className='absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-controls'>
+        <MagnifyingGlassIcon />
+      </div>
+      <input type='text'
+        className='w-[14rem] pr-2 pl-8 py-1 outline-none select-none hover:text-clip clr-input'
+        placeholder='текст фильтра'
+        value={filterText}
+        onChange={event => setFilterText(event.target.value)}
+      />
       <MatchModePicker
         value={filterMatch}
         onChange={setFilterMatch}
       />
-      <input type='text'
-        className='w-full px-2 outline-none select-none hover:text-clip clr-input'
-        placeholder='наберите текст фильтра'
-        value={filterText}
-        onChange={event => setFilterText(event.target.value)}
-      />
       <DependencyModePicker
         value={filterSource}
         onChange={setFilterSource}