Some icons improvements (#4286)

* Removed unused icons * Some icon changed to alternatives * Updated version * Icon selectors in tests * Fixed eslint error in test * Fixed opacity * Updated header * Fix URL scheme in cypress tests related with removing labels * MinusCircled -> DeleteOutlined, removed one more custom cvat icon (there is the same antd icon) * Fixed tests * Fixed typos
4 years ago · 237f98d5f8
parent f60a448d50
commit 237f98d5f8
33 changed files with 63 additions and 83 deletions
--- a/cvat-ui/src/assets/exit-fullscreen-icon.svg
+++ b/cvat-ui/src/assets/exit-fullscreen-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" stroke="#000" stroke-width="2" fill="none"><path d="M3 9h34v22H3z"/><path d="M33.626 16.983h-2.571v-5.538h-3.858v5.538h-2.571l4.5 6.462z"/></g></svg>
--- a/cvat-ui/src/assets/menu-icon.svg
+++ b/cvat-ui/src/assets/menu-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 11c2.475 0 4.5-2.025 4.5-4.5S22.975 2 20.5 2A4.513 4.513 0 0 0 16 6.5c0 2.475 2.025 4.5 4.5 4.5zm0 4.5A4.513 4.513 0 0 0 16 20c0 2.475 2.025 4.5 4.5 4.5S25 22.475 25 20s-2.025-4.5-4.5-4.5zm0 13.5a4.513 4.513 0 0 0-4.5 4.5c0 2.475 2.025 4.5 4.5 4.5s4.5-2.025 4.5-4.5-2.025-4.5-4.5-4.5z" fill="#000" fill-rule="evenodd"/></svg>
--- a/cvat-ui/src/assets/object-hide-icon.svg
+++ b/cvat-ui/src/assets/object-hide-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20 28.656c-4.267 0-7.72-3.325-8.038-7.54l-5.9-4.591c-.777.98-1.49 2.016-2.066 3.149a1.844 1.844 0 0 0 0 1.653C7.046 27.32 13.085 31.375 20 31.375c1.514 0 2.974-.227 4.381-.593l-2.919-2.274a8.053 8.053 0 0 1-1.462.148zm17.652 3.291l-6.218-4.84a18.74 18.74 0 0 0 4.57-5.78 1.844 1.844 0 0 0 0-1.654C32.954 13.68 26.914 9.625 20 9.625a17.24 17.24 0 0 0-8.287 2.135L4.557 6.191a.896.896 0 0 0-1.263.16L2.189 7.78a.91.91 0 0 0 .159 1.272l33.095 25.756a.896.896 0 0 0 1.263-.16l1.105-1.43a.91.91 0 0 0-.159-1.272zm-10.334-8.043l-2.21-1.72a5.38 5.38 0 0 0-1.812-6.027 5.3 5.3 0 0 0-4.72-.88c.34.463.523 1.023.524 1.598a2.659 2.659 0 0 1-.087.566l-4.14-3.222A7.972 7.972 0 0 1 20 12.344a8.067 8.067 0 0 1 5.729 2.387 8.18 8.18 0 0 1 2.37 5.769c0 1.225-.297 2.367-.781 3.405z" fill="#000" fill-rule="nonzero"/></svg>
--- a/cvat-ui/src/assets/object-inside-icon.svg
+++ b/cvat-ui/src/assets/object-inside-icon.svg
@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="64 64 896 896" style="transform: scale(1.5)">
-    <g style="transform: scale(25)">
-        <g transform="translate(3 7)" fill-rule="evenodd">
-            <rect x="5.75" y="4.5" width="22.5" height="15.75" rx="2.25"/>
-        </g>
-    </g>
-</svg>
--- a/cvat-ui/src/assets/object-occlude-icon.svg
+++ b/cvat-ui/src/assets/object-occlude-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 3c4.885 0 8.857 3.812 8.857 8.5 0 4.688-3.972 8.5-8.857 8.5s-8.857-3.812-8.857-8.5c0-4.688 3.972-8.5 8.857-8.5zM36 34.45c0 1.408-1.384 2.55-3.1 2.55H8.1C6.384 37 5 35.858 5 34.45V31.9c0-4.223 4.166-7.65 9.3-7.65h.692a14.802 14.802 0 0 0 11.016 0h.692c5.134 0 9.3 3.427 9.3 7.65v2.55z" fill="#000" fill-rule="nonzero"/></svg>
--- a/cvat-ui/src/assets/plus-icon.svg
+++ b/cvat-ui/src/assets/plus-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M19.258 20.746l.049 13.82a.7.7 0 0 0 .697.698.687.687 0 0 0 .692-.693l-.048-13.924 13.924.049a.687.687 0 0 0 .692-.692.7.7 0 0 0-.698-.698l-13.82-.048-.048-13.83a.7.7 0 0 0-.697-.697.69.69 0 0 0-.692.693l.049 13.933-13.934-.048a.69.69 0 0 0-.692.692.7.7 0 0 0 .697.697l13.83.048z" stroke="#000" stroke-width="2" fill="#000" fill-rule="evenodd"/></svg>
--- a/cvat-ui/src/assets/settings-icon.svg
+++ b/cvat-ui/src/assets/settings-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M22.147 2C23.169 2 24 2.831 24 3.853h0v3.368c0 .542.298.988.798 1.195a1.257 1.257 0 0 0 1.41-.28h0l2.38-2.381c.701-.702 1.922-.7 2.622 0h0l3.035 3.035c.35.35.543.816.543 1.311s-.193.961-.543 1.311h0l-2.381 2.38c-.382.383-.487.91-.28 1.41.207.5.653.798 1.195.798h3.368c1.022 0 1.853.831 1.853 1.853h0v4.294A1.855 1.855 0 0 1 36.147 24h0-3.368c-.542 0-.989.298-1.196.798a1.26 1.26 0 0 0 .28 1.41h0l2.382 2.38c.35.35.542.816.542 1.31 0 .496-.192.962-.542 1.312h0l-3.036 3.035c-.7.7-1.92.702-2.622 0h0l-2.38-2.381a1.257 1.257 0 0 0-1.41-.28c-.5.207-.798.653-.798 1.195h0v3.368A1.855 1.855 0 0 1 22.146 38h0-4.293A1.855 1.855 0 0 1 16 36.147h0v-3.368c0-.542-.298-.988-.798-1.195a1.258 1.258 0 0 0-1.41.28h0l-2.38 2.381c-.701.702-1.921.701-2.622 0h0L5.755 31.21a1.844 1.844 0 0 1-.543-1.311c0-.495.193-.961.543-1.311h0l2.381-2.38c.382-.383.487-.91.28-1.41A1.257 1.257 0 0 0 7.221 24h0-3.368A1.855 1.855 0 0 1 2 22.146h0v-4.293C2 16.831 2.831 16 3.853 16h3.368c.542 0 .988-.298 1.195-.798a1.26 1.26 0 0 0-.28-1.41h0l-2.381-2.38a1.843 1.843 0 0 1-.543-1.31c0-.496.193-.962.543-1.312h0L8.79 5.755c.7-.7 1.92-.702 2.622 0h0l2.38 2.38c.383.382.911.49 1.41.281.5-.207.798-.653.798-1.195h0V3.853C16 2.831 16.831 2 17.853 2h0zm-.001 1.333h-4.293a.52.52 0 0 0-.52.52h0v3.368a2.584 2.584 0 0 1-1.621 2.426 2.586 2.586 0 0 1-2.863-.569h0l-2.38-2.38a.52.52 0 0 0-.736 0h0L6.697 9.732a.52.52 0 0 0 0 .736h0l2.382 2.38c.766.766.984 1.863.569 2.863a2.586 2.586 0 0 1-2.427 1.621h0-3.368a.52.52 0 0 0-.52.52h0v4.294c0 .286.234.52.52.52h3.368c1.083 0 2.013.621 2.427 1.62.415 1 .196 2.098-.57 2.863h0l-2.38 2.38a.52.52 0 0 0 0 .737h0l3.035 3.035a.52.52 0 0 0 .736 0h0l2.38-2.381a2.59 2.59 0 0 1 2.863-.569 2.586 2.586 0 0 1 1.621 2.427h0v3.368c0 .286.234.52.52.52h4.294a.52.52 0 0 0 .52-.52h0v-3.368c0-1.083.621-2.013 1.621-2.427 1-.413 2.097-.197 2.863.57h0l2.38 2.38a.52.52 0 0 0 .736 0h0l3.036-3.035a.52.52 0 0 0 0-.736h0l-2.382-2.38a2.585 2.585 0 0 1-.569-2.863 2.586 2.586 0 0 1 2.427-1.621h3.368a.52.52 0 0 0 .52-.52h0v-4.294a.52.52 0 0 0-.52-.519h0-3.368a2.586 2.586 0 0 1-2.427-1.621c-.415-1-.196-2.098.57-2.863h0l2.38-2.38a.52.52 0 0 0 0-.737h0l-3.035-3.035a.52.52 0 0 0-.736 0h0l-2.38 2.38a2.585 2.585 0 0 1-2.863.57 2.586 2.586 0 0 1-1.621-2.427h0V3.853a.52.52 0 0 0-.521-.52h0zM20 14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6zm0 1.333A4.673 4.673 0 0 0 15.333 20 4.673 4.673 0 0 0 20 24.667 4.673 4.673 0 0 0 24.667 20 4.673 4.673 0 0 0 20 15.333z" stroke="#000" fill="#000" fill-rule="nonzero"/></svg>
--- a/cvat-ui/src/assets/show-sidebar-icon.svg
+++ b/cvat-ui/src/assets/show-sidebar-icon.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" stroke="#000" stroke-width="2" fill="none"><path d="M3 9h34v22H3z"/><path d="M28.5 9H37v22h-8.5z"/></g></svg>
--- a/cvat-ui/src/assets/side-icon-object-lock.svg
+++ b/cvat-ui/src/assets/side-icon-object-lock.svg
@ -1 +0,0 @@
-<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M33.464 17.75h-1.768v-5.063C31.696 6.795 26.673 2 20.5 2S9.304 6.795 9.304 12.688v5.062H7.536C5.584 17.75 4 19.262 4 21.125v13.5C4 36.488 5.584 38 7.536 38h25.928C35.416 38 37 36.488 37 34.625v-13.5c0-1.863-1.584-3.375-3.536-3.375zm-7.66 0H15.196v-5.063c0-2.79 2.38-5.062 5.304-5.062 2.924 0 5.304 2.271 5.304 5.063v5.062z" fill="#000" fill-rule="nonzero"/></svg>
--- a/cvat-ui/src/components/actions-menu/styles.scss
+++ b/cvat-ui/src/components/actions-menu/styles.scss
@ -46,7 +46,9 @@
 }

 .cvat-menu-icon {
-    transform: scale(0.5);
+    font-size: 16px;
+    margin-left: 8px;
+    align-self: center;
 }

 #cvat-export-task-loading {
--- a/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx
+++ b/cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx
@ -5,7 +5,7 @@
 import React, { ReactPortal, useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 import Tag from 'antd/lib/tag';
-import { CheckOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';

 import CVATTooltip from 'components/common/cvat-tooltip';

@ -60,7 +60,7 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
                className='cvat-hidden-issue-label'
            >
                {resolved ? (
-                    <CheckOutlined className='cvat-hidden-issue-resolved-indicator' />
+                    <CheckCircleOutlined className='cvat-hidden-issue-resolved-indicator' />
                ) : (
                    <CloseCircleOutlined className='cvat-hidden-issue-unsolved-indicator' />
                )}
--- a/cvat-ui/src/components/annotation-page/top-bar/left-group.tsx
+++ b/cvat-ui/src/components/annotation-page/top-bar/left-group.tsx
@ -1,10 +1,10 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React from 'react';
 import { Col } from 'antd/lib/grid';
-import Icon, { StopOutlined, CheckOutlined } from '@ant-design/icons';
+import Icon, { StopOutlined, CheckCircleOutlined } from '@ant-design/icons';
 import Modal from 'antd/lib/modal';
 import Button from 'antd/lib/button';
 import Timeline from 'antd/lib/timeline';
@ -120,7 +120,7 @@ function LeftGroup(props: Props): JSX.Element {
                {includesDoneButton ? (
                    <CVATTooltip overlay={`Press "${drawShortcut}" to finish`}>
                        <Button type='link' className='cvat-annotation-header-button' onClick={onFinishDraw}>
-                            <CheckOutlined />
+                            <CheckCircleOutlined />
                            Done
                        </Button>
                    </CVATTooltip>
--- a/cvat-ui/src/components/cloud-storages-page/cloud-storage-preview.tsx
+++ b/cvat-ui/src/components/cloud-storages-page/cloud-storage-preview.tsx
@ -1,11 +1,11 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React, { useEffect } from 'react';

 import { useDispatch, useSelector } from 'react-redux';
-import { CloudSyncOutlined } from '@ant-design/icons';
+import { PictureOutlined } from '@ant-design/icons';
 import Spin from 'antd/lib/spin';
 import { getCloudStoragePreviewAsync } from 'actions/cloud-storage-actions';
 import { CombinedState, CloudStorage } from 'reducers/interfaces';
@ -35,7 +35,7 @@ export default function Preview({ cloudStorage }: Props): JSX.Element {
    if (preview.initialized && !preview.preview) {
        return (
            <div className='cvat-cloud-storage-item-empty-preview' aria-hidden>
-                <CloudSyncOutlined />
+                <PictureOutlined />
            </div>
        );
    }
--- a/cvat-ui/src/components/cloud-storages-page/empty-cloud-storages-list.tsx
+++ b/cvat-ui/src/components/cloud-storages-page/empty-cloud-storages-list.tsx
@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -7,7 +7,7 @@ import React from 'react';
 import Empty from 'antd/lib/empty';
 import { Row, Col } from 'antd/lib/grid';
 import Text from 'antd/lib/typography/Text';
-import { CloudTwoTone } from '@ant-design/icons';
+import { CloudOutlined } from '@ant-design/icons';
 import { Link } from 'react-router-dom';

 interface Props {
@ -45,7 +45,7 @@ export default function EmptyStoragesListComponent(props: Props): JSX.Element {

    return (
        <div className='cvat-empty-cloud-storages-list'>
-            <Empty description={description} image={<CloudTwoTone className='cvat-empty-cloud-storages-list-icon' />} />
+            <Empty description={description} image={<CloudOutlined className='cvat-empty-cloud-storages-list-icon' />} />
        </div>
    );
 }
--- a/cvat-ui/src/components/cloud-storages-page/styles.scss
+++ b/cvat-ui/src/components/cloud-storages-page/styles.scss
@ -18,6 +18,7 @@

 .cvat-empty-cloud-storages-list-icon {
    font-size: $grid-unit-size * 14;
+    opacity: 0.5;
 }

 .cvat-cloud-storages-pagination {
--- a/cvat-ui/src/components/create-cloud-storage-page/manifests-manager.tsx
+++ b/cvat-ui/src/components/create-cloud-storage-page/manifests-manager.tsx
@ -1,9 +1,9 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React, { useEffect, useRef, useState } from 'react';
-import { MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { DeleteOutlined, PlusCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import Button from 'antd/lib/button';
 import Col from 'antd/lib/col';
 import Form from 'antd/lib/form';
@ -116,7 +116,7 @@ export default function ManifestsManager(props: Props): JSX.Element {
                                        <Col>
                                            <Form.Item>
                                                <Button type='link' onClick={() => onDeleteManifestItem(idx)}>
-                                                    <MinusCircleOutlined />
+                                                    <DeleteOutlined />
                                                </Button>
                                            </Form.Item>
                                        </Col>
--- a/cvat-ui/src/components/import-dataset-modal/import-dataset-modal.tsx
+++ b/cvat-ui/src/components/import-dataset-modal/import-dataset-modal.tsx
@ -14,7 +14,7 @@ import message from 'antd/lib/message';
 import Upload, { RcFile } from 'antd/lib/upload';

 import {
-    DownloadOutlined, InboxOutlined, LoadingOutlined, QuestionCircleFilled,
+    UploadOutlined, InboxOutlined, LoadingOutlined, QuestionCircleOutlined,
 } from '@ant-design/icons';

 import CVATTooltip from 'components/common/cvat-tooltip';
@ -74,7 +74,7 @@ function ImportDatasetModal(): JSX.Element {
                                    'Labels from project will be used'
                            }
                        >
-                            <QuestionCircleFilled className='cvat-modal-import-header-question-icon' />
+                            <QuestionCircleOutlined className='cvat-modal-import-header-question-icon' />
                        </CVATTooltip>
                    </>
                )}
@ -114,7 +114,7 @@ function ImportDatasetModal(): JSX.Element {
                                                disabled={disabled}
                                                className='cvat-modal-import-dataset-option-item'
                                            >
-                                                <DownloadOutlined />
+                                                <UploadOutlined />
                                                <Text disabled={disabled}>{importer.name}</Text>
                                                {pending && <LoadingOutlined style={{ marginLeft: 10 }} />}
                                            </Select.Option>
--- a/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
+++ b/cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
@ -1,9 +1,9 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React from 'react';
-import { EditOutlined, CloseOutlined } from '@ant-design/icons';
+import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
 import Text from 'antd/lib/typography/Text';

 import CVATTooltip from 'components/common/cvat-tooltip';
@ -42,7 +42,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
                    onClick={(): void => onDelete(label)}
                    onKeyPress={(): boolean => false}
                >
-                    <CloseOutlined />
+                    <DeleteOutlined />
                </span>
            </CVATTooltip>
        </div>
--- a/cvat-ui/src/components/labels-editor/label-form.tsx
+++ b/cvat-ui/src/components/labels-editor/label-form.tsx
@ -4,7 +4,7 @@

 import React, { RefObject } from 'react';
 import { Row, Col } from 'antd/lib/grid';
-import Icon, { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import Icon, { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import Input from 'antd/lib/input';
 import Button from 'antd/lib/button';
 import Checkbox from 'antd/lib/checkbox';
@ -329,7 +329,7 @@ export default class LabelForm extends React.Component<Props> {
                            this.removeAttribute(key);
                        }}
                    >
-                        <CloseCircleOutlined />
+                        <DeleteOutlined />
                    </Button>
                </Form.Item>
            </CVATTooltip>
@ -417,7 +417,7 @@ export default class LabelForm extends React.Component<Props> {
            <Form.Item>
                <Button type='ghost' onClick={this.addAttribute} className='cvat-new-attribute-button'>
                    Add an attribute
-                    <PlusOutlined />
+                    <PlusCircleOutlined />
                </Button>
            </Form.Item>
        );
@ -536,7 +536,7 @@ export default class LabelForm extends React.Component<Props> {
                    <Col span={3} offset={1}>
                        {this.renderChangeColorButton()}
                    </Col>
-                    <Col span={6} offset={1}>
+                    <Col offset={1}>
                        {this.renderNewAttributeButton()}
                    </Col>
                </Row>
--- a/cvat-ui/src/components/labels-editor/labels-editor.tsx
+++ b/cvat-ui/src/components/labels-editor/labels-editor.tsx
@ -156,8 +156,8 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditorProps,
        if (typeof label.id !== 'undefined' && label.id >= 0) {
            ModalConfirm({
                className: 'cvat-modal-delete-label',
-                title: `Do you want to delete "${label.name}" label?`,
                icon: <ExclamationCircleOutlined />,
+                title: `Do you want to delete "${label.name}" label?`,
                content: 'This action is irreversible. Annotation corresponding with this label will be deleted.',
                type: 'warning',
                okType: 'danger',
--- a/cvat-ui/src/components/model-runner-modal/detector-runner.tsx
+++ b/cvat-ui/src/components/model-runner-modal/detector-runner.tsx
@ -1,25 +1,21 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import './styles.scss';
 import React, { useState } from 'react';
 import { Row, Col } from 'antd/lib/grid';
-import { CloseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
-import Select from 'antd/lib/select';
+import { DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import Select, { BaseOptionType } from 'antd/lib/select';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import Tag from 'antd/lib/tag';
 import Text from 'antd/lib/typography/Text';
 import InputNumber from 'antd/lib/input-number';
 import Button from 'antd/lib/button';
 import notification from 'antd/lib/notification';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { OptionData, OptionGroupData } from 'rc-select/lib/interface';

 import { Model, StringObject } from 'reducers/interfaces';
-
 import CVATTooltip from 'components/common/cvat-tooltip';
-
 import { clamp } from 'utils/math';
 import consts from 'consts';
 import { DimensionType } from '../../reducers/interfaces';
@ -101,7 +97,7 @@ function DetectorRunner(props: Props): JSX.Element {
                    onChange={onChange}
                    style={{ width: '100%' }}
                    showSearch
-                    filterOption={(input: string, option?: OptionData | OptionGroupData) => {
+                    filterOption={(input: string, option: BaseOptionType | undefined) => {
                        if (option) {
                            const { children } = option.props;
                            if (typeof children === 'string') {
@ -172,7 +168,7 @@ function DetectorRunner(props: Props): JSX.Element {
                            </Col>
                            <Col offset={1}>
                                <CVATTooltip title='Remove the mapped values'>
-                                    <CloseCircleOutlined
+                                    <DeleteOutlined
                                        className='cvat-danger-circle-icon'
                                        onClick={(): void => {
                                            const newmapping = { ...mapping };
--- a/cvat-ui/src/components/move-task-modal/move-task-modal.tsx
+++ b/cvat-ui/src/components/move-task-modal/move-task-modal.tsx
@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -9,7 +9,7 @@ import Modal from 'antd/lib/modal';
 import { Row, Col } from 'antd/lib/grid';
 import Divider from 'antd/lib/divider';
 import notification from 'antd/lib/notification';
-import { QuestionCircleFilled } from '@ant-design/icons';
+import { QuestionCircleOutlined } from '@ant-design/icons';

 import ProjectSearch from 'components/create-task-page/project-search-field';
 import CVATTooltip from 'components/common/cvat-tooltip';
@ -121,7 +121,7 @@ export default function MoveTaskModal(): JSX.Element {
                    {`Move task ${task?.id} to project`}
                    {/* TODO: replace placeholder */}
                    <CVATTooltip title='Some moving process description here'>
-                        <QuestionCircleFilled className='ant-typography-secondary' />
+                        <QuestionCircleOutlined className='ant-typography-secondary' />
                    </CVATTooltip>
                </span>
            )}
--- a/cvat-ui/src/components/organization-page/member-item.tsx
+++ b/cvat-ui/src/components/organization-page/member-item.tsx
@ -7,7 +7,7 @@ import Select from 'antd/lib/select';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
 import moment from 'moment';
-import { CloseOutlined } from '@ant-design/icons';
+import { DeleteOutlined } from '@ant-design/icons';
 import Modal from 'antd/lib/modal';

 export interface Props {
@ -62,7 +62,7 @@ function MemberItem(props: Props): JSX.Element {
            </Col>
            <Col span={1} className='cvat-organization-member-item-remove'>
                {role !== 'owner' ? (
-                    <CloseOutlined
+                    <DeleteOutlined
                        onClick={() => {
                            Modal.confirm({
                                className: 'cvat-modal-organization-member-remove',
--- a/cvat-ui/src/components/organization-page/top-bar.tsx
+++ b/cvat-ui/src/components/organization-page/top-bar.tsx
@ -16,7 +16,8 @@ import Select from 'antd/lib/select';
 import { useForm } from 'antd/lib/form/Form';
 import { Store } from 'antd/lib/form/interface';
 import {
-    CloseOutlined, EditTwoTone, EnvironmentOutlined, MailOutlined, PhoneOutlined, PlusCircleOutlined,
+    EditTwoTone, EnvironmentOutlined,
+    MailOutlined, PhoneOutlined, PlusCircleOutlined, DeleteOutlined,
 } from '@ant-design/icons';

 import {
@ -324,7 +325,9 @@ function OrganizationTopBar(props: Props): JSX.Element {
                                            </Form.Item>
                                        </Col>
                                        <Col span={1} offset={1}>
-                                            {index > 0 ? <CloseOutlined onClick={() => remove(field.name)} /> : null}
+                                            {index > 0 ? (
+                                                <DeleteOutlined onClick={() => remove(field.name)} />
+                                            ) : null}
                                        </Col>
                                    </Row>
                                ))}
--- a/cvat-ui/src/components/project-page/top-bar.tsx
+++ b/cvat-ui/src/components/project-page/top-bar.tsx
@ -1,18 +1,17 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React from 'react';
 import { useHistory } from 'react-router';
 import { Row, Col } from 'antd/lib/grid';
-import Icon, { LeftOutlined } from '@ant-design/icons';
+import { LeftOutlined, MoreOutlined } from '@ant-design/icons';
 import Button from 'antd/lib/button';
 import Dropdown from 'antd/lib/dropdown';
 import Text from 'antd/lib/typography/Text';

 import { Project } from 'reducers/interfaces';
 import ActionsMenu from 'components/projects-page/actions-menu';
-import { MenuIcon } from 'icons';

 interface DetailsComponentProps {
    projectInstance: Project;
@ -35,7 +34,7 @@ export default function ProjectTopBar(props: DetailsComponentProps): JSX.Element
                <Dropdown overlay={<ActionsMenu projectInstance={projectInstance} />}>
                    <Button size='large'>
                        <Text className='cvat-text-color'>Actions</Text>
-                        <Icon className='cvat-menu-icon' component={MenuIcon} />
+                        <MoreOutlined className='cvat-menu-icon' />
                    </Button>
                </Dropdown>
            </Col>
--- a/cvat-ui/src/components/task-page/details.tsx
+++ b/cvat-ui/src/components/task-page/details.tsx
@ -1,11 +1,11 @@
-// Copyright (C) 2019-2021 Intel Corporation
+// Copyright (C) 2019-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
 import Tag from 'antd/lib/tag';
-import { CheckCircleOutlined, LoadingOutlined, WarningOutlined } from '@ant-design/icons';
+import { CheckCircleOutlined, ExclamationCircleOutlined, LoadingOutlined } from '@ant-design/icons';
 import Modal from 'antd/lib/modal';
 import notification from 'antd/lib/notification';
 import Text from 'antd/lib/typography/Text';
@ -276,7 +276,7 @@ export default class DetailsComponent extends React.PureComponent<Props, State>
                                        });
                                }}
                            >
-                                <WarningOutlined />
+                                <ExclamationCircleOutlined />
                                Synchronize
                            </Tag>
                        )}
--- a/cvat-ui/src/components/task-page/top-bar.tsx
+++ b/cvat-ui/src/components/task-page/top-bar.tsx
@ -1,17 +1,16 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

 import React from 'react';
 import { useHistory } from 'react-router';
 import { Row, Col } from 'antd/lib/grid';
-import Icon, { LeftOutlined } from '@ant-design/icons';
+import { LeftOutlined, MoreOutlined } from '@ant-design/icons';
 import Button from 'antd/lib/button';
 import Dropdown from 'antd/lib/dropdown';
 import Text from 'antd/lib/typography/Text';

 import ActionsMenuContainer from 'containers/actions-menu/actions-menu';
-import { MenuIcon } from 'icons';

 interface DetailsComponentProps {
    taskInstance: any;
@ -45,7 +44,7 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
                <Dropdown overlay={<ActionsMenuContainer taskInstance={taskInstance} />}>
                    <Button size='large'>
                        <Text className='cvat-text-color'>Actions</Text>
-                        <Icon className='cvat-menu-icon' component={MenuIcon} />
+                        <MoreOutlined className='cvat-menu-icon' />
                    </Button>
                </Dropdown>
            </Col>
--- a/cvat-ui/src/components/tasks-page/task-item.tsx
+++ b/cvat-ui/src/components/tasks-page/task-item.tsx
@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -8,14 +8,13 @@ import { withRouter } from 'react-router-dom';
 import Text from 'antd/lib/typography/Text';
 import { Row, Col } from 'antd/lib/grid';
 import Button from 'antd/lib/button';
-import Icon from '@ant-design/icons';
+import { MoreOutlined } from '@ant-design/icons';
 import Dropdown from 'antd/lib/dropdown';
 import Progress from 'antd/lib/progress';
 import moment from 'moment';

 import ActionsMenuContainer from 'containers/actions-menu/actions-menu';
 import { ActiveInference } from 'reducers/interfaces';
-import { MenuIcon } from 'icons';
 import AutomaticAnnotationProgress from './automatic-annotation-progress';

 export interface TaskItemProps {
@ -162,7 +161,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                    <Col className='cvat-item-open-task-actions'>
                        <Text className='cvat-text-color'>Actions</Text>
                        <Dropdown overlay={<ActionsMenuContainer taskInstance={taskInstance} />}>
-                            <Icon className='cvat-menu-icon' component={MenuIcon} />
+                            <MoreOutlined className='cvat-menu-icon' />
                        </Dropdown>
                    </Col>
                </Row>
--- a/cvat-ui/src/icons.tsx
+++ b/cvat-ui/src/icons.tsx
@ -1,4 +1,4 @@
-// Copyright (C) 2020-2021 Intel Corporation
+// Copyright (C) 2020-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -6,7 +6,6 @@ import React from 'react';

 import SVGCVATLogo from './assets/cvat-logo.svg';
 import SVGEmptyTasksIcon from './assets/empty-tasks-icon.svg';
-import SVGMenuIcon from './assets/menu-icon.svg';
 import SVGCursorIcon from './assets/cursor-icon.svg';
 import SVGMoveIcon from './assets/move-icon.svg';
 import SVGRotateIcon from './assets/rotate-icon.svg';
@ -40,7 +39,6 @@ import SVGLastIcon from './assets/last-icon.svg';
 import SVGInfoIcon from './assets/info-icon.svg';
 import SVGFullscreenIcon from './assets/fullscreen-icon.svg';
 import SVGObjectOutsideIcon from './assets/object-outside-icon.svg';
-import SVGObjectInsideIcon from './assets/object-inside-icon.svg';
 import SVGBackgroundIcon from './assets/background-icon.svg';
 import SVGForegroundIcon from './assets/foreground-icon.svg';
 import SVGCubeIcon from './assets/cube-icon.svg';
@ -57,7 +55,6 @@ import SVGOpenVINO from './assets/openvino.svg';

 export const CVATLogo = React.memo((): JSX.Element => <SVGCVATLogo />);
 export const EmptyTasksIcon = React.memo((): JSX.Element => <SVGEmptyTasksIcon />);
-export const MenuIcon = React.memo((): JSX.Element => <SVGMenuIcon />);
 export const CursorIcon = React.memo((): JSX.Element => <SVGCursorIcon />);
 export const MoveIcon = React.memo((): JSX.Element => <SVGMoveIcon />);
 export const RotateIcon = React.memo((): JSX.Element => <SVGRotateIcon />);
@ -91,7 +88,6 @@ export const LastIcon = React.memo((): JSX.Element => <SVGLastIcon />);
 export const InfoIcon = React.memo((): JSX.Element => <SVGInfoIcon />);
 export const FullscreenIcon = React.memo((): JSX.Element => <SVGFullscreenIcon />);
 export const ObjectOutsideIcon = React.memo((): JSX.Element => <SVGObjectOutsideIcon />);
-export const ObjectInsideIcon = React.memo((): JSX.Element => <SVGObjectInsideIcon />);
 export const BackgroundIcon = React.memo((): JSX.Element => <SVGBackgroundIcon />);
 export const ForegroundIcon = React.memo((): JSX.Element => <SVGForegroundIcon />);
 export const CubeIcon = React.memo((): JSX.Element => <SVGCubeIcon />);
--- a/tests/cypress/integration/actions_projects_models/case_103_project_export.js
+++ b/tests/cypress/integration/actions_projects_models/case_103_project_export.js
@ -159,7 +159,7 @@ context('Export project dataset.', { browser: '!firefox' }, () => {
            // Deleting the label
            cy.get('.cvat-constructor-viewer-item')
                .should('have.length', 1)
-                .find('[aria-label="close"]')
+                .find('[aria-label="delete"]')
                .click();
            cy.get('.cvat-modal-delete-label')
                .contains('button', 'OK')
--- a/tests/cypress/integration/actions_tasks2/case_41_add_delete_label_attribute.js
+++ b/tests/cypress/integration/actions_tasks2/case_41_add_delete_label_attribute.js
@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -64,7 +64,7 @@ context('Add/delete labels and attributes.', () => {
        });

        it('Delete the added label. The label removed.', () => {
-            cy.get('.cvat-constructor-viewer-item').find('[aria-label="close"]').click();
+            cy.get('.cvat-constructor-viewer-item').find('[aria-label="delete"]').click();
            cy.get('.cvat-constructor-viewer-item').should('not.exist');
        });
    });
--- a/tests/cypress/integration/actions_tasks3/case_105_cloud_storage.js
+++ b/tests/cypress/integration/actions_tasks3/case_105_cloud_storage.js
@ -1,4 +1,4 @@
-// Copyright (C) 2021 Intel Corporation
+// Copyright (C) 2021-2022 Intel Corporation
 //
 // SPDX-License-Identifier: MIT

@ -46,7 +46,7 @@ context('Cloud storage.', () => {
                .should('have.attr', 'value', '')
                .type(dummyData.manifest)
                .should('have.attr', 'value', dummyData.manifest);
-            cy.get('[data-icon="minus-circle"]').should('be.visible').click();
+            cy.get('[data-icon="delete"]').should('be.visible').click();
            cy.get('[placeholder="manifest.jsonl"]').should('not.exist');
        });

--- a/tests/cypress/support/commands.js
+++ b/tests/cypress/support/commands.js
@ -663,7 +663,7 @@ Cypress.Commands.add('deleteLabel', (labelName) => {
    cy.contains('.cvat-constructor-viewer-item', new RegExp(`^${labelName}$`))
        .should('exist')
        .and('be.visible')
-        .find('[aria-label="close"]')
+        .find('[aria-label="delete"]')
        .click();
    cy.intercept('PATCH', /\/api\/(tasks|projects)\/.*/).as('deleteLabel');
    cy.get('.cvat-modal-delete-label')
				`@ -1 +0,0 @@`
				`<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" stroke="#000" stroke-width="2" fill="none"><path d="M3 9h34v22H3z"/><path d="M33.626 16.983h-2.571v-5.538h-3.858v5.538h-2.571l4.5 6.462z"/></g></svg>`
				`@ -1 +0,0 @@`
				<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg"><path d="M20 28.656c-4.267 0-7.72-3.325-8.038-7.54l-5.9-4.591c-.777.98-1.49 2.016-2.066 3.149a1.844 1.844 0 0 0 0 1.653C7.046 27.32 13.085 31.375 20 31.375c1.514 0 2.974-.227 4.381-.593l-2.919-2.274a8.053 8.053 0 0 1-1.462.148zm17.652 3.291l-6.218-4.84a18.74 18.74 0 0 0 4.57-5.78 1.844 1.844 0 0 0 0-1.654C32.954 13.68 26.914 9.625 20 9.625a17.24 17.24 0 0 0-8.287 2.135L4.557 6.191a.896.896 0 0 0-1.263.16L2.189 7.78a.91.91 0 0 0 .159 1.272l33.095 25.756a.896.896 0 0 0 1.263-.16l1.105-1.43a.91.91 0 0 0-.159-1.272zm-10.334-8.043l-2.21-1.72a5.38 5.38 0 0 0-1.812-6.027 5.3 5.3 0 0 0-4.72-.88c.34.463.523 1.023.524 1.598a2.659 2.659 0 0 1-.087.566l-4.14-3.222A7.972 7.972 0 0 1 20 12.344a8.067 8.067 0 0 1 5.729 2.387 8.18 8.18 0 0 1 2.37 5.769c0 1.225-.297 2.367-.781 3.405z" fill="#000" fill-rule="nonzero"/></svg>