From 76c66484d86833455f905a12c00b1d156c8a311d Mon Sep 17 00:00:00 2001
From: Sophia Mersmann <sophia.mersmann1@gmail.com>
Date: Tue, 10 Dec 2024 15:26:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20update=20No=20Data=20section=20styl?=
 =?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/core/grapher.scss             |  1 +
 .../src/scatterCharts/NoDataSection.scss      | 14 ++++++
 .../src/scatterCharts/NoDataSection.tsx       | 49 ++++++++-----------
 3 files changed, 35 insertions(+), 29 deletions(-)
 create mode 100644 packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.scss

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index a1042fc0d28..9e988476624 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -78,6 +78,7 @@ $zindex-controls-drawer: 150;
     @import "../slideInDrawer/SlideInDrawer.scss";
     @import "../sidePanel/SidePanel.scss";
     @import "../controls/Dropdown.scss";
+    @import "../scatterCharts/NoDataSection.scss";
 }
 
 // These rules are currently used elsewhere in the site. e.g. Explorers
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.scss b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.scss
new file mode 100644
index 00000000000..d2be2e167b9
--- /dev/null
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.scss
@@ -0,0 +1,14 @@
+.NoDataSection {
+    .heading {
+        @include grapher_h5-black-caps;
+        margin-bottom: 0.25em;
+    }
+
+    .body {
+        @include grapher_label-2-regular;
+
+        li {
+            margin-bottom: 0.15em;
+        }
+    }
+}
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
index bf9dfb192f3..5416e3447e2 100644
--- a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
+++ b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
@@ -1,8 +1,9 @@
 import React from "react"
 import { Bounds } from "@ourworldindata/utils"
 import {
-    GRAPHER_DARK_TEXT,
-    GRAPHER_FONT_SCALE_11_2,
+    GRAPHER_FONT_SCALE_11,
+    GRAPHER_FONT_SCALE_12,
+    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 
 export function NoDataSection({
@@ -21,41 +22,31 @@ export function NoDataSection({
             seriesNames.length - displayedNames.length
         )
 
+        const headingFontsize = GRAPHER_FONT_SCALE_11 * baseFontSize
+        const bodyFontsize = GRAPHER_FONT_SCALE_12 * baseFontSize
+
         return (
             <foreignObject
+                className="NoDataSection"
                 {...bounds.toProps()}
                 style={{
-                    color: GRAPHER_DARK_TEXT,
-                    fontSize: GRAPHER_FONT_SCALE_11_2 * baseFontSize,
+                    textAlign: "right",
+                    color: GRAPHER_LIGHT_TEXT,
                 }}
             >
-                <div
-                    style={{
-                        textTransform: "uppercase",
-                        fontWeight: 700,
-                        marginBottom: 2,
-                        lineHeight: 1.15,
-                    }}
-                >
+                <div className="heading" style={{ fontSize: headingFontsize }}>
                     No data
                 </div>
-                <ul>
-                    {displayedNames.map((entityName) => (
-                        <li
-                            key={entityName}
-                            style={{
-                                fontStyle: "italic",
-                                lineHeight: 1.15,
-                                marginBottom: 2,
-                            }}
-                        >
-                            {entityName}
-                        </li>
-                    ))}
-                </ul>
-                {remaining > 0 && (
-                    <div>& {remaining === 1 ? "one" : remaining} more</div>
-                )}
+                <div className="body" style={{ fontSize: bodyFontsize }}>
+                    <ul>
+                        {displayedNames.map((entityName) => (
+                            <li key={entityName}>{entityName}</li>
+                        ))}
+                    </ul>
+                    {remaining > 0 && (
+                        <div>& {remaining === 1 ? "one" : remaining} more</div>
+                    )}
+                </div>
             </foreignObject>
         )
     }