Revize 2c9bdf18

Upgraded visual of the tag tree

webapp/components/annotation/CategoryItem.tsx

@@ -1 +1 @@
 import { Col, Container, Row, Stack } from 'react-bootstrap';
 import { Button } from 'antd';
-import { DownOutlined, TagOutlined } from '@ant-design/icons';
+import { DownOutlined, TagOutlined, UpOutlined } from '@ant-design/icons';
 import { TagCategoryInfo } from '../../api';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { TagItem } from './TagItem';
 
 /**
@@ -16 +16 @@
      */
     const [visibleTags, setVisibleTags] = useState(false);
 
+    /**
+     * Button icon.
+     */
+    const [buttonIcon, setButtonIcon] = useState<React.ReactNode>(<DownOutlined />);
+
     /**
      * Changes visibility of tags.
      */
     const changeTagsVisibility = () => {
+        setButtonIcon(visibleTags ? <DownOutlined /> : <UpOutlined />);
         setVisibleTags(!visibleTags);
     };
 
     return (
-        <Container>
+        <Container className="shadow-sm rounded">
             <Row>
-                <Col>
-                    <Button
-                        type="text"
-                        icon={<DownOutlined />}
-                        onClick={changeTagsVisibility}
-                        className="w-100 text-start"
-                    >
-                        {props.category.name}
-                    </Button>
-                </Col>
-                <Col md="auto">
-                    <TagOutlined style={{ color: props.category.color ?? 'black' }} />
-                </Col>
+                <Button
+                    type="text"
+                    icon={buttonIcon}
+                    onClick={changeTagsVisibility}
+                    className="w-100 text-start rounded"
+                >
+                    {props.category.name}
+                </Button>
             </Row>
             {visibleTags && (
-                <Stack>
+                <Stack gap={2} className="mt-1 mb-2">
                     {props.category.tags?.map((tag, index) => (
                         <TagItem tag={tag} key={index} />
                     ))}