✨ update No Data section style

owid · Dec 10, 2024 · 717849c · 717849c
1 parent 452bd7d
commit 717849c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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>
         )
     }