🐝 trigger staging

owid · Apr 15, 2024 · 433b335 · 433b335
1 parent 1cc8338
commit 433b335
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -46,9 +46,6 @@ nav.controlsRow .chart-controls .settings-menu {
     // chart-type label
     //
     .settings-menu-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
         background: white;
         padding: 9px $indent 3px $indent;
         position: sticky;

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -30,6 +30,7 @@ import {
     TableFilterToggle,
     TableFilterToggleManager,
 } from "./settings/TableFilterToggle"
+import { OverlayHeader } from "../core/OverlayHeader"
 
 const {
     LineChart,
@@ -315,12 +316,11 @@ export class SettingsMenu extends React.Component<{
                         ...this.layout,
                     }}
                 >
-                    <div className="settings-menu-header">
-                        <div className="grapher_h5-black-caps grapher_light">
-                            {menuTitle}
-                        </div>
-                        <CloseButton onClick={() => this.toggleVisibility()} />
-                    </div>
+                    <OverlayHeader
+                        className="settings-menu-header"
+                        title={menuTitle}
+                        onDismiss={this.toggleVisibility}
+                    />
 
                     <div className="settings-menu-controls">
                         <SettingsGroup

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -1,15 +1,18 @@
 import React from "react"
+import cx from "classnames"
 import { CloseButton } from "../closeButton/CloseButton.js"
 
 export function OverlayHeader({
     title,
     onDismiss,
+    className,
 }: {
     title: string
     onDismiss?: () => void
+    className?: string
 }): JSX.Element {
     return (
-        <div className="overlay-header">
+        <div className={cx("overlay-header", className)}>
             <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
             {onDismiss && <CloseButton onClick={onDismiss} />}
         </div>