Enlarge progress handle and update color on hover

This is particularly useful when the progress is zero or 100% and then
displayed at the same position than the start/end date handle.

Signed-off-by: Laurent Fasani <[email protected]>

Author: lfasani

src/components/task-item/bar/bar-relation-handle.module.css

@@ -8,3 +8,7 @@
   cursor: pointer;
   opacity: 0;
 }
+
+.barRelationHandle:hover {
+  fill: #a2a2a2;
+}

src/components/task-item/bar/bar.module.css

@@ -15,6 +15,10 @@
   visibility: hidden;
 }
 
+.barHandle:hover {
+  fill: #a2a2a2;
+}
+
 .barBackground {
   user-select: none;
   stroke-width: 0;

src/helpers/bar-helper.ts

@@ -47,12 +47,12 @@ export const getProgressPoint = (
   taskHeight: number
 ) => {
   const point = [
-    progressX - 5,
+    progressX - 7,
     taskY + taskHeight,
-    progressX + 5,
+    progressX + 7,
     taskY + taskHeight,
     progressX,
-    taskY + taskHeight - 8.66,
+    taskY + taskHeight - 11,
   ];
   return point.join(",");
 };