colors

src/components/charts.ts

@@ -49,7 +49,7 @@ function getACWRColor(value: number | null): string {
         hue = HUE_RED;
     }
 
-    return `hsla(${hue}, 85%, 55%, 0.9)`;
+    return `hsla(${hue}, 85%, 65%, 0.99)`;
 }
 
 // Plugin to draw gradient-colored ACWR line
@@ -87,7 +87,7 @@ const acwrGradientPlugin = {
 
             const color = getACWRColor(segmentValue);
             // Make the fill more transparent
-            const fillColor = color.replace(/[\d.]+\)$/, '0.15)');
+            const fillColor = color.replace(/[\d.]+\)$/, '0.25)');
 
             ctx.fillStyle = fillColor;
             ctx.beginPath();
@@ -134,6 +134,36 @@ const acwrGradientPlugin = {
 // Register the custom plugin
 Chart.register(acwrGradientPlugin);
 
+// Plugin to color y1 (ACWR) axis labels with gradient colors
+const acwrAxisColorPlugin = {
+    id: 'acwrAxisColor',
+    afterDraw(chart: Chart) {
+        const y1Scale = chart.scales['y1'];
+        if (!y1Scale) return;
+
+        const ctx = chart.ctx;
+        ctx.save();
+
+        // Get the tick values and positions
+        const ticks = y1Scale.ticks;
+        ticks.forEach((tick: any) => {
+            const value = tick.value;
+            const color = getACWRColor(value);
+
+            // Find the tick label element and color it
+            const tickLabel = y1Scale.getPixelForValue(value);
+            if (tickLabel !== undefined) {
+                ctx.fillStyle = color;
+            }
+        });
+
+        ctx.restore();
+    },
+};
+
+// Register the axis color plugin
+Chart.register(acwrAxisColorPlugin);
+
 // Function to get activity emoji based on type
 function getActivityEmoji(activityType: string): string {
     const type = activityType.toLowerCase();
@@ -307,6 +337,7 @@ const commonOptions = {
                 font: {
                     size: 12,
                 },
+                color: '#94a3b8',
             },
         },
         tooltip: {
@@ -524,7 +555,10 @@ function createDualAxisChart(
                     },
                     ticks: {
                         padding: 8,
-                        color: '#8b5cf6',
+                        color: (context: any) => {
+                            // Color each tick based on its value using ACWR gradient
+                            return getACWRColor(context.tick.value);
+                        },
                         font: {
                             size: 11,
                         },
@@ -532,7 +566,7 @@ function createDualAxisChart(
                     title: {
                         display: true,
                         text: 'ACWR',
-                        color: '#8b5cf6',
+                        color: '#4ade80',
                         font: {
                             size: 12,
                             weight: 500,

src/style.css

@@ -1,14 +1,14 @@
 :root {
-    --primary-color: #2563eb;
-    --secondary-color: #64748b;
-    --success-color: #10b981;
-    --warning-color: #f59e0b;
-    --danger-color: #ef4444;
-    --bg-color: #f8fafc;
-    --card-bg: #ffffff;
-    --text-color: #1e293b;
-    --border-color: #e2e8f0;
-    --optimal-color: rgba(16, 185, 129, 0.2);
+    --primary-color: #60a5fa;
+    --secondary-color: #94a3b8;
+    --success-color: #34d399;
+    --warning-color: #fbbf24;
+    --danger-color: #f87171;
+    --bg-color: #1e1e1e;
+    --card-bg: #2d2d2d;
+    --text-color: #e5e7eb;
+    --border-color: #404040;
+    --optimal-color: rgba(52, 211, 153, 0.2);
 }
 
 * {
@@ -327,21 +327,26 @@ h2 {
 }
 
 #ftp-input,
-#target-acwr-input {
+#target-acwr-input,
+#threshold-hr-input,
+#resting-hr-input {
     width: 70px;
     padding: 0.375rem 0.5rem;
     border: 1px solid var(--border-color);
     border-radius: 4px;
     font-size: 0.875rem;
     text-align: center;
-    background-color: var(--card-bg);
+    background-color: #3a3a3a;
+    color: var(--text-color);
 }
 
 #ftp-input:focus,
-#target-acwr-input:focus {
+#target-acwr-input:focus,
+#threshold-hr-input:focus,
+#resting-hr-input:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
+    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
 }
 
 .ftp-unit {
@@ -459,10 +464,15 @@ h2 {
 }
 
 .chart-container {
-    background-color: var(--card-bg);
+    background-color: #00000075;
     border-radius: 8px;
     padding: 1.5rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.chart-container h2 {
+    color: #fbfefe;
+    margin-bottom: 1rem;
 }
 
 .chart-container canvas {