From 18591dd0178ebff93fe465c0a0512128c7bda755 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 18 Nov 2024 13:07:40 +0100 Subject: [PATCH] fix: use the correct design token color for the health chart background (#8783) This change swaps out the color of the health chart "unfilled" section for `theme.palette.background.application`. This is the same color that's used in the sketches, so it should apply better for dark mode. Why? I noticed that the graph looks choppy in dark mode, so figured I'd go and investigate. This update makes it look a lot smoother. Light mode looks the same as before. Before (notice the leaking light grey): ![image](https://github.com/user-attachments/assets/535ca24b-756b-460c-a7ab-78daf28d68ba) After: ![image](https://github.com/user-attachments/assets/98d4c0de-bde3-4d10-9210-fdd0bf5dc572) --- .../component/project/Project/ProjectStatus/ProjectHealth.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx index efe6d7304d7c..dae266416dfc 100644 --- a/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx +++ b/frontend/src/component/project/Project/ProjectStatus/ProjectHealth.tsx @@ -118,7 +118,7 @@ export const ProjectHealth = () => { cy='50' r={ChartRadius} fill='none' - stroke={theme.palette.grey[300]} + stroke={theme.palette.background.application} strokeWidth={ChartStrokeWidth} strokeDasharray={`${filledLength * circumference} ${gapLength * circumference}`} strokeDashoffset={offset * circumference}