🔨 (grapher) refactor modals

owid · May 3, 2024 · 3e12e32 · 3e12e32
1 parent d391694
commit 3e12e32
Show file tree

Hide file tree

Showing 19 changed files with 273 additions and 173 deletions.
diff --git a/explorer/Explorer.tsx b/explorer/Explorer.tsx
@@ -961,7 +961,7 @@ export class Explorer
 
     @computed get embedDialogAdditionalElements() {
         return (
-            <div style={{ marginTop: "1em" }}>
+            <div className="embed-additional-elements">
                 <Checkbox
                     label="Hide controls"
                     checked={this.embedDialogHideControls}

diff --git a/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx b/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
@@ -8,7 +8,7 @@ export const DataCitation = (props: {
     return (
         <div className="data-citation">
             {props.citationShort && (
-                <>
+                <div className="data-citation__item">
                     <p className="citation__paragraph">
                         <span className="citation__type">In-line citation</span>
                         If you have limited space (e.g. in data visualizations),
@@ -19,10 +19,10 @@ export const DataCitation = (props: {
                         theme="light"
                         useMarkdown={true}
                     />
-                </>
+                </div>
             )}
             {props.citationLong && (
-                <>
+                <div className="data-citation__item">
                     <p className="citation__paragraph">
                         <span className="citation__type">Full citation</span>
                     </p>
@@ -31,7 +31,7 @@ export const DataCitation = (props: {
                         theme="light"
                         useMarkdown={true}
                     />
-                </>
+                </div>
             )}
         </div>
     )

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.scss
@@ -54,13 +54,6 @@ nav.controlsRow .chart-controls .settings-menu {
         position: sticky;
         top: 0;
         z-index: 1;
-
-        .settings-menu-title {
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            color: $light-text;
-            font: $bold 12px/16px $lato;
-        }
     }
 
     .settings-menu-controls {

diff --git a/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx b/packages/@ourworldindata/grapher/src/controls/SettingsMenu.tsx
@@ -316,7 +316,9 @@ export class SettingsMenu extends React.Component<{
                     }}
                 >
                     <div className="settings-menu-header">
-                        <div className="settings-menu-title">{menuTitle}</div>
+                        <div className="grapher_h5-black-caps grapher_light">
+                            {menuTitle}
+                        </div>
                         <CloseButton onClick={() => this.toggleVisibility()} />
                     </div>
 

diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -10,6 +10,8 @@
 @import "../../../components/src/IndicatorSources/IndicatorSources.scss";
 @import "../../../components/src/IndicatorProcessing/IndicatorProcessing.scss";
 
+@import "./typography.scss";
+
 // grapher frame
 $frame-color: #f2f2f2;
 
@@ -86,6 +88,14 @@ $zindex-controls-drawer: 150;
 @import "../../../components/src/Checkbox.scss";
 @import "../closeButton/CloseButton.scss";
 
+.grapher_dark {
+    color: $dark-text;
+}
+
+.grapher_light {
+    color: $light-text;
+}
+
 .GrapherComponent,
 .GrapherComponent h2,
 .GrapherComponent p,
@@ -169,6 +179,14 @@ $zindex-controls-drawer: 150;
         --code-snippet-button: #{$dark-text};
         --code-snippet-button-hover: #{$light-text};
         --code-snippet-button-active: #{$light-text};
+
+        margin-bottom: 0 !important;
+    }
+
+    &.GrapherComponentNarrow {
+        .wp-code-snippet {
+            padding: 16px;
+        }
     }
 }
 

diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss
@@ -0,0 +1,103 @@
+//
+// headings
+//
+
+@mixin grapher_h3-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.1111;
+    letter-spacing: 0;
+}
+
+.grapher_h3-semibold {
+    @include grapher_h3-semibold;
+}
+
+@mixin grapher_h4-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 1.1rem;
+    font-weight: 600;
+    line-height: 1.5;
+    letter-spacing: 0;
+}
+
+.grapher_h4-semibold {
+    @include grapher_h4-semibold;
+}
+
+@mixin grapher_h5-black-caps {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 0.75rem;
+    font-weight: 900;
+    line-height: 1.3333;
+    letter-spacing: 0.1em;
+
+    text-transform: uppercase;
+}
+
+.grapher_h5-black-caps {
+    @include grapher_h5-black-caps;
+}
+
+//
+// body
+//
+
+@mixin grapher_body-2-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.5;
+    letter-spacing: 0;
+}
+
+.grapher_body-2-semibold {
+    @include grapher_body-2-semibold;
+}
+
+@mixin grapher_body-3-medium {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    line-height: 1.3846;
+    letter-spacing: 0;
+}
+
+.grapher_body-3-medium {
+    @include grapher_body-3-medium;
+}
+
+//
+// labels
+//
+
+@mixin grapher_label-1-medium {
+    display: block;
+    margin: 0;
+
+    font-family: $sans-serif-font-stack;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
+.grapher_label-1-medium {
+    @include grapher_label-1-medium;
+}
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -4,7 +4,7 @@
         $active-fill: #dbe5f0;
 
         text-align: left;
-        margin-bottom: 1.5em;
+        margin: 0 var(--modal-padding, 16px) var(--modal-padding, 16px);
 
         ul {
             margin: 0;
@@ -166,10 +166,4 @@
             }
         }
     }
-
-    .SidePanel .EntitySelector,
-    .SlideInDrawer .EntitySelector {
-        margin-left: 16px;
-        margin-right: 16px;
-    }
 }
diff --git a/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss b/packages/@ourworldindata/grapher/src/modal/DownloadModal.scss
@@ -1,20 +1,17 @@
-.DownloadModalContent {
+.download-modal-content {
     color: $dark-text;
-    padding-bottom: $modal-padding;
+    padding: 0 var(--modal-padding) var(--modal-padding);
+    min-height: 45px;
+    position: relative;
 
     .grouped-menu-section {
-        h2 {
-            color: $dark-text;
-            font-family: $serif-font-stack;
-            font-size: 1.125em;
-            font-weight: 600;
-            margin: 0;
+        h3 {
             margin-bottom: 16px;
         }
     }
 
     .grouped-menu-section + .grouped-menu-section {
-        margin-top: 1.5em;
+        margin-top: 24px;
     }
 
     .grouped-menu-item + .grouped-menu-item {
@@ -29,7 +26,7 @@
         background-color: #f7f7f7;
         position: relative;
         width: 100%;
-        padding: 1em;
+        padding: 16px;
         overflow: hidden;
         text-align: left;
 
@@ -51,36 +48,20 @@
             0px 93px 37px 0px rgba(49, 37, 2, 0.01),
             0px 145px 41px 0px rgba(49, 37, 2, 0);
         padding: 0;
-        margin: 0;
+        margin: 0 24px 0 0;
     }
 
     .grouped-menu-content {
         flex: 1;
-        padding: 0 1.5em;
-
-        .title {
-            margin: 0;
-            font-weight: 600;
-            font-size: 1em;
-            line-height: 1.5;
-        }
-
-        .description {
-            margin: 0;
-            color: $light-text;
-            font-size: 0.875em;
-            font-weight: 500;
-            line-height: 1.15;
-        }
     }
 
     .grouped-menu-section-data .grouped-menu-content {
         padding-left: 0;
     }
 
     .download-icon {
-        padding: 0 0.5em;
-        font-size: 1em;
+        padding: 0 8px 0 16px;
+        font-size: 16px;
     }
 
     .grouped-menu-item:hover .download-icon {
@@ -91,29 +72,20 @@
         border-radius: 8px;
         border: 1px solid #dadada;
         background: #f7f7f7;
-        padding: 1em;
+        padding: 16px;
 
         svg {
-            margin-right: 0.5em;
+            margin-right: 8px;
             color: $light-text;
         }
 
         .title {
-            margin: 0;
-            font-family: $serif-font-stack;
-            font-size: 1em;
-            font-weight: 600;
-            line-height: 1.5;
+            font-size: 1rem;
         }
 
         p {
-            font-size: 0.875em;
-            margin: 0.5em 0 0;
-            opacity: 0.9;
-            color: $light-text;
-            font-weight: 500;
-            line-height: 1.15;
-            letter-spacing: 0.14px;
+            margin: 8px 0 0;
+            font-size: 0.875rem;
         }
 
         a {
@@ -128,18 +100,17 @@
 }
 
 .static-exports-options {
-    margin: 1em 0 1.5em;
-    padding-bottom: 1.5em;
+    margin: 16px 0 24px;
+    padding-bottom: 24px;
     border-bottom: 1px solid #f2f2f2;
 
     > .checkbox + .checkbox {
         margin-top: 8px;
     }
 }
 
-&.GrapherComponentNarrow .DownloadModalContent {
-    .grouped-menu-icon + .grouped-menu-content {
-        padding-left: 1em;
-        padding-right: 0.5em;
+&.GrapherComponentNarrow .download-modal-content {
+    .grouped-menu-icon img {
+        display: none;
     }
 }