Refactoring: attribute names + introducing namespace

rsconcept/frontend/src/components/Common/Button.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 
-import { IColorsProps, IControlProps } from './commonInterfaces';
+import { CProps } from '../props';
 
 interface ButtonProps
-extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'| 'type'> {
+extends CProps.Control, CProps.Colors, CProps.Button {
   text?: string
   icon?: React.ReactNode
 
@@ -12,7 +12,7 @@ extends IControlProps, IColorsProps, Omit<React.ButtonHTMLAttributes<HTMLButtonE
 }
 
 function Button({
-  text, icon, tooltip, loading,
+  text, icon, loading,
   dense, disabled, noBorder, noOutline,
   colors = 'clr-btn-default',
   className,
@@ -21,7 +21,6 @@ function Button({
   return (
   <button type='button'
     disabled={disabled ?? loading}
-    title={tooltip}
     className={clsx(
       'inline-flex gap-2 items-center justify-center',
       'select-none disabled:cursor-not-allowed',
@@ -34,8 +33,8 @@ function Button({
         'outline-none': noOutline,
         'clr-outline': !noOutline,
       },
-      colors,
+      className,
-      className
+      colors
     )}
     {...restProps}
   >

rsconcept/frontend/src/components/Common/Checkbox.tsx

@@ -2,20 +2,20 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 
 import { CheckboxCheckedIcon } from '../Icons';
+import { CProps } from '../props';
 import Label from './Label';
 
 export interface CheckboxProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title' | 'value' | 'onClick' > {
+extends Omit<CProps.Button, 'value' | 'onClick'> {
   label?: string
   disabled?: boolean
-  tooltip?: string
 
   value: boolean
   setValue?: (newValue: boolean) => void
 }
 
 function Checkbox({
-  id, disabled, tooltip, label, 
+  id, disabled, label, 
   className, value, setValue, ...restProps
 }: CheckboxProps) {
   const cursor = useMemo(
@@ -46,7 +46,6 @@ function Checkbox({
       cursor,
       className
     )}
-    title={tooltip}
     disabled={disabled}
     onClick={handleClick}
     {...restProps}

rsconcept/frontend/src/components/Common/ConceptSearch.tsx

@@ -1,18 +1,19 @@
 import { BiSearchAlt2 } from 'react-icons/bi';
 
+import { CProps } from '../props';
 import Overlay from './Overlay';
 import TextInput from './TextInput';
 
-interface ConceptSearchProps  {
+interface ConceptSearchProps
+extends CProps.Styling {
   value: string
   onChange?: (newValue: string) => void
   noBorder?: boolean
-  dimensions?: string
 }
 
-function ConceptSearch({ value, onChange, noBorder, dimensions }: ConceptSearchProps) {
+function ConceptSearch({ value, onChange, noBorder, ...restProps }: ConceptSearchProps) {
   return (
-  <div className={dimensions}>
+  <div {...restProps}>
     <Overlay
       position='top-[-0.125rem] left-3 translate-y-1/2'
       className='pointer-events-none clr-text-controls'

rsconcept/frontend/src/components/Common/ConceptTab.tsx

@@ -3,13 +3,11 @@ import type { TabProps } from 'react-tabs';
 import { Tab } from 'react-tabs';
 
 interface ConceptTabProps
-extends Omit<TabProps, 'title' | 'children'> {
+extends Omit<TabProps, 'children'> {
-  className?: string
-  tooltip?: string
   label?: string
 }
 
-function ConceptTab({ label, tooltip, className, ...otherProps }: ConceptTabProps) {
+function ConceptTab({ label, className, ...otherProps }: ConceptTabProps) {
   return (
   <Tab
     className={clsx(
@@ -20,7 +18,6 @@ function ConceptTab({ label, tooltip, className, ...otherProps }: ConceptTabProp
       'select-none hover:cursor-pointer',
       className
     )}
-    title={tooltip}
     {...otherProps}
   >
     {label}

rsconcept/frontend/src/components/Common/ConceptTooltip.tsx

@@ -12,9 +12,9 @@ extends Omit<ITooltip, 'variant'> {
 }
 
 function ConceptTooltip({
-  className,
   layer='z-tooltip',
   place='bottom',
+  className,
   style,
   ...restProps
 }: ConceptTooltipProps) {

rsconcept/frontend/src/components/Common/Dropdown.tsx

@@ -1,17 +1,19 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
 import Overlay from './Overlay';
 
-interface DropdownProps {
+interface DropdownProps
+extends CProps.Styling {
   stretchLeft?: boolean
-  dimensions?: string
   children: React.ReactNode
 }
 
 function Dropdown({
-  dimensions = 'w-fit',
+  className,
   stretchLeft,
-  children
+  children,
+  ...restProps
 }: DropdownProps) {
   return (
   <Overlay 
@@ -26,8 +28,9 @@ function Dropdown({
         'right-0': stretchLeft,
         'left-0': !stretchLeft
       },
-      dimensions
+      className
-  )}
+    )}
+    {...restProps}
   >
     {children}
   </Overlay>);

rsconcept/frontend/src/components/Common/DropdownButton.tsx

@@ -1,27 +1,22 @@
 import clsx from 'clsx';
 
-interface DropdownButtonProps {
+import { CProps } from '../props';
+
+interface DropdownButtonProps
+extends CProps.Button {
   text?: string
   icon?: React.ReactNode
 
-  className?: string
-  tooltip?: string | undefined
-  onClick?: () => void
-  disabled?: boolean
-
   children?: React.ReactNode
 }
 
 function DropdownButton({
-  text, icon, children,
+  text, icon, className, onClick,
-  tooltip, className,
+  children,
-  disabled,
+  ...restProps
-  onClick
 }: DropdownButtonProps) {
   return (
   <button type='button'
-    disabled={disabled}
-    title={tooltip}
     onClick={onClick}
     className={clsx(
       'px-3 py-1 inline-flex items-center gap-2',
@@ -34,6 +29,7 @@ function DropdownButton({
       },
       className
     )}
+    {...restProps}
   >
     {children ? children : null}
     {!children && icon ? icon : null}

rsconcept/frontend/src/components/Common/DropdownCheckbox.tsx

@@ -5,15 +5,15 @@ import Checkbox from './Checkbox';
 interface DropdownCheckboxProps {
   value: boolean
   label?: string
-  tooltip?: string
+  title?: string
   disabled?: boolean
   setValue?: (newValue: boolean) => void
 }
 
-function DropdownCheckbox({ tooltip, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
+function DropdownCheckbox({ title, setValue, disabled, ...restProps }: DropdownCheckboxProps) {
   return (
   <div
-    title={tooltip}
+    title={title}
     className={clsx(
       'px-3 py-1',
       'text-left overflow-ellipsis whitespace-nowrap',

rsconcept/frontend/src/components/Common/FileInput.tsx

@@ -4,22 +4,22 @@ import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { BiUpload } from 'react-icons/bi';
 
+import { CProps } from '../props';
 import Button from './Button';
 import Label from './Label';
 
 interface FileInputProps 
-extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'title' | 'style' | 'accept' | 'type'> {
+extends Omit<CProps.Input, 'accept' | 'type'> {
   label: string
-  tooltip?: string
-  dimensions?: string
   
   acceptType?: string
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 function FileInput({
-  label, acceptType, tooltip,
+  label, acceptType, title,
-  dimensions = 'w-fit', onChange,
+  className, style,
+  onChange,
   ...restProps 
 }: FileInputProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -31,9 +31,9 @@ function FileInput({
 
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
-      setFileName(event.target.files[0].name)
+      setFileName(event.target.files[0].name);
     } else {
-      setFileName('')
+      setFileName('');
     }
     if (onChange) {
       onChange(event);
@@ -41,11 +41,14 @@ function FileInput({
   };
 
   return (
-  <div className={clsx(
+  <div 
-    'py-2',
+    className={clsx(
-    'flex flex-col gap-2 items-start',
+      'py-2',
-    dimensions
+      'flex flex-col gap-2 items-center',
-  )}>
+      className
+    )}
+    style={style}
+  >
     <input type='file'
       ref={inputRef}
       style={{ display: 'none' }}
@@ -57,7 +60,7 @@ function FileInput({
       text={label}
       icon={<BiUpload size='1.5rem' />}
       onClick={handleUploadClick}
-      tooltip={tooltip}
+      title={title}
     />
     <Label text={fileName} />
   </div>);

rsconcept/frontend/src/components/Common/FlexColumn.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx';
+
+import { classnames } from '@/utils/constants';
+
+import { CProps } from '../props';
+
+export interface FlexColumnProps
+extends CProps.Div {}
+
+function FlexColumn({
+  className, children,
+  ...restProps
+}: FlexColumnProps) {
+  return (
+  <div
+    className={clsx(
+      classnames.flex_col,
+      className
+    )}
+    {...restProps}
+  >
+    {children}
+  </div>);
+}
+
+export default FlexColumn;

rsconcept/frontend/src/components/Common/Label.tsx

@@ -1,13 +1,13 @@
 import clsx from 'clsx';
-import { LabelHTMLAttributes } from 'react';
+
+import { CProps } from '../props';
 
 interface LabelProps 
-extends Omit<React.DetailedHTMLProps<LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'children' | 'title'> {
+extends CProps.Label {
   text?: string
-  tooltip?: string
 }
 
-function Label({ text, tooltip, className, ...restProps }: LabelProps) {
+function Label({ text, className, ...restProps }: LabelProps) {
   if (!text) {
     return null;
   }
@@ -17,7 +17,6 @@ function Label({ text, tooltip, className, ...restProps }: LabelProps) {
       'text-sm font-semibold whitespace-nowrap',
       className
     )}
-    title={tooltip}
     {...restProps}
   >
     {text}

rsconcept/frontend/src/components/Common/LabeledValue.tsx

@@ -2,15 +2,15 @@ interface LabeledValueProps {
   id?: string
   label: string
   text: string | number
-  tooltip?: string
+  title?: string
 }
 
-function LabeledValue({ id, label, text, tooltip }: LabeledValueProps) {
+function LabeledValue({ id, label, text, title }: LabeledValueProps) {
   return (
   <div className='flex justify-between gap-3'>
     <label
       className='font-semibold'
-      title={tooltip}
+      title={title}
       htmlFor={id}
     >
       {label}

rsconcept/frontend/src/components/Common/MiniButton.tsx

@@ -1,21 +1,20 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
+
 interface MiniButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'title' | 'children' > {
+extends CProps.Button {
   icon: React.ReactNode
-  tooltip?: string
   noHover?: boolean
-  dimensions?: string
 }
 
 function MiniButton({
-  icon, tooltip, noHover, tabIndex,
+  icon, noHover, tabIndex,
-  dimensions='w-fit h-fit',
+  className,
   ...restProps
 }: MiniButtonProps) {
   return (
   <button type='button'
-    title={tooltip}
     tabIndex={tabIndex ?? -1}
     className={clsx(
       'px-1 py-1',
@@ -26,7 +25,7 @@ function MiniButton({
         'outline-none': noHover,
         'clr-hover': !noHover
       },
-      dimensions
+      className
     )}
     {...restProps}
   >

rsconcept/frontend/src/components/Common/Modal.tsx

@@ -6,29 +6,34 @@ import { BiX } from 'react-icons/bi';
 
 import useEscapeKey from '@/hooks/useEscapeKey';
 
+import { CProps } from '../props';
 import Button from './Button';
 import MiniButton from './MiniButton';
 import Overlay from './Overlay';
 
-export interface ModalProps {
+export interface ModalProps
-  title?: string
+extends CProps.Styling {
+  header?: string
   submitText?: string
   submitInvalidTooltip?: string
+  
   readonly?: boolean
   canSubmit?: boolean
+
   hideWindow: () => void
   onSubmit?: () => void
   onCancel?: () => void
+
   children: React.ReactNode
-  className?: string
 }
 
 function Modal({ 
-  title, hideWindow, onSubmit,
+  header, hideWindow, onSubmit,
   readonly, onCancel, canSubmit,
   submitInvalidTooltip, className,
   children,
-  submitText = 'Продолжить'
+  submitText = 'Продолжить',
+  ...restProps
 }: ModalProps) {
   const ref = useRef(null);
   useEscapeKey(hideWindow);
@@ -58,16 +63,17 @@ function Modal({
         'border shadow-md',
         'clr-app'
       )}
+      {...restProps}
     >
       <Overlay position='right-[0.3rem] top-2'>
         <MiniButton
-          tooltip='Закрыть диалоговое окно [ESC]'
+          title='Закрыть диалоговое окно [ESC]'
           icon={<BiX size='1.25rem'/>}
           onClick={handleCancel}
         />
       </Overlay>
       
-      {title ? <h1 className='px-12 py-2 select-none'>{title}</h1> : null}
+      {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
       <div
         className={clsx(
@@ -89,7 +95,7 @@ function Modal({
         {!readonly ? 
         <Button autoFocus
           text={submitText}
-          tooltip={!canSubmit ? submitInvalidTooltip: ''}
+          title={!canSubmit ? submitInvalidTooltip: ''}
           className='min-w-[8rem] min-h-[2.6rem]'
           colors='clr-btn-primary'
           disabled={!canSubmit}

rsconcept/frontend/src/components/Common/Overlay.tsx

@@ -1,19 +1,31 @@
-interface OverlayProps {
+import clsx from 'clsx'
+
+import { CProps } from '../props'
+
+interface OverlayProps extends CProps.Styling {
   id?: string
   children: React.ReactNode
   position?: string
-  className?: string
   layer?: string
 }
 
 function Overlay({
-  id, children, className,
+  children, className,
   position='top-0 right-0',
-  layer='z-pop'
+  layer='z-pop',
+  ...restProps
 }: OverlayProps) {
   return (
   <div className='relative'>
-  <div id={id} className={`absolute ${className} ${position} ${layer}`}>
+  <div
+    className={clsx(
+      'absolute',
+      className,
+      position,
+      layer
+    )}
+    {...restProps}
+  >
     {children}
   </div>
   </div>);

rsconcept/frontend/src/components/Common/PageControls.tsx

@@ -6,9 +6,7 @@ interface PageControlsProps {
   setPageNumber: React.Dispatch<React.SetStateAction<number>>
 }
 
-function PageControls({
+function PageControls({ pageNumber, pageCount, setPageNumber }: PageControlsProps) {
-  pageNumber, pageCount, setPageNumber
-}: PageControlsProps) {
   return (
   <>
     <button type='button'

rsconcept/frontend/src/components/Common/SelectorButton.tsx

@@ -1,20 +1,20 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
+
 interface SelectorButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children' | 'title' | 'type'> {
+extends CProps.Button {
   text?: string
   icon?: React.ReactNode
-  tooltip?: string
+
-  dimensions?: string
-  borderClass?: string
   colors?: string
   transparent?: boolean
 }
 
 function SelectorButton({
-  text, icon, tooltip,
+  text, icon,
   colors = 'clr-btn-default',
-  dimensions = 'w-fit h-fit',
+  className,
   transparent,
   ...restProps
 }: SelectorButtonProps) {
@@ -29,10 +29,9 @@ function SelectorButton({
         'clr-hover': transparent,
         'border': !transparent,
       },
-      !transparent && colors,
+      className,
-      dimensions
+      !transparent && colors
-  )}
+    )}
-    title={tooltip}
     {...restProps}
   >
     {icon ? icon : null}

rsconcept/frontend/src/components/Common/SubmitButton.tsx

@@ -1,22 +1,22 @@
 import clsx from 'clsx';
 
+import { CProps } from '../props';
+
 interface SubmitButtonProps
-extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title'> {
+extends CProps.Button {
   text?: string
-  tooltip?: string
   loading?: boolean
   icon?: React.ReactNode
 }
 
 function SubmitButton({
   text = 'ОК',
-  icon, disabled, tooltip, loading,
+  icon, disabled, loading,
   className,
   ...restProps
 }: SubmitButtonProps) {
   return (
   <button type='submit'
-    title={tooltip}
     className={clsx(
       'px-3 py-2 inline-flex items-center gap-2 align-middle justify-center',
       'border',

rsconcept/frontend/src/components/Common/SwitchButton.tsx

@@ -1,25 +1,25 @@
 import clsx from 'clsx';
 
-interface SwitchButtonProps<ValueType> {
+import { CProps } from '../props';
+
+interface SwitchButtonProps<ValueType>
+extends CProps.Styling {
   id?: string
   value: ValueType
   label?: string
   icon?: React.ReactNode
-  tooltip?: string
+  title?: string
-  dimensions?: string
 
   isSelected?: boolean
   onSelect: (value: ValueType) => void
 }
 
 function SwitchButton<ValueType>({
-  value, icon, label, tooltip,
+  value, icon, label, className,
-  dimensions='w-fit h-fit',
   isSelected, onSelect, ...restProps
 }: SwitchButtonProps<ValueType>) {
   return (
   <button type='button' tabIndex={-1}
-    title={tooltip}
     onClick={() => onSelect(value)}
     className={clsx(
       'px-2 py-1',
@@ -28,7 +28,7 @@ function SwitchButton<ValueType>({
       'clr-btn-clear clr-hover',
       'cursor-pointer',
       isSelected && 'clr-selected',
-      dimensions
+      className
     )}
     {...restProps}
   >

rsconcept/frontend/src/components/Common/TextArea.tsx

@@ -1,16 +1,15 @@
 import clsx from 'clsx';
-import { TextareaHTMLAttributes } from 'react';
 
-import { IColorsProps, IEditorProps } from './commonInterfaces';
+import { CProps } from '../props';
 import Label from './Label';
 
 export interface TextAreaProps 
-extends IEditorProps, IColorsProps, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'title'> {
+extends CProps.Editor, CProps.Colors, CProps.TextArea {
   dense?: boolean
 }
 
 function TextArea({
-  id, label, required, tooltip, rows,
+  id, label, required, rows,
   dense, noBorder, noOutline,
   className,
   colors = 'clr-input',
@@ -26,7 +25,6 @@ function TextArea({
   )}>
     <Label text={label} htmlFor={id} />
     <textarea id={id}
-      title={tooltip}
       className={clsx(
         'px-3 py-2',
         'leading-tight',

rsconcept/frontend/src/components/Common/TextInput.tsx

@@ -1,10 +1,10 @@
 import clsx from 'clsx';
 
-import { IColorsProps, IEditorProps } from './commonInterfaces';
+import { CProps } from '../props';
 import Label from './Label';
 
 interface TextInputProps 
-extends IEditorProps, IColorsProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'title'> {
+extends CProps.Editor, CProps.Colors, CProps.Input {
   dense?: boolean
   allowEnter?: boolean
 }
@@ -16,7 +16,7 @@ function preventEnterCapture(event: React.KeyboardEvent<HTMLInputElement>) {
 }
 
 function TextInput({
-  id, label, dense, tooltip, noBorder, noOutline, allowEnter, disabled,
+  id, label, dense, noBorder, noOutline, allowEnter, disabled,
   className,
   colors = 'clr-input',
   onKeyDown,
@@ -32,7 +32,6 @@ function TextInput({
   )}>
     <Label text={label} htmlFor={id} />
     <input id={id}
-      title={tooltip}
       className={clsx(
         'py-2',
         'leading-tight truncate hover:text-clip',

rsconcept/frontend/src/components/Common/TextURL.tsx

@@ -3,31 +3,29 @@ import { Link } from 'react-router-dom';
 
 interface TextURLProps {
   text: string
-  tooltip?: string
+  title?: string
   href?: string
   color?: string
   onClick?: () => void
 }
 
-function TextURL({ text, href, tooltip, color='clr-text-url', onClick }: TextURLProps) {
+function TextURL({ text, href, title, color='clr-text-url', onClick }: TextURLProps) {
   const design = `cursor-pointer hover:underline ${color}`;
   if (href) {
     return (
-    <Link
+    <Link tabIndex={-1}
       className={design}
-      title={tooltip}
+      title={title}
       to={href}
-      tabIndex={-1}
     >
       {text}
     </Link>
     );
   } else if (onClick) {
     return (
-    <span
+    <span tabIndex={-1}
       className={design}
       onClick={onClick}
-      tabIndex={-1}
     >
       {text}
     </span>);

rsconcept/frontend/src/components/Common/Tristate.tsx

@@ -13,7 +13,7 @@ extends Omit<CheckboxProps, 'value' | 'setValue'> {
 }
 
 function Tristate({
-  id, disabled, tooltip, label, 
+  id, disabled, label, 
   className,
   value, setValue,
   ...restProps
@@ -51,7 +51,6 @@ function Tristate({
       cursor,
       className
     )}
-    title={tooltip}
     disabled={disabled}
     onClick={handleClick}
     {...restProps}

rsconcept/frontend/src/components/Common/commonInterfaces.ts

@@ -1,20 +0,0 @@
-// =========== Module contains interfaces for common UI elements. ==========
-export interface IControlProps {
-  tooltip?: string
-  disabled?: boolean
-  noBorder?: boolean
-  noOutline?: boolean
-}
-
-export interface IStylingProps {
-  style?: React.CSSProperties
-  className?: string
-}
-
-export interface IEditorProps extends IControlProps {
-  label?: string
-}
-
-export interface IColorsProps {
-  colors?: string
-}

rsconcept/frontend/src/components/DataTable/DataTable.tsx

@@ -10,7 +10,7 @@ import {
 import clsx from 'clsx';
 import { useState } from 'react';
 
-import { IStylingProps } from '../Common/commonInterfaces';
+import { CProps } from '../props';
 import DefaultNoData from './DefaultNoData';
 import PaginationTools from './PaginationTools';
 import TableBody from './TableBody';
@@ -25,7 +25,7 @@ export interface IConditionalStyle<TData> {
 }
 
 export interface DataTableProps<TData extends RowData>
-extends IStylingProps, Pick<TableOptions<TData>, 
+extends CProps.Styling, Pick<TableOptions<TData>, 
   'data' | 'columns' |
   'onRowSelectionChange' | 'onColumnVisibilityChange'
 > {

rsconcept/frontend/src/components/DataTable/SelectAll.tsx

@@ -9,7 +9,7 @@ interface SelectAllProps<TData> {
 function SelectAll<TData>({ table }: SelectAllProps<TData>) {  
   return (
   <Tristate tabIndex={-1}
-    tooltip='Выделить все'
+    title='Выделить все'
     value={
       (!table.getIsAllPageRowsSelected() && table.getIsSomePageRowsSelected())
       ? null

rsconcept/frontend/src/components/Help/ConstituentaTooltip.tsx

@@ -11,7 +11,7 @@ function ConstituentaTooltip({ data, anchor }: ConstituentaTooltipProps) {
   return (
   <ConceptTooltip clickable
     anchorSelect={anchor}
-    className='max-w-[25rem] min-w-[25rem]'
+    className='w-[25rem]'
   >
     <InfoConstituenta data={data} />
   </ConceptTooltip>);

rsconcept/frontend/src/components/Help/HelpButton.tsx

@@ -4,15 +4,16 @@ import ConceptTooltip from '@/components/Common/ConceptTooltip';
 import TextURL from '@/components/Common/TextURL';
 import { HelpTopic } from '@/models/miscelanious';
 
+import { CProps } from '../props';
 import InfoTopic from './InfoTopic';
 
-interface HelpButtonProps {
+interface HelpButtonProps
+extends CProps.Styling {
   topic: HelpTopic
   offset?: number
-  dimensions?: string
 }
 
-function HelpButton({ topic, offset, dimensions }: HelpButtonProps) {
+function HelpButton({ topic, ...restProps }: HelpButtonProps) {
   return (
   <>
     <div
@@ -24,8 +25,7 @@ function HelpButton({ topic, offset, dimensions }: HelpButtonProps) {
     <ConceptTooltip clickable
       anchorSelect={`#help-${topic}`}
       layer='z-modal-tooltip'
-      className={dimensions}
+      {...restProps}
-      offset={offset}
     >
       <div className='relative'>
       <div className='absolute right-0 text-sm top-[0.4rem]'>

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

@@ -25,15 +25,15 @@ function UserDropdown({ hideDropdown }: UserDropdownProps) {
   };
 
   return (
-  <Dropdown dimensions='w-36' stretchLeft>
+  <Dropdown className='w-36' stretchLeft>
     <DropdownButton
       text={user?.username}
-      tooltip='Профиль пользователя'
+      title='Профиль пользователя'
       onClick={navigateProfile}
     />
     <DropdownButton
       text={darkMode ? 'Светлая тема' : 'Темная тема'}
-      tooltip='Переключение темы оформления'
+      title='Переключение темы оформления'
       onClick={toggleDarkMode}
     />
     <DropdownButton

rsconcept/frontend/src/components/RSInput/RSInput.tsx

@@ -47,10 +47,10 @@ const editorSetup: BasicSetupOptions = {
 
 interface RSInputProps 
 extends Pick<ReactCodeMirrorProps, 
-  'id' | 'height' | 'minHeight' | 'maxHeight' | 'value' | 'className' | 'onFocus' | 'onBlur' | 'placeholder'
+  'id' | 'height' | 'minHeight' | 'maxHeight' | 'value' | 
+  'onFocus' | 'onBlur' | 'placeholder' | 'style' | 'className'
 > {
   label?: string
-  dimensions?: string
   disabled?: boolean
   noTooltip?: boolean
   innerref?: RefObject<ReactCodeMirrorRef> | undefined
@@ -61,7 +61,7 @@ extends Pick<ReactCodeMirrorProps,
 function RSInput({ 
   id, label, innerref, onChange, onAnalyze,
   disabled, noTooltip,
-  dimensions = 'w-full',
+  className, style,
   ...restProps 
 }: RSInputProps) {
   const { darkMode, colors } = useConceptTheme();
@@ -129,11 +129,14 @@ function RSInput({
   }, [thisRef, onAnalyze]);
 
   return (
-  <div className={clsx(
+  <div 
-    'flex flex-col gap-2',
+    className={clsx(
-    dimensions,
+      'flex flex-col gap-2',
-    cursor
+      className,
-  )}>
+      cursor
+    )}
+    style={style}
+  >
     <Label text={label} htmlFor={id}/>
     <CodeMirror id={id}
       ref={thisRef}

rsconcept/frontend/src/components/Shared/SelectGrammeme.tsx

@@ -9,14 +9,12 @@ interface SelectGrammemeProps extends
 Omit<SelectMultiProps<IGrammemeOption>, 'value' | 'onChange'> {
   value: IGrammemeOption[]
   setValue: React.Dispatch<React.SetStateAction<IGrammemeOption[]>>
-  dimensions?: string
   className?: string
   placeholder?: string
 }
 
 function SelectGrammeme({
   value, setValue,
-  dimensions, className, placeholder,
   ...restProps
 }: SelectGrammemeProps) {
   const [options, setOptions] = useState<IGrammemeOption[]>([]);
@@ -33,9 +31,7 @@ function SelectGrammeme({
 
   return (
   <SelectMulti
-    className={`${dimensions} ${className}`}
     options={options}
-    placeholder={placeholder}
     value={value}
     onChange={newValue => setValue([...newValue].sort(compareGrammemeOptions))}
     {...restProps}

rsconcept/frontend/src/components/props.d.ts

@@ -0,0 +1,36 @@
+// =========== Module contains interfaces for common UI elements. ==========
+export namespace CProps {
+
+export type Control = {
+  title?: string
+  disabled?: boolean
+  noBorder?: boolean
+  noOutline?: boolean
+}
+
+export type Styling = {
+  style?: React.CSSProperties
+  className?: string
+}
+
+export type Editor = Control & {
+  label?: string
+}
+
+export type Colors = {
+  colors?: string
+}
+
+export type Div = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export type Button = Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'children' | 'type'
+>;
+export type Label = Omit<
+  React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>,
+  'children'
+>;
+export type TextArea = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+export type Input = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+}

rsconcept/frontend/src/dialogs/DlgCloneLibraryItem.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -11,6 +12,7 @@ import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { ILibraryItem } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
+import { classnames } from '@/utils/constants';
 import { cloneTitle } from '@/utils/misc';
 
 interface DlgCloneLibraryItemProps
@@ -57,12 +59,12 @@ function DlgCloneLibraryItem({ hideWindow, base }: DlgCloneLibraryItemProps) {
 
   return (
   <Modal
-    title='Создание копии концептуальной схемы'
+    header='Создание копии концептуальной схемы'
     hideWindow={hideWindow}
     canSubmit={canSubmit}
     submitText='Создать'
     onSubmit={handleSubmit}
-    className='flex flex-col gap-3 px-6 py-2'
+    className={clsx('px-6 py-2', classnames.flex_col)}
   >
     <TextInput
       label='Полное название'

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ArgumentsTab.tsx

@@ -132,7 +132,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
         <div className='max-h-[1.2rem]'>
         {props.row.original.value ?
         <MiniButton
-          tooltip='Очистить значение'
+          title='Очистить значение'
           icon={<BiX size='0.75rem' className='clr-text-warning'/>}
           noHover
           onClick={() => handleClearArgument(props.row.original)}
@@ -148,7 +148,7 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
   }], [selectedArgument, colors]);
 
   return (
-  <div className='flex flex-col gap-3'>
+  <>
     <DataTable dense noFooter
       className={clsx(
         'max-h-[5.8rem] min-h-[5.8rem]',
@@ -173,8 +173,8 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
     />
 
     <div className={clsx(
-      'py-1 flex gap-2 justify-center items-center',
+      'my-4',
-      'w-full',
+      'flex gap-2 justify-center items-center',
       'select-none'
     )}>
       <span title='Выберите аргумент из списка сверху и значение из списка снизу'
@@ -184,25 +184,25 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
       </span>
       <span>=</span>
       <RSInput noTooltip
-        dimensions='max-w-[12rem] w-full'
+        className='w-[12rem]'
         value={argumentValue}
         onChange={newValue => setArgumentValue(newValue)}
       />
       <div className='flex'>
         <MiniButton
-          tooltip='Подставить значение аргумента'
+          title='Подставить значение аргумента'
           icon={<BiCheck size='1.25rem' className={!!argumentValue && !!selectedArgument ? 'clr-text-success' : ''} />}
           disabled={!argumentValue || !selectedArgument}
           onClick={() => handleAssignArgument(selectedArgument!, argumentValue)}
         />
         <MiniButton
-          tooltip='Откатить значение'
+          title='Откатить значение'
           disabled={!isModified}
           onClick={handleReset}
           icon={<BiRefresh size='1.25rem' className={isModified ? 'clr-text-primary' : ''} />}
         />
         <MiniButton
-          tooltip='Очистить значение аргумента'
+          title='Очистить значение аргумента'
           disabled={!selectedClearable}
           icon={<BiX size='1.25rem' className={selectedClearable ? 'clr-text-warning': ''}/>}
           onClick={() => selectedArgument ? handleClearArgument(selectedArgument) : undefined}
@@ -220,12 +220,12 @@ function ArgumentsTab({ state, schema, partialUpdate  }: ArgumentsTabProps) {
 
     <RSInput id='result'
       placeholder='Итоговое определение'
+      className='mt-[1.2rem]'
       height='5.1rem'
-      dimensions='w-full mt-[0.45rem]'
       value={state.definition}
       disabled
     />
-  </div>);
+  </>);
 }
 
 export default ArgumentsTab;

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/ConstituentaTab.tsx

@@ -17,7 +17,7 @@ interface ConstituentaTabProps {
 
 function ConstituentaTab({state, partialUpdate}: ConstituentaTabProps) {
   return (
-  <div className='flex flex-col gap-3'>
+  <>
     <div className='flex self-center gap-3 pr-2'>
       <SelectSingle
         className='min-w-[14rem]'
@@ -62,7 +62,7 @@ function ConstituentaTab({state, partialUpdate}: ConstituentaTabProps) {
       value={state.convention}
       onChange={event => partialUpdate({ convention: event.target.value })}
     />
-  </div>);
+  </>);
 }
 
 export default ConstituentaTab;

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/DlgConstituentaTemplate.tsx

@@ -12,6 +12,7 @@ import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { HelpTopic } from '@/models/miscelanious';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { inferTemplatedType, substituteTemplateArgs } from '@/models/rslangAPI';
+import { classnames } from '@/utils/constants';
 import { createAliasFor, validateCstAlias } from '@/utils/misc';
 
 import ArgumentsTab, { IArgumentsState } from './ArgumentsTab';
@@ -113,15 +114,15 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
 
   return (
   <Modal
-    title='Создание конституенты из шаблона'
+    header='Создание конституенты из шаблона'
+    submitText='Создать'
+    className='w-[43rem] h-[36rem] px-6'
     hideWindow={hideWindow}
     canSubmit={validated}
     onSubmit={handleSubmit}
-    submitText='Создать'
-    className='max-w-[43rem] min-w-[43rem] min-h-[36rem] px-6'
   >
     <Overlay position='top-0 right-[6rem]'>
-      <HelpButton topic={HelpTopic.RSTEMPLATES} dimensions='max-w-[35rem]' />
+      <HelpButton topic={HelpTopic.RSTEMPLATES} className='max-w-[35rem]' />
     </Overlay>
     <Tabs forceRenderTabPanel
       selectedTabClassName='clr-selected'
@@ -136,17 +137,17 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       )}>
         <ConceptTab
           label='Шаблон'
-          tooltip='Выбор шаблона выражения'
+          title='Выбор шаблона выражения'
           className='w-[8rem]'
         />
         <ConceptTab
           label='Аргументы'
-          tooltip='Подстановка аргументов шаблона'
+          title='Подстановка аргументов шаблона'
           className='w-[8rem]'
         />
         <ConceptTab
           label='Конституента'
-          tooltip='Редактирование атрибутов конституенты'
+          title='Редактирование атрибутов конституенты'
           className='w-[8rem]'
         />
       </TabList>
@@ -166,7 +167,7 @@ function DlgConstituentaTemplate({ hideWindow, schema, onCreate, insertAfter }:
       />
       </TabPanel>
 
-      <TabPanel style={{ display: activeTab === TabID.CONSTITUENTA ? '': 'none' }}>
+      <TabPanel className={classnames.flex_col} style={{ display: activeTab === TabID.CONSTITUENTA ? '': 'none' }}>
       <ConstituentaTab 
         state={constituenta}
         partialUpdate={updateConstituenta}

rsconcept/frontend/src/dialogs/DlgConstituentaTemplate/TemplateTab.tsx

@@ -87,50 +87,46 @@ function TemplateTab({ state, partialUpdate }: TemplateTabProps) {
   }, [state.filterCategory, selectedSchema]);
 
   return (
-  <div className='flex flex-col gap-3'>
+  <>
-    <div>
+    <div className='flex justify-stretch'>
-      <div className='flex justify-stretch'>
+      <SelectSingle
-        <SelectSingle
+        placeholder='Выберите категорию'
-          placeholder='Выберите категорию'
+        className='flex-grow border-none'
-          className='flex-grow border-none'
+        options={categorySelector}
-          options={categorySelector}
+        value={state.filterCategory && selectedSchema ? {
-          value={state.filterCategory && selectedSchema ? {
+          value: state.filterCategory.id,
-            value: state.filterCategory.id,
+          label: state.filterCategory.term_raw
-            label: state.filterCategory.term_raw
+        } : null}
-          } : null}
+        onChange={data => partialUpdate({filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })}
-          onChange={data => partialUpdate({filterCategory: selectedSchema?.items.find(cst => cst.id === data?.value) })}
+        isClearable
-          isClearable
+      />
-        />
+      <SelectSingle
-        <SelectSingle
+        placeholder='Выберите источник'
-          placeholder='Выберите источник'
+        className='min-w-[12rem]'
-          className='min-w-[12rem]'
+        options={templateSelector}
-          options={templateSelector}
+        value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
-          value={state.templateID ? { value: state.templateID, label: templates.find(item => item.id == state.templateID)!.title }: null}
+        onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}
-          onChange={data => partialUpdate({templateID: (data ? data.value : undefined)})}
-        />
-      </div>
-      <ConstituentaPicker
-        value={state.prototype}
-        data={filteredData}
-        onSelectValue={cst => partialUpdate( { prototype: cst } )}
-        prefixID={prefixes.cst_template_ist}
-        rows={9}
       />
     </div>
-    <TextArea id='term'
+    <ConstituentaPicker
-      rows={2}
+      value={state.prototype}
-      disabled
+      data={filteredData}
-      placeholder='Шаблон конституенты не выбран'
+      onSelectValue={cst => partialUpdate( { prototype: cst } )}
-      value={prototypeInfo}
+      prefixID={prefixes.cst_template_ist}
-      spellCheck
+      rows={9}
     />
-    <RSInput id='expression'
+    <TextArea disabled spellCheck
-      height='5.1rem'
+      placeholder='Шаблон конституенты не выбран'
+      className='my-3'
+      rows={2}
+      value={prototypeInfo}
+    />
+    <RSInput disabled
       placeholder='Выберите шаблон из списка'
-      disabled
+      height='5.1rem'
       value={state.prototype?.definition_formal}
     />
-  </div>);
+  </>);
 }
 
 export default TemplateTab;

rsconcept/frontend/src/dialogs/DlgCreateCst.tsx

@@ -10,6 +10,7 @@ import TextInput from '@/components/Common/TextInput';
 import RSInput from '@/components/RSInput';
 import usePartialUpdate from '@/hooks/usePartialUpdate';
 import { CstType,ICstCreateData, IRSForm } from '@/models/rsform';
+import { classnames } from '@/utils/constants';
 import { labelCstType } from '@/utils/labels';
 import { createAliasFor, validateCstAlias } from '@/utils/misc';
 import { SelectorCstType } from '@/utils/selectors';
@@ -50,14 +51,15 @@ function DlgCreateCst({ hideWindow, initial, schema, onCreate }: DlgCreateCstPro
 
   return (
   <Modal
-    title='Создание конституенты'
+    header='Создание конституенты'
     hideWindow={hideWindow}
     canSubmit={validated}
     onSubmit={handleSubmit}
     submitText='Создать'
     className={clsx(
       'w-[35rem]',
-      'py-2 px-6 flex flex-col gap-3'
+      'py-2 px-6',
+      classnames.flex_col
     )}
   >
     <div className='flex self-center gap-6'>

rsconcept/frontend/src/dialogs/DlgDeleteCst/DlgDeleteCst.tsx

@@ -1,11 +1,12 @@
 'use client';
 
+import clsx from 'clsx';
 import { useMemo, useState } from 'react';
 
 import Checkbox from '@/components/Common/Checkbox';
 import Modal, { ModalProps } from '@/components/Common/Modal';
 import { IRSForm } from '@/models/rsform';
-import { prefixes } from '@/utils/constants';
+import { classnames, prefixes } from '@/utils/constants';
 
 import ConstituentsList from './ConstituentsList';
 
@@ -31,11 +32,15 @@ function DlgDeleteCst({ hideWindow, selected, schema, onDelete }: DlgDeleteCstPr
 
   return (
   <Modal canSubmit
-    title='Удаление конституент'
+    header='Удаление конституент'
     submitText={expandOut ? 'Удалить с зависимыми' : 'Удалить'}
     hideWindow={hideWindow}
     onSubmit={handleSubmit}
-    className='max-w-[60vw] min-w-[30rem] px-6 flex flex-col gap-3'
+    className={clsx(
+      'max-w-[60vw] min-w-[30rem]',
+      'px-6',
+      classnames.flex_col
+    )}
   >
     <ConstituentsList
       title='Выбраны к удалению'

rsconcept/frontend/src/dialogs/DlgEditReference/DlgEditReference.tsx

@@ -46,15 +46,15 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
   
   return (
   <Modal
-    title='Редактирование ссылки'
+    header='Редактирование ссылки'
     submitText='Сохранить ссылку'
     hideWindow={hideWindow}
     canSubmit={isValid}
     onSubmit={handleSubmit}
-    className='min-w-[40rem] max-w-[40rem] px-6 min-h-[34rem]'
+    className='w-[40rem] px-6 min-h-[34rem]'
   >
     <Overlay position='top-0 right-[4rem]'>
-      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[35rem]' offset={14} />
+      <HelpButton topic={HelpTopic.TERM_CONTROL} className='max-w-[35rem]' offset={14} />
     </Overlay>
     
     <Tabs
@@ -69,12 +69,12 @@ function DlgEditReference({ hideWindow, items, initial, onSave }: DlgEditReferen
         'border divide-x rounded-none'
       )}>
         <ConceptTab
-          tooltip='Отсылка на термин в заданной словоформе'
+          title='Отсылка на термин в заданной словоформе'
           label={labelReferenceType(ReferenceType.ENTITY)}
           className='w-[12rem]'
         />
         <ConceptTab
-          tooltip='Установление синтаксической связи с отсылкой на термин'
+          title='Установление синтаксической связи с отсылкой на термин'
           label={labelReferenceType(ReferenceType.SYNTACTIC)}
           className='w-[12rem]'
         />

rsconcept/frontend/src/dialogs/DlgEditReference/EntityTab.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useLayoutEffect, useState } from 'react';
 
+import FlexColumn from '@/components/Common/FlexColumn';
 import Label from '@/components/Common/Label';
 import TextInput from '@/components/Common/TextInput';
 import ConstituentaPicker from '@/components/Shared/ConstituentaPicker';
@@ -61,7 +62,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
   }
   
   return (
-  <div className='flex flex-col gap-3'>
+  <FlexColumn>
     <ConstituentaPicker 
       value={selectedCst}
       data={items}
@@ -77,7 +78,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
       <TextInput dense
         label='Конституента'
         placeholder='Имя'
-        className='max-w-[11rem] min-w-[11rem]'
+        className='w-[11rem]'
         value={alias}
         onChange={event => setAlias(event.target.value)}
       />
@@ -85,7 +86,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
         label='Термин'
         className='flex-grow text-sm'
         value={term}
-        tooltip={term}
+        title={term}
       />
     </div>
 
@@ -104,7 +105,7 @@ function EntityTab({ initial, items, setIsValid, setReference }: EntityTabProps)
         setValue={setSelectedGrams}
       />
     </div>
-  </div>);
+  </FlexColumn>);
 }
 
 export default EntityTab;

rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx

@@ -123,14 +123,14 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
 
   return (
   <Modal canSubmit
-    title='Редактирование словоформ'
+    header='Редактирование словоформ'
     hideWindow={hideWindow}
     submitText='Сохранить'
     onSubmit={handleSubmit}
-    className='flex flex-col min-w-[40rem] max-w-[40rem] px-6'
+    className='flex flex-col w-[40rem] px-6'
   >
     <Overlay position='top-[-0.2rem] left-[7.5rem]'>
-      <HelpButton topic={HelpTopic.TERM_CONTROL} dimensions='max-w-[38rem]' offset={3} />
+      <HelpButton topic={HelpTopic.TERM_CONTROL} className='max-w-[38rem]' offset={3} />
     </Overlay>
   
     <TextArea disabled spellCheck
@@ -154,7 +154,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
       />
       <div className='flex flex-col self-center gap-1'>
         <MiniButton noHover
-          tooltip='Определить граммемы'
+          title='Определить граммемы'
           icon={<BiRightArrow
             size='1.25rem'
             className={inputText ? 'clr-text-primary' : ''}
@@ -163,7 +163,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
           onClick={handleParse}
         />
         <MiniButton noHover
-          tooltip='Генерировать словоформу'
+          title='Генерировать словоформу'
           icon={<BiLeftArrow size='1.25rem' className={inputGrams.length !== 0 ? 'clr-text-primary' : ''} />}
           disabled={textProcessor.loading || inputGrams.length == 0}
           onClick={handleInflect}
@@ -171,7 +171,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
       </div>
       <SelectGrammeme
         placeholder='Выберите граммемы'
-        dimensions='min-w-[15rem] max-w-[15rem]'
+        className='w-[15rem]'
         value={inputGrams}
         setValue={setInputGrams}
       />
@@ -179,7 +179,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
 
     <Overlay position='top-2 left-0'>
       <MiniButton noHover
-        tooltip='Внести словоформу'
+        title='Внести словоформу'
         icon={<BiCheck
           size='1.25rem'
           className={inputText && inputGrams.length !== 0 ? 'clr-text-success' : ''}
@@ -188,7 +188,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         onClick={handleAddForm}
       />
       <MiniButton noHover
-        tooltip='Генерировать стандартные словоформы'
+        title='Генерировать стандартные словоформы'
         icon={<BiChevronsDown size='1.25rem' className={inputText ? 'clr-text-primary' : ''}
         />}
         disabled={textProcessor.loading || !inputText}
@@ -203,7 +203,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
     )}>
       <span>Заданные вручную словоформы [{forms.length}]</span>
       <MiniButton noHover
-        tooltip='Сбросить все словоформы'
+        title='Сбросить все словоформы'
         icon={<BiX size='1rem' className={forms.length !== 0 ? 'clr-text-warning' : ''} />}
         disabled={textProcessor.loading || forms.length === 0}
         onClick={handleResetAll}

rsconcept/frontend/src/dialogs/DlgEditWordForms/WordFormsTable.tsx

@@ -62,7 +62,7 @@ function WordFormsTable({ forms, setForms, onFormSelect }: WordFormsTableProps)
       maxSize: 50,
       cell: props => 
         <MiniButton noHover
-          tooltip='Удалить словоформу'
+          title='Удалить словоформу'
           icon={<BiX size='1rem' className='clr-text-warning'/>}
           onClick={() => handleDeleteRow(props.row.index)}
         />

rsconcept/frontend/src/dialogs/DlgGraphParams.tsx

@@ -24,7 +24,7 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
   return (
   <Modal canSubmit
     hideWindow={hideWindow}
-    title='Настройки графа термов'
+    header='Настройки графа термов'
     onSubmit={handleSubmit}
     submitText='Применить'
     className='flex gap-12 px-6 py-2'
@@ -33,25 +33,25 @@ function DlgGraphParams({ hideWindow, initial, onConfirm } : DlgGraphParamsProps
       <h1 className='mb-2'>Преобразования</h1>
       <Checkbox
         label='Скрыть текст'
-        tooltip='Не отображать термины'
+        title='Не отображать термины'
         value={params.noText} 
         setValue={value => updateParams({noText: value})}
       />
       <Checkbox
         label='Скрыть несвязанные'
-        tooltip='Неиспользуемые конституенты'
+        title='Неиспользуемые конституенты'
         value={params.noHermits} 
         setValue={value => updateParams({ noHermits: value})}
       />
       <Checkbox
         label='Скрыть шаблоны'
-        tooltip='Терм-функции и предикат-функции с параметризованными аргументами'
+        title='Терм-функции и предикат-функции с параметризованными аргументами'
         value={params.noTemplates} 
         setValue={value => updateParams({ noTemplates: value})}
       />
       <Checkbox
         label='Транзитивная редукция'
-        tooltip='Удалить связи, образующие транзитивные пути в графе'
+        title='Удалить связи, образующие транзитивные пути в графе'
         value={params.noTransitive} 
         setValue={value => updateParams({ noTransitive: value})}
       />

rsconcept/frontend/src/dialogs/DlgRenameCst.tsx

@@ -44,7 +44,7 @@ function DlgRenameCst({ hideWindow, initial, onRename }: DlgRenameCstProps) {
 
   return (
   <Modal
-    title='Переименование конституенты'
+    header='Переименование конституенты'
     submitText='Переименовать'
     submitInvalidTooltip={'Введите незанятое имя, соответствующее типу'}
     hideWindow={hideWindow}

rsconcept/frontend/src/dialogs/DlgUploadRSForm.tsx

@@ -41,7 +41,7 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
 
   return (
   <Modal
-    title='Импорт схемы из Экстеора'
+    header='Импорт схемы из Экстеора'
     hideWindow={hideWindow}
     canSubmit={!!file}
     onSubmit={handleSubmit}
@@ -50,7 +50,6 @@ function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) {
   >
     <FileInput
       label='Выбрать файл'
-      dimensions='w-full flex items-center'
       acceptType={EXTEOR_TRS_FILE}
       onChange={handleFile}
     />

rsconcept/frontend/src/pages/CreateRSFormPage.tsx

@@ -19,7 +19,7 @@ import { useLibrary } from '@/context/LibraryContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
-import { EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
+import { classnames, EXTEOR_TRS_FILE, limits, patterns } from '@/utils/constants';
 
 function CreateRSFormPage() {
   const router = useConceptNavigation();
@@ -81,8 +81,8 @@ function CreateRSFormPage() {
   <RequireAuth>
   <form
     className={clsx(
-      'w-full max-w-lg',
+      'px-6 py-3',
-      'px-6 py-3 flex flex-col gap-3'
+      classnames.flex_col
     )}
     onSubmit={handleSubmit}
   >
@@ -94,7 +94,7 @@ function CreateRSFormPage() {
         onChange={handleFileChange}
       />
       <MiniButton
-        tooltip='Загрузить из Экстеор'
+        title='Загрузить из Экстеор'
         icon={<BiDownload size='1.25rem' className='clr-text-primary'/>}
         onClick={() => inputRef.current?.click()}
       />
@@ -112,7 +112,7 @@ function CreateRSFormPage() {
       placeholder={file && 'Загрузить из файла'}
       className='w-[14rem]'
       pattern={patterns.alias}
-      tooltip={`не более ${limits.alias_len} символов`}
+      title={`не более ${limits.alias_len} символов`}
       value={alias}
       onChange={event => setAlias(event.target.value)}
     />

rsconcept/frontend/src/pages/LibraryPage/PickerStrategy.tsx

@@ -42,8 +42,8 @@ function PickerStrategy({ value, onChange }: PickerStrategyProps) {
   return (
   <div ref={strategyMenu.ref} className='h-full text-right'>
     <SelectorButton transparent tabIndex={-1}
-      tooltip='Список фильтров'
+      title='Список фильтров'
-      dimensions='w-fit h-full'
+      className='h-full'
       icon={<BiFilterAlt size='1.25rem' />}
       text={labelLibraryFilter(value)}
       onClick={strategyMenu.toggle}
@@ -59,7 +59,7 @@ function PickerStrategy({ value, onChange }: PickerStrategyProps) {
           value={value === strategy}
           setValue={() => handleChange(strategy)}
           label={labelLibraryFilter(strategy)}
-          tooltip={describeLibraryFilter(strategy)}
+          title={describeLibraryFilter(strategy)}
           disabled={isStrategyDisabled(strategy)}
         />);
       })}

rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx

@@ -65,7 +65,7 @@ function SearchPanel({ total, filtered, query, setQuery, strategy, setFilter }:
       'flex gap-1 justify-center items-center'
     )}>
       <ConceptSearch noBorder
-        dimensions='min-w-[10rem]'
+        className='min-w-[10rem]'
         value={query}
         onChange={handleChangeQuery}
       />

rsconcept/frontend/src/pages/LibraryPage/ViewLibrary.tsx

@@ -101,7 +101,7 @@ function ViewLibrary({ items, resetQuery: cleanQuery }: ViewLibraryProps) {
     )}>
       <HelpButton
         topic={HelpTopic.LIBRARY}
-        dimensions='max-w-[35rem]'
+        className='max-w-[35rem]'
         offset={0}
       />
     </div>

rsconcept/frontend/src/pages/LoginPage.tsx

@@ -13,7 +13,7 @@ import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import useQueryStrings from '@/hooks/useQueryStrings';
 import { IUserLoginData } from '@/models/library';
-import { resources } from '@/utils/constants';
+import { classnames, resources } from '@/utils/constants';
 
 
 function ProcessError({error}: { error: ErrorData }): React.ReactElement {
@@ -68,7 +68,8 @@ function LoginPage() {
   <form
     className={clsx(
       'w-[24rem]', 
-      'pt-12 pb-6 px-6 flex flex-col gap-3'
+      'pt-12 pb-6 px-6',
+      classnames.flex_col
     )}
     onSubmit={handleSubmit}
   >

rsconcept/frontend/src/pages/ManualsPage/TopicsList.tsx

@@ -13,8 +13,7 @@ function TopicsList({ activeTopic, onChangeTopic }: TopicsListProps) {
   return (
   <div className={clsx(
     'sticky top-0 left-0',
-    'min-w-[13rem] h-fit',
+    'min-w-[13rem]',
-    'flex flex-col',
     'border-x',
     'clr-controls',
     'small-caps',

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

@@ -30,31 +30,31 @@ function ConstituentaToolbar({
   return (
     <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Сохранить изменения [Ctrl + S]'
+      title='Сохранить изменения [Ctrl + S]'
       disabled={!canSave}
       icon={<FiSave size='1.25rem' className={canSave ? 'clr-text-primary' : ''}/>}
       onClick={onSubmit}
     />
     <MiniButton
-      tooltip='Сбросить несохраненные изменения'
+      title='Сбросить несохраненные изменения'
       disabled={!canSave}
       onClick={onReset}
       icon={<BiReset size='1.25rem' className={canSave ? 'clr-text-primary' : ''} />}
     />
     <MiniButton
-      tooltip='Создать конституенту после данной'
+      title='Создать конституенту после данной'
       disabled={!isMutable}
       onClick={onCreate}
       icon={<BiPlusCircle size={'1.25rem'} className={isMutable ? 'clr-text-success' : ''} />} 
     />
     <MiniButton
-      tooltip='Клонировать конституенту [Alt + V]'
+      title='Клонировать конституенту [Alt + V]'
       disabled={!isMutable}
       onClick={onClone}
       icon={<BiDuplicate size='1.25rem' className={isMutable ? 'clr-text-success' : ''} />} 
     />
     <MiniButton
-      tooltip='Удалить редактируемую конституенту'
+      title='Удалить редактируемую конституенту'
       disabled={!isMutable}
       onClick={onDelete}
       icon={<BiTrash size='1.25rem' className={isMutable ? 'clr-text-warning' : ''} />}

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

@@ -13,6 +13,7 @@ import TextArea from '@/components/Common/TextArea';
 import RefsInput from '@/components/RefsInput';
 import { useRSForm } from '@/context/RSFormContext';
 import { IConstituenta, ICstRenameData, ICstUpdateData } from '@/models/rsform';
+import { classnames } from '@/utils/constants';
 import { labelCstTypification } from '@/utils/labels';
 
 import EditorRSExpression from '../EditorRSExpression';
@@ -111,18 +112,18 @@ function FormConstituenta({
     className='flex select-none'
   >
     <MiniButton
-      tooltip={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
+      title={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
       disabled={disabled}
       noHover
       onClick={onEditTerm}
       icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
     />
-    <div className='pt-1 pl-[1.375rem] text-sm font-semibold whitespace-nowrap w-fit'>
+    <div className='pt-1 pl-[1.375rem] text-sm font-semibold whitespace-nowrap'>
       <span>Имя </span>
       <span className='ml-1'>{constituenta?.alias ?? ''}</span>
     </div>
     <MiniButton noHover
-      tooltip='Переименовать конституенту'
+      title='Переименовать конституенту'
       disabled={disabled}
       onClick={handleRename}
       icon={<LiaEdit size='1rem' className={!disabled ? 'clr-text-primary' : ''} />}
@@ -131,7 +132,8 @@ function FormConstituenta({
   <form id={id}
     className={clsx(
       'mt-1 min-w-[47.8rem] max-w-[47.8rem]',
-      'px-4 py-1 flex flex-col gap-3'
+      'px-4 py-1',
+      classnames.flex_col
     )}
     onSubmit={handleSubmit}
   >

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

@@ -138,12 +138,12 @@ function EditorRSExpression({
   <div>
     <Overlay position='top-0 right-0 flex'>
       <MiniButton noHover
-        tooltip='Включение специальной клавиатуры'
+        title='Включение специальной клавиатуры'
         onClick={() => setShowControls(prev => !prev)}
         icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'clr-text-primary': ''} />}
       />
       <MiniButton noHover
-        tooltip='Дерево разбора выражения'
+        title='Дерево разбора выражения'
         onClick={handleShowAST}
         icon={<RiNodeTree size='1.25rem' className='clr-text-primary' />}
       />

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

@@ -52,30 +52,30 @@ const MAIN_THIRD_ROW: TokenID[] = [
 ];
 
 const SECONDARY_FIRST_ROW = [
-  {text: 'μ', tooltip: 'q'},
+  {text: 'μ', title: 'q'},
-  {text: 'ω', tooltip: 'w'},
+  {text: 'ω', title: 'w'},
-  {text: 'ε', tooltip: 'e'},
+  {text: 'ε', title: 'e'},
-  {text: 'ρ', tooltip: 'r'},
+  {text: 'ρ', title: 'r'},
-  {text: 'τ', tooltip: 't'},
+  {text: 'τ', title: 't'},
-  {text: 'π', tooltip: 'y'}
+  {text: 'π', title: 'y'}
 ];
 
 const SECONDARY_SECOND_ROW = [
-  {text: 'α', tooltip: 'a'},
+  {text: 'α', title: 'a'},
-  {text: 'σ', tooltip: 's'},
+  {text: 'σ', title: 's'},
-  {text: 'δ', tooltip: 'd'},
+  {text: 'δ', title: 'd'},
-  {text: 'φ', tooltip: 'f'},
+  {text: 'φ', title: 'f'},
-  {text: 'γ', tooltip: 'g'},
+  {text: 'γ', title: 'g'},
-  {text: 'λ', tooltip: 'h'}
+  {text: 'λ', title: 'h'}
 ];
 
 const SECONDARY_THIRD_ROW = [
-  {text: 'ζ', tooltip: 'z'},
+  {text: 'ζ', title: 'z'},
-  {text: 'ξ', tooltip: 'x'},
+  {text: 'ξ', title: 'x'},
-  {text: 'ψ', tooltip: 'c'},
+  {text: 'ψ', title: 'c'},
-  {text: 'θ', tooltip: 'v'},
+  {text: 'θ', title: 'v'},
-  {text: 'β', tooltip: 'b'},
+  {text: 'β', title: 'b'},
-  {text: 'η', tooltip: 'n'}
+  {text: 'η', title: 'n'}
 ];
 
 interface RSEditorControlsProps {
@@ -92,9 +92,9 @@ function RSEditorControls({ onEdit, disabled }: RSEditorControlsProps) {
       token={token} onInsert={onEdit} disabled={disabled}
     />)}
     {SECONDARY_FIRST_ROW.map(
-    ({text, tooltip}) => 
+    ({text, title}) => 
-    <RSLocalButton key={`${prefixes.rsedit_btn}${tooltip}`}
+    <RSLocalButton key={`${prefixes.rsedit_btn}${title}`}
-      text={text} tooltip={tooltip} onInsert={onEdit} disabled={disabled}
+      text={text} title={title} onInsert={onEdit} disabled={disabled}
     />)}
 
     {MAIN_SECOND_ROW.map(
@@ -103,9 +103,9 @@ function RSEditorControls({ onEdit, disabled }: RSEditorControlsProps) {
       token={token} onInsert={onEdit} disabled={disabled}
     />)}
     {SECONDARY_SECOND_ROW.map(
-    ({text, tooltip}) => 
+    ({text, title}) => 
-    <RSLocalButton key={`${prefixes.rsedit_btn}${tooltip}`}
+    <RSLocalButton key={`${prefixes.rsedit_btn}${title}`}
-      text={text} tooltip={tooltip} onInsert={onEdit} disabled={disabled}
+      text={text} title={title} onInsert={onEdit} disabled={disabled}
     />)}
 
     {MAIN_THIRD_ROW.map(
@@ -114,9 +114,9 @@ function RSEditorControls({ onEdit, disabled }: RSEditorControlsProps) {
       token={token} onInsert={onEdit} disabled={disabled}
     />)}
     {SECONDARY_THIRD_ROW.map(
-    ({text, tooltip}) => 
+    ({text, title}) => 
-    <RSLocalButton key={`${prefixes.rsedit_btn}${tooltip}`}
+    <RSLocalButton key={`${prefixes.rsedit_btn}${title}`}
-      text={text} tooltip={tooltip} onInsert={onEdit} disabled={disabled}
+      text={text} title={title} onInsert={onEdit} disabled={disabled}
     />)}
   </div>);
 }

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

@@ -2,16 +2,16 @@ import { TokenID } from '@/models/rslang';
 
 interface RSLocalButtonProps {
   text: string
-  tooltip: string
+  title: string
   disabled?: boolean
   onInsert: (token: TokenID, key?: string) => void
 }
 
-function RSLocalButton({ text, tooltip, disabled, onInsert }: RSLocalButtonProps) {
+function RSLocalButton({ text, title, disabled, onInsert }: RSLocalButtonProps) {
   return (
   <button type='button' tabIndex={-1}
     disabled={disabled}
-    title={tooltip}
+    title={title}
     className='w-[2rem] h-6 cursor-pointer disabled:cursor-default rounded-none clr-hover clr-btn-clear'
     onClick={() => onInsert(TokenID.ID_LOCAL, text)}
   >

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

@@ -3,6 +3,7 @@
 import { Dispatch, SetStateAction } from 'react';
 
 import Divider from '@/components/Common/Divider';
+import FlexColumn from '@/components/Common/FlexColumn';
 import InfoLibraryItem from '@/components/Shared/InfoLibraryItem';
 import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
@@ -69,7 +70,7 @@ function EditorRSForm({
       className='flex'
       onKeyDown={handleInput}
     >
-      <div className='flex flex-col gap-3 px-4 pb-2'>
+      <FlexColumn className='px-4 pb-2'>
         <FormRSForm disabled={!isMutable}
           id={globalIDs.library_item_editor}
           isModified={isModified}
@@ -79,7 +80,7 @@ function EditorRSForm({
         <Divider margins='my-2' />
         
         <InfoLibraryItem item={schema} />
-      </div>
+      </FlexColumn>
 
       <RSFormStats stats={schema?.stats}/>
     </div>

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/FormRSForm.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { Dispatch, SetStateAction, useEffect, useLayoutEffect, useState } from 'react';
 import { FiSave } from 'react-icons/fi';
 import { toast } from 'react-toastify';
@@ -12,7 +13,7 @@ import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
 import { LibraryItemType } from '@/models/library';
 import { IRSFormCreateData } from '@/models/rsform';
-import { limits, patterns } from '@/utils/constants';
+import { classnames, limits, patterns } from '@/utils/constants';
 
 interface FormRSFormProps {
   id?: string
@@ -79,7 +80,11 @@ function FormRSForm({
 
   return (
   <form id={id}
-    className='flex flex-col gap-3 mt-1 py-1 min-w-[22rem] w-[30rem]'
+    className={clsx(
+      'mt-1 min-w-[22rem] w-[30rem]',
+      'py-1',
+      classnames.flex_col
+    )}
     onSubmit={handleSubmit}
   >
     <TextInput required
@@ -92,7 +97,7 @@ function FormRSForm({
       label='Сокращение' 
       className='w-[14rem]'
       pattern={patterns.alias}
-      tooltip={`не более ${limits.alias_len} символов`}
+      title={`не более ${limits.alias_len} символов`}
       disabled={disabled}
       value={alias}
       onChange={event => setAlias(event.target.value)}
@@ -106,14 +111,14 @@ function FormRSForm({
     <div className='flex justify-between whitespace-nowrap'>
       <Checkbox
         label='Общедоступная схема'
-        tooltip='Общедоступные схемы видны всем пользователям и могут быть изменены'
+        title='Общедоступные схемы видны всем пользователям и могут быть изменены'
         disabled={disabled}
         value={common}
         setValue={value => setCommon(value)}
       />
       <Checkbox
         label='Неизменная схема'
-        tooltip='Только администраторы могут присваивать схемам неизменный статус'
+        title='Только администраторы могут присваивать схемам неизменный статус'
         disabled={disabled || !user?.is_staff}
         value={canonical}
         setValue={value => setCanonical(value)}

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormStats.tsx

@@ -11,7 +11,7 @@ function RSFormStats({ stats }: RSFormStatsProps) {
     return null;
   }
   return (
-  <div className='flex flex-col gap-1 px-4 mt-8 min-w-[16rem] max-w-[16rem]'>
+  <div className='flex flex-col gap-1 px-4 mt-8 w-[16rem]'>
     <LabeledValue id='count_all'
       label='Всего конституент '
       text={stats.count_all}

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/RSFormToolbar.tsx

@@ -36,40 +36,39 @@ function RSFormToolbar({
   return (    
   <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Сохранить изменения [Ctrl + S]'
+      title='Сохранить изменения [Ctrl + S]'
       disabled={!canSave}
       icon={<FiSave size='1.25rem' className={canSave ? 'clr-text-primary' : ''}/>}
       onClick={onSubmit}
     />
     <MiniButton
-      tooltip='Поделиться схемой'
+      title='Поделиться схемой'
       icon={<BiShareAlt size='1.25rem' className='clr-text-primary'/>}
       onClick={onShare}
     />
     <MiniButton
-      tooltip='Скачать TRS файл'
+      title='Скачать TRS файл'
       icon={<BiDownload size='1.25rem' className='clr-text-primary'/>}
       onClick={onDownload}
     />
     <MiniButton
-      tooltip={'отслеживание: ' + (isSubscribed ? '[включено]' : '[выключено]')}
+      title={'отслеживание: ' + (isSubscribed ? '[включено]' : '[выключено]')}
       disabled={anonymous || processing}
       icon={isSubscribed
         ? <FiBell size='1.25rem' className='clr-text-primary' />
         : <FiBellOff size='1.25rem' className='clr-text-controls' />
       }
-      dimensions='h-full w-fit'
       style={{outlineColor: 'transparent'}}
       onClick={onToggleSubscribe}
       />
     <MiniButton
-      tooltip={claimable ? 'Стать владельцем' : 'Невозможно стать владельцем' }
+      title={claimable ? 'Стать владельцем' : 'Невозможно стать владельцем' }
       icon={<LuCrown size='1.25rem' className={!claimable ? '' : 'clr-text-success'}/>}
       disabled={!claimable || anonymous || processing}
       onClick={onClaim}
     />
     <MiniButton
-      tooltip='Удалить схему'
+      title='Удалить схему'
       disabled={!isMutable}
       onClick={onDestroy}
       icon={<BiTrash size='1.25rem' className={isMutable ? 'clr-text-warning' : ''} />}

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSListToolbar.tsx

@@ -40,25 +40,25 @@ function RSListToolbar({
   return (
   <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Переместить вверх [Alt + вверх]'
+      title='Переместить вверх [Alt + вверх]'
       icon={<BiUpvote size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-primary': ''}/>}
       disabled={!isMutable || nothingSelected}
       onClick={onMoveUp}
     />
     <MiniButton
-      tooltip='Переместить вниз [Alt + вниз]'
+      title='Переместить вниз [Alt + вниз]'
       icon={<BiDownvote size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-primary': ''}/>}
       disabled={!isMutable || nothingSelected}
       onClick={onMoveDown}
     />
     <MiniButton
-      tooltip='Клонировать конституенту [Alt + V]'
+      title='Клонировать конституенту [Alt + V]'
       icon={<BiDuplicate size='1.25rem' className={isMutable && selectedCount === 1 ? 'clr-text-success': ''} />}
       disabled={!isMutable || selectedCount !== 1}
       onClick={onClone}
     />
     <MiniButton
-      tooltip='Добавить новую конституенту... [Alt + `]'
+      title='Добавить новую конституенту... [Alt + `]'
       icon={<BiPlusCircle size='1.25rem' className={isMutable ? 'clr-text-success': ''} />}
       disabled={!isMutable}
       onClick={() => onCreate()}
@@ -66,7 +66,7 @@ function RSListToolbar({
     <div ref={insertMenu.ref} className='flex justify-center'>
       <div>
         <MiniButton
-          tooltip='Добавить пустую конституенту'
+          title='Добавить пустую конституенту'
           icon={<BiDownArrowCircle size='1.25rem' className={isMutable ? 'clr-text-success': ''} />}
           disabled={!isMutable}
           onClick={insertMenu.toggle}
@@ -79,14 +79,14 @@ function RSListToolbar({
             key={`${prefixes.csttype_list}${typeStr}`}
             text={`${getCstTypePrefix(typeStr as CstType)}1 — ${labelCstType(typeStr as CstType)}`}
             onClick={() => onCreate(typeStr as CstType)}
-            tooltip={getCstTypeShortcut(typeStr as CstType)}
+            title={getCstTypeShortcut(typeStr as CstType)}
           />
         )}
         </Dropdown> : null}
       </div>
     </div>
     <MiniButton
-      tooltip='Удалить выбранные [Delete]'
+      title='Удалить выбранные [Delete]'
       icon={<BiTrash size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-warning' : ''} />}
       disabled={!isMutable || nothingSelected}
       onClick={onDelete}

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

@@ -14,7 +14,7 @@ import useLocalStorage from '@/hooks/useLocalStorage';
 import { GraphColoringScheme, GraphFilterParams } from '@/models/miscelanious';
 import { CstType, ICstCreateData } from '@/models/rsform';
 import { colorbgGraphNode } from '@/utils/color';
-import { TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
+import { classnames, TIMEOUT_GRAPH_REFRESH } from '@/utils/constants';
 
 import GraphSidebar from './GraphSidebar';
 import GraphToolbar from './GraphToolbar';
@@ -235,7 +235,7 @@ function EditorTermGraph({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Ed
       layer='z-tooltip'
       position='top-[1.6rem] left-[2.6rem]'
       className={clsx(
-        'w-[25rem] h-fit min-h-[11rem]',
+        'w-[25rem]',
         'px-3',
         'overflow-y-auto',
         'border shadow-md',
@@ -243,6 +243,7 @@ function EditorTermGraph({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Ed
       )}
     >
       <InfoConstituenta
+        className='pt-1 pb-2'
         data={hoverCst}
       />
     </Overlay> : null}
@@ -250,8 +251,8 @@ function EditorTermGraph({ isMutable, onOpenEdit, onCreateCst, onDeleteCst }: Ed
     <Overlay
       position='top-0 left-0'
       className={clsx(
-        'max-w-[13.5rem] min-w-[13.5rem]',
+        'w-[13.5rem]',
-        'flex flex-col gap-3'
+        classnames.flex_col
       )}
     >
       <GraphSidebar 

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/GraphToolbar.tsx

@@ -34,12 +34,12 @@ function GraphToolbar({
   return (
   <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
     <MiniButton
-      tooltip='Настройки фильтрации узлов и связей'
+      title='Настройки фильтрации узлов и связей'
       icon={<BiFilterAlt size='1.25rem' className='clr-text-primary' />}
       onClick={showParamsDialog}
     />
     <MiniButton
-      tooltip={!noText ? 'Скрыть текст' : 'Отобразить текст'}
+      title={!noText ? 'Скрыть текст' : 'Отобразить текст'}
       icon={
         !noText
         ? <BiFontFamily size='1.25rem' className='clr-text-success' />
@@ -49,28 +49,28 @@ function GraphToolbar({
     />
     <MiniButton
       icon={<BiCollapse size='1.25rem' className='clr-text-primary' />}
-      tooltip='Восстановить камеру'
+      title='Восстановить камеру'
       onClick={onResetViewpoint}
     />
     <MiniButton
       icon={<BiPlanet size='1.25rem' className={!is3D ? '' : orbit ? 'clr-text-success' : 'clr-text-primary'} />}
-      tooltip='Анимация вращения'
+      title='Анимация вращения'
       disabled={!is3D}
       onClick={toggleOrbit}
     />
     <MiniButton
-      tooltip='Новая конституента'
+      title='Новая конституента'
       icon={<BiPlusCircle size='1.25rem' className={isMutable ? 'clr-text-success' : ''} />}
       disabled={!isMutable}
       onClick={onCreate}
     />
     <MiniButton
-      tooltip='Удалить выбранные'
+      title='Удалить выбранные'
       icon={<BiTrash size='1.25rem' className={isMutable && !nothingSelected ? 'clr-text-warning' : ''} />}
       disabled={!isMutable || nothingSelected}
       onClick={onDelete}
     />
-    <HelpButton topic={HelpTopic.GRAPH_TERM} dimensions='max-w-[calc(100vw-20rem)]' offset={4} />
+    <HelpButton topic={HelpTopic.GRAPH_TERM} className='max-w-[calc(100vw-20rem)]' offset={4} />
   </Overlay>);
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/ViewHidden.tsx

@@ -43,7 +43,7 @@ function ViewHidden({
     return null;
   }
   return (
-  <div className='flex flex-col text-sm ml-2 border clr-app max-w-[12.5rem] min-w-[12.5rem]'>
+  <div className='flex flex-col text-sm ml-2 border clr-app w-[12.5rem]'>
     <p className='mt-2 text-center'><b>Скрытые конституенты</b></p>
     <div className='flex flex-wrap justify-center gap-2 py-2 overflow-y-auto' style={{ maxHeight: dismissedHeight }}>
     {items.map(

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

@@ -415,11 +415,11 @@ function RSTabs() {
       />
       <ConceptTab
         label='Карточка'
-        tooltip={`Название схемы: ${schema.title ?? ''}`}
+        title={`Название схемы: ${schema.title ?? ''}`}
       />
       <ConceptTab
         label='Содержание'
-        tooltip={[
+        title={[
           `Всего конституент: ${schema.stats?.count_all ?? 0}`,
           `Количество ошибок: ${schema.stats?.count_errors ?? 0}`
         ].join('\n')}

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

@@ -98,7 +98,7 @@ function RSTabsMenu({
   <div className='flex'>
     <div ref={schemaMenu.ref}>
       <Button noBorder dense tabIndex={-1}
-        tooltip='Меню'
+        title='Меню'
         icon={<BiMenu size='1.25rem' className='clr-text-controls' />}
         className='h-full pl-2'
         style={{outlineColor: 'transparent'}}
@@ -108,7 +108,7 @@ function RSTabsMenu({
       <Dropdown>
         <DropdownButton
           text={isOwned ? 'Вы — владелец' : 'Стать владельцем'}
-          tooltip={!user || !isClaimable ? 'Взять во владение можно общую изменяемую схему' : ''}
+          title={!user || !isClaimable ? 'Взять во владение можно общую изменяемую схему' : ''}
           icon={<LuCrown size='1rem' className={isOwned ? 'clr-text-success' : 'clr-text-controls'} />}
           onClick={(!isOwned && user && isClaimable) ? handleClaimOwner : undefined}
         />
@@ -147,7 +147,7 @@ function RSTabsMenu({
     
     <div ref={editMenu.ref}>
       <Button dense noBorder tabIndex={-1}
-        tooltip={'Редактирование'}
+        title={'Редактирование'}
         className='h-full'
         style={{outlineColor: 'transparent'}}
         icon={<FiEdit size='1.25rem' className={isMutable ? 'clr-text-success' : 'clr-text-warning'}/>}
@@ -157,13 +157,13 @@ function RSTabsMenu({
       <Dropdown>
         <DropdownButton disabled={!isMutable}
           text='Сброс имён'
-          tooltip='Присвоить порядковые имена и обновить выражения'
+          title='Присвоить порядковые имена и обновить выражения'
           icon={<BiAnalyse size='1rem' className={isMutable ? 'clr-text-primary': ''} />}
           onClick={handleReindex}
         />
         <DropdownButton disabled={!isMutable}
           text='Банк выражений'
-          tooltip='Создать конституенту из шаблона'
+          title='Создать конституенту из шаблона'
           icon={<BiDiamond size='1rem' className={isMutable ? 'clr-text-success': ''} />}
           onClick={handleTemplates}
         />
@@ -172,7 +172,7 @@ function RSTabsMenu({
 
     <div ref={accessMenu.ref}>
       <Button dense noBorder tabIndex={-1}
-        tooltip={`режим ${labelAccessMode(mode)}`}
+        title={`режим ${labelAccessMode(mode)}`}
         className='h-full pr-2'
         style={{outlineColor: 'transparent'}}
         icon={
@@ -186,19 +186,19 @@ function RSTabsMenu({
       <Dropdown>
         <DropdownButton
           text={labelAccessMode(UserAccessMode.READER)}
-          tooltip={describeAccessMode(UserAccessMode.READER)}
+          title={describeAccessMode(UserAccessMode.READER)}
           icon={<LuGlasses size='1rem' className='clr-text-primary' />}
           onClick={() => handleChangeMode(UserAccessMode.READER)}
         />
         <DropdownButton disabled={!isOwned}
           text={labelAccessMode(UserAccessMode.OWNER)}
-          tooltip={describeAccessMode(UserAccessMode.OWNER)}
+          title={describeAccessMode(UserAccessMode.OWNER)}
           icon={<LuCrown size='1rem' className={isOwned ? 'clr-text-primary': ''} />}
           onClick={() => handleChangeMode(UserAccessMode.OWNER)}
         />
         <DropdownButton disabled={!user?.is_staff}
           text={labelAccessMode(UserAccessMode.ADMIN)}
-          tooltip={describeAccessMode(UserAccessMode.ADMIN)}
+          title={describeAccessMode(UserAccessMode.ADMIN)}
           icon={<BiMeteor size='1rem' className={user?.is_staff ? 'clr-text-primary': ''} />}
           onClick={() => handleChangeMode(UserAccessMode.ADMIN)}
         />

rsconcept/frontend/src/pages/RSFormPage/ViewConstituents/ConstituentsSearch.tsx

@@ -77,15 +77,15 @@ function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }:
   return (
   <div className='flex items-stretch border-b clr-input'>
     <ConceptSearch noBorder
-      dimensions='min-w-[6rem] pr-2 w-full'
+      className='min-w-[6rem] pr-2 flex-grow'
       value={filterText}
       onChange={setFilterText}
     />
    
     <div ref={matchModeMenu.ref}>
       <SelectorButton transparent tabIndex={-1}
-        tooltip='Настройка атрибутов для фильтрации'
+        title='Настройка атрибутов для фильтрации'
-        dimensions='w-fit h-full'
+        className='h-full'
         icon={<BiFilterAlt size='1.25rem' />}
         text={labelCstMathchMode(filterMatch)}
         onClick={matchModeMenu.toggle}
@@ -108,8 +108,8 @@ function ConstituentsSearch({ schema, activeID, activeExpression, setFiltered }:
 
     <div ref={sourceMenu.ref}>
       <SelectorButton transparent tabIndex={-1}
-        tooltip='Настройка фильтрации по графу термов'
+        title='Настройка фильтрации по графу термов'
-        dimensions='w-fit h-full pr-2'
+        className='h-full pr-2'
         icon={<BiCog size='1.25rem' />}
         text={labelCstSource(filterSource)}
         onClick={sourceMenu.toggle}

rsconcept/frontend/src/pages/RegisterPage.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { BiInfoCircle } from 'react-icons/bi';
 import { toast } from 'react-toastify';
@@ -7,6 +8,7 @@ import { toast } from 'react-toastify';
 import Button from '@/components/Common/Button';
 import Checkbox from '@/components/Common/Checkbox';
 import ConceptTooltip from '@/components/Common/ConceptTooltip';
+import FlexColumn from '@/components/Common/FlexColumn';
 import Overlay from '@/components/Common/Overlay';
 import SubmitButton from '@/components/Common/SubmitButton';
 import TextInput from '@/components/Common/TextInput';
@@ -16,7 +18,7 @@ import InfoError from '@/components/InfoError';
 import { useAuth } from '@/context/AuthContext';
 import { useConceptNavigation } from '@/context/NagivationContext';
 import { type IUserSignupData } from '@/models/library';
-import { globalIDs, patterns } from '@/utils/constants';
+import { classnames, globalIDs, patterns } from '@/utils/constants';
 
 function RegisterPage() {
   const router = useConceptNavigation();
@@ -66,12 +68,12 @@ function RegisterPage() {
   }
   return (
   <form
-    className='flex flex-col gap-3 px-6 py-3 h-fit'
+    className={clsx('px-6 py-3', classnames.flex_col)}
     onSubmit={handleSubmit}
   >
     <h1>Новый пользователь</h1>
     <div className='flex gap-12'>
-      <div className='flex flex-col gap-3'>
+      <FlexColumn>
         <div className='absolute'>
           <Overlay
             id={globalIDs.password_tooltip}
@@ -91,7 +93,7 @@ function RegisterPage() {
         <TextInput id='username' required
           label='Имя пользователя (логин)'
           pattern={patterns.login}
-          tooltip='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
+          title='Минимум 3 знака. Латинские буквы и цифры. Не может начинаться с цифры'
           value={username}
           className='w-[15rem]'
           onChange={event => setUsername(event.target.value)}
@@ -108,12 +110,12 @@ function RegisterPage() {
           value={password2}
           onChange={event => setPassword2(event.target.value)}
         />
-      </div>
+      </FlexColumn>
 
-      <div className='flex flex-col gap-3 w-[15rem]'>
+      <FlexColumn className='w-[15rem]'>
         <TextInput id='email' required
           label='Электронная почта (email)'
-          tooltip='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
+          title='электронная почта в корректном формате, например: i.petrov@mycompany.ru.com'
           value={email}
           onChange={event => setEmail(event.target.value)}
         />
@@ -127,7 +129,7 @@ function RegisterPage() {
           value={lastName}
           onChange={event => setLastName(event.target.value)}
         />
-      </div>
+      </FlexColumn>
     </div>
     
     <div className='flex gap-1 text-sm'>

rsconcept/frontend/src/pages/UserProfilePage/EditorPassword.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
+import FlexColumn from '@/components/Common/FlexColumn';
 import SubmitButton from '@/components/Common/SubmitButton';
 import TextInput from '@/components/Common/TextInput';
 import InfoError, { ErrorData } from '@/components/InfoError';
@@ -78,7 +79,7 @@ function EditorPassword() {
     )}
     onSubmit={handleSubmit}
   >
-    <div className='flex flex-col gap-3'>
+    <FlexColumn>
       <TextInput id='old_password' type='password' allowEnter
         label='Старый пароль'
         value={oldPassword}
@@ -101,7 +102,7 @@ function EditorPassword() {
         }}
       />
       {error ? <ProcessError error={error} /> : null}
-    </div>
+    </FlexColumn>
     <SubmitButton
       text='Сменить пароль'
       className='self-center'

rsconcept/frontend/src/pages/UserProfilePage/EditorProfile.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -8,6 +9,7 @@ import TextInput from '@/components/Common/TextInput';
 import { useBlockNavigation } from '@/context/NagivationContext';
 import { useUserProfile } from '@/context/UserProfileContext';
 import { IUserUpdateData } from '@/models/library';
+import { classnames } from '@/utils/constants';
 
 function EditorProfile() {
   const { updateUser, user, processing } = useUserProfile();
@@ -53,11 +55,15 @@ function EditorProfile() {
   return (
   <form
     onSubmit={handleSubmit}
-    className='px-6 py-2 flex flex-col gap-3 min-w-[18rem]'
+    className={clsx(
+      'min-w-[18rem]',
+      'px-6 py-2',
+      classnames.flex_col
+    )}
   >
     <TextInput id='username' disabled
       label='Логин'
-      tooltip='Логин изменить нельзя'
+      title='Логин изменить нельзя'
       value={username}
     />
     <TextInput id='first_name' allowEnter

rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx

@@ -36,7 +36,7 @@ function UserTabs() {
       <div>
         <Overlay position='top-0 right-0'>
           <MiniButton
-            tooltip='Показать/Скрыть список отслеживаний'
+            title='Показать/Скрыть список отслеживаний'
             icon={showSubs
               ? <FiBell size='1.25rem' className='clr-text-primary' />
               : <FiBellOff size='1.25rem' className='clr-text-primary' />

rsconcept/frontend/src/utils/codemirror.ts

@@ -137,7 +137,7 @@ export function domTooltipConstituenta(cst: IConstituenta) {
   const dom = document.createElement('div');
   dom.className = clsx(
     'z-tooltip',
-    'max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit',
+    'max-h-[25rem] max-w-[25rem] min-w-[10rem]',
     'p-2',
     'border shadow-md', 
     'overflow-y-auto',
@@ -181,7 +181,7 @@ export function domTooltipEntityReference(ref: IEntityReference, cst: IConstitue
   const dom = document.createElement('div');
   dom.className = clsx(
     'z-tooltip',
-    'max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit',
+    'max-h-[25rem] max-w-[25rem] min-w-[10rem]',
     'p-2 flex flex-col',
     'border shadow-md',
     'overflow-y-auto',
@@ -229,7 +229,7 @@ export function domTooltipSyntacticReference(ref: ISyntacticReference, masterRef
   const dom = document.createElement('div');
   dom.className = clsx(
     'z-tooltip',
-    'max-h-[25rem] max-w-[25rem] min-w-[10rem] w-fit',
+    'max-h-[25rem] max-w-[25rem] min-w-[10rem]',
     'p-2 flex flex-col',
     'border shadow-md',
     'overflow-y-auto',

rsconcept/frontend/src/utils/constants.ts

@@ -55,6 +55,14 @@ export const youtube = {
   intro: '0Ty9mu9sOJo'
 };
 
+/**
+ * Classname combinations.
+ * Note: using clsx in conjunction with tailwindCss is preferred to creating custom CSS
+ */
+export const classnames = {
+  flex_col: 'flex flex-col gap-3'
+};
+
 /**
  * Constant URLs.
  */