Fixed invisible label view in label constructor (#5041)

* Fixed invisible label view in label constructor

* Updated changelog

CHANGELOG.md

@@ -31,6 +31,8 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 - Shape color is not changed on canvas after changing a label (<https://github.com/opencv/cvat/pull/5045>)
 - Unstable e2e restore tests (<https://github.com/opencv/cvat/pull/5010>)
 - IOG and f-BRS serverless function (<https://github.com/opencv/cvat/pulls>)
+- Invisible label item in label constructor when label color background is white,
+ or close to it (<https://github.com/opencv/cvat/pull/5041>)
 
 ### Security
 - TDB

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.42.0",
+  "version": "1.42.1",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx

@@ -22,11 +22,26 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
         color, label, onUpdate, onDelete,
     } = props;
 
+    const backgroundColor = color || consts.NEW_LABEL_COLOR;
+    let textColor = '#ffffff';
+    try {
+        // convert color to grayscale and from the result get better text color
+        // (for darken background -> lighter text, etc.)
+        const [r, g, b] = [backgroundColor.slice(1, 3), backgroundColor.slice(3, 5), backgroundColor.slice(5, 7)];
+        const grayscale = (parseInt(r, 16) + parseInt(g, 16) + parseInt(b, 16)) / 3;
+        if (grayscale - 128 >= 0) {
+            textColor = '#000000';
+        }
+    } catch (_: any) {
+        // nothing to do
+    }
+
     return (
-        <div style={{ background: color || consts.NEW_LABEL_COLOR }} className='cvat-constructor-viewer-item'>
+        <div style={{ background: backgroundColor }} className='cvat-constructor-viewer-item'>
-            <Text>{label.name}</Text>
+            <Text style={{ color: textColor }}>{label.name}</Text>
             <CVATTooltip title='Update attributes'>
                 <span
+                    style={{ color: textColor }}
                     role='button'
                     tabIndex={0}
                     onClick={(): void => onUpdate(label)}
@@ -37,6 +52,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
             </CVATTooltip>
             <CVATTooltip title='Delete label'>
                 <span
+                    style={{ color: textColor }}
                     role='button'
                     tabIndex={0}
                     onClick={(): void => onDelete(label)}

cvat-ui/src/components/labels-editor/styles.scss

@@ -45,15 +45,14 @@ textarea.ant-input.cvat-raw-labels-viewer {
     margin: 2px;
     margin-left: $grid-unit-size * 2;
     user-select: none;
-    border: 1px solid $transparent-color;
+    border: 1px solid $border-color-2;
     opacity: 0.6;
 
     > span {
         margin-left: 5px;
-        color: white;
 
         > span[role='img']:hover {
-            filter: invert(1);
+            filter: invert(0.2);
         }
     }