From 02faec0797a4e4766a520dee5b9b41794eafaa89 Mon Sep 17 00:00:00 2001
From: Boris Sekachev <boris.sekachev@yandex.ru>
Date: Wed, 9 Dec 2020 15:25:34 +0300
Subject: [PATCH] Fixed some icons

---
 .../controls-side-bar/draw-cuboid-control.tsx | 32 +++++++++++--------
 .../controls-side-bar/draw-points-control.tsx | 32 +++++++++++--------
 .../draw-polygon-control.tsx                  | 32 +++++++++++--------
 .../draw-polyline-control.tsx                 | 32 +++++++++++--------
 .../draw-rectangle-control.tsx                | 32 +++++++++++--------
 5 files changed, 95 insertions(+), 65 deletions(-)

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx
index 8b56003d..9c2018e9 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx
@@ -21,18 +21,24 @@ interface Props {
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
 
-    const dynamcPopoverPros = isDrawing ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
-
-    const dynamicIconProps = isDrawing ? {
-        className: 'cvat-active-canvas-control',
-        onClick: (): void => {
-            canvasInstance.draw({ enabled: false });
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};
+
+    const dynamicIconProps = isDrawing ?
+        {
+            className: 'cvat-draw-cuboid-control cvat-active-canvas-control',
+            onClick: (): void => {
+                canvasInstance.draw({ enabled: false });
+            },
+        } :
+        {
+            className: 'cvat-draw-cuboid-control',
+        };
 
     return (
         <Popover
@@ -41,7 +47,7 @@ function DrawPolygonControl(props: Props): JSX.Element {
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.CUBOID} />}
         >
-            <Icon className='cvat-draw-cuboid-control' {...dynamicIconProps} component={CubeIcon} />
+            <Icon {...dynamicIconProps} component={CubeIcon} />
         </Popover>
     );
 }
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
index 5867a9f8..975d0919 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
@@ -20,18 +20,24 @@ interface Props {
 function DrawPointsControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
 
-    const dynamcPopoverPros = isDrawing ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
-
-    const dynamicIconProps = isDrawing ? {
-        className: 'cvat-active-canvas-control',
-        onClick: (): void => {
-            canvasInstance.draw({ enabled: false });
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};
+
+    const dynamicIconProps = isDrawing ?
+        {
+            className: 'cvat-draw-points-control cvat-active-canvas-control',
+            onClick: (): void => {
+                canvasInstance.draw({ enabled: false });
+            },
+        } :
+        {
+            className: 'cvat-draw-points-control',
+        };
 
     return (
         <Popover
@@ -40,7 +46,7 @@ function DrawPointsControl(props: Props): JSX.Element {
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POINTS} />}
         >
-            <Icon className='cvat-draw-points-control' {...dynamicIconProps} component={PointIcon} />
+            <Icon {...dynamicIconProps} component={PointIcon} />
         </Popover>
     );
 }
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
index 896dfa9f..d856e1e4 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
@@ -20,18 +20,24 @@ interface Props {
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
 
-    const dynamcPopoverPros = isDrawing ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
-
-    const dynamicIconProps = isDrawing ? {
-        className: 'cvat-active-canvas-control',
-        onClick: (): void => {
-            canvasInstance.draw({ enabled: false });
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};
+
+    const dynamicIconProps = isDrawing ?
+        {
+            className: 'cvat-draw-polygon-control cvat-active-canvas-control',
+            onClick: (): void => {
+                canvasInstance.draw({ enabled: false });
+            },
+        } :
+        {
+            className: 'cvat-draw-polygon-control',
+        };
 
     return (
         <Popover
@@ -40,7 +46,7 @@ function DrawPolygonControl(props: Props): JSX.Element {
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POLYGON} />}
         >
-            <Icon className='cvat-draw-polygon-control' {...dynamicIconProps} component={PolygonIcon} />
+            <Icon {...dynamicIconProps} component={PolygonIcon} />
         </Popover>
     );
 }
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
index 6ce6f1f7..b4b323a1 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
@@ -20,18 +20,24 @@ interface Props {
 function DrawPolylineControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
 
-    const dynamcPopoverPros = isDrawing ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
-
-    const dynamicIconProps = isDrawing ? {
-        className: 'cvat-active-canvas-control',
-        onClick: (): void => {
-            canvasInstance.draw({ enabled: false });
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};
+
+    const dynamicIconProps = isDrawing ?
+        {
+            className: 'cvat-draw-polyline-control cvat-active-canvas-control',
+            onClick: (): void => {
+                canvasInstance.draw({ enabled: false });
+            },
+        } :
+        {
+            className: 'cvat-draw-polyline-control',
+        };
 
     return (
         <Popover
@@ -40,7 +46,7 @@ function DrawPolylineControl(props: Props): JSX.Element {
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.POLYLINE} />}
         >
-            <Icon className='cvat-draw-polyline-control' {...dynamicIconProps} component={PolylineIcon} />
+            <Icon {...dynamicIconProps} component={PolylineIcon} />
         </Popover>
     );
 }
diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
index 1e6eab9d..402d37a4 100644
--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
@@ -20,18 +20,24 @@ interface Props {
 function DrawRectangleControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
 
-    const dynamcPopoverPros = isDrawing ? {
-        overlayStyle: {
-            display: 'none',
-        },
-    } : {};
-
-    const dynamicIconProps = isDrawing ? {
-        className: 'cvat-active-canvas-control',
-        onClick: (): void => {
-            canvasInstance.draw({ enabled: false });
-        },
-    } : {};
+    const dynamcPopoverPros = isDrawing ?
+        {
+            overlayStyle: {
+                display: 'none',
+            },
+        } :
+        {};
+
+    const dynamicIconProps = isDrawing ?
+        {
+            className: 'cvat-draw-rectangle-control cvat-active-canvas-control',
+            onClick: (): void => {
+                canvasInstance.draw({ enabled: false });
+            },
+        } :
+        {
+            className: 'cvat-draw-rectangle-control',
+        };
 
     return (
         <Popover
@@ -40,7 +46,7 @@ function DrawRectangleControl(props: Props): JSX.Element {
             placement='right'
             content={<DrawShapePopoverContainer shapeType={ShapeType.RECTANGLE} />}
         >
-            <Icon className='cvat-draw-rectangle-control' {...dynamicIconProps} component={RectangleIcon} />
+            <Icon {...dynamicIconProps} component={RectangleIcon} />
         </Popover>
     );
 }