feat: improved coloring scheme

src/arrow.js

@@ -26,15 +26,15 @@ export default class Arrow {
       this.gantt.options.header_height +
       this.gantt.options.bar_height +
       (this.gantt.options.padding + this.gantt.options.bar_height) *
-        this.from_task.task._index +
+      this.from_task.task._index +
       this.gantt.options.padding;
 
-    const end_x = this.to_task.$bar.getX() - this.gantt.options.padding / 2;
+    const end_x = this.to_task.$bar.getX() - this.gantt.options.padding / 2 - 7;
     const end_y =
       this.gantt.options.header_height +
       this.gantt.options.bar_height / 2 +
       (this.gantt.options.padding + this.gantt.options.bar_height) *
-        this.to_task.task._index +
+      this.to_task.task._index +
       this.gantt.options.padding;
 
     const from_is_below_to =

src/bar.js

@@ -34,7 +34,7 @@ export default class Bar {
       this.duration *
       (this.task.progress / 100) || 0;
     this.group = createSVG("g", {
-      class: "bar-wrapper " + (this.task.custom_class || ""),
+      class: "bar-wrapper " + (this.task.custom_class || "") + (this.task.important && 'important'),
       "data-id": this.task.id,
     });
     this.bar_group = createSVG("g", {

src/gantt.scss

@@ -1,17 +1,20 @@
 @import "./dark.scss";
 
-$bar-color: #b8c2cc !default;
-$bar-stroke: #8d99a6 !default;
+$bar-color: #fff !default;
+$bar-color-important: #94c4f4 !default;
+$bar-stroke: #fff !default;
 $border-color: #e0e0e0 !default;
 $light-bg: #f5f5f5 !default;
 $light-border-color: #ebeff2 !default;
 $light-yellow: #f6e796 !default;
-$holiday-color: #EEE !default;
+$holiday-color: #f3f4f7 !default;
 $text-muted: #666 !default;
-$text-light: #555 !default;
-$text-color: #333 !default;
-$blue: #acacfa !default;
-$handle-color: #ddd !default;
+$text-light: #fff !default;
+$text-dark: #333 !default;
+$progress-important: #2c94ec !default;
+$progress: #dedfe0 !default;
+$handle-color: #dcdce4 !default;
+$handle-color-important: #94c4f4 !default;
 $light-blue: #c4c4e9 !default;
 
 .gantt {
@@ -32,9 +35,9 @@ $light-blue: #c4c4e9 !default;
     fill: #ffffff;
   }
 
-  .grid-row:nth-child(even) {
-    fill: $light-bg;
-  }
+  // .grid-row:nth-child(even) {
+  //   fill: $light-bg;
+  // }
 
   .row-line {
     stroke: $light-border-color;
@@ -91,7 +94,7 @@ $light-blue: #c4c4e9 !default;
 
 
   .bar-progress {
-    fill: $blue;
+    fill: $progress;
   }
 
   .date-highlight {
@@ -115,19 +118,38 @@ $light-blue: #c4c4e9 !default;
   }
 
   .bar-label {
-    fill: #fff;
+    fill: $text-dark;
     dominant-baseline: central;
     // text-anchor: middle;
     font-family: Helvetica;
-    font-size: 13px;
-    font-weight: 600;
+    font-size: 14px;
+    font-weight: 400;
 
     &.big {
-      fill: $text-light;
+      fill: $text-dark;
       text-anchor: start;
     }
   }
 
+  .bar-wrapper.important {
+    .bar {
+      fill: $bar-color-important;
+    }
+
+    .bar-progress {
+      fill: $progress-important;
+    }
+
+    .bar-label {
+      fill: $text-light;
+    }
+
+    .handle {
+      fill: $handle-color-important;
+    }
+  }
+
+
   .handle {
     fill: $handle-color;
     cursor: ew-resize;
@@ -145,19 +167,27 @@ $light-blue: #c4c4e9 !default;
 
   .bar-wrapper {
     cursor: pointer;
-    outline: none;
+
+    .bar {
+      outline: groove 1px black;
+      border-radius: 3px;
+    }
+
+    &.important .bar {
+      outline: none;
+      outline-width: 1.5px;
+
+      &:active {
+        outline: 1px dotted;
+      }
+    }
 
     &:hover {
       .bar {
-        fill: darken($bar-color, 5);
+        outline-width: 1.5px;
+        transition: transform 0.3s ease;
       }
 
-      .bar-progress {
-        fill: darken($blue, 5);
-      }
-
-
-
       .date-highlight {
         display: block;
       }
@@ -165,11 +195,7 @@ $light-blue: #c4c4e9 !default;
 
     &.active {
       .bar {
-        fill: darken($bar-color, 5);
-      }
-
-      .bar-progress {
-        fill: darken($blue, 5);
+        outline-style: dotted;
       }
     }
   }
@@ -180,12 +206,10 @@ $light-blue: #c4c4e9 !default;
     text-anchor: middle;
   }
 
-  .upper-text {
-    fill: $text-light;
-  }
 
-  .lower-text {
-    fill: $text-color;
+  .lower-text,
+  .upper-text {
+    fill: $text-dark;
   }
 
   .hide {
@@ -209,7 +233,7 @@ $light-blue: #c4c4e9 !default;
     border-radius: 3px;
 
     .title {
-      border-bottom: 3px solid $blue;
+      border-bottom: 3px solid $progress;
       padding: 10px;
     }
 

src/index.js

@@ -475,13 +475,10 @@ export default class Gantt {
         const x = (date_utils.diff(d, this.gantt_start, 'hour') /
           this.options.step) *
           this.options.column_width;
-        const height =
-          (this.options.bar_height + this.options.padding) * this.tasks.length +
-          this.options.header_height +
-          this.options.padding / 2;
+        const height = (this.options.bar_height + this.options.padding) * this.tasks.length;
         createSVG('rect', {
           x,
-          y: 0,
+          y: this.options.header_height + this.options.padding / 2,
           width: (this.view_is('Day') ? 1 : 2) * this.options.column_width,
           height,
           class: 'holiday-highlight',