feat: align design with figma

shockwave40 · Apr 28, 2024 · 901f78e · 901f78e
1 parent 0cefc57
commit 901f78e
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 120 deletions.
diff --git a/src/bar.js b/src/bar.js
@@ -149,7 +149,7 @@ export default class Bar {
     $date_highlight.classList.add('date-highlight')
     $date_highlight.style.height = this.height * 0.8 + 'px'
     $date_highlight.style.width = this.width + 'px'
-    $date_highlight.style.top = this.gantt.options.header_height - 19 + 'px'
+    $date_highlight.style.top = this.gantt.options.header_height - 24 + 'px'
     $date_highlight.style.left = x + 'px'
     this.$date_highlight = $date_highlight
     this.gantt.$lower_header.prepend($date_highlight)

diff --git a/src/gantt.scss b/src/gantt.scss
@@ -3,21 +3,27 @@
 $bar-color: #fff !default;
 $bar-color-important: #94c4f4 !default;
 $bar-stroke: #fff !default;
-$border-color: #e0e0e0 !default;
+$dark-stroke-color: #e0e0e0 !default;
+$stroke-color: #EBEEF0 !default;
 $light-bg: #f5f5f5 !default;
 $light-border-color: #ebeff2 !default;
 $light-yellow: #f6e796 !default;
-$holiday-color: #f3f4f7 !default;
+$holiday-color: #F9FAFA !default;
 $text-muted: #666 !default;
+$text-grey: #98A1A9;
 $text-light: #fff !default;
 $text-dark: #111 !default;
-$progress-important: #2c94ec !default;
-$progress: #dedfe0 !default;
+$progress: #EBEEF0 !default;
 $handle-color: #dcdce4 !default;
 $handle-color-important: #94c4f4 !default;
 $light-blue: #c4c4e9 !default;
+$middle-blue: #62B2F9 !default;
+$dark-blue: #2c94ec !default;
+
 
 .gantt-container {
+  line-height: 14.5px;
+
   .grid-header {
     background-color: #ffffff;
     position: sticky;
@@ -27,19 +33,29 @@ $light-blue: #c4c4e9 !default;
 
   .lower-text,
   .upper-text {
-    font-size: 14px;
     text-anchor: middle;
-    color: $text-muted;
+    color: $text-dark;
+  }
+
+  .upper-header {
+    height: 50px;
+  }
+
+  .lower-header {
+    height: 56px;
   }
 
   .lower-text {
+    font-size: 14px;
     position: absolute;
     width: fit-content;
   }
 
   .upper-text {
     position: absolute;
     width: fit-content;
+    font-weight: 500;
+    font-size: 16px;
   }
 
   .current-upper {
@@ -49,32 +65,51 @@ $light-blue: #c4c4e9 !default;
   .side-header {
     position: fixed;
     padding: 0 10px;
+    margin-right: 10px;
     background: white;
+    line-height: 20px;
+    font-weight: 400;
+    font-size: 13px;
   }
 
-  .today-button,
-  .viewmode-select {
-    background-color: $text-light;
-    border: 1px solid black;
+  .today-button {
+    background: #F4F5F6;
+    border: none;
     color: $text-dark;
     padding: 4px 10px;
-    font-size: 14px;
-    border-radius: 5px;
+    border-radius: 8px;
+    float: right;
   }
 
   .viewmode-select {
-    padding: 3px 5px;
-    margin-right: 4px;
+    background: #F4F5F6;
+    text-align: center;
+    outline: none !important;
+    padding: 4px 8px;
+    border-radius: 6px;
+    // display: block;
+    margin-bottom: 4px;
   }
 
   .date-highlight {
-    background-color: $text-muted;
+    background-color: $progress;
     border-radius: 12px;
-    z-index: 1;
     position: absolute;
-    opacity: 0.4;
     display: none;
   }
+
+  .current-highlight {
+    position: absolute;
+    background: $dark-blue;
+    width: 1px;
+  }
+
+  .current-date-highlight {
+    background: $dark-blue;
+    color: $text-light;
+    padding: 4px;
+    border-radius: 200px;
+  }
 }
 
 .gantt {
@@ -101,38 +136,19 @@ $light-blue: #c4c4e9 !default;
   }
 
   .tick {
-    stroke: $border-color;
+    stroke: $stroke-color;
     stroke-width: 0.2;
 
     &.thick {
-      stroke: #000;
-      stroke-width: 0.5;
+      stroke: $dark-stroke-color;
+      stroke-width: 0.7;
     }
   }
 
-  .today-highlight {
-    fill: $light-yellow;
-    opacity: 0.5;
-  }
 
-  .week-highlight {
-    fill: $light-yellow;
-    opacity: 0.5;
-  }
 
   .holiday-highlight {
     fill: $holiday-color;
-    opacity: 0.5;
-  }
-
-  .month-highlight {
-    fill: $light-yellow;
-    opacity: 0.5;
-  }
-
-  .year-highlight {
-    fill: $light-yellow;
-    opacity: 0.5;
   }
 
   .arrow {
@@ -148,14 +164,10 @@ $light-blue: #c4c4e9 !default;
     transition: stroke-width 0.3s ease;
   }
 
-
-
   .bar-progress {
     fill: $progress;
   }
 
-
-
   .bar-expected-progress {
     fill: $light-blue;
   }
@@ -176,7 +188,7 @@ $light-blue: #c4c4e9 !default;
     dominant-baseline: central;
     // text-anchor: middle;
     font-family: Helvetica;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 400;
 
     &.big {
@@ -191,7 +203,7 @@ $light-blue: #c4c4e9 !default;
     }
 
     .bar-progress {
-      fill: $progress-important;
+      fill: $dark-blue;
     }
 
     .bar-label {
@@ -257,27 +269,24 @@ $light-blue: #c4c4e9 !default;
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0, 0, 0);
-    padding: 0;
-    color: #959da5;
-    border-radius: 3px;
-    border: 1px solid rgba(0, 0, 0);
+    background: #171B1F;
+    padding: 10px;
+    border-radius: 5px;
     width: max-content;
 
     &.hidden {
       opacity: 0 !important;
     }
 
+
     .title {
-      border-bottom: 1px solid $progress;
-      padding: 10px;
+      margin-bottom: 5px;
       text-align: center;
       color: $text-light;
     }
 
     .subtitle {
-      padding: 10px;
-      color: #dfe2e5;
+      color: $text-grey;
     }
 
     .pointer {