Fixed timestamp alignment on quality page (#8106)

<!-- Raise an issue to propose your change
(https://github.com/cvat-ai/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution guide](https://docs.cvat.ai/docs/contributing/).
-->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->
The timestamp looks incorrectly aligned + margin after the icon looks
too big.

Before:

![image](https://github.com/cvat-ai/cvat/assets/50956430/0c254899-3996-46d2-974b-44701f2da7cc)

After:

![image](https://github.com/cvat-ai/cvat/assets/50956430/685f6a13-484f-496c-a48f-d5d55c33bc59)

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [ ] I have created a changelog fragment <!-- see top comment in
CHANGELOG.md -->
- ~~[ ] I have updated the documentation accordingly~~
- ~~[ ] I have added tests to cover my changes~~
- ~~[ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))~~
- ~~[ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/cvat-ai/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/cvat-ai/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/cvat-ai/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/cvat-ai/cvat/tree/develop/cvat-ui#versioning))~~

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/cvat-ai/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Bug Fixes**
  - Aligned the quality report button and timestamp on the quality page.
  
- **Style**
- Updated styling for buttons and quality settings switch on the
analytics page.

- **Refactor**
- Reorganized the layout of the quality report controls for improved
clarity and usability using Ant Design's `Row` and `Col` components.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

changelog.d/20240702_124739_klakhov_fix_quality_timestamp.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- Quality report button and timestamp alignments on quality page
+  (<https://github.com/cvat-ai/cvat/pull/8106>)

cvat-ui/src/components/analytics-page/styles.scss

@@ -86,7 +86,6 @@
 
     a {
         color: white;
-        margin-left: $grid-unit-size;
 
         &:hover {
             color: white;
@@ -96,9 +95,6 @@
 
 .cvat-analytics-time-hint {
     font-size: 10px;
-    position: absolute;
-    bottom: -$grid-unit-size * 3;
-    right: $grid-unit-size * 4;
 }
 
 .cvat-analytics-page {
@@ -128,7 +124,7 @@
 }
 
 .cvat-quality-settings-switch {
-    padding: 6px 8px;
+    padding: $grid-unit-size $grid-unit-size * 1.25;
     border: 1px solid lightgray;
     margin-left: $grid-unit-size;
     border-radius: $border-radius-base;
@@ -156,8 +152,3 @@
     justify-content: space-between;
     align-items: center;
 }
-
-.cvat-quality-summary-controls {
-    display: flex;
-    align-items: center;
-}

cvat-ui/src/components/analytics-page/task-quality/mean-quality.tsx

@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import moment from 'moment';
 import { DownloadOutlined, SettingOutlined } from '@ant-design/icons';
+import { Col, Row } from 'antd/lib/grid';
 import Text from 'antd/lib/typography/Text';
 import Button from 'antd/lib/button';
 
@@ -56,32 +56,33 @@ function MeanQuality(props: Props): JSX.Element {
 
     const downloadReportButton = (
         <div className='cvat-quality-summary-controls'>
-            {
-                taskReport?.id ? (
-                    <Button type='primary' icon={<DownloadOutlined />} className='cvat-analytics-download-report-button'>
-                        <a
-                            href={`${getCore().config.backendAPI}/quality/reports/${taskReport?.id}/data`}
-                            download={`quality-report-task_${taskID}-${taskReport?.id}.json`}
-                        >
-                            Quality Report
-                        </a>
-                    </Button>
-                ) : null
-            }
-            <SettingOutlined
-                className='cvat-quality-settings-switch ant-btn ant-btn-default'
-                onClick={() => setQualitySettingsVisible(true)}
-            />
-            {
-                taskReport?.id ? (
-                    <div className='cvat-analytics-time-hint'>
-                        <Text type='secondary'>{taskReport?.createdDate ? moment(taskReport?.createdDate).fromNow() : ''}</Text>
-                    </div>
-                ) : null
-            }
+            <Row>
+                <Col>
+                    {
+                        taskReport?.id ? (
+                            <Button type='primary' icon={<DownloadOutlined />} className='cvat-analytics-download-report-button'>
+                                <a
+                                    href={
+                                        `${getCore().config.backendAPI}/quality/reports/${taskReport?.id}/data`
+                                    }
+                                    download={`quality-report-task_${taskID}-${taskReport?.id}.json`}
+                                >
+                                    Quality Report
+                                </a>
+                            </Button>
+                        ) : null
+                    }
+                </Col>
+                <Col>
+                    <SettingOutlined
+                        className='cvat-quality-settings-switch ant-btn ant-btn-default'
+                        onClick={() => setQualitySettingsVisible(true)}
+                    />
+                </Col>
+            </Row>
         </div>
-
     );
+
     return (
         <AnalyticsCard
             title='Mean annotation quality'

cvat-ui/src/components/analytics-page/task-quality/task-quality-component.tsx

@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: MIT
 
+import moment from 'moment';
 import { Row } from 'antd/lib/grid';
 import Text from 'antd/lib/typography/Text';
 import notification from 'antd/lib/notification';
@@ -192,6 +193,11 @@ function TaskQualityComponent(props: Props): JSX.Element {
                         {
                             gtJob ? (
                                 <>
+                                    <Row>
+                                        <Text type='secondary'>
+                                            { `Created ${taskReport?.id ? moment(taskReport.createdDate).fromNow() : ''}`}
+                                        </Text>
+                                    </Row>
                                     <Row>
                                         <MeanQuality
                                             taskReport={taskReport}