Fix UI processing issues

rsconcept/frontend/src/app/Navigation/UserMenu.tsx

@@ -19,7 +19,7 @@ function UserMenu() {
       {!user ? (
         <NavigationButton
           title='Перейти на страницу логина'
-          icon={<InDoorIcon size='1.5rem' className='clr-text-primary' />}
+          icon={<InDoorIcon size='1.5rem' className='icon-primary' />}
           onClick={navigateLogin}
         />
       ) : null}

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

@@ -16,7 +16,7 @@ interface HelpButtonProps extends CProps.Styling {
 function HelpButton({ topic, ...restProps }: HelpButtonProps) {
   return (
     <div id={`help-${topic}`} className='p-1'>
-      <BiInfoCircle size='1.25rem' className='clr-text-primary' />
+      <BiInfoCircle size='1.25rem' className='icon-primary' />
       <Tooltip clickable anchorSelect={`#help-${topic}`} layer='z-modal-tooltip' {...restProps}>
         <div className='relative' onClick={event => event.stopPropagation()}>
           <div className='absolute right-0 text-sm top-[0.4rem] clr-input'>

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

@@ -110,7 +110,14 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
         header: 'Типизация',
         enableHiding: true,
         cell: props => (
-          <div className={clsx('min-w-[9.3rem] max-w-[9.3rem]', 'text-sm break-words')}>{props.getValue()}</div>
+          <div
+            className={clsx(
+              'min-w-[9.3rem] max-w-[9.3rem]', // prettier: split lines
+              'text-sm break-words'
+            )}
+          >
+            {props.getValue()}
+          </div>
         )
       }),
       argumentsHelper.display({
@@ -123,7 +130,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
             {props.row.original.value ? (
               <MiniButton
                 title='Очистить значение'
-                icon={<BiX size='0.75rem' className='clr-text-red' />}
+                icon={<BiX size='0.75rem' className='icon-red' />}
                 noHover
                 onClick={() => handleClearArgument(props.row.original)}
               />
@@ -150,7 +157,13 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
       <DataTable
         dense
         noFooter
-        className={clsx('max-h-[5.8rem] min-h-[5.8rem]', 'overflow-y-auto', 'text-sm', 'border', 'select-none')}
+        className={clsx(
+          'max-h-[5.8rem] min-h-[5.8rem]', // prettier: split lines
+          'overflow-y-auto',
+          'text-sm',
+          'border',
+          'select-none'
+        )}
         data={state.arguments}
         columns={columns}
         conditionalRowStyles={conditionalRowStyles}
@@ -158,7 +171,13 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
         onRowClicked={handleSelectArgument}
       />
 
-      <div className={clsx('my-4', 'flex gap-2 justify-center items-center', 'select-none')}>
+      <div
+        className={clsx(
+          'my-4', // prettier: split lines
+          'flex gap-2 justify-center items-center',
+          'select-none'
+        )}
+      >
         <span
           title='Выберите аргумент из списка сверху и значение из списка снизу'
           className='font-semibold text-center'
@@ -175,7 +194,7 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
         <div className='flex'>
           <MiniButton
             title='Подставить значение аргумента'
-            icon={<BiCheck size='1.25rem' className={!!argumentValue && !!selectedArgument ? 'clr-text-green' : ''} />}
+            icon={<BiCheck size='1.25rem' className='icon-green' />}
             disabled={!argumentValue || !selectedArgument}
             onClick={() => handleAssignArgument(selectedArgument!, argumentValue)}
           />
@@ -183,12 +202,12 @@ function ArgumentsTab({ state, schema, partialUpdate }: ArgumentsTabProps) {
             title='Откатить значение'
             disabled={!isModified}
             onClick={handleReset}
-            icon={<BiRefresh size='1.25rem' className={isModified ? 'clr-text-primary' : ''} />}
+            icon={<BiRefresh size='1.25rem' className='icon-primary' />}
           />
           <MiniButton
             title='Очистить значение аргумента'
             disabled={!selectedClearable}
-            icon={<BiX size='1.25rem' className={selectedClearable ? 'clr-text-red' : ''} />}
+            icon={<BiX size='1.25rem' className='icon-red' />}
             onClick={() => (selectedArgument ? handleClearArgument(selectedArgument) : undefined)}
           />
         </div>

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

@@ -158,14 +158,14 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
           <MiniButton
             noHover
             title='Определить граммемы'
-            icon={<BiRightArrow size='1.25rem' className={inputText ? 'clr-text-primary' : ''} />}
+            icon={<BiRightArrow size='1.25rem' className='icon-primary' />}
             disabled={textProcessor.loading || !inputText}
             onClick={handleParse}
           />
           <MiniButton
             noHover
             title='Генерировать словоформу'
-            icon={<BiLeftArrow size='1.25rem' className={inputGrams.length !== 0 ? 'clr-text-primary' : ''} />}
+            icon={<BiLeftArrow size='1.25rem' className='icon-primary' />}
             disabled={textProcessor.loading || inputGrams.length == 0}
             onClick={handleInflect}
           />
@@ -182,14 +182,14 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         <MiniButton
           noHover
           title='Внести словоформу'
-          icon={<BiCheck size='1.25rem' className={inputText && inputGrams.length !== 0 ? 'clr-text-green' : ''} />}
+          icon={<BiCheck size='1.25rem' className='icon-green' />}
           disabled={textProcessor.loading || !inputText || inputGrams.length == 0}
           onClick={handleAddForm}
         />
         <MiniButton
           noHover
           title='Генерировать стандартные словоформы'
-          icon={<BiChevronsDown size='1.25rem' className={inputText ? 'clr-text-primary' : ''} />}
+          icon={<BiChevronsDown size='1.25rem' className='icon-primary' />}
           disabled={textProcessor.loading || !inputText}
           onClick={handleGenerateLexeme}
         />
@@ -200,7 +200,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
         <MiniButton
           noHover
           title='Сбросить все словоформы'
-          icon={<BiX size='1rem' className={forms.length !== 0 ? 'clr-text-red' : ''} />}
+          icon={<BiX size='1rem' className='icon-red' />}
           disabled={textProcessor.loading || forms.length === 0}
           onClick={handleResetAll}
         />

rsconcept/frontend/src/dialogs/DlgSubstituteCst.tsx

@@ -50,9 +50,9 @@ function DlgSubstituteCst({ hideWindow, onSubstitute }: DlgSubstituteCstProps) {
         <Label text='Удаляемая конституента' />
         <ConstituentaSelector items={schema?.items} value={original} onSelectValue={setOriginal} />
       </FlexColumn>
-      <div className=''>
+
-        <LuReplace size='3rem' className='clr-text-primary' />
+      <LuReplace size='3rem' className='icon-primary' />
-      </div>
+
       <FlexColumn>
         <Label text='Подставляемая конституента' />
         <ConstituentaSelector items={schema?.items} value={substitution} onSelectValue={setSubstitution} />

rsconcept/frontend/src/pages/CreateRSFormPage.tsx

@@ -93,7 +93,7 @@ function CreateRSFormPage() {
             />
             <MiniButton
               title='Загрузить из Экстеор'
-              icon={<BiDownload size='1.25rem' className='clr-text-primary' />}
+              icon={<BiDownload size='1.25rem' className='icon-primary' />}
               onClick={() => inputRef.current?.click()}
             />
           </Overlay>

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

@@ -55,7 +55,7 @@ function ConstituentaToolbar({
       />
       <MiniButton
         title='Клонировать конституенту [Alt + V]'
-        disabled={!isMutable}
+        disabled={!isMutable || isModified}
         onClick={onClone}
         icon={<BiDuplicate size='1.25rem' className='icon-green' />}
       />

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

@@ -7,16 +7,17 @@ import { IConstituenta } from '@/models/rsform';
 
 interface ControlsOverlayProps {
   constituenta?: IConstituenta;
-  isMutable?: boolean;
+  isMutable: boolean;
+  processing: boolean;
 
   onRename: () => void;
   onEditTerm: () => void;
 }
 
-function ControlsOverlay({ constituenta, isMutable, onRename, onEditTerm }: ControlsOverlayProps) {
+function ControlsOverlay({ constituenta, isMutable, processing, onRename, onEditTerm }: ControlsOverlayProps) {
   return (
     <Overlay position='top-1 left-[4.1rem]' className='flex select-none'>
-      {isMutable ? (
+      {isMutable || processing ? (
         <MiniButton
           title={`Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`}
           noHover
@@ -28,13 +29,13 @@ function ControlsOverlay({ constituenta, isMutable, onRename, onEditTerm }: Cont
         className={clsx(
           'pt-1 pl-[1.375rem]', // prettier: split lines
           'text-sm font-medium whitespace-nowrap',
-          !isMutable && 'pl-[2.8rem]'
+          !isMutable && !processing && 'pl-[2.8rem]'
         )}
       >
         <span>Имя </span>
         <span className='ml-1'>{constituenta?.alias ?? ''}</span>
       </div>
-      {isMutable ? (
+      {isMutable || processing ? (
         <MiniButton
           noHover
           title='Переименовать конституенту'

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

@@ -76,7 +76,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
 
   return (
     <>
-      {controller.isContentEditable ? (
+      {controller.isContentEditable || controller.isProcessing ? (
         <ConstituentaToolbar
           isMutable={!disabled}
           isModified={isModified}

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

@@ -22,7 +22,7 @@ import ControlsOverlay from './ControlsOverlay';
 export const ROW_SIZE_IN_CHARACTERS = 70;
 
 interface FormConstituentaProps {
-  isMutable?: boolean;
+  isMutable: boolean;
   showList: boolean;
 
   id?: string;
@@ -114,7 +114,13 @@ function FormConstituenta({
 
   return (
     <>
-      <ControlsOverlay isMutable={isMutable} constituenta={constituenta} onEditTerm={onEditTerm} onRename={onRename} />
+      <ControlsOverlay
+        isMutable={isMutable}
+        processing={processing}
+        constituenta={constituenta}
+        onEditTerm={onEditTerm}
+        onRename={onRename}
+      />
       <form
         id={id}
         className={clsx('mt-1 w-full md:w-[47.8rem] shrink-0', 'px-4 py-1', classnames.flex_col)}
@@ -174,7 +180,7 @@ function FormConstituenta({
           rows={convention.length > ROW_SIZE_IN_CHARACTERS ? 3 : 2}
           onChange={event => setConvention(event.target.value)}
         />
-        {isMutable ? (
+        {isMutable || processing ? (
           <SubmitButton
             text='Сохранить изменения'
             className='self-center'

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

@@ -159,19 +159,19 @@ function EditorRSExpression({
             noHover
             title='Отображение специальной клавиатуры'
             onClick={() => setShowControls(prev => !prev)}
-            icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'clr-text-primary' : ''} />}
+            icon={<FaRegKeyboard size='1.25rem' className={showControls ? 'icon-primary' : ''} />}
           />
           <MiniButton
             noHover
             title='Отображение списка конституент'
             onClick={onToggleList}
-            icon={<BiListUl size='1.25rem' className={showList ? 'clr-text-primary' : ''} />}
+            icon={<BiListUl size='1.25rem' className={showList ? 'icon-primary' : ''} />}
           />
           <MiniButton
             noHover
             title='Дерево разбора выражения'
             onClick={handleShowAST}
-            icon={<RiNodeTree size='1.25rem' className='clr-text-primary' />}
+            icon={<RiNodeTree size='1.25rem' className='icon-primary' />}
           />
         </Overlay>
 

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

@@ -20,7 +20,7 @@ interface EditorRSFormProps {
 }
 
 function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProps) {
-  const { schema, isClaimable, isSubscribed, processing } = useRSForm();
+  const { schema, isClaimable, isSubscribed } = useRSForm();
   const { user } = useAuth();
 
   function initiateSubmit() {
@@ -42,7 +42,6 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
   return (
     <>
       <RSFormToolbar
-        processing={processing}
         subscribed={isSubscribed}
         modified={isModified}
         claimable={isClaimable}

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

@@ -117,7 +117,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
           onChange={event => setAlias(event.target.value)}
         />
         <div className='flex flex-col'>
-          {controller.isMutable ? (
+          {controller.isMutable || controller.isProcessing ? (
             <Overlay position='top-[-0.25rem] right-[-0.25rem] flex'>
               <MiniButton
                 noHover
@@ -166,12 +166,12 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
           setValue={value => setCanonical(value)}
         />
       </div>
-      {controller.isContentEditable ? (
+      {controller.isContentEditable || controller.isProcessing ? (
         <SubmitButton
           text='Сохранить изменения'
           className='self-center'
           loading={processing}
-          disabled={!isModified}
+          disabled={!isModified || controller.isProcessing}
           icon={<FiSave size='1.25rem' />}
         />
       ) : null}

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

@@ -17,25 +17,16 @@ interface RSFormToolbarProps {
   subscribed: boolean;
   anonymous: boolean;
   claimable: boolean;
-  processing: boolean;
   onSubmit: () => void;
   onDestroy: () => void;
 }
 
-function RSFormToolbar({
+function RSFormToolbar({ modified, anonymous, subscribed, claimable, onSubmit, onDestroy }: RSFormToolbarProps) {
-  modified,
-  anonymous,
-  subscribed,
-  claimable,
-  processing,
-  onSubmit,
-  onDestroy
-}: RSFormToolbarProps) {
   const controller = useRSEdit();
   const canSave = useMemo(() => modified && controller.isMutable, [modified, controller.isMutable]);
   return (
     <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
-      {controller.isContentEditable ? (
+      {controller.isContentEditable || controller.isProcessing ? (
         <MiniButton
           title='Сохранить изменения [Ctrl + S]'
           disabled={!canSave}
@@ -56,7 +47,7 @@ function RSFormToolbar({
       {!anonymous ? (
         <MiniButton
           title={`Отслеживание ${subscribed ? 'включено' : 'выключено'}`}
-          disabled={processing}
+          disabled={controller.isProcessing}
           icon={
             subscribed ? (
               <FiBell size='1.25rem' className='icon-primary' />
@@ -71,11 +62,11 @@ function RSFormToolbar({
         <MiniButton
           title='Стать владельцем'
           icon={<LuCrown size='1.25rem' className='icon-green' />}
-          disabled={processing}
+          disabled={controller.isProcessing}
           onClick={controller.claim}
         />
       ) : null}
-      {controller.isContentEditable ? (
+      {controller.isContentEditable || controller.isProcessing ? (
         <MiniButton
           title='Удалить схему'
           disabled={!controller.isMutable}

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

@@ -93,7 +93,7 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)
 
   return (
     <div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
-      {controller.isContentEditable ? (
+      {controller.isContentEditable || controller.isProcessing ? (
         <SelectedCounter
           totalCount={controller.schema?.stats?.count_all ?? 0}
           selectedCount={selected.length}
@@ -101,16 +101,18 @@ function EditorRSList({ selected, setSelected, onOpenEdit }: EditorRSListProps)
         />
       ) : null}
 
-      {controller.isContentEditable ? <RSListToolbar selectedCount={selected.length} /> : null}
+      {controller.isContentEditable || controller.isProcessing ? (
+        <RSListToolbar selectedCount={selected.length} />
+      ) : null}
       <div
         className={clsx('border-b', {
-          'pt-[2.3rem]': controller.isContentEditable,
+          'pt-[2.3rem]': controller.isContentEditable || controller.isProcessing,
-          'relative top-[-1px]': !controller.isContentEditable
+          'relative top-[-1px]': !controller.isContentEditable && !controller.isProcessing
         })}
       />
 
       <RSTable
-        enableSelection={controller.isContentEditable}
+        enableSelection={controller.isContentEditable || controller.isProcessing}
         items={controller.schema?.items}
         selected={rowSelection}
         setSelected={handleRowSelection}

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

@@ -30,31 +30,25 @@ function RSListToolbar({ selectedCount }: RSListToolbarProps) {
     <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex items-start'>
       <MiniButton
         title='Переместить вверх [Alt + вверх]'
-        icon={
+        icon={<BiUpvote size='1.25rem' className='icon-primary' />}
-          <BiUpvote size='1.25rem' className={controller.isMutable && !nothingSelected ? 'clr-text-primary' : ''} />
-        }
         disabled={!controller.isMutable || nothingSelected}
         onClick={controller.moveUp}
       />
       <MiniButton
         title='Переместить вниз [Alt + вниз]'
-        icon={
+        icon={<BiDownvote size='1.25rem' className='icon-primary' />}
-          <BiDownvote size='1.25rem' className={controller.isMutable && !nothingSelected ? 'clr-text-primary' : ''} />
-        }
         disabled={!controller.isMutable || nothingSelected}
         onClick={controller.moveDown}
       />
       <MiniButton
         title='Клонировать конституенту [Alt + V]'
-        icon={
+        icon={<BiDuplicate size='1.25rem' className='icon-green' />}
-          <BiDuplicate size='1.25rem' className={controller.isMutable && selectedCount === 1 ? 'clr-text-green' : ''} />
-        }
         disabled={!controller.isMutable || selectedCount !== 1}
         onClick={controller.cloneCst}
       />
       <MiniButton
         title='Добавить новую конституенту... [Alt + `]'
-        icon={<BiPlusCircle size='1.25rem' className={controller.isMutable ? 'clr-text-green' : ''} />}
+        icon={<BiPlusCircle size='1.25rem' className='icon-green' />}
         disabled={!controller.isMutable}
         onClick={() => controller.createCst(undefined, false)}
       />
@@ -62,7 +56,7 @@ function RSListToolbar({ selectedCount }: RSListToolbarProps) {
         <MiniButton
           title='Добавить пустую конституенту'
           hideTitle={insertMenu.isOpen}
-          icon={<BiDownArrowCircle size='1.25rem' className={controller.isMutable ? 'clr-text-green' : ''} />}
+          icon={<BiDownArrowCircle size='1.25rem' className='icon-green' />}
           disabled={!controller.isMutable}
           onClick={insertMenu.toggle}
         />
@@ -79,7 +73,7 @@ function RSListToolbar({ selectedCount }: RSListToolbarProps) {
       </div>
       <MiniButton
         title='Удалить выбранные [Delete]'
-        icon={<BiTrash size='1.25rem' className={controller.isMutable && !nothingSelected ? 'clr-text-red' : ''} />}
+        icon={<BiTrash size='1.25rem' className='icon-red' />}
         disabled={!controller.isMutable || nothingSelected}
         onClick={controller.deleteCst}
       />

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

@@ -195,7 +195,6 @@ function EditorTermGraph({ selected, setSelected, onOpenEdit }: EditorTermGraphP
       />
 
       <GraphToolbar
-        isMutable={controller.isMutable}
         nothingSelected={nothingSelected}
         is3D={is3D}
         orbit={orbit}

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

@@ -7,8 +7,9 @@ import MiniButton from '@/components/ui/MiniButton';
 import Overlay from '@/components/ui/Overlay';
 import { HelpTopic } from '@/models/miscellaneous';
 
+import { useRSEdit } from '../RSEditContext';
+
 interface GraphToolbarProps {
-  isMutable: boolean;
   nothingSelected: boolean;
   is3D: boolean;
 
@@ -25,7 +26,6 @@ interface GraphToolbarProps {
 }
 
 function GraphToolbar({
-  isMutable,
   nothingSelected,
   is3D,
   noText,
@@ -37,26 +37,28 @@ function GraphToolbar({
   onDelete,
   onResetViewpoint
 }: GraphToolbarProps) {
+  const controller = useRSEdit();
+
   return (
     <Overlay position='top-1 right-1/2 translate-x-1/2' className='flex'>
       <MiniButton
         title='Настройки фильтрации узлов и связей'
-        icon={<BiFilterAlt size='1.25rem' className='clr-text-primary' />}
+        icon={<BiFilterAlt size='1.25rem' className='icon-primary' />}
         onClick={showParamsDialog}
       />
       <MiniButton
         title={!noText ? 'Скрыть текст' : 'Отобразить текст'}
         icon={
           !noText ? (
-            <BiFontFamily size='1.25rem' className='clr-text-green' />
+            <BiFontFamily size='1.25rem' className='icon-green' />
           ) : (
-            <BiFont size='1.25rem' className='clr-text-primary' />
+            <BiFont size='1.25rem' className='icon-primary' />
           )
         }
         onClick={toggleNoText}
       />
       <MiniButton
-        icon={<BiCollapse size='1.25rem' className='clr-text-primary' />}
+        icon={<BiCollapse size='1.25rem' className='icon-primary' />}
         title='Восстановить камеру'
         onClick={onResetViewpoint}
       />
@@ -66,18 +68,19 @@ function GraphToolbar({
         disabled={!is3D}
         onClick={toggleOrbit}
       />
-      {isMutable ? (
+      {controller.isMutable || controller.isProcessing ? (
         <MiniButton
           title='Новая конституента'
           icon={<BiPlusCircle size='1.25rem' className='icon-green' />}
+          disabled={!controller.isMutable}
           onClick={onCreate}
         />
       ) : null}
-      {isMutable ? (
+      {controller.isMutable || controller.isProcessing ? (
         <MiniButton
           title='Удалить выбранные'
           icon={<BiTrash size='1.25rem' className='icon-red' />}
-          disabled={nothingSelected}
+          disabled={nothingSelected || !controller.isMutable}
           onClick={onDelete}
         />
       ) : null}

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

@@ -45,6 +45,7 @@ interface IRSEditContext {
   schema?: IRSForm;
   isMutable: boolean;
   isContentEditable: boolean;
+  isProcessing: boolean;
 
   viewVersion: (version?: number) => void;
 
@@ -429,6 +430,7 @@ export const RSEditState = ({
         schema: model.schema,
         isMutable,
         isContentEditable,
+        isProcessing: model.processing,
 
         viewVersion,
 

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

@@ -122,7 +122,7 @@ function RSTabsMenu({ onDestroy }: RSTabsMenuProps) {
             <DropdownButton
               disabled={!model.isClaimable && !model.isOwned}
               text={model.isOwned ? 'Вы — владелец' : 'Стать владельцем'}
-              icon={<LuCrown size='1rem' className={model.isOwned ? 'clr-text-green' : ''} />}
+              icon={<LuCrown size='1rem' className='icon-green' />}
               onClick={!model.isOwned && model.isClaimable ? handleClaimOwner : undefined}
             />
           ) : null}

rsconcept/frontend/src/pages/RegisterPage.tsx

@@ -75,7 +75,7 @@ function RegisterPage() {
           <FlexColumn>
             <div className='absolute'>
               <Overlay id={globalIDs.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
-                <BiInfoCircle size='1.25rem' className='clr-text-primary' />
+                <BiInfoCircle size='1.25rem' className='icon-primary' />
               </Overlay>
               <Tooltip anchorSelect={`#${globalIDs.password_tooltip}`} offset={6}>
                 <p>- используйте уникальный пароль</p>

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

@@ -29,7 +29,7 @@ function UserTabs() {
 
   return (
     <DataLoader
-      id='profile-page' //
+      id='profile-page' // prettier: split lines
       isLoading={loading}
       error={error}
       hasNoData={!user}
@@ -41,9 +41,9 @@ function UserTabs() {
               title='Показать/Скрыть отслеживаемые схемы'
               icon={
                 showSubs ? (
-                  <FiBell size='1.25rem' className='clr-text-primary' />
+                  <FiBell size='1.25rem' className='icon-primary' />
                 ) : (
-                  <FiBellOff size='1.25rem' className='clr-text-primary' />
+                  <FiBellOff size='1.25rem' className='icon-primary' />
                 )
               }
               onClick={() => setShowSubs(prev => !prev)}