From 837d746739dd5ee9e8f9a5e3951040209953b558 Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Fri, 13 Dec 2024 14:10:42 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20make=20unfocused=20lines=20a=20litt?=
 =?UTF-8?q?le=20thinner?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/lineCharts/LineChart.tsx              | 11 +++++++----
 .../grapher/src/slopeCharts/SlopeChart.tsx            | 10 +++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
index dffda4ec5ab..f0f8101ca8d 100644
--- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
+++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -182,7 +182,10 @@ class Lines extends React.Component<LinesProps> {
                 : NON_FOCUSED_LINE_COLOR
 
         const strokeDasharray = series.isProjection ? "2,3" : undefined
-        const strokeWidth = hover.background ? 1 : this.strokeWidth
+        const strokeWidth =
+            hover.background || focus.background
+                ? this.strokeWidth - 0.33 * this.strokeWidth
+                : this.strokeWidth
         const strokeOpacity =
             hover.background && !focus.background ? GRAPHER_OPACITY_MUTE : 1
 
@@ -196,7 +199,7 @@ class Lines extends React.Component<LinesProps> {
                 id={makeIdForHumanConsumption("outline", series.seriesName)}
                 placedPoints={series.placedPoints}
                 stroke={outlineColor}
-                strokeWidth={outlineWidth}
+                strokeWidth={outlineWidth.toFixed(1)}
             />
         )
 
@@ -206,7 +209,7 @@ class Lines extends React.Component<LinesProps> {
                     id={makeIdForHumanConsumption("line", series.seriesName)}
                     points={series.placedPoints}
                     strokeLinejoin="round"
-                    strokeWidth={strokeWidth}
+                    strokeWidth={strokeWidth.toFixed(1)}
                     strokeDasharray={strokeDasharray}
                     strokeOpacity={strokeOpacity}
                 />
@@ -215,7 +218,7 @@ class Lines extends React.Component<LinesProps> {
                     id={makeIdForHumanConsumption("line", series.seriesName)}
                     placedPoints={series.placedPoints}
                     stroke={color}
-                    strokeWidth={strokeWidth}
+                    strokeWidth={strokeWidth.toFixed(1)}
                     strokeOpacity={strokeOpacity}
                     strokeDasharray={strokeDasharray}
                 />
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index bbd17494459..5c9ff86d523 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -1332,6 +1332,10 @@ function Slope({
         !focus.background || hover.active
             ? series.color
             : NON_FOCUSED_LINE_COLOR
+    const lineWidth =
+        hover.background || focus.background
+            ? strokeWidth - 0.33 * strokeWidth
+            : strokeWidth
 
     return (
         <g
@@ -1344,7 +1348,7 @@ function Slope({
                     endPoint={endPoint}
                     radius={dotRadius}
                     color={outlineStroke}
-                    lineWidth={strokeWidth + 2 * outlineWidth}
+                    lineWidth={lineWidth + 2 * outlineWidth}
                 />
             )}
             <LineWithDots
@@ -1352,7 +1356,7 @@ function Slope({
                 endPoint={endPoint}
                 radius={dotRadius}
                 color={color}
-                lineWidth={strokeWidth}
+                lineWidth={lineWidth}
                 opacity={opacity}
             />
         </g>
@@ -1392,7 +1396,7 @@ function LineWithDots({
             d={`${startDotPath} ${endDotPath} ${linePath}`}
             fill={color}
             stroke={color}
-            strokeWidth={lineWidth}
+            strokeWidth={lineWidth.toFixed(1)}
             opacity={opacity}
         />
     )