From 83b0e229f2846fa177560459756ea32bdd78894e Mon Sep 17 00:00:00 2001
From: AleksandrGorodetskii <gorod2004@gmail.com>
Date: Fri, 29 Nov 2024 12:15:03 +0300
Subject: [PATCH] NEW GUI: Home page panels - add icons (#3780 #3781 #3782)

---
 .../lib/components/list/list-header.tsx          |  4 +---
 .../src/pages/home/components/pipelines-list.tsx | 10 +++++++++-
 .../src/pages/home/components/projects-list.tsx  | 16 ++++++++++++++--
 .../src/pages/home/components/runs-list.tsx      |  8 +++++++-
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/portals-ui/packages/components/lib/components/list/list-header.tsx b/portals-ui/packages/components/lib/components/list/list-header.tsx
index 6d3f64c763..1651562b01 100644
--- a/portals-ui/packages/components/lib/components/list/list-header.tsx
+++ b/portals-ui/packages/components/lib/components/list/list-header.tsx
@@ -14,9 +14,7 @@ const ListHeader = (props: ListHeaderProps) => {
   } = props;
   return (
     <div className={classNames(className, 'divide-y')} style={style}>
-      <div
-        className="flex items-center no-wrap p-2"
-        style={{ color: 'var(--uui-text-secondary)' }}>
+      <div className="flex text items-center no-wrap p-2">
         <b>{title}</b>
         {controls ? <div className="ml-auto">{controls}</div> : null}
       </div>
diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx
index ac1feaf265..7517512edf 100644
--- a/portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx
+++ b/portals-ui/sites/ngs-portal/src/pages/home/components/pipelines-list.tsx
@@ -3,6 +3,7 @@ import { ItemsPanel } from '../../../widgets/items-panel/items-panel';
 import { PipelineCard } from './pipeline-card';
 import { memo } from 'react';
 import cn from 'classnames';
+import NavigationDependencyOutlineIcon from '@epam/assets/icons/navigation-dependency-outline.svg?react';
 
 type Props = {
   pipelines: Pipeline[] | undefined;
@@ -23,7 +24,14 @@ export const PipelinesList = memo(({ pipelines }: Props) => {
   return (
     <ItemsPanel
       className="max-h-full list-container overflow-auto"
-      title="Pipelines"
+      title={
+        <div className="fill-current flex flex-nowrap gap-1">
+          <span className="rotate-90">
+            <NavigationDependencyOutlineIcon />
+          </span>
+          <span>Pipelines</span>
+        </div>
+      }
       items={pipelines}
       renderItem={renderItem}
       sliced
diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx
index 816ea1bff5..31f99a08ee 100644
--- a/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx
+++ b/portals-ui/sites/ngs-portal/src/pages/home/components/projects-list.tsx
@@ -4,6 +4,8 @@ import { ProjectCard } from './project-card';
 import { ItemsPanel } from '../../../widgets/items-panel/items-panel';
 import cn from 'classnames';
 import { memo } from 'react';
+import ActionAddFillIcon from '@epam/assets/icons/action-add-outline.svg?react';
+import ActionJobFunctionOutlineIcon from '@epam/assets/icons/action-job_function-outline.svg?react';
 
 type Props = {
   projects: Project[] | undefined;
@@ -22,9 +24,19 @@ export const ProjectsList = memo(({ projects }: Props) => {
   return (
     <ItemsPanel
       className="max-h-full list-container overflow-auto"
-      title="Projects"
+      title={
+        <div className="fill-current flex flex-nowrap gap-1">
+          <ActionJobFunctionOutlineIcon />
+          <span>Projects</span>
+        </div>
+      }
       actions={
-        <Button caption="Create project" size="24" onClick={() => null} />
+        <Button
+          icon={ActionAddFillIcon}
+          caption="Create project"
+          size="24"
+          onClick={() => null}
+        />
       }
       items={projects}
       renderItem={renderItem}
diff --git a/portals-ui/sites/ngs-portal/src/pages/home/components/runs-list.tsx b/portals-ui/sites/ngs-portal/src/pages/home/components/runs-list.tsx
index 07e95d6ed6..2db5cb21d2 100644
--- a/portals-ui/sites/ngs-portal/src/pages/home/components/runs-list.tsx
+++ b/portals-ui/sites/ngs-portal/src/pages/home/components/runs-list.tsx
@@ -1,13 +1,19 @@
 import type { Run } from '@cloud-pipeline/core';
 import { ItemsPanel } from '../../../widgets/items-panel/items-panel.tsx';
 import { useAuthenticatedUserRuns } from '../../../shared/hooks/use-runs-filter.ts';
+import MediaPlayOutlineOptIcon from '@epam/assets/icons/media-play-outline-opt.2.svg?react';
 
 export const RunsList = () => {
   const { runs } = useAuthenticatedUserRuns({ reloadIntervalMs: 5000 });
   return (
     <ItemsPanel
       className="max-h-full list-container overflow-auto"
-      title="Runs history"
+      title={
+        <div className="fill-current flex flex-nowrap gap-1">
+          <MediaPlayOutlineOptIcon />
+          <span>Runs history</span>
+        </div>
+      }
       renderItem={(run: Run) => (
         <div className="px-2 py-1">
           <span>