M: Minor UI improvements

rsconcept/frontend/src/components/ui/DividerAnimated.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+
+import { CProps } from '@/components/props';
+import { animateDropdownItem } from '@/styling/animations';
+
+interface DividerAnimatedProps extends CProps.Styling {
+  vertical?: boolean;
+  margins?: string;
+}
+
+function DividerAnimated({ vertical, margins = 'mx-2', className, ...restProps }: DividerAnimatedProps) {
+  return (
+    <motion.div
+      variants={animateDropdownItem}
+      className={clsx(
+        margins, //prettier: split-lines
+        className,
+        {
+          'border-x': vertical,
+          'border-y': !vertical
+        }
+      )}
+      {...restProps}
+    />
+  );
+}
+
+export default DividerAnimated;

rsconcept/frontend/src/components/ui/Tooltip.tsx

@@ -36,12 +36,12 @@ function Tooltip({
         'max-h-[calc(100svh-6rem)]',
         'overflow-y-auto overflow-x-hidden sm:overflow-hidden overscroll-contain',
         'border shadow-md',
-        'text-balance',
+        'text-pretty',
         layer,
         className
       )}
       classNameArrow={layer}
-      style={{ ...{ paddingTop: '2px', paddingBottom: '2px' }, ...style }}
+      style={{ ...{ paddingTop: '2px', paddingBottom: '2px', paddingLeft: '8px', paddingRight: '8px' }, ...style }}
       variant={darkMode ? 'dark' : 'light'}
       place={place}
       {...restProps}

rsconcept/frontend/src/context/ConceptOptionsContext.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import clsx from 'clsx';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
 
 import Tooltip from '@/components/ui/Tooltip';
@@ -147,17 +146,17 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
     >
       <>
         <Tooltip
-          float
+          float // prettier: split-lines
           id={`${globals.tooltip}`}
           layer='z-topmost'
           place='right-start'
-          className={clsx('mt-8', 'max-w-[20rem]')}
+          className='mt-8 max-w-[20rem]'
         />
         <Tooltip
           float
           id={`${globals.value_tooltip}`}
           layer='z-topmost'
-          className={clsx('max-w-[calc(min(40rem,100dvw-2rem))]')}
+          className='max-w-[calc(min(40rem,100dvw-2rem))] text-justify'
         />
 
         {children}

rsconcept/frontend/src/pages/OssPage/MenuOssTabs.tsx

@@ -15,6 +15,7 @@ import {
   IconShare
 } from '@/components/Icons';
 import Button from '@/components/ui/Button';
+import DividerAnimated from '@/components/ui/DividerAnimated';
 import Dropdown from '@/components/ui/Dropdown';
 import DropdownButton from '@/components/ui/DropdownButton';
 import { useAccessMode } from '@/context/AccessModeContext';
@@ -94,9 +95,11 @@ function MenuOssTabs({ onDestroy }: MenuOssTabsProps) {
               onClick={handleDelete}
             />
           ) : null}
+
+          <DividerAnimated margins='mx-3 my-1' />
+
           {user ? (
             <DropdownButton
-              className='border-t-2'
               text='Создать новую схему'
               icon={<IconNewItem size='1rem' className='icon-primary' />}
               onClick={handleCreateNew}

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarVersioning.tsx

@@ -20,7 +20,7 @@ function ToolbarVersioning({ blockReload }: ToolbarVersioningProps) {
           <MiniButton
             titleHtml={
               blockReload
-                ? 'Невозможно откатить КС, прикрепленную к операционной схеме'
+                ? 'Невозможно откатить КС, <br>прикрепленную к операционной схеме'
                 : !controller.isContentEditable
                 ? 'Откатить к версии'
                 : 'Переключитесь на <br/>неактуальную версию'

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

@@ -27,6 +27,7 @@ import {
   IconUpload
 } from '@/components/Icons';
 import Button from '@/components/ui/Button';
+import DividerAnimated from '@/components/ui/DividerAnimated';
 import Dropdown from '@/components/ui/Dropdown';
 import DropdownButton from '@/components/ui/DropdownButton';
 import { useAccessMode } from '@/context/AccessModeContext';
@@ -184,9 +185,11 @@ function MenuRSTabs({ onDestroy }: MenuRSTabsProps) {
               onClick={handleDelete}
             />
           ) : null}
+
+          <DividerAnimated margins='mx-3 my-1' />
+
           {user ? (
             <DropdownButton
-              className='border-t-2'
               text='Создать новую схему'
               icon={<IconNewItem size='1rem' className='icon-primary' />}
               onClick={handleCreateNew}
@@ -235,8 +238,10 @@ function MenuRSTabs({ onDestroy }: MenuRSTabsProps) {
               disabled={!controller.isContentEditable || controller.isProcessing}
               onClick={handleInlineSynthesis}
             />
+
+            <DividerAnimated margins='mx-3 my-1' />
+
             <DropdownButton
-              className='border-t-2'
               text='Упорядочить список'
               titleHtml='Упорядочить список, исходя из <br/>логики типов и связей конституент'
               icon={<IconSortList size='1rem' className='icon-primary' />}

rsconcept/frontend/src/styling/setup.css

@@ -141,7 +141,32 @@ div:not(.dense) > p {
     @apply rounded;
   }
 
-  :is(.sticky) {
+  .border,
+  .border-x,
+  .border-y,
+  .border-b,
+  .border-t,
+  .border-l,
+  .border-r,
+  .border-2,
+  .border-x-2,
+  .border-y-2,
+  .border-b-2,
+  .border-t-2,
+  .border-l-2,
+  .border-r-2,
+  .divide-x,
+  .divide-y,
+  .divide-x-2,
+  .divide-y-2 {
+    border-color: var(--cl-bg-40);
+    @apply divide-inherit;
+    .dark & {
+      border-color: var(--cd-bg-40);
+    }
+  }
+
+  .sticky {
     z-index: 20;
   }
 }

rsconcept/frontend/src/styling/styles.css

@@ -21,35 +21,8 @@
 }
 
 @layer components {
-  :is(
+  .clr-app,
-      .clr-border,
+  .clr-btn-nav {
-      .border,
-      .border-x,
-      .border-y,
-      .border-b,
-      .border-t,
-      .border-l,
-      .border-r,
-      .border-2,
-      .border-x-2,
-      .border-y-2,
-      .border-b-2,
-      .border-t-2,
-      .border-l-2,
-      .border-r-2,
-      .divide-x,
-      .divide-y,
-      .divide-x-2,
-      .divide-y-2
-    ) {
-    border-color: var(--cl-bg-40);
-    @apply divide-inherit;
-    .dark & {
-      border-color: var(--cd-bg-40);
-    }
-  }
-
-  :is(.clr-app, .clr-btn-nav) {
     background-color: var(--cl-bg-100);
     .dark & {
       background-color: var(--cd-bg-100);
@@ -86,14 +59,18 @@
     }
   }
 
-  :is(.clr-controls, .clr-tab, .clr-btn-default) {
+  .clr-controls,
+  .clr-tab,
+  .clr-btn-default {
     background-color: var(--cl-bg-80);
     .dark & {
       background-color: var(--cd-bg-80);
     }
   }
 
-  :is(.clr-primary, .clr-btn-primary:hover, .clr-btn-primary:focus-visible) {
+  .clr-primary,
+  .clr-btn-primary:hover,
+  .clr-btn-primary:focus-visible {
     @apply transition;
     color: var(--cl-prim-fg-100);
     background-color: var(--cl-prim-bg-100);
@@ -103,7 +80,8 @@
     }
   }
 
-  :is(.clr-selected, .clr-btn-primary) {
+  .clr-selected,
+  .clr-btn-primary {
     color: var(--cl-fg-100);
     background-color: var(--cl-prim-bg-80);
     .dark & {
@@ -142,14 +120,17 @@
     }
   }
 
-  :is(.clr-text-primary, .clr-text-url) {
+  .clr-text-primary,
+  .clr-text-url {
     color: var(--cl-prim-fg-80);
     .dark & {
       color: var(--cd-prim-fg-80);
     }
   }
 
-  :is(.clr-text-controls, .clr-btn-nav, .clr-btn-clear) {
+  .clr-text-controls,
+  .clr-btn-nav,
+  .clr-btn-clear {
     color: var(--cl-fg-80);
     &:disabled {
       color: var(--cl-fg-60);
@@ -169,7 +150,9 @@
     }
   }
 
-  :is(.clr-text-default, input:disabled:not(::placeholder), textarea:disabled:not(::placeholder)) {
+  .clr-text-default,
+  input:disabled:not(::placeholder),
+  textarea:disabled:not(::placeholder) {
     opacity: 1;
     -webkit-text-fill-color: var(--cl-fg-100);
     color: var(--cl-fg-100);
@@ -225,11 +208,6 @@
     @apply top-[1.9rem] pt-1 right-1/2 translate-x-1/2;
   }
 
-  .cc-modal-blur {
-    opacity: 0.3;
-    backdrop-filter: blur(2px);
-  }
-
   .cc-label {
     @apply text-sm font-medium cursor-default select-text whitespace-nowrap;
   }
@@ -261,6 +239,11 @@
     backdrop-filter: blur(3px);
   }
 
+  .cc-modal-blur {
+    opacity: 0.3;
+    backdrop-filter: blur(2px);
+  }
+
   .cc-shadow-border {
     @apply shadow-sm shadow-[var(--cl-bg-40)] dark:shadow-[var(--cd-bg-40)];
   }