fix: color scheme

package-lock.json

@@ -79,9 +79,7 @@
                 "tar": "~6.2.1",
                 "tcp-ping": "~0.1.1",
                 "thirty-two": "~1.0.2",
-                "tippy.js": "^6.3.7",
                 "tough-cookie": "~4.1.3",
-                "vue3-calendar-heatmap": "^2.0.5",
                 "ws": "^8.13.0"
             },
             "devDependencies": {
@@ -128,6 +126,7 @@
                 "stylelint-config-standard": "~25.0.0",
                 "terser": "~5.15.0",
                 "test": "~3.3.0",
+                "tippy.js": "^6.3.7",
                 "typescript": "~4.4.4",
                 "v-pagination-3": "~0.1.7",
                 "vite": "~5.2.8",
@@ -144,6 +143,7 @@
                 "vue-qrcode": "~1.0.0",
                 "vue-router": "~4.2.5",
                 "vue-toastification": "~2.0.0-rc.5",
+                "vue3-calendar-heatmap": "^2.0.5",
                 "vuedraggable": "~4.1.0",
                 "wait-on": "^7.2.0",
                 "whatwg-url": "~12.0.1"
@@ -3294,6 +3294,7 @@
             "version": "2.10.2",
             "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
             "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
+            "dev": true,
             "license": "MIT",
             "funding": {
                 "type": "opencollective",
@@ -14819,6 +14820,7 @@
             "version": "6.3.7",
             "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
             "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@popperjs/core": "^2.9.0"
@@ -15768,6 +15770,7 @@
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.5.tgz",
             "integrity": "sha512-qvveNQlTS5Aw7AvRLs0zOyu3uP5iGJlXJAnkrkG2ElDdyQ8H1TJhQ8rL702CROjAg16ezIveUY10nCO7lqZ25w==",
+            "dev": true,
             "license": "MIT",
             "engines": {
                 "node": ">=16"

package.json

@@ -144,9 +144,7 @@
         "tar": "~6.2.1",
         "tcp-ping": "~0.1.1",
         "thirty-two": "~1.0.2",
-        "tippy.js": "^6.3.7",
         "tough-cookie": "~4.1.3",
-        "vue3-calendar-heatmap": "^2.0.5",
         "ws": "^8.13.0"
     },
     "devDependencies": {
@@ -193,6 +191,7 @@
         "stylelint-config-standard": "~25.0.0",
         "terser": "~5.15.0",
         "test": "~3.3.0",
+        "tippy.js": "^6.3.7",
         "typescript": "~4.4.4",
         "v-pagination-3": "~0.1.7",
         "vite": "~5.2.8",
@@ -209,6 +208,7 @@
         "vue-qrcode": "~1.0.0",
         "vue-router": "~4.2.5",
         "vue-toastification": "~2.0.0-rc.5",
+        "vue3-calendar-heatmap": "^2.0.5",
         "vuedraggable": "~4.1.0",
         "wait-on": "^7.2.0",
         "whatwg-url": "~12.0.1"

src/components/HeartbeatBar.vue

@@ -311,60 +311,6 @@ export default {
     font-size: 12px;
 }
 
-.connecting-line {
-    flex-grow: 1;
-    height: 1px;
-    background-color: #ededed;
-    margin-left: 10px;
-    margin-right: 10px;
-    margin-top: 2px;
-
-    .dark & {
-        background-color: #333;
-    }
-}
-
-.hp-bar-big {
-    .beat {
-        display: inline-block;
-        background-color: $primary;
-        border-radius: $border-radius;
-
-        &.empty {
-            background-color: aliceblue;
-        }
-
-        &.down {
-            background-color: $danger;
-        }
-
-        &.pending {
-            background-color: $warning;
-        }
-
-        &.maintenance {
-            background-color: $maintenance;
-        }
-
-        &:not(.empty):hover {
-            transition: all ease-in-out 0.15s;
-            opacity: 0.8;
-            transform: scale(var(--hover-scale));
-        }
-    }
-}
-
-.dark {
-    .hp-bar-big .beat.empty {
-        background-color: #848484;
-    }
-}
-
-.word {
-    color: #aaa;
-    font-size: 12px;
-}
-
 .connecting-line {
     flex-grow: 1;
     height: 1px;

src/components/HeartbeatBarStatus.vue

@@ -2,9 +2,12 @@
     <div ref="wrap">
         <div class="hp-bar-big">
             <CalendarHeatmap
-                :style="{ fill: '#fff', fontSize: 'x-small' }"
+                :style="{ fill: 'var(--dark-font-color2)', fontSize: 'xx-small' }"
                 class="heatmap" :values="values" :end-date="endDate" no-data-text="Unknown" tooltip-unit="%"
-                :range-color="['#ebedf0', '#C3D4CB', '#9ABAA7', '#72A182', '#49875E', '#216E39']" :max="100"
+                :range-color="['aliceblue', 'var(--danger)', 'var(--warning)', 'var(--warning)', 'var(--highlight)', 'var(--primary)']"
+                :display-legend="false"
+                round="3"
+                :max="100"
             />
         </div>
     </div>
@@ -52,16 +55,11 @@ export default {
         this.resize();
     },
     methods: {
-        /**
-         * Resize the heartbeat bar
-         * @returns {void}
-         */
         resize() {
             if (this.$refs.wrap) {
                 this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatMargin * 2));
             }
         },
-
     },
 };
 </script>
@@ -69,13 +67,38 @@ export default {
 <style lang="scss">
 @import "../assets/vars.scss";
 
-// This naming is an internal name for the package vue3-calendar-heatmap and it cannot be modified to kebab-case
+:root {
+    --highlight-white: #{$highlight-white};
+    --danger: #{$danger};
+    --warning: #{$warning};
+    --warning2: #ffc100;
+    --highlight: #{$highlight};
+    --primary: #{$primary};
+    --dark-font-color2: #{$dark-font-color2};
+}
+
 /* stylelint-disable */
+// This naming is an internal name for the package vue3-calendar-heatmap and it cannot be modified to kebab-case
 .vch__legend {
-    display: inline-flex;
-    padding: 0.25rem 0.5rem;
-    gap: 1ch;
-    align-items: center;
+    display: none !important;
+}
+
+.hp-bar-big {
+    padding: 10px;
+    overflow: visible;
+    background-color: white;
+    border-radius: 6px;
+}
+
+.heatmap {
+    rect.vch__day__square {
+        stroke: none !important;
+        stroke-width: 0 !important;
+
+        &:hover {
+        fill-opacity: 0.5;
+        }
+    }
 }
 /* stylelint-enable */
 </style>