From ccdaf955b99dfd31b31d33c47bf595bb4ab46144 Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Mon, 26 Jun 2023 11:20:38 +0500
Subject: [PATCH 1/8] Add modern icons library and replace with new icons

---
 .../package.json                              |  5 +-
 .../src/components/Accordion/Accordion.tsx    |  6 +-
 .../src/components/AllowCopyToClipboard.tsx   |  2 +-
 .../ErrorHandlingContainerModal.tsx           |  2 +-
 .../src/components/Layouts/CommonLayout.tsx   |  4 +-
 .../TaskChainTree/TaskStateIcon.tsx           | 28 +++----
 .../TaskDetailsPage/TaskDetailsPage.tsx       | 14 ++--
 .../TaskStatesSelect/TaskStatesSelect.tsx     |  4 +-
 .../TaskTable/TaskDetails/TaskDetails.tsx     |  8 +-
 .../components/TaskTimeLine/TaskTimeLine.tsx  | 50 ++++++------
 .../TaskTypesSelect/TaskTypesSelect.tsx       |  8 +-
 .../stories/TimeLine.stories.tsx              | 78 +++++++++----------
 cassandra-distributed-task-queue-ui/yarn.lock | 11 ++-
 13 files changed, 109 insertions(+), 111 deletions(-)

diff --git a/cassandra-distributed-task-queue-ui/package.json b/cassandra-distributed-task-queue-ui/package.json
index 1c492150..a7deaa2f 100644
--- a/cassandra-distributed-task-queue-ui/package.json
+++ b/cassandra-distributed-task-queue-ui/package.json
@@ -36,7 +36,6 @@
     "test": "mocha **/*.test.ts"
   },
   "peerDependencies": {
-    "@skbkontur/react-icons": ">=3 <=5",
     "@skbkontur/react-ui": ">=2 <=4",
     "react": ">=16 <=17",
     "react-dom": ">=16 <=17",
@@ -62,7 +61,7 @@
     "@babel/preset-typescript": "^7.14.5",
     "@babel/runtime": "^7.14.8",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@skbkontur/react-icons": "^5.2.4",
+    "@skbkontur/icons": "^1.0.3",
     "@skbkontur/react-ui": "^4.1.0",
     "@storybook/addon-actions": "^6.3.5",
     "@storybook/addons": "^6.3.5",
@@ -72,8 +71,8 @@
     "@types/mocha": "^9.0.0",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.15",
-    "@types/react-router-dom": "^5.1.8",
     "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.1.8",
     "@typescript-eslint/eslint-plugin": "^4.28.4",
     "@typescript-eslint/parser": "^4.28.4",
     "babel-loader": "^8.2.2",
diff --git a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
index 1a7b22a5..ef569b74 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
-import ArrowTriangleDownIcon from "@skbkontur/react-icons/ArrowTriangleDown";
-import ArrowTriangleRightIcon from "@skbkontur/react-icons/ArrowTriangleRight";
+import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
+import { ArrowShapeTriangleARightIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleARightIcon";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { ThemeContext, Hint, Link } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
@@ -208,7 +208,7 @@ export class Accordion extends React.Component<TaskAccordionProps, TaskAccordion
                         data-tid="ToggleButton"
                         className={jsStyles.toggleButton()}
                         onClick={this.toggleCollapseManual}>
-                        {collapsedSelf ? <ArrowTriangleRightIcon /> : <ArrowTriangleDownIcon />}
+                        {collapsedSelf ? <ArrowShapeTriangleARightIcon /> : <ArrowShapeTriangleADownIcon />}
                         <span data-tid="ToggleButtonText" className={jsStyles.toggleButtonText()}>
                             {title}
                         </span>
diff --git a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
index fcfebfc3..96f27bb4 100644
--- a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
@@ -1,4 +1,4 @@
-import CopyIcon from "@skbkontur/react-icons/Copy";
+import { CopyIcon } from "@skbkontur/icons/esm/icons/CopyIcon";
 import { Link, Toast } from "@skbkontur/react-ui";
 import copy from "copy-to-clipboard";
 import React, { PropsWithChildren } from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx b/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
index c39c5354..d904f165 100644
--- a/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
@@ -1,4 +1,4 @@
-import CopyIcon from "@skbkontur/react-icons/Copy";
+import { CopyIcon } from "@skbkontur/icons/esm/icons/CopyIcon";
 import { Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
index 5d007870..71b022b8 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -1,4 +1,4 @@
-import ArrowChevronLeftIcon from "@skbkontur/react-icons/ArrowChevronLeft";
+import { ArrowCLeftIcon } from "@skbkontur/icons/esm/icons/ArrowCLeftIcon";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Loader, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
@@ -93,7 +93,7 @@ CommonLayout.GoBack = function CommonLayoutGoBack({ children, to }: CommonLayout
     return (
         <div className={jsStyles.backLinkContainer()}>
             <RouterLink data-tid="GoBack" to={to}>
-                <ArrowChevronLeftIcon />
+                <ArrowCLeftIcon />
                 {"\u00A0"}
                 {children}
             </RouterLink>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
index fdf4d111..668fe50d 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
@@ -1,8 +1,8 @@
-import ClearIcon from "@skbkontur/react-icons/Clear";
-import ClockIcon from "@skbkontur/react-icons/Clock";
-import DeleteIcon from "@skbkontur/react-icons/Delete";
-import HelpLiteIcon from "@skbkontur/react-icons/HelpLite";
-import OkIcon from "@skbkontur/react-icons/Ok";
+import { CheckAIcon } from "@skbkontur/icons/esm/icons/CheckAIcon";
+import { QuestionSquareIcon } from "@skbkontur/icons/esm/icons/QuestionSquareIcon";
+import { TimeClockIcon } from "@skbkontur/icons/esm/icons/TimeClockIcon";
+import { XCircleIcon } from "@skbkontur/icons/esm/icons/XCircleIcon";
+import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
 import { ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
 import React from "react";
@@ -33,22 +33,22 @@ export function TaskStateIcon({ taskState }: TaskStateIconProps): JSX.Element {
 
     switch (taskState) {
         case TaskState.Unknown:
-            return <HelpLiteIcon color={getIconColor(theme, "warning")} />;
+            return <QuestionSquareIcon color={getIconColor(theme, "warning")} />;
         case TaskState.New:
-            return <ClockIcon color={getIconColor(theme, "waiting")} />;
+            return <TimeClockIcon color={getIconColor(theme, "waiting")} />;
         case TaskState.WaitingForRerun:
-            return <ClockIcon color={getIconColor(theme, "waiting")} />;
+            return <TimeClockIcon color={getIconColor(theme, "waiting")} />;
         case TaskState.WaitingForRerunAfterError:
-            return <ClockIcon color={getIconColor(theme, "error")} />;
+            return <TimeClockIcon color={getIconColor(theme, "error")} />;
         case TaskState.Finished:
-            return <OkIcon color={getIconColor(theme, "success")} />;
+            return <CheckAIcon color={getIconColor(theme, "success")} />;
         case TaskState.InProcess:
-            return <ClockIcon color={getIconColor(theme, "waiting")} />;
+            return <TimeClockIcon color={getIconColor(theme, "waiting")} />;
         case TaskState.Fatal:
-            return <ClearIcon color={getIconColor(theme, "error")} />;
+            return <XCircleIcon color={getIconColor(theme, "error")} />;
         case TaskState.Canceled:
-            return <DeleteIcon color={getIconColor(theme, "error")} />;
+            return <XIcon color={getIconColor(theme, "error")} />;
         default:
-            return <OkIcon />;
+            return <CheckAIcon />;
     }
 }
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
index 2a0c74a0..ee4028f5 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
@@ -1,6 +1,6 @@
-import DeleteIcon from "@skbkontur/react-icons/Delete";
-import ListRowsIcon from "@skbkontur/react-icons/ListRows";
-import RefreshIcon from "@skbkontur/react-icons/Refresh";
+import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
+import { TextAlignCenterJustifyIcon } from "@skbkontur/icons/esm/icons/TextAlignCenterJustifyIcon";
+import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
 import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
@@ -71,9 +71,9 @@ export function TaskDetailsPage({
                 {relatedTasksRequest && (
                     <Fit>
                         <RouterLink
-                            data-tid={"RelatedTaskTree"}
+                            data-tid="RelatedTaskTree"
                             to={`../Tree${searchRequestMapping.stringify(relatedTasksRequest)}`}>
-                            <ListRowsIcon />
+                            <TextAlignCenterJustifyIcon />
                             {"\u00A0"}
                             View related tasks tree
                         </RouterLink>
@@ -81,14 +81,14 @@ export function TaskDetailsPage({
                 )}
                 {isCancelable && (
                     <Fit>
-                        <Link icon={<DeleteIcon />} use="danger" data-tid={"CancelButton"} onClick={cancel}>
+                        <Link icon={<XIcon />} use="danger" data-tid={"CancelButton"} onClick={cancel}>
                             Cancel task
                         </Link>
                     </Fit>
                 )}
                 {isRerunable && (
                     <Fit>
-                        <Link icon={<RefreshIcon />} data-tid={"RerunButton"} onClick={rerun}>
+                        <Link icon={<ArrowRoundTimeForwardIcon />} data-tid={"RerunButton"} onClick={rerun}>
                             Rerun task
                         </Link>
                     </Fit>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
index 79d5b678..0a17e0f3 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
@@ -1,4 +1,4 @@
-import ArrowTriangleDownIcon from "@skbkontur/react-icons/ArrowTriangleDown";
+import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
 import { ColumnStack, Fit } from "@skbkontur/react-stack-layout";
 import { Button, Checkbox, Tooltip } from "@skbkontur/react-ui";
 import React from "react";
@@ -34,7 +34,7 @@ export class TaskStatesSelect extends React.Component<TaskStatesSelectProps> {
                         <span data-tid="ButtonText" className={jsStyles.buttonText()}>
                             {value.length ? `Выбрано состояний: ${value.length}` : "Выбрать состояние"}
                         </span>
-                        <ArrowTriangleDownIcon />
+                        <ArrowShapeTriangleADownIcon />
                     </Button>
                 </Tooltip>
             </span>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
index cd201232..96ff0a4a 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
@@ -1,5 +1,5 @@
-import DeleteIcon from "@skbkontur/react-icons/Delete";
-import RefreshIcon from "@skbkontur/react-icons/Refresh";
+import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
+import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
 import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Link, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
@@ -88,7 +88,7 @@ export function TaskDetails(props: TaskDetailsProps): JSX.Element {
                                             data-tid="Cancel"
                                             disabled={!cancelableStates.includes(taskInfo.state)}
                                             onClick={onCancel}
-                                            icon={<DeleteIcon />}>
+                                            icon={<XIcon />}>
                                             Cancel
                                         </Link>
                                     </Fit>
@@ -97,7 +97,7 @@ export function TaskDetails(props: TaskDetailsProps): JSX.Element {
                                             data-tid="Rerun"
                                             disabled={!rerunableStates.includes(taskInfo.state)}
                                             onClick={onRerun}
-                                            icon={<RefreshIcon />}>
+                                            icon={<ArrowRoundTimeForwardIcon />}>
                                             Rerun
                                         </Link>
                                     </Fit>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
index bfdd5a28..2cb16c63 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
@@ -1,13 +1,13 @@
-import { ArrowBoldDown } from "@skbkontur/react-icons";
-import ArrowBoldUpIcon from "@skbkontur/react-icons/ArrowBoldUp";
-import ArrowCorner1Icon from "@skbkontur/react-icons/ArrowCorner1";
-import ArrowTriangleDownIcon from "@skbkontur/react-icons/ArrowTriangleDown";
-import ClearIcon from "@skbkontur/react-icons/Clear";
-import ClockIcon from "@skbkontur/react-icons/Clock";
-import DeleteIcon from "@skbkontur/react-icons/Delete";
-import DownloadIcon from "@skbkontur/react-icons/Download";
-import OkIcon from "@skbkontur/react-icons/Ok";
-import RefreshIcon from "@skbkontur/react-icons/Refresh";
+import { ArrowADownIcon } from "@skbkontur/icons/esm/icons/ArrowADownIcon";
+import { ArrowAUpIcon } from "@skbkontur/icons/esm/icons/ArrowAUpIcon";
+import { ArrowDCornerDownRightIcon } from "@skbkontur/icons/esm/icons/ArrowDCornerDownRightIcon";
+import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
+import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
+import { CheckAIcon } from "@skbkontur/icons/esm/icons/CheckAIcon";
+import { NetDownloadIcon } from "@skbkontur/icons/esm/icons/NetDownloadIcon";
+import { TimeClockIcon } from "@skbkontur/icons/esm/icons/TimeClockIcon";
+import { XCircleIcon } from "@skbkontur/icons/esm/icons/XCircleIcon";
+import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
 import { Link, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
 import { Location } from "react-router-dom";
@@ -61,7 +61,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
         }
         return createSimpleEntry({
             title: "Started",
-            icon: <ArrowCorner1Icon />,
+            icon: <ArrowDCornerDownRightIcon />,
             date: taskMeta.startExecutingTicks,
         });
     };
@@ -77,7 +77,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                 getStartedEntry(),
                 createSimpleEntry({
                     title: "Finished",
-                    icon: <OkIcon />,
+                    icon: <CheckAIcon />,
                     date: taskMeta.finishExecutingTicks,
                 })
             );
@@ -87,7 +87,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                 getStartedEntry(),
                 createSimpleEntry({
                     title: "Failed",
-                    icon: <ClearIcon color={color} />,
+                    icon: <XCircleIcon color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks,
                 })
@@ -101,7 +101,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 <TimeLineCycled
                     key="FewAttempts"
-                    icon={<RefreshIcon />}
+                    icon={<ArrowRoundTimeForwardIcon />}
                     content={`Restarted for ${taskMeta.attempts} times`}>
                     {shouldStartAndStartEntries}
                 </TimeLineCycled>,
@@ -113,7 +113,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
     const getShouldStartedEntry = (): null | JSX.Element => {
         return createSimpleEntry({
             title: "Start scheduled",
-            icon: <ClockIcon />,
+            icon: <TimeClockIcon />,
             date: taskMeta.minimalStartTicks,
         });
     };
@@ -124,7 +124,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Finished",
-                    icon: <OkIcon color={color} />,
+                    icon: <CheckAIcon color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks,
                 }),
@@ -135,7 +135,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Failed",
-                    icon: <ClearIcon color={color} />,
+                    icon: <XCircleIcon color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks,
                 }),
@@ -146,7 +146,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Canceled",
-                    icon: <DeleteIcon color={color} />,
+                    icon: <XIcon color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks || taskMeta.lastModificationTicks,
                 }),
@@ -158,7 +158,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                 getShouldStartedEntry(),
                 createSimpleEntry({
                     title: "Waiting for next run",
-                    icon: <ClockIcon color={color} />,
+                    icon: <TimeClockIcon color={color} />,
                     color: color,
                 }),
             ];
@@ -168,7 +168,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Waiting for complete",
-                    icon: <ClockIcon color={color} />,
+                    icon: <TimeClockIcon color={color} />,
                     color: color,
                 }),
             ];
@@ -178,7 +178,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Waiting for start",
-                    icon: <ClockIcon color={color} />,
+                    icon: <TimeClockIcon color={color} />,
                     color: color,
                 }),
             ];
@@ -192,7 +192,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
     const getEnqueuedEntry = (): null | JSX.Element => {
         return createSimpleEntry({
             title: "Enqueued",
-            icon: <DownloadIcon />,
+            icon: <NetDownloadIcon />,
             date: taskMeta.ticks,
         });
     };
@@ -203,7 +203,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             const hiddenTaskIdsCount = childTaskIds.length - visibleTaskIdsCount;
             const color = getIconColor(theme, "waiting");
             return (
-                <TimeLineEntry key="Children" icon={<ArrowBoldDown color={color} />}>
+                <TimeLineEntry key="Children" icon={<ArrowADownIcon color={color} />}>
                     <div style={{ color: color }} data-tid="EnqueuedTasks">
                         <div>Enqueued tasks:</div>
                         {childTaskIds.slice(0, visibleTaskIdsCount).map(x => (
@@ -218,7 +218,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                             <Link data-tid="ShowAllTasks" onClick={() => setShowAllErrors(true)}>
                                 ...and {hiddenTaskIdsCount} more
                                 {"\u00A0"}
-                                <ArrowTriangleDownIcon />
+                                <ArrowShapeTriangleADownIcon />
                             </Link>
                         )}
                     </div>
@@ -234,7 +234,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
         }
         const color = getIconColor(theme, "waiting");
         return (
-            <TimeLineEntry key="Parent" icon={<ArrowBoldUpIcon color={color} />}>
+            <TimeLineEntry key="Parent" icon={<ArrowAUpIcon color={color} />}>
                 <div style={{ color: color }}>
                     Parent:{" "}
                     <AllowCopyToClipboard>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
index 0a7bb2c5..a29001eb 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
@@ -1,5 +1,5 @@
-import ArrowTriangleDownIcon from "@skbkontur/react-icons/ArrowTriangleDown";
-import SearchIcon from "@skbkontur/react-icons/Search";
+import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
+import { SearchLoupeIcon } from "@skbkontur/icons/esm/icons/SearchLoupeIcon";
 import { ColumnStack, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Checkbox, Input, Tooltip } from "@skbkontur/react-ui";
 import React from "react";
@@ -31,7 +31,7 @@ export class TaskTypesSelect extends React.Component<TaskTypesSelectProps, TaskT
                         <span className={jsStyles.buttonText()}>
                             {value.length ? `Выбрано задач: ${value.length}` : "Выбрать тип задач"}
                         </span>
-                        <ArrowTriangleDownIcon />
+                        <ArrowShapeTriangleADownIcon />
                     </Button>
                 </Tooltip>
             </span>
@@ -85,7 +85,7 @@ export class TaskTypesSelect extends React.Component<TaskTypesSelectProps, TaskT
                         <Fit>
                             <Input
                                 value={query}
-                                rightIcon={<SearchIcon />}
+                                rightIcon={<SearchLoupeIcon />}
                                 onValueChange={val => this.setState({ query: val })}
                             />
                         </Fit>
diff --git a/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx b/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
index 989cbf64..7371843d 100644
--- a/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
+++ b/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
@@ -1,6 +1,6 @@
-import DeleteIcon from "@skbkontur/react-icons/Delete";
-import OkIcon from "@skbkontur/react-icons/Ok";
-import RefreshIcon from "@skbkontur/react-icons/Refresh";
+import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
+import { CheckAIcon } from "@skbkontur/icons/esm/icons/CheckAIcon";
+import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
 import React from "react";
 
 import { TimeLine } from "../src/components/TaskTimeLine/TimeLine/TimeLine";
@@ -12,15 +12,15 @@ export default {
 
 export const Direct = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<DeleteIcon />}>
+        <TimeLine.Entry icon={<XIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started 2</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -29,27 +29,27 @@ export const Direct = () => (
 
 export const WithOneBranching = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<DeleteIcon />}>
+        <TimeLine.Entry icon={<XIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.BranchNode>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
@@ -60,33 +60,33 @@ export const WithOneBranching = () => (
 
 export const WithOneBranchingOnManyBranches = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<DeleteIcon />}>
+        <TimeLine.Entry icon={<XIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.BranchNode>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
@@ -97,49 +97,49 @@ export const WithOneBranchingOnManyBranches = () => (
 
 export const WithManyBranchings = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<DeleteIcon />}>
+        <TimeLine.Entry icon={<XIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.BranchNode>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started</div>
                     <div>Now</div>
                 </TimeLine.Entry>
-                <TimeLine.Entry icon={<DeleteIcon />}>
+                <TimeLine.Entry icon={<XIcon />}>
                     <div>Started</div>
                     <div>Now</div>
                 </TimeLine.Entry>
                 <TimeLine.BranchNode>
                     <TimeLine.Branch>
-                        <TimeLine.Entry icon={<OkIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
                     </TimeLine.Branch>
                     <TimeLine.Branch>
-                        <TimeLine.Entry icon={<OkIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
-                        <TimeLine.Entry icon={<OkIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
                     </TimeLine.Branch>
                     <TimeLine.Branch>
-                        <TimeLine.Entry icon={<OkIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
@@ -147,7 +147,7 @@ export const WithManyBranchings = () => (
                 </TimeLine.BranchNode>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<OkIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
@@ -158,7 +158,7 @@ export const WithManyBranchings = () => (
 
 export const WithCycles = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -169,20 +169,20 @@ export const WithCycles = () => (
                     <div>Now</div>
                 </div>
             }>
-            <TimeLine.Entry icon={<DeleteIcon />}>
+            <TimeLine.Entry icon={<XIcon />}>
                 <div>Started</div>
                 <div>Now</div>
             </TimeLine.Entry>
-            <TimeLine.Entry icon={<OkIcon />}>
+            <TimeLine.Entry icon={<CheckAIcon />}>
                 <div>Started 2</div>
                 <div>Now</div>
             </TimeLine.Entry>
         </TimeLine.Cycled>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started 4</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started 5</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -191,7 +191,7 @@ export const WithCycles = () => (
 
 export const WithCyclesAndLongText = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -202,11 +202,11 @@ export const WithCyclesAndLongText = () => (
                     <div>Now</div>
                 </div>
             }>
-            <TimeLine.Entry icon={<DeleteIcon />}>
+            <TimeLine.Entry icon={<XIcon />}>
                 <div>Started text text text text text text text</div>
                 <div>Now</div>
             </TimeLine.Entry>
-            <TimeLine.Entry icon={<OkIcon />}>
+            <TimeLine.Entry icon={<CheckAIcon />}>
                 <div>Started 2</div>
                 <div>Now</div>
             </TimeLine.Entry>
@@ -216,23 +216,23 @@ export const WithCyclesAndLongText = () => (
 
 export const WithCyclesAndIcon = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<OkIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.Cycled
-            icon={<RefreshIcon />}
+            icon={<ArrowRoundTimeForwardIcon />}
             content={
                 <div>
                     <div>Some cycle info</div>
                     <div>Now</div>
                 </div>
             }>
-            <TimeLine.Entry icon={<DeleteIcon />}>
+            <TimeLine.Entry icon={<XIcon />}>
                 <div>Started text text text text text text text</div>
                 <div>Now</div>
             </TimeLine.Entry>
-            <TimeLine.Entry icon={<OkIcon />}>
+            <TimeLine.Entry icon={<CheckAIcon />}>
                 <div>Started 2</div>
                 <div>Now</div>
             </TimeLine.Entry>
diff --git a/cassandra-distributed-task-queue-ui/yarn.lock b/cassandra-distributed-task-queue-ui/yarn.lock
index ec718476..64412716 100644
--- a/cassandra-distributed-task-queue-ui/yarn.lock
+++ b/cassandra-distributed-task-queue-ui/yarn.lock
@@ -1265,11 +1265,10 @@
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.1.tgz#3a3a408481a3796f45223a549c2571517bc8af2d"
   integrity sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==
 
-"@skbkontur/react-icons@^5.2.4":
-  version "5.2.4"
-  resolved "https://registry.yarnpkg.com/@skbkontur/react-icons/-/react-icons-5.2.4.tgz#29a4fedffe034f2ce97950494f558a356cdaa6c0"
-  dependencies:
-    tslib "^1.9.2"
+"@skbkontur/icons@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@skbkontur/icons/-/icons-1.0.3.tgz#528602941a37a9123eedbd3eeed78d98cec3a5e0"
+  integrity sha512-thYuy7gjoq25aRtMQ9qhQhZtw0ionTn5q7jKS2pwtAmcvEXQGchfyK2VG+/AhZlw1LxcY/fO8lKFdCtulWZlKA==
 
 "@skbkontur/react-stack-layout@^1.0.3":
   version "1.0.3"
@@ -8796,7 +8795,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.2:
+tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
 

From d5741b886f52909fe6144d525a208f19e53d22ec Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Mon, 26 Jun 2023 11:43:37 +0500
Subject: [PATCH 2/8] Change GoBack to new style & delete old GoBackLink &
 Delete useless GreyLineHeader

---
 .../components/GoBack/GoBackLink.styles.ts    | 16 -----
 .../src/components/GoBack/GoBackLink.tsx      | 14 ----
 .../components/Layouts/CommonLayout.styles.ts | 43 +++++++++--
 .../src/components/Layouts/CommonLayout.tsx   | 72 +++++++------------
 .../src/components/RouterLink/RouterLink.tsx  |  4 +-
 .../TaskDetailsPage/TaskDetailsPage.tsx       | 16 ++---
 .../TaskNotFoundPage/TaskNotFoundPage.tsx     |  5 +-
 .../containers/TaskChainsTreeContainer.tsx    | 14 +---
 8 files changed, 75 insertions(+), 109 deletions(-)
 delete mode 100644 cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.styles.ts
 delete mode 100644 cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.tsx

diff --git a/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.styles.ts b/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.styles.ts
deleted file mode 100644
index 7cf2d341..00000000
--- a/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.styles.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { css } from "@skbkontur/react-ui/lib/theming/Emotion";
-
-export const jsStyles = {
-    goBackLink(): string {
-        return css`
-            width: 35px;
-            height: 35px;
-            display: inline-block;
-            opacity: 0.7;
-
-            &:hover {
-                opacity: 1;
-            }
-        `;
-    },
-};
diff --git a/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.tsx b/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.tsx
deleted file mode 100644
index 00282492..00000000
--- a/cassandra-distributed-task-queue-ui/src/components/GoBack/GoBackLink.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-import { RouterLink } from "../RouterLink/RouterLink";
-
-import { jsStyles } from "./GoBackLink.styles";
-
-export const GoBackLink = ({ backUrl }: { backUrl?: Nullable<string> }): JSX.Element => (
-    <RouterLink data-tid="GoBack" className={jsStyles.goBackLink()} to={backUrl || ""}>
-        <svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="17.5" cy="17.5" r="17.5" fill="#DADADA" />
-            <path d="M20.5 10L13 17L20.5 24" stroke="#333333" />
-        </svg>
-    </RouterLink>
-);
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
index 014d8513..8a53a63e 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
@@ -21,6 +21,12 @@ export const jsStyles = {
         `;
     },
 
+    withArrow(): string {
+        return css`
+            padding: ${globalVerticalPadding}px ${newBaseSize * 12}px 0;
+        `;
+    },
+
     topRightTools(): string {
         return css`
             position: absolute;
@@ -41,9 +47,9 @@ export const jsStyles = {
         `;
     },
 
-    greyContent(): string {
+    headerContent(): string {
         return css`
-            margin-top: ${2 * baseSize}px;
+            margin-top: ${3 * newBaseSize}px;
         `;
     },
 
@@ -61,20 +67,43 @@ export const jsStyles = {
             display: flex;
             flex-direction: column;
             flex: 1 1 auto;
-            padding-bottom: ${globalVerticalPadding}px;
+            padding-bottom: ${newBaseSize * 5}px;
         `;
     },
 
     header(): string {
         return css`
-            margin-bottom: ${3 * baseSize}px;
+            margin-bottom: ${5 * newBaseSize}px;
         `;
     },
 
-    backLinkContainer(): string {
+    borderBottom(t: Theme): string {
         return css`
-            margin-bottom: ${3 * baseSize}px;
-            margin-left: -4px;
+            border-bottom: 2px solid ${t.grayXLight};
+        `;
+    },
+
+    backLink(): string {
+        return css`
+            position: absolute;
+            left: 2px;
+            opacity: 0.7;
+            height: ${newBaseSize * 7}px;
+            width: ${newBaseSize * 7}px;
+            padding: ${newBaseSize * 2}px 0 ${newBaseSize * 2}px ${newBaseSize * 2}px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &:hover {
+                opacity: 1;
+            }
+        `;
+    },
+
+    backLinkIcon(): string {
+        return css`
+            display: block;
         `;
     },
 
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
index 71b022b8..60d7e07e 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -1,7 +1,8 @@
-import { ArrowCLeftIcon } from "@skbkontur/icons/esm/icons/ArrowCLeftIcon";
+import { ArrowALeftIcon24Regular } from "@skbkontur/icons/esm/icons/ArrowALeftIcon";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Loader, ThemeContext } from "@skbkontur/react-ui";
-import React from "react";
+import React, { CSSProperties } from "react";
+import { To } from "react-router-dom";
 
 import { RouterLink } from "../RouterLink/RouterLink";
 
@@ -10,13 +11,14 @@ import { jsStyles } from "./CommonLayout.styles";
 interface CommonLayoutProps {
     topRightTools?: Nullable<JSX.Element> | string;
     children?: React.ReactNode;
-    style?: any;
+    withArrow?: boolean;
+    style?: CSSProperties;
 }
 
-export function CommonLayout({ children, topRightTools, ...restProps }: CommonLayoutProps): JSX.Element {
+export function CommonLayout({ children, topRightTools, withArrow, ...restProps }: CommonLayoutProps): JSX.Element {
     const theme = React.useContext(ThemeContext);
     return (
-        <div className={jsStyles.commonLayout(theme)} {...restProps}>
+        <div className={`${jsStyles.commonLayout(theme)} ${withArrow ? jsStyles.withArrow() : ""}`} {...restProps}>
             {topRightTools && <div className={jsStyles.topRightTools()}>{topRightTools}</div>}
             {children}
         </div>
@@ -38,66 +40,44 @@ CommonLayout.Content = function Content({ children, ...restProps }: CommonLayout
 
 interface CommonLayoutHeaderProps {
     title: string | JSX.Element;
-    tools?: JSX.Element;
+    tools?: JSX.Element | null;
+    children?: JSX.Element;
+    borderBottom?: boolean;
 }
 
-CommonLayout.Header = function Header({ title, tools, ...restProps }: CommonLayoutHeaderProps): JSX.Element {
-    return (
-        <div className={jsStyles.header()} {...restProps}>
-            <RowStack baseline block gap={2}>
-                <Fit>
-                    <h2 className={jsStyles.headerTitle()} data-tid="Header">
-                        {title}
-                    </h2>
-                </Fit>
-                {tools && <Fill>{tools}</Fill>}
-            </RowStack>
-        </div>
-    );
-};
-
-interface CommonLayoutGreyLineHeaderProps {
-    "data-tid"?: Nullable<string>;
-    children?: Nullable<JSX.Element>;
-    title: string | JSX.Element;
-    tools?: null | JSX.Element;
-}
-
-CommonLayout.GreyLineHeader = function GreyLineHeader({
-    children,
+CommonLayout.Header = function Header({
     title,
     tools,
-}: CommonLayoutGreyLineHeaderProps): JSX.Element {
+    children,
+    borderBottom,
+    ...restProps
+}: CommonLayoutHeaderProps): JSX.Element {
     const theme = React.useContext(ThemeContext);
     return (
-        <div className={jsStyles.greyLineHeader(theme)}>
+        <div className={`${jsStyles.header()} ${borderBottom ? jsStyles.borderBottom(theme) : ""}`} {...restProps}>
             <RowStack baseline block gap={2}>
-                <Fill>
+                <Fit>
                     <h2 className={jsStyles.headerTitle()} data-tid="Header">
                         {title}
                     </h2>
-                </Fill>
-                {tools && <Fit>{tools}</Fit>}
+                </Fit>
+                {tools && <Fill>{tools}</Fill>}
             </RowStack>
-            {children && <div className={`${jsStyles.content()} ${jsStyles.greyContent()}`}>{children}</div>}
+            {children && <div className={`${jsStyles.content()} ${jsStyles.headerContent()}`}>{children}</div>}
         </div>
     );
 };
 
 interface CommonLayoutGoBackProps {
-    children?: React.ReactNode;
-    to: string;
+    to: To;
 }
 
-CommonLayout.GoBack = function CommonLayoutGoBack({ children, to }: CommonLayoutGoBackProps): JSX.Element {
+CommonLayout.GoBack = function CommonLayoutGoBack({ to }: CommonLayoutGoBackProps): JSX.Element {
+    const theme = React.useContext(ThemeContext);
     return (
-        <div className={jsStyles.backLinkContainer()}>
-            <RouterLink data-tid="GoBack" to={to}>
-                <ArrowCLeftIcon />
-                {"\u00A0"}
-                {children}
-            </RouterLink>
-        </div>
+        <RouterLink data-tid="GoBack" to={to} className={jsStyles.backLink()}>
+            <ArrowALeftIcon24Regular color={theme.gray} className={jsStyles.backLinkIcon()} />
+        </RouterLink>
     );
 };
 
diff --git a/cassandra-distributed-task-queue-ui/src/components/RouterLink/RouterLink.tsx b/cassandra-distributed-task-queue-ui/src/components/RouterLink/RouterLink.tsx
index 0f88e9fe..e7d887f6 100644
--- a/cassandra-distributed-task-queue-ui/src/components/RouterLink/RouterLink.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/RouterLink/RouterLink.tsx
@@ -1,11 +1,11 @@
 import { ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
-import { Link, Location } from "react-router-dom";
+import { Link, To } from "react-router-dom";
 
 import { jsStyles } from "./RouterLink.styles";
 
 interface RouterLinkProps {
-    to: string | Partial<Location>;
+    to: To;
     children?: React.ReactNode;
     className?: string;
 }
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
index ee4028f5..b8b8318b 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
@@ -11,7 +11,6 @@ import { ICustomRenderer } from "../../Domain/CustomRenderer";
 import { cancelableStates, rerunableStates } from "../../Domain/TaskStateExtensions";
 import { searchRequestMapping } from "../../containers/TasksPageContainer";
 import { Accordion } from "../Accordion/Accordion";
-import { GoBackLink } from "../GoBack/GoBackLink";
 import { CommonLayout } from "../Layouts/CommonLayout";
 import { RouterLink } from "../RouterLink/RouterLink";
 import { TaskDetailsMetaTable } from "../TaskDetailsMetaTable/TaskDetailsMetaTable";
@@ -151,23 +150,20 @@ export function TaskDetailsPage({
 
     return (
         <div>
-            <CommonLayout>
+            <CommonLayout withArrow>
+                <CommonLayout.GoBack to={parentLocation} />
                 {taskDetails && (
-                    <CommonLayout.GreyLineHeader
+                    <CommonLayout.Header
+                        borderBottom
                         data-tid="Header"
-                        title={
-                            <RowStack gap={3} verticalAlign="bottom">
-                                <GoBackLink backUrl={parentLocation} />
-                                <span>Задача {taskDetails.taskMeta.name}</span>
-                            </RowStack>
-                        }
+                        title={`Задача ${taskDetails.taskMeta.name}`}
                         tools={taskDetails && allowRerunOrCancel ? renderButtons() : null}>
                         <TaskTimeLine
                             getHrefToTask={getTaskLocation}
                             taskMeta={taskDetails.taskMeta}
                             childTaskIds={taskDetails.childTaskIds}
                         />
-                    </CommonLayout.GreyLineHeader>
+                    </CommonLayout.Header>
                 )}
                 <CommonLayout.Content>
                     <ColumnStack block stretch gap={2}>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskNotFoundPage/TaskNotFoundPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskNotFoundPage/TaskNotFoundPage.tsx
index ba5e8510..3c97791f 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskNotFoundPage/TaskNotFoundPage.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskNotFoundPage/TaskNotFoundPage.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { useLocation } from "react-router-dom";
 
 import { RouteUtils } from "../../Domain/Utils/RouteUtils";
-import { GoBackLink } from "../GoBack/GoBackLink";
 import { CommonLayout } from "../Layouts/CommonLayout";
 
 import { CloudsFar, CloudsMed, CloudsNear } from "./Clouds";
@@ -14,8 +13,8 @@ export const TaskNotFoundPage = (): JSX.Element => {
     const theme = React.useContext(ThemeContext);
     return (
         <div style={{ backgroundColor: theme.bgDefault }}>
-            <CommonLayout data-tid="ObjectNotFoundPage" style={{ display: "block", height: "initial" }}>
-                <GoBackLink backUrl={RouteUtils.backUrl(pathname)} />
+            <CommonLayout data-tid="ObjectNotFoundPage" style={{ display: "block", height: "initial" }} withArrow>
+                <CommonLayout.GoBack to={RouteUtils.backUrl(pathname)} />
                 <CommonLayout.Content className={jsStyles.content()}>
                     <h2 className={jsStyles.headerTitle()} data-tid="Header">
                         Страница не найдена
diff --git a/cassandra-distributed-task-queue-ui/src/containers/TaskChainsTreeContainer.tsx b/cassandra-distributed-task-queue-ui/src/containers/TaskChainsTreeContainer.tsx
index 74b07713..08ec3775 100644
--- a/cassandra-distributed-task-queue-ui/src/containers/TaskChainsTreeContainer.tsx
+++ b/cassandra-distributed-task-queue-ui/src/containers/TaskChainsTreeContainer.tsx
@@ -1,4 +1,3 @@
-import { RowStack } from "@skbkontur/react-stack-layout";
 import { Loader } from "@skbkontur/react-ui";
 import _ from "lodash";
 import React, { useEffect, useState } from "react";
@@ -13,7 +12,6 @@ import {
 } from "../Domain/RtqMonitoringSearchRequestUtils";
 import { RouteUtils } from "../Domain/Utils/RouteUtils";
 import { ErrorHandlingContainer } from "../components/ErrorHandling/ErrorHandlingContainer";
-import { GoBackLink } from "../components/GoBack/GoBackLink";
 import { CommonLayout } from "../components/Layouts/CommonLayout";
 import { TaskChainTree } from "../components/TaskChainTree/TaskChainTree";
 
@@ -66,15 +64,9 @@ export const TaskChainsTreeContainer = ({
     const getTaskLocation = (id: string): string | Partial<Location> => ({ pathname: `../${id}` });
 
     return (
-        <CommonLayout>
-            <CommonLayout.Header
-                title={
-                    <RowStack gap={3} verticalAlign="bottom">
-                        <GoBackLink backUrl={`${RouteUtils.backUrl(pathname)}${search}`} />
-                        <span>Дерево задач</span>
-                    </RowStack>
-                }
-            />
+        <CommonLayout withArrow>
+            <CommonLayout.GoBack to={`${RouteUtils.backUrl(pathname)}${search}`} />
+            <CommonLayout.Header title="Дерево задач" />
             <CommonLayout.Content>
                 <Loader type="big" active={loading} caption={loaderText}>
                     <div style={{ overflowX: "auto" }}>

From e6561805183b3c327858cf35ce522aaa5e5b213e Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Mon, 26 Jun 2023 17:36:59 +0500
Subject: [PATCH 3/8] Fix icons imports and update peerDeps

---
 .../package.json                              |  5 +-
 .../src/components/Accordion/Accordion.tsx    |  9 ++-
 .../src/components/AllowCopyToClipboard.tsx   |  4 +-
 .../ErrorHandlingContainerModal.tsx           |  8 +-
 .../src/components/Layouts/CommonLayout.tsx   |  2 +-
 .../TaskChainTree/TaskStateIcon.tsx           | 30 ++++----
 .../TaskDetailsPage/TaskDetailsPage.tsx       | 14 ++--
 .../TaskStatesSelect/TaskStatesSelect.tsx     |  4 +-
 .../TaskTable/TaskDetails/TaskDetails.tsx     |  7 +-
 .../components/TaskTimeLine/TaskTimeLine.tsx  | 52 +++++++------
 .../TaskTypesSelect/TaskTypesSelect.tsx       |  7 +-
 .../stories/TimeLine.stories.tsx              | 76 +++++++++----------
 12 files changed, 113 insertions(+), 105 deletions(-)

diff --git a/cassandra-distributed-task-queue-ui/package.json b/cassandra-distributed-task-queue-ui/package.json
index a7deaa2f..17de6981 100644
--- a/cassandra-distributed-task-queue-ui/package.json
+++ b/cassandra-distributed-task-queue-ui/package.json
@@ -36,9 +36,10 @@
     "test": "mocha **/*.test.ts"
   },
   "peerDependencies": {
+    "@skbkontur/icons": ">=1 <2",
     "@skbkontur/react-ui": ">=2 <=4",
-    "react": ">=16 <=17",
-    "react-dom": ">=16 <=17",
+    "react": ">=16 <=18",
+    "react-dom": ">=16 <=18",
     "react-router-dom": ">=6"
   },
   "dependencies": {
diff --git a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
index ef569b74..790d74a8 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
@@ -1,5 +1,4 @@
-import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
-import { ArrowShapeTriangleARightIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleARightIcon";
+import { ArrowShapeTriangleADownIcon16Regular, ArrowShapeTriangleARightIcon16Regular } from "@skbkontur/icons";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { ThemeContext, Hint, Link } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
@@ -208,7 +207,11 @@ export class Accordion extends React.Component<TaskAccordionProps, TaskAccordion
                         data-tid="ToggleButton"
                         className={jsStyles.toggleButton()}
                         onClick={this.toggleCollapseManual}>
-                        {collapsedSelf ? <ArrowShapeTriangleARightIcon /> : <ArrowShapeTriangleADownIcon />}
+                        {collapsedSelf ? (
+                            <ArrowShapeTriangleARightIcon16Regular />
+                        ) : (
+                            <ArrowShapeTriangleADownIcon16Regular />
+                        )}
                         <span data-tid="ToggleButtonText" className={jsStyles.toggleButtonText()}>
                             {title}
                         </span>
diff --git a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
index 96f27bb4..2af5d6be 100644
--- a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
@@ -1,4 +1,4 @@
-import { CopyIcon } from "@skbkontur/icons/esm/icons/CopyIcon";
+import { CopyIcon16Regular } from "@skbkontur/icons";
 import { Link, Toast } from "@skbkontur/react-ui";
 import copy from "copy-to-clipboard";
 import React, { PropsWithChildren } from "react";
@@ -19,7 +19,7 @@ export class AllowCopyToClipboard extends React.Component<PropsWithChildren<{}>>
         return (
             <span>
                 <span ref={x => (this.children = x)}>{this.props.children}</span>{" "}
-                <Link icon={<CopyIcon />} onClick={this.handleCopy} />
+                <Link icon={<CopyIcon16Regular />} onClick={this.handleCopy} />
             </span>
         );
     }
diff --git a/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx b/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
index d904f165..c44a77b2 100644
--- a/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
@@ -1,4 +1,4 @@
-import { CopyIcon } from "@skbkontur/icons/esm/icons/CopyIcon";
+import { CopyIcon16Regular } from "@skbkontur/icons";
 import { Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
@@ -87,7 +87,7 @@ export class ErrorHandlingContainerModal extends React.Component<
                                             <h4 className={jsStyles.header()}>Client stack trace</h4>
                                         </Fit>
                                         <Fit>
-                                            <Link icon={<CopyIcon />} onClick={() => this.copyData(stack)}>
+                                            <Link icon={<CopyIcon16Regular />} onClick={() => this.copyData(stack)}>
                                                 Скопировать
                                             </Link>
                                         </Fit>
@@ -106,7 +106,9 @@ export class ErrorHandlingContainerModal extends React.Component<
                                             <h4 className={jsStyles.header()}>Server stack trace</h4>
                                         </Fit>
                                         <Fit>
-                                            <Link icon={<CopyIcon />} onClick={() => this.copyData(serverStack)}>
+                                            <Link
+                                                icon={<CopyIcon16Regular />}
+                                                onClick={() => this.copyData(serverStack)}>
                                                 Скопировать
                                             </Link>
                                         </Fit>
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
index 60d7e07e..ec40ee50 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -1,4 +1,4 @@
-import { ArrowALeftIcon24Regular } from "@skbkontur/icons/esm/icons/ArrowALeftIcon";
+import { ArrowALeftIcon24Regular } from "@skbkontur/icons";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Loader, ThemeContext } from "@skbkontur/react-ui";
 import React, { CSSProperties } from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
index 668fe50d..b6e471d0 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
@@ -1,8 +1,10 @@
-import { CheckAIcon } from "@skbkontur/icons/esm/icons/CheckAIcon";
-import { QuestionSquareIcon } from "@skbkontur/icons/esm/icons/QuestionSquareIcon";
-import { TimeClockIcon } from "@skbkontur/icons/esm/icons/TimeClockIcon";
-import { XCircleIcon } from "@skbkontur/icons/esm/icons/XCircleIcon";
-import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
+import {
+    CheckAIcon16Regular,
+    QuestionSquareIcon16Regular,
+    TimeClockIcon16Regular,
+    XCircleIcon16Regular,
+    XIcon16Regular,
+} from "@skbkontur/icons";
 import { ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
 import React from "react";
@@ -33,22 +35,22 @@ export function TaskStateIcon({ taskState }: TaskStateIconProps): JSX.Element {
 
     switch (taskState) {
         case TaskState.Unknown:
-            return <QuestionSquareIcon color={getIconColor(theme, "warning")} />;
+            return <QuestionSquareIcon16Regular color={getIconColor(theme, "warning")} />;
         case TaskState.New:
-            return <TimeClockIcon color={getIconColor(theme, "waiting")} />;
+            return <TimeClockIcon16Regular color={getIconColor(theme, "waiting")} />;
         case TaskState.WaitingForRerun:
-            return <TimeClockIcon color={getIconColor(theme, "waiting")} />;
+            return <TimeClockIcon16Regular color={getIconColor(theme, "waiting")} />;
         case TaskState.WaitingForRerunAfterError:
-            return <TimeClockIcon color={getIconColor(theme, "error")} />;
+            return <TimeClockIcon16Regular color={getIconColor(theme, "error")} />;
         case TaskState.Finished:
-            return <CheckAIcon color={getIconColor(theme, "success")} />;
+            return <CheckAIcon16Regular color={getIconColor(theme, "success")} />;
         case TaskState.InProcess:
-            return <TimeClockIcon color={getIconColor(theme, "waiting")} />;
+            return <TimeClockIcon16Regular color={getIconColor(theme, "waiting")} />;
         case TaskState.Fatal:
-            return <XCircleIcon color={getIconColor(theme, "error")} />;
+            return <XCircleIcon16Regular color={getIconColor(theme, "error")} />;
         case TaskState.Canceled:
-            return <XIcon color={getIconColor(theme, "error")} />;
+            return <XIcon16Regular color={getIconColor(theme, "error")} />;
         default:
-            return <CheckAIcon />;
+            return <CheckAIcon16Regular />;
     }
 }
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
index b8b8318b..83f8b2f7 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
@@ -1,6 +1,8 @@
-import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
-import { TextAlignCenterJustifyIcon } from "@skbkontur/icons/esm/icons/TextAlignCenterJustifyIcon";
-import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
+import {
+    ArrowRoundTimeForwardIcon16Regular,
+    TextAlignCenterJustifyIcon16Regular,
+    XIcon16Regular,
+} from "@skbkontur/icons";
 import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
@@ -72,7 +74,7 @@ export function TaskDetailsPage({
                         <RouterLink
                             data-tid="RelatedTaskTree"
                             to={`../Tree${searchRequestMapping.stringify(relatedTasksRequest)}`}>
-                            <TextAlignCenterJustifyIcon />
+                            <TextAlignCenterJustifyIcon16Regular />
                             {"\u00A0"}
                             View related tasks tree
                         </RouterLink>
@@ -80,14 +82,14 @@ export function TaskDetailsPage({
                 )}
                 {isCancelable && (
                     <Fit>
-                        <Link icon={<XIcon />} use="danger" data-tid={"CancelButton"} onClick={cancel}>
+                        <Link icon={<XIcon16Regular />} use="danger" data-tid={"CancelButton"} onClick={cancel}>
                             Cancel task
                         </Link>
                     </Fit>
                 )}
                 {isRerunable && (
                     <Fit>
-                        <Link icon={<ArrowRoundTimeForwardIcon />} data-tid={"RerunButton"} onClick={rerun}>
+                        <Link icon={<ArrowRoundTimeForwardIcon16Regular />} data-tid={"RerunButton"} onClick={rerun}>
                             Rerun task
                         </Link>
                     </Fit>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
index 0a17e0f3..1f641f06 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
@@ -1,4 +1,4 @@
-import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
+import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons";
 import { ColumnStack, Fit } from "@skbkontur/react-stack-layout";
 import { Button, Checkbox, Tooltip } from "@skbkontur/react-ui";
 import React from "react";
@@ -34,7 +34,7 @@ export class TaskStatesSelect extends React.Component<TaskStatesSelectProps> {
                         <span data-tid="ButtonText" className={jsStyles.buttonText()}>
                             {value.length ? `Выбрано состояний: ${value.length}` : "Выбрать состояние"}
                         </span>
-                        <ArrowShapeTriangleADownIcon />
+                        <ArrowShapeTriangleADownIcon16Regular />
                     </Button>
                 </Tooltip>
             </span>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
index 96ff0a4a..17eb3387 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
@@ -1,5 +1,4 @@
-import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
-import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
+import { ArrowRoundTimeForwardIcon16Regular, XIcon16Regular } from "@skbkontur/icons";
 import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Link, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
@@ -88,7 +87,7 @@ export function TaskDetails(props: TaskDetailsProps): JSX.Element {
                                             data-tid="Cancel"
                                             disabled={!cancelableStates.includes(taskInfo.state)}
                                             onClick={onCancel}
-                                            icon={<XIcon />}>
+                                            icon={<XIcon16Regular />}>
                                             Cancel
                                         </Link>
                                     </Fit>
@@ -97,7 +96,7 @@ export function TaskDetails(props: TaskDetailsProps): JSX.Element {
                                             data-tid="Rerun"
                                             disabled={!rerunableStates.includes(taskInfo.state)}
                                             onClick={onRerun}
-                                            icon={<ArrowRoundTimeForwardIcon />}>
+                                            icon={<ArrowRoundTimeForwardIcon16Regular />}>
                                             Rerun
                                         </Link>
                                     </Fit>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
index 2cb16c63..f80481cb 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
@@ -1,13 +1,15 @@
-import { ArrowADownIcon } from "@skbkontur/icons/esm/icons/ArrowADownIcon";
-import { ArrowAUpIcon } from "@skbkontur/icons/esm/icons/ArrowAUpIcon";
-import { ArrowDCornerDownRightIcon } from "@skbkontur/icons/esm/icons/ArrowDCornerDownRightIcon";
-import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
-import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
-import { CheckAIcon } from "@skbkontur/icons/esm/icons/CheckAIcon";
-import { NetDownloadIcon } from "@skbkontur/icons/esm/icons/NetDownloadIcon";
-import { TimeClockIcon } from "@skbkontur/icons/esm/icons/TimeClockIcon";
-import { XCircleIcon } from "@skbkontur/icons/esm/icons/XCircleIcon";
-import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
+import {
+    ArrowADownIcon16Regular,
+    ArrowAUpIcon16Regular,
+    ArrowDCornerDownRightIcon16Regular,
+    ArrowRoundTimeForwardIcon16Regular,
+    ArrowShapeTriangleADownIcon16Regular,
+    CheckAIcon16Regular,
+    NetDownloadIcon16Regular,
+    TimeClockIcon16Regular,
+    XCircleIcon16Regular,
+    XIcon16Regular,
+} from "@skbkontur/icons";
 import { Link, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
 import { Location } from "react-router-dom";
@@ -61,7 +63,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
         }
         return createSimpleEntry({
             title: "Started",
-            icon: <ArrowDCornerDownRightIcon />,
+            icon: <ArrowDCornerDownRightIcon16Regular />,
             date: taskMeta.startExecutingTicks,
         });
     };
@@ -77,7 +79,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                 getStartedEntry(),
                 createSimpleEntry({
                     title: "Finished",
-                    icon: <CheckAIcon />,
+                    icon: <CheckAIcon16Regular />,
                     date: taskMeta.finishExecutingTicks,
                 })
             );
@@ -87,7 +89,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                 getStartedEntry(),
                 createSimpleEntry({
                     title: "Failed",
-                    icon: <XCircleIcon color={color} />,
+                    icon: <XCircleIcon16Regular color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks,
                 })
@@ -101,7 +103,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 <TimeLineCycled
                     key="FewAttempts"
-                    icon={<ArrowRoundTimeForwardIcon />}
+                    icon={<ArrowRoundTimeForwardIcon16Regular />}
                     content={`Restarted for ${taskMeta.attempts} times`}>
                     {shouldStartAndStartEntries}
                 </TimeLineCycled>,
@@ -113,7 +115,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
     const getShouldStartedEntry = (): null | JSX.Element => {
         return createSimpleEntry({
             title: "Start scheduled",
-            icon: <TimeClockIcon />,
+            icon: <TimeClockIcon16Regular />,
             date: taskMeta.minimalStartTicks,
         });
     };
@@ -124,7 +126,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Finished",
-                    icon: <CheckAIcon color={color} />,
+                    icon: <CheckAIcon16Regular color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks,
                 }),
@@ -135,7 +137,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Failed",
-                    icon: <XCircleIcon color={color} />,
+                    icon: <XCircleIcon16Regular color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks,
                 }),
@@ -146,7 +148,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Canceled",
-                    icon: <XIcon color={color} />,
+                    icon: <XIcon16Regular color={color} />,
                     color: color,
                     date: taskMeta.finishExecutingTicks || taskMeta.lastModificationTicks,
                 }),
@@ -158,7 +160,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                 getShouldStartedEntry(),
                 createSimpleEntry({
                     title: "Waiting for next run",
-                    icon: <TimeClockIcon color={color} />,
+                    icon: <TimeClockIcon16Regular color={color} />,
                     color: color,
                 }),
             ];
@@ -168,7 +170,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Waiting for complete",
-                    icon: <TimeClockIcon color={color} />,
+                    icon: <TimeClockIcon16Regular color={color} />,
                     color: color,
                 }),
             ];
@@ -178,7 +180,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             return [
                 createSimpleEntry({
                     title: "Waiting for start",
-                    icon: <TimeClockIcon color={color} />,
+                    icon: <TimeClockIcon16Regular color={color} />,
                     color: color,
                 }),
             ];
@@ -192,7 +194,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
     const getEnqueuedEntry = (): null | JSX.Element => {
         return createSimpleEntry({
             title: "Enqueued",
-            icon: <NetDownloadIcon />,
+            icon: <NetDownloadIcon16Regular />,
             date: taskMeta.ticks,
         });
     };
@@ -203,7 +205,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
             const hiddenTaskIdsCount = childTaskIds.length - visibleTaskIdsCount;
             const color = getIconColor(theme, "waiting");
             return (
-                <TimeLineEntry key="Children" icon={<ArrowADownIcon color={color} />}>
+                <TimeLineEntry key="Children" icon={<ArrowADownIcon16Regular color={color} />}>
                     <div style={{ color: color }} data-tid="EnqueuedTasks">
                         <div>Enqueued tasks:</div>
                         {childTaskIds.slice(0, visibleTaskIdsCount).map(x => (
@@ -218,7 +220,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
                             <Link data-tid="ShowAllTasks" onClick={() => setShowAllErrors(true)}>
                                 ...and {hiddenTaskIdsCount} more
                                 {"\u00A0"}
-                                <ArrowShapeTriangleADownIcon />
+                                <ArrowShapeTriangleADownIcon16Regular />
                             </Link>
                         )}
                     </div>
@@ -234,7 +236,7 @@ export function TaskTimeLine({ taskMeta, childTaskIds, getHrefToTask }: TaskTime
         }
         const color = getIconColor(theme, "waiting");
         return (
-            <TimeLineEntry key="Parent" icon={<ArrowAUpIcon color={color} />}>
+            <TimeLineEntry key="Parent" icon={<ArrowAUpIcon16Regular color={color} />}>
                 <div style={{ color: color }}>
                     Parent:{" "}
                     <AllowCopyToClipboard>
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
index a29001eb..88c814d1 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
@@ -1,5 +1,4 @@
-import { ArrowShapeTriangleADownIcon } from "@skbkontur/icons/esm/icons/ArrowShapeTriangleADownIcon";
-import { SearchLoupeIcon } from "@skbkontur/icons/esm/icons/SearchLoupeIcon";
+import { ArrowShapeTriangleADownIcon16Regular, SearchLoupeIcon16Regular } from "@skbkontur/icons";
 import { ColumnStack, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Checkbox, Input, Tooltip } from "@skbkontur/react-ui";
 import React from "react";
@@ -31,7 +30,7 @@ export class TaskTypesSelect extends React.Component<TaskTypesSelectProps, TaskT
                         <span className={jsStyles.buttonText()}>
                             {value.length ? `Выбрано задач: ${value.length}` : "Выбрать тип задач"}
                         </span>
-                        <ArrowShapeTriangleADownIcon />
+                        <ArrowShapeTriangleADownIcon16Regular />
                     </Button>
                 </Tooltip>
             </span>
@@ -85,7 +84,7 @@ export class TaskTypesSelect extends React.Component<TaskTypesSelectProps, TaskT
                         <Fit>
                             <Input
                                 value={query}
-                                rightIcon={<SearchLoupeIcon />}
+                                rightIcon={<SearchLoupeIcon16Regular />}
                                 onValueChange={val => this.setState({ query: val })}
                             />
                         </Fit>
diff --git a/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx b/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
index 7371843d..7f52be77 100644
--- a/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
+++ b/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
@@ -1,6 +1,4 @@
-import { ArrowRoundTimeForwardIcon } from "@skbkontur/icons/esm/icons/ArrowRoundTimeForwardIcon";
-import { CheckAIcon } from "@skbkontur/icons/esm/icons/CheckAIcon";
-import { XIcon } from "@skbkontur/icons/esm/icons/XIcon";
+import { ArrowRoundTimeForwardIcon16Regular, XIcon16Regular, CheckAIcon16Regular } from "@skbkontur/icons";
 import React from "react";
 
 import { TimeLine } from "../src/components/TaskTimeLine/TimeLine/TimeLine";
@@ -12,15 +10,15 @@ export default {
 
 export const Direct = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<XIcon />}>
+        <TimeLine.Entry icon={<XIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started 2</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -29,27 +27,27 @@ export const Direct = () => (
 
 export const WithOneBranching = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<XIcon />}>
+        <TimeLine.Entry icon={<XIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.BranchNode>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
@@ -60,33 +58,33 @@ export const WithOneBranching = () => (
 
 export const WithOneBranchingOnManyBranches = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<XIcon />}>
+        <TimeLine.Entry icon={<XIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.BranchNode>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
@@ -97,49 +95,49 @@ export const WithOneBranchingOnManyBranches = () => (
 
 export const WithManyBranchings = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<XIcon />}>
+        <TimeLine.Entry icon={<XIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.BranchNode>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started</div>
                     <div>Now</div>
                 </TimeLine.Entry>
-                <TimeLine.Entry icon={<XIcon />}>
+                <TimeLine.Entry icon={<XIcon16Regular />}>
                     <div>Started</div>
                     <div>Now</div>
                 </TimeLine.Entry>
                 <TimeLine.BranchNode>
                     <TimeLine.Branch>
-                        <TimeLine.Entry icon={<CheckAIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
                     </TimeLine.Branch>
                     <TimeLine.Branch>
-                        <TimeLine.Entry icon={<CheckAIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
-                        <TimeLine.Entry icon={<CheckAIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
                     </TimeLine.Branch>
                     <TimeLine.Branch>
-                        <TimeLine.Entry icon={<CheckAIcon />}>
+                        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                             <div>Started 2</div>
                             <div>Now</div>
                         </TimeLine.Entry>
@@ -147,7 +145,7 @@ export const WithManyBranchings = () => (
                 </TimeLine.BranchNode>
             </TimeLine.Branch>
             <TimeLine.Branch>
-                <TimeLine.Entry icon={<CheckAIcon />}>
+                <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                     <div>Started 2</div>
                     <div>Now</div>
                 </TimeLine.Entry>
@@ -158,7 +156,7 @@ export const WithManyBranchings = () => (
 
 export const WithCycles = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -169,20 +167,20 @@ export const WithCycles = () => (
                     <div>Now</div>
                 </div>
             }>
-            <TimeLine.Entry icon={<XIcon />}>
+            <TimeLine.Entry icon={<XIcon16Regular />}>
                 <div>Started</div>
                 <div>Now</div>
             </TimeLine.Entry>
-            <TimeLine.Entry icon={<CheckAIcon />}>
+            <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                 <div>Started 2</div>
                 <div>Now</div>
             </TimeLine.Entry>
         </TimeLine.Cycled>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started 4</div>
             <div>Now</div>
         </TimeLine.Entry>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started 5</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -191,7 +189,7 @@ export const WithCycles = () => (
 
 export const WithCyclesAndLongText = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
@@ -202,11 +200,11 @@ export const WithCyclesAndLongText = () => (
                     <div>Now</div>
                 </div>
             }>
-            <TimeLine.Entry icon={<XIcon />}>
+            <TimeLine.Entry icon={<XIcon16Regular />}>
                 <div>Started text text text text text text text</div>
                 <div>Now</div>
             </TimeLine.Entry>
-            <TimeLine.Entry icon={<CheckAIcon />}>
+            <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                 <div>Started 2</div>
                 <div>Now</div>
             </TimeLine.Entry>
@@ -216,23 +214,23 @@ export const WithCyclesAndLongText = () => (
 
 export const WithCyclesAndIcon = () => (
     <TimeLine>
-        <TimeLine.Entry icon={<CheckAIcon />}>
+        <TimeLine.Entry icon={<CheckAIcon16Regular />}>
             <div>Started</div>
             <div>Now</div>
         </TimeLine.Entry>
         <TimeLine.Cycled
-            icon={<ArrowRoundTimeForwardIcon />}
+            icon={<ArrowRoundTimeForwardIcon16Regular />}
             content={
                 <div>
                     <div>Some cycle info</div>
                     <div>Now</div>
                 </div>
             }>
-            <TimeLine.Entry icon={<XIcon />}>
+            <TimeLine.Entry icon={<XIcon16Regular />}>
                 <div>Started text text text text text text text</div>
                 <div>Now</div>
             </TimeLine.Entry>
-            <TimeLine.Entry icon={<CheckAIcon />}>
+            <TimeLine.Entry icon={<CheckAIcon16Regular />}>
                 <div>Started 2</div>
                 <div>Now</div>
             </TimeLine.Entry>

From 9ceed008d7c4986df47a47cc294c9237052d2635 Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Mon, 31 Jul 2023 14:07:16 +0500
Subject: [PATCH 4/8] Update icons library and fix imports

---
 .../package.json                              |  2 +-
 .../src/components/Accordion/Accordion.tsx    |  3 ++-
 .../src/components/AllowCopyToClipboard.tsx   |  2 +-
 .../ErrorHandlingContainerModal.tsx           |  2 +-
 .../src/components/Layouts/CommonLayout.tsx   |  2 +-
 .../TaskChainTree/TaskStateIcon.tsx           | 12 +++++-----
 .../TaskDetailsPage/TaskDetailsPage.tsx       |  8 +++----
 .../TaskStatesSelect/TaskStatesSelect.tsx     |  2 +-
 .../TaskTable/TaskDetails/TaskDetails.tsx     |  3 ++-
 .../components/TaskTimeLine/TaskTimeLine.tsx  | 22 +++++++++----------
 .../TaskTypesSelect/TaskTypesSelect.tsx       |  3 ++-
 .../stories/TimeLine.stories.tsx              |  4 +++-
 cassandra-distributed-task-queue-ui/yarn.lock |  8 +++----
 13 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/cassandra-distributed-task-queue-ui/package.json b/cassandra-distributed-task-queue-ui/package.json
index 17de6981..63e43ff0 100644
--- a/cassandra-distributed-task-queue-ui/package.json
+++ b/cassandra-distributed-task-queue-ui/package.json
@@ -62,7 +62,7 @@
     "@babel/preset-typescript": "^7.14.5",
     "@babel/runtime": "^7.14.8",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
-    "@skbkontur/icons": "^1.0.3",
+    "@skbkontur/icons": "^1.3.0",
     "@skbkontur/react-ui": "^4.1.0",
     "@storybook/addon-actions": "^6.3.5",
     "@storybook/addons": "^6.3.5",
diff --git a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
index 790d74a8..0a708aaf 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Accordion/Accordion.tsx
@@ -1,4 +1,5 @@
-import { ArrowShapeTriangleADownIcon16Regular, ArrowShapeTriangleARightIcon16Regular } from "@skbkontur/icons";
+import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleADownIcon16Regular";
+import { ArrowShapeTriangleARightIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleARightIcon16Regular";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { ThemeContext, Hint, Link } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
diff --git a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
index 2af5d6be..eb9e0b4a 100644
--- a/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/AllowCopyToClipboard.tsx
@@ -1,4 +1,4 @@
-import { CopyIcon16Regular } from "@skbkontur/icons";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular";
 import { Link, Toast } from "@skbkontur/react-ui";
 import copy from "copy-to-clipboard";
 import React, { PropsWithChildren } from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx b/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
index c44a77b2..f6c49dae 100644
--- a/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/ErrorHandling/ErrorHandlingContainerModal.tsx
@@ -1,4 +1,4 @@
-import { CopyIcon16Regular } from "@skbkontur/icons";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular";
 import { Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
index ec40ee50..03dba2ed 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -1,4 +1,4 @@
-import { ArrowALeftIcon24Regular } from "@skbkontur/icons";
+import { ArrowALeftIcon24Regular } from "@skbkontur/icons/ArrowALeftIcon24Regular";
 import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Loader, ThemeContext } from "@skbkontur/react-ui";
 import React, { CSSProperties } from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
index b6e471d0..575124af 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskChainTree/TaskStateIcon.tsx
@@ -1,10 +1,8 @@
-import {
-    CheckAIcon16Regular,
-    QuestionSquareIcon16Regular,
-    TimeClockIcon16Regular,
-    XCircleIcon16Regular,
-    XIcon16Regular,
-} from "@skbkontur/icons";
+import { CheckAIcon16Regular } from "@skbkontur/icons/CheckAIcon16Regular";
+import { QuestionSquareIcon16Regular } from "@skbkontur/icons/QuestionSquareIcon16Regular";
+import { TimeClockIcon16Regular } from "@skbkontur/icons/TimeClockIcon16Regular";
+import { XCircleIcon16Regular } from "@skbkontur/icons/XCircleIcon16Regular";
+import { XIcon16Regular } from "@skbkontur/icons/XIcon16Regular";
 import { ThemeContext } from "@skbkontur/react-ui";
 import { Theme } from "@skbkontur/react-ui/lib/theming/Theme";
 import React from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
index 83f8b2f7..cd88d762 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
@@ -1,8 +1,6 @@
-import {
-    ArrowRoundTimeForwardIcon16Regular,
-    TextAlignCenterJustifyIcon16Regular,
-    XIcon16Regular,
-} from "@skbkontur/icons";
+import { ArrowRoundTimeForwardIcon16Regular } from "@skbkontur/icons/ArrowRoundTimeForwardIcon16Regular";
+import { TextAlignCenterJustifyIcon16Regular } from "@skbkontur/icons/TextAlignCenterJustifyIcon16Regular";
+import { XIcon16Regular } from "@skbkontur/icons/XIcon16Regular";
 import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Link, Modal, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
index 1f641f06..29e361b5 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskStatesSelect/TaskStatesSelect.tsx
@@ -1,4 +1,4 @@
-import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons";
+import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleADownIcon16Regular";
 import { ColumnStack, Fit } from "@skbkontur/react-stack-layout";
 import { Button, Checkbox, Tooltip } from "@skbkontur/react-ui";
 import React from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
index 17eb3387..50e64314 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTable/TaskDetails/TaskDetails.tsx
@@ -1,4 +1,5 @@
-import { ArrowRoundTimeForwardIcon16Regular, XIcon16Regular } from "@skbkontur/icons";
+import { ArrowRoundTimeForwardIcon16Regular } from "@skbkontur/icons/ArrowRoundTimeForwardIcon16Regular";
+import { XIcon16Regular } from "@skbkontur/icons/XIcon16Regular";
 import { ColumnStack, Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Link, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
index f80481cb..2814afee 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTimeLine/TaskTimeLine.tsx
@@ -1,15 +1,13 @@
-import {
-    ArrowADownIcon16Regular,
-    ArrowAUpIcon16Regular,
-    ArrowDCornerDownRightIcon16Regular,
-    ArrowRoundTimeForwardIcon16Regular,
-    ArrowShapeTriangleADownIcon16Regular,
-    CheckAIcon16Regular,
-    NetDownloadIcon16Regular,
-    TimeClockIcon16Regular,
-    XCircleIcon16Regular,
-    XIcon16Regular,
-} from "@skbkontur/icons";
+import { ArrowADownIcon16Regular } from "@skbkontur/icons/ArrowADownIcon16Regular";
+import { ArrowAUpIcon16Regular } from "@skbkontur/icons/ArrowAUpIcon16Regular";
+import { ArrowDCornerDownRightIcon16Regular } from "@skbkontur/icons/ArrowDCornerDownRightIcon16Regular";
+import { ArrowRoundTimeForwardIcon16Regular } from "@skbkontur/icons/ArrowRoundTimeForwardIcon16Regular";
+import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleADownIcon16Regular";
+import { CheckAIcon16Regular } from "@skbkontur/icons/CheckAIcon16Regular";
+import { NetDownloadIcon16Regular } from "@skbkontur/icons/NetDownloadIcon16Regular";
+import { TimeClockIcon16Regular } from "@skbkontur/icons/TimeClockIcon16Regular";
+import { XCircleIcon16Regular } from "@skbkontur/icons/XCircleIcon16Regular";
+import { XIcon16Regular } from "@skbkontur/icons/XIcon16Regular";
 import { Link, ThemeContext } from "@skbkontur/react-ui";
 import React from "react";
 import { Location } from "react-router-dom";
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
index 88c814d1..ab8d125e 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskTypesSelect/TaskTypesSelect.tsx
@@ -1,4 +1,5 @@
-import { ArrowShapeTriangleADownIcon16Regular, SearchLoupeIcon16Regular } from "@skbkontur/icons";
+import { ArrowShapeTriangleADownIcon16Regular } from "@skbkontur/icons/ArrowShapeTriangleADownIcon16Regular";
+import { SearchLoupeIcon16Regular } from "@skbkontur/icons/SearchLoupeIcon16Regular";
 import { ColumnStack, Fit, RowStack } from "@skbkontur/react-stack-layout";
 import { Button, Checkbox, Input, Tooltip } from "@skbkontur/react-ui";
 import React from "react";
diff --git a/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx b/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
index 7f52be77..16284ca5 100644
--- a/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
+++ b/cassandra-distributed-task-queue-ui/stories/TimeLine.stories.tsx
@@ -1,4 +1,6 @@
-import { ArrowRoundTimeForwardIcon16Regular, XIcon16Regular, CheckAIcon16Regular } from "@skbkontur/icons";
+import { ArrowRoundTimeForwardIcon16Regular } from "@skbkontur/icons/ArrowRoundTimeForwardIcon16Regular";
+import { CheckAIcon16Regular } from "@skbkontur/icons/CheckAIcon16Regular";
+import { XIcon16Regular } from "@skbkontur/icons/XIcon16Regular";
 import React from "react";
 
 import { TimeLine } from "../src/components/TaskTimeLine/TimeLine/TimeLine";
diff --git a/cassandra-distributed-task-queue-ui/yarn.lock b/cassandra-distributed-task-queue-ui/yarn.lock
index 64412716..7d07551b 100644
--- a/cassandra-distributed-task-queue-ui/yarn.lock
+++ b/cassandra-distributed-task-queue-ui/yarn.lock
@@ -1265,10 +1265,10 @@
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.1.tgz#3a3a408481a3796f45223a549c2571517bc8af2d"
   integrity sha512-YUkWj+xs0oOzBe74OgErsuR3wVn+efrFhXBWrit50kOiED+pvQe2r6MWY0iJMQU/mSVKxvNzL4ZaYvjdX+G7ZA==
 
-"@skbkontur/icons@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@skbkontur/icons/-/icons-1.0.3.tgz#528602941a37a9123eedbd3eeed78d98cec3a5e0"
-  integrity sha512-thYuy7gjoq25aRtMQ9qhQhZtw0ionTn5q7jKS2pwtAmcvEXQGchfyK2VG+/AhZlw1LxcY/fO8lKFdCtulWZlKA==
+"@skbkontur/icons@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@skbkontur/icons/-/icons-1.3.0.tgz#c955ce44209a4358c5045e0aae4398c5d0723581"
+  integrity sha512-+N43h5WXlW8KV8KI5kdIu9Gul6Ijl+AncgivF23OIQr9p1cDaZZS44lJltAh35sWGX5uXOrSQy4QQNcbh37M0w==
 
 "@skbkontur/react-stack-layout@^1.0.3":
   version "1.0.3"

From 951f496f26924013a0c03aa5bc850f8db79a28a3 Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Mon, 31 Jul 2023 14:11:41 +0500
Subject: [PATCH 5/8] Fix go-back-link padding

---
 .../src/components/Layouts/CommonLayout.styles.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
index 8a53a63e..fa416cb6 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
@@ -86,11 +86,11 @@ export const jsStyles = {
     backLink(): string {
         return css`
             position: absolute;
-            left: 2px;
+            left: ${newBaseSize * 3}px;
             opacity: 0.7;
             height: ${newBaseSize * 7}px;
             width: ${newBaseSize * 7}px;
-            padding: ${newBaseSize * 2}px 0 ${newBaseSize * 2}px ${newBaseSize * 2}px;
+            padding: ${newBaseSize * 2}px 0;
             display: flex;
             align-items: center;
             justify-content: center;

From f1832f0a13b924fc92daa9d504f48312a93a19b9 Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Wed, 2 Aug 2023 16:18:04 +0500
Subject: [PATCH 6/8] Bump release version

---
 version.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/version.json b/version.json
index 432462a8..91b7693c 100644
--- a/version.json
+++ b/version.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.1",
+  "version": "2.2",
   "assemblyVersion": {
     "precision": "build"
   },

From 14d34bd18aa0926dd9ebdff24cab40a0b797d983 Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Tue, 15 Aug 2023 12:38:18 +0500
Subject: [PATCH 7/8] Change arrow color and position

---
 .../components/Layouts/CommonLayout.styles.ts | 32 ++++++-------------
 .../src/components/Layouts/CommonLayout.tsx   |  2 +-
 .../TaskDetailsPage/TaskDetailsPage.tsx       | 10 ++++--
 3 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
index fa416cb6..8da476cb 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.styles.ts
@@ -36,17 +36,6 @@ export const jsStyles = {
         `;
     },
 
-    greyLineHeader(t: Theme): string {
-        return css`
-            background-color: ${t.bgDisabled};
-            padding: ${2 * baseSize}px ${globalHorizontalPadding}px;
-            margin-left: ${-globalHorizontalPadding}px;
-            margin-right: ${-globalHorizontalPadding}px;
-            margin-bottom: ${3 * baseSize}px;
-            word-break: break-all;
-        `;
-    },
-
     headerContent(): string {
         return css`
             margin-top: ${3 * newBaseSize}px;
@@ -58,7 +47,7 @@ export const jsStyles = {
             margin: 0;
             font-weight: 700;
             font-size: 29px;
-            line-height: 40px;
+            line-height: 48px;
         `;
     },
 
@@ -86,24 +75,23 @@ export const jsStyles = {
     backLink(): string {
         return css`
             position: absolute;
-            left: ${newBaseSize * 3}px;
-            opacity: 0.7;
-            height: ${newBaseSize * 7}px;
-            width: ${newBaseSize * 7}px;
-            padding: ${newBaseSize * 2}px 0;
+            left: 0;
+            height: ${newBaseSize * 12}px;
+            width: ${newBaseSize * 12}px;
             display: flex;
             align-items: center;
             justify-content: center;
-
-            &:hover {
-                opacity: 1;
-            }
         `;
     },
 
-    backLinkIcon(): string {
+    backLinkIcon(t: Theme): string {
         return css`
             display: block;
+            color: #757575;
+
+            &:hover {
+                color: ${t.textColorDefault};
+            }
         `;
     },
 
diff --git a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
index 03dba2ed..cfe96710 100644
--- a/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/Layouts/CommonLayout.tsx
@@ -76,7 +76,7 @@ CommonLayout.GoBack = function CommonLayoutGoBack({ to }: CommonLayoutGoBackProp
     const theme = React.useContext(ThemeContext);
     return (
         <RouterLink data-tid="GoBack" to={to} className={jsStyles.backLink()}>
-            <ArrowALeftIcon24Regular color={theme.gray} className={jsStyles.backLinkIcon()} />
+            <ArrowALeftIcon24Regular align="none" className={jsStyles.backLinkIcon(theme)} />
         </RouterLink>
     );
 };
diff --git a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
index cd88d762..ca1afa66 100644
--- a/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
+++ b/cassandra-distributed-task-queue-ui/src/components/TaskDetailsPage/TaskDetailsPage.tsx
@@ -80,16 +80,20 @@ export function TaskDetailsPage({
                 )}
                 {isCancelable && (
                     <Fit>
-                        <Link icon={<XIcon16Regular />} use="danger" data-tid={"CancelButton"} onClick={cancel}>
+                        <Link icon={<XIcon16Regular />} use="danger" data-tid="CancelButton" onClick={cancel}>
                             Cancel task
                         </Link>
                     </Fit>
                 )}
                 {isRerunable && (
                     <Fit>
-                        <Link icon={<ArrowRoundTimeForwardIcon16Regular />} data-tid={"RerunButton"} onClick={rerun}>
+                        <Button
+                            use="link"
+                            icon={<ArrowRoundTimeForwardIcon16Regular />}
+                            data-tid="RerunButton"
+                            onClick={rerun}>
                             Rerun task
-                        </Link>
+                        </Button>
                     </Fit>
                 )}
             </RowStack>

From 3a5cc752d98947be4d39ef49d0af1bac7bafbd10 Mon Sep 17 00:00:00 2001
From: semke <semke@skbkontur.ru>
Date: Tue, 15 Aug 2023 17:09:52 +0500
Subject: [PATCH 8/8] Update CHANGELOG.md

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0547d50c..a0fb66df 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # Changelog
 
+## v2.2.1 - 2023.08.15
+- Update back link arrows
+
 ## v2.1.3 - 2023.07.10
 - fix link to parent task