From d1a300f0189744bef01d2c60135ec474c5004fbc Mon Sep 17 00:00:00 2001
From: Kavikumar M <50093149+thekavikumar@users.noreply.github.com>
Date: Wed, 20 Mar 2024 14:05:07 +0530
Subject: [PATCH] [GSoC24] Resolved Issue #7620 (Changed the alignment of the
 empty component in job page) (#7621)

ref issue: https://github.com/opencv/cvat/issues/7620

I've created a class called `cvat-empty-jobs-list` and added it to a div
to make the empty component in the job page aligned in the middle as all
other pages having empty component aligned to its center.

![after
](https://github.com/opencv/cvat/assets/50093149/4e05d9c9-6049-4900-8234-66f719976310)
---
 changelog.d/20240318_203856_kavikumarceo.md   |  4 ++
 .../src/components/jobs-page/jobs-page.tsx    | 19 ++++--
 cvat-ui/src/components/jobs-page/styles.scss  | 68 ++++++++-----------
 3 files changed, 48 insertions(+), 43 deletions(-)
 create mode 100644 changelog.d/20240318_203856_kavikumarceo.md

diff --git a/changelog.d/20240318_203856_kavikumarceo.md b/changelog.d/20240318_203856_kavikumarceo.md
new file mode 100644
index 000000000000..cfa19c9cbb76
--- /dev/null
+++ b/changelog.d/20240318_203856_kavikumarceo.md
@@ -0,0 +1,4 @@
+### Fixed
+
+- Incorrect alignment of empty job list component
+  (<https://github.com/opencv/cvat/pull/7621>)
diff --git a/cvat-ui/src/components/jobs-page/jobs-page.tsx b/cvat-ui/src/components/jobs-page/jobs-page.tsx
index 899075163d38..5d50cbdcc422 100644
--- a/cvat-ui/src/components/jobs-page/jobs-page.tsx
+++ b/cvat-ui/src/components/jobs-page/jobs-page.tsx
@@ -1,5 +1,5 @@
 // Copyright (C) 2022 Intel Corporation
-// Copyright (C) 2023 CVAT.ai Corporation
+// Copyright (C) 2023-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -76,7 +76,18 @@ function JobsPageComponent(): JSX.Element {
                 </Col>
             </Row>
         </>
-    ) : <Empty description={<Text>No results matched your search...</Text>} />;
+    ) : (
+        <div className='cvat-empty-jobs-list'>
+            <Empty description={(
+                <Row justify='center' align='middle'>
+                    <Col>
+                        <Text>No results matched your search...</Text>
+                    </Col>
+                </Row>
+            )}
+            />
+        </div>
+    );
 
     return (
         <div className='cvat-jobs-page'>
@@ -110,9 +121,7 @@ function JobsPageComponent(): JSX.Element {
                     );
                 }}
             />
-            { fetching ? (
-                <Spin size='large' className='cvat-spinner' />
-            ) : content }
+            {fetching ? <Spin size='large' className='cvat-spinner' /> : content}
         </div>
     );
 }
diff --git a/cvat-ui/src/components/jobs-page/styles.scss b/cvat-ui/src/components/jobs-page/styles.scss
index cc561fcaa0ac..c18774747d82 100644
--- a/cvat-ui/src/components/jobs-page/styles.scss
+++ b/cvat-ui/src/components/jobs-page/styles.scss
@@ -1,5 +1,5 @@
 // Copyright (C) 2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -12,23 +12,40 @@
     width: 100%;
     overflow: auto;
 
-    > div:nth-child(1) {
-        div > {
-            .cvat-title {
-                color: $text-color;
+    .cvat-jobs-page-top-bar {
+        > div {
+            display: flex;
+            justify-content: space-between;
+
+            > div {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+
+                .cvat-jobs-page-search-bar {
+                    width: $grid-unit-size * 32;
+                    padding-left: $grid-unit-size * 0.5;
+                }
+
+                > div {
+                    > *:not(:last-child) {
+                        margin-right: $grid-unit-size;
+                    }
+
+                    display: flex;
+                }
             }
         }
     }
 
-    > div:nth-child(2) {
-        &.ant-empty {
+    .cvat-empty-jobs-list {
+        .ant-empty {
             position: absolute;
-            top: 40%;
+            top: 50%;
             left: 50%;
+            transform: translate(-50%, -50%);
         }
-
-        padding-bottom: $grid-unit-size;
-        padding-top: $grid-unit-size;
     }
 
     .cvat-job-page-list-item {
@@ -129,6 +146,8 @@
     .cvat-jobs-page-list {
         display: flex;
         flex-wrap: wrap;
+        padding-top: $grid-unit-size;
+        padding-bottom: $grid-unit-size;
     }
 
     .cvat-job-card-more-button {
@@ -138,30 +157,3 @@
         font-size: 16px;
     }
 }
-
-.cvat-jobs-page-top-bar {
-    > div {
-        display: flex;
-        justify-content: space-between;
-
-        > div {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            width: 100%;
-
-            .cvat-jobs-page-search-bar {
-                width: $grid-unit-size * 32;
-                padding-left: $grid-unit-size * 0.5;
-            }
-
-            > div {
-                > *:not(:last-child) {
-                    margin-right: $grid-unit-size;
-                }
-
-                display: flex;
-            }
-        }
-    }
-}