commit fa93df262edb2de17eadee10ee7897e21a111bda
Author: Dominik Poch <dpoch@email.cz>
Date:   Tue May 17 00:07:05 2022 +0200

    Icons

diff --git a/webapp/components/annotation/AnnotationItem.tsx b/webapp/components/annotation/AnnotationItem.tsx
index ef1c283..430c461 100644
--- a/webapp/components/annotation/AnnotationItem.tsx
+++ b/webapp/components/annotation/AnnotationItem.tsx
@@ -11,6 +11,11 @@ import { ABadge, BadgeStyle } from '../common/ABadge';
 import { getNameTruncated } from '../../utils/strings';
 import { ShowConfirm } from '../../utils/alerts';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faAngleUp, faTag } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
+
 const { Option } = Select;
 
 /**
@@ -79,7 +84,9 @@ export function AnnotationItem(props: { tag: Tag }) {
             <Row className="">
                 <Col sm="auto" className="d-flex align-items-center">
                     <Button
-                        icon={<TagOutlined style={{ marginLeft: 0 }} />}
+                        icon={
+                            <FontAwesomeIcon icon={faTag} className={styles.iconLeft} />
+                        }
                         onClick={() => {
                             setSelectedInstanceId(props.tag.instanceId);
                             setSelectedOccurrenceId(null);
diff --git a/webapp/components/annotation/CategoryItem.tsx b/webapp/components/annotation/CategoryItem.tsx
index b4380cc..a288e38 100644
--- a/webapp/components/annotation/CategoryItem.tsx
+++ b/webapp/components/annotation/CategoryItem.tsx
@@ -1,15 +1,14 @@
 import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { Button, Tooltip } from 'antd';
-import {
-    DownOutlined,
-    QuestionCircleOutlined,
-    TagOutlined,
-    UpOutlined,
-} from '@ant-design/icons';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { TagCategoryInfo } from '../../api';
 import React, { useState } from 'react';
 import { TagItem } from './TagItem';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
 /**
  * Creates a single item for a category in a tag panel.
  * @param props Properties should contain a category.
@@ -24,13 +23,21 @@ export function CategoryItem(props: { category: TagCategoryInfo }) {
     /**
      * Button icon.
      */
-    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />);
+    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(
+        <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
+    );
 
     /**
      * Changes visibility of tags.
      */
     const changeTagsVisibility = () => {
-        setButtonIcon(visibleTags ? <DownOutlined /> : <UpOutlined />);
+        setButtonIcon(
+            visibleTags ? (
+                <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
+            ) : (
+                <FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
+            )
+        );
         setVisibleTags(!visibleTags);
     };
 
@@ -49,7 +56,7 @@ export function CategoryItem(props: { category: TagCategoryInfo }) {
                             title={props.category.description}
                             key={props.category.description}
                         >
-                            <QuestionCircleOutlined />
+                            <FontAwesomeIcon icon={faCircleQuestion} />
                         </Tooltip>
                     )}
                 </Button>
diff --git a/webapp/components/annotation/SubTagItem.tsx b/webapp/components/annotation/SubTagItem.tsx
index 8a61950..3e5fa3b 100644
--- a/webapp/components/annotation/SubTagItem.tsx
+++ b/webapp/components/annotation/SubTagItem.tsx
@@ -4,8 +4,10 @@ import { Button, Tooltip } from 'antd';
 import React, { useContext } from 'react';
 import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
-import { QuestionCircleOutlined } from '@ant-design/icons';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
 /**
  * Creates a single tag item in a tag panel.
  * @param props Properties should contain the tag.
@@ -37,15 +39,20 @@ export function SubTagItem(props: { tag: TagInfo; subTag: SubTagInfo }) {
                     className="w-100 text-start rounded"
                     disabled={submitting}
                 >
-                    {props.subTag.name}
-                    {props.subTag.description && props.subTag.description !== '' && (
-                        <Tooltip
-                            title={props.subTag.description}
-                            key={props.subTag.description}
-                        >
-                            <QuestionCircleOutlined />
-                        </Tooltip>
-                    )}
+                    <div className=" align-middle">
+                        {props.subTag.name}
+                        {props.subTag.description && props.subTag.description !== '' && (
+                            <Tooltip
+                                title={props.subTag.description}
+                                key={props.subTag.description}
+                            >
+                                <FontAwesomeIcon
+                                    icon={faCircleQuestion}
+                                    className={styles.iconRight}
+                                />
+                            </Tooltip>
+                        )}
+                    </div>
                 </Button>
             </Row>
         </Container>
diff --git a/webapp/components/annotation/TagItem.tsx b/webapp/components/annotation/TagItem.tsx
index ccb4306..6431ff3 100644
--- a/webapp/components/annotation/TagItem.tsx
+++ b/webapp/components/annotation/TagItem.tsx
@@ -1,17 +1,17 @@
 import { Container, Row, Stack } from 'react-bootstrap';
 import { TagInfo } from '../../api';
 import { Button, Tooltip } from 'antd';
-import {
-    DownOutlined,
-    QuestionCircleOutlined,
-    TagOutlined,
-    UpOutlined,
-} from '@ant-design/icons';
+import { DownOutlined, QuestionCircleOutlined, TagOutlined } from '@ant-design/icons';
 import React, { useContext, useState } from 'react';
 import { SubTagItem } from './SubTagItem';
 import { TagCategoryContext } from '../../contexts/TagCategoryContext';
 import { AnnotationContext } from '../../contexts/AnnotationContext';
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faAngleDown, faAngleUp, faTag } from '@fortawesome/free-solid-svg-icons';
+import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
+
 /**
  * Creates a single tag item in a tag panel.
  * @param props Properties should contain the tag.
@@ -42,7 +42,13 @@ export function TagItem(props: { tag: TagInfo }) {
      * Changes visibility of sub tags.
      */
     const changeSubTagsVisibility = () => {
-        setButtonIcon(visibleSubTags ? <DownOutlined /> : <UpOutlined />);
+        setButtonIcon(
+            visibleSubTags ? (
+                <FontAwesomeIcon icon={faAngleDown} className={styles.iconLeft} />
+            ) : (
+                <FontAwesomeIcon icon={faAngleUp} className={styles.iconLeft} />
+            )
+        );
         setVisibleSubTags(!visibleSubTags);
     };
 
@@ -63,21 +69,30 @@ export function TagItem(props: { tag: TagInfo }) {
             <Row>
                 {hasSubTags && (
                     <Button
-                        icon={buttonIcon}
                         onClick={changeSubTagsVisibility}
                         className="w-100 text-start rounded"
                         disabled={submitting}
                     >
-                        <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
-                        {props.tag.name}
-                        {props.tag.description && props.tag.description !== '' && (
-                            <Tooltip
-                                title={props.tag.description}
-                                key={props.tag.description}
-                            >
-                                <QuestionCircleOutlined />
-                            </Tooltip>
-                        )}
+                        <div className=" align-middle">
+                            {buttonIcon}
+                            <FontAwesomeIcon
+                                icon={faTag}
+                                style={{ color: props.tag.color ?? 'black' }}
+                                className={styles.iconMiddle}
+                            />
+                            {props.tag.name}
+                            {props.tag.description && props.tag.description !== '' && (
+                                <Tooltip
+                                    title={props.tag.description}
+                                    key={props.tag.description}
+                                >
+                                    <FontAwesomeIcon
+                                        icon={faCircleQuestion}
+                                        className={styles.iconRight}
+                                    />
+                                </Tooltip>
+                            )}
+                        </div>
                     </Button>
                 )}
                 {!hasSubTags && (
@@ -86,16 +101,25 @@ export function TagItem(props: { tag: TagInfo }) {
                         className="w-100 text-start rounded"
                         disabled={submitting}
                     >
-                        <TagOutlined style={{ color: props.tag.color ?? 'black' }} />
-                        {props.tag.name}
-                        {props.tag.description && props.tag.description !== '' && (
-                            <Tooltip
-                                title={props.tag.description}
-                                key={props.tag.description}
-                            >
-                                <QuestionCircleOutlined />
-                            </Tooltip>
-                        )}
+                        <div className=" align-middle">
+                            <FontAwesomeIcon
+                                icon={faTag}
+                                style={{ color: props.tag.color ?? 'black' }}
+                                className={styles.iconLeft}
+                            />
+                            {props.tag.name}
+                            {props.tag.description && props.tag.description !== '' && (
+                                <Tooltip
+                                    title={props.tag.description}
+                                    key={props.tag.description}
+                                >
+                                    <FontAwesomeIcon
+                                        icon={faCircleQuestion}
+                                        className={styles.iconRight}
+                                    />
+                                </Tooltip>
+                            )}
+                        </div>
                     </Button>
                 )}
             </Row>
diff --git a/webapp/components/modals/UserDocumentsModal.tsx b/webapp/components/modals/UserDocumentsModal.tsx
index adebd6f..497b358 100644
--- a/webapp/components/modals/UserDocumentsModal.tsx
+++ b/webapp/components/modals/UserDocumentsModal.tsx
@@ -5,11 +5,11 @@ import { AnnotationListInfo, EState } from '../../api';
 import { userController } from '../../controllers';
 import { useUnauthRedirect } from '../../hooks';
 import { LoggedUserContext } from '../../contexts/LoggedUserContext';
-import {
-    CheckCircleOutlined,
-    ClockCircleOutlined,
-    SyncOutlined,
-} from '@ant-design/icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+
+import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
 
 interface ModalProps {
     onCancel: () => void;
@@ -32,16 +32,16 @@ function UserDocumentsModal({ onCancel, userId }: ModalProps) {
     const getStateTag = (state: EState) => {
         let color = 'green';
         let label = 'Hotovo';
-        let icon = <CheckCircleOutlined />;
+        let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
         if (state === EState.New) {
             color = 'volcano';
             label = 'Nový';
-            icon = <ClockCircleOutlined />;
+            icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
         }
         if (state === EState.InProgress) {
             color = 'orange';
             label = 'Rozpracováno';
-            icon = <SyncOutlined />;
+            icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
         }
         return (
             <Tag icon={icon} color={color} key={label}>
diff --git a/webapp/package.json b/webapp/package.json
index 8a37bab..e78c616 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,6 +14,7 @@
     "@beam-australia/react-env": "^3.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
     "antd": "^4.19.5",
     "axios": "^0.26.1",
diff --git a/webapp/pages/documents/admin/index.tsx b/webapp/pages/documents/admin/index.tsx
index c526f90..bdd9a18 100644
--- a/webapp/pages/documents/admin/index.tsx
+++ b/webapp/pages/documents/admin/index.tsx
@@ -30,15 +30,14 @@ import SetRequiredAnnotationsCountModal from '../../../components/modals/SetRequ
 import DocPreviewModal from '../../../components/modals/DocPreviewModal';
 import { UserFilter } from '../../../components/types/UserFilter';
 import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
-import {
-    CheckCircleOutlined,
-    ClockCircleOutlined,
-    SyncOutlined,
-    UserOutlined,
-} from '@ant-design/icons';
 import { SweetAlertIcon } from 'sweetalert2';
 import { Stack } from 'react-bootstrap';
 
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+
+import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
+
 function AdminDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
     const { logout, role } = useContext(LoggedUserContext);
@@ -164,12 +163,12 @@ function AdminDocumentPage() {
     const getFinalizationStateIcon = (state: EState) => {
         const color = getAnnotationStateColor(state);
         const label = getAnnotationStateString(state);
-        let icon = <CheckCircleOutlined />;
+        let icon = <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />;
         if (state === 'NEW') {
-            icon = <ClockCircleOutlined />;
+            icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
         }
         if (state === 'IN_PROGRESS') {
-            icon = <SyncOutlined />;
+            icon = <FontAwesomeIcon icon={faArrowsRotate} className={styles.iconLeft} />;
         }
 
         return (
diff --git a/webapp/pages/documents/annotator/index.tsx b/webapp/pages/documents/annotator/index.tsx
index dc23499..286cb86 100644
--- a/webapp/pages/documents/annotator/index.tsx
+++ b/webapp/pages/documents/annotator/index.tsx
@@ -14,12 +14,11 @@ import {
     getAnnotationStateString,
     getAnnotationStateColor,
 } from '../../../utils/strings';
-import {
-    CheckCircleOutlined,
-    ClockCircleOutlined,
-    SyncOutlined,
-} from '@ant-design/icons';
 import { getColumnSearchProps, getLocaleProps } from '../../../utils/tableUtils';
+import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons';
+
+import { faCircleCheck, faClock } from '@fortawesome/free-regular-svg-icons';
+import styles from '/styles/Icon.module.scss';
 
 function UserDocumentPage() {
     const redirecting = useUnauthRedirect('/login');
@@ -59,12 +58,19 @@ function UserDocumentPage() {
             render: (state: EState) => {
                 const color = getAnnotationStateColor(state);
                 const label = getAnnotationStateString(state);
-                let icon = <CheckCircleOutlined />;
+                let icon = (
+                    <FontAwesomeIcon icon={faCircleCheck} className={styles.iconLeft} />
+                );
                 if (state === 'NEW') {
-                    icon = <ClockCircleOutlined />;
+                    icon = <FontAwesomeIcon icon={faClock} className={styles.iconLeft} />;
                 }
                 if (state === 'IN_PROGRESS') {
-                    icon = <SyncOutlined />;
+                    icon = (
+                        <FontAwesomeIcon
+                            icon={faArrowsRotate}
+                            className={styles.iconLeft}
+                        />
+                    );
                 }
 
                 return (
diff --git a/webapp/pages/tags/index.tsx b/webapp/pages/tags/index.tsx
index 552071a..445bf34 100644
--- a/webapp/pages/tags/index.tsx
+++ b/webapp/pages/tags/index.tsx
@@ -17,7 +17,6 @@ import { Container, Row, Stack } from 'react-bootstrap';
 import { Table } from 'antd';
 import { tagController } from '../../controllers';
 import Search from 'antd/lib/input/Search';
-import { DeleteOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
 import CategoryModal, {
     CategoryModalValues,
 } from '../../components/modals/CategoryModal';
@@ -113,13 +112,13 @@ function TagsPage() {
                     {record.depth < 2 && (
                         <Tooltip title="Přidat potomka">
                             <Button type="primary" onClick={addChild(record)}>
-                                <PlusOutlined />
+                                <FontAwesomeIcon icon={faPlus} />
                             </Button>
                         </Tooltip>
                     )}
                     <Tooltip title="Upravit">
                         <Button type="text" onClick={editRecord(record)}>
-                            <EditOutlined />
+                            <FontAwesomeIcon icon={faPenToSquare} />
                         </Button>
                     </Tooltip>
                     <Popconfirm
@@ -128,7 +127,7 @@ function TagsPage() {
                     >
                         <Tooltip title="Odstranit">
                             <Button type="primary" danger>
-                                <DeleteOutlined />
+                                <FontAwesomeIcon icon={faTrashCan} />
                             </Button>
                         </Tooltip>
                     </Popconfirm>
diff --git a/webapp/styles/Icon.module.scss b/webapp/styles/Icon.module.scss
new file mode 100644
index 0000000..3c07029
--- /dev/null
+++ b/webapp/styles/Icon.module.scss
@@ -0,0 +1,12 @@
+.iconRight {
+    padding-left: 5px;
+}
+
+.iconLeft {
+    padding-right: 5px;
+}
+
+.iconMiddle {
+    padding-left: 5px;
+    padding-right: 5px;
+}
\ No newline at end of file
