✨ (entity selector) design feedback

owid · May 1, 2024 · 284ae76 · 284ae76
1 parent b02c8f4
commit 284ae76
Show file tree

Hide file tree

Showing 17 changed files with 299 additions and 168 deletions.
diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -7,6 +7,10 @@
 
     position: relative;
 
+    label {
+        margin: 0; // style leak in admin
+    }
+
     input {
         position: absolute;
         opacity: 0;

diff --git a/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss b/packages/@ourworldindata/grapher/src/closeButton/CloseButton.scss
@@ -18,11 +18,12 @@
 
     color: $light-text;
     background: white;
-    border: 1px solid $light-stroke !important;
+    border: 1px solid $light-stroke;
     border-radius: 50%;
 
     &:hover {
         background: $hover-fill;
+        border-color: $hover-fill;
         cursor: pointer;
         color: $dark-text;
     }

diff --git a/packages/@ourworldindata/grapher/src/controls/RadioButton.scss b/packages/@ourworldindata/grapher/src/controls/RadioButton.scss
@@ -6,6 +6,10 @@
 
     position: relative;
 
+    label {
+        margin: 0; // style leak in admin
+    }
+
     input {
         position: absolute;
         opacity: 0;

diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx
@@ -2492,7 +2492,7 @@ export class Grapher
                     justifyContent: "center",
                     textAlign: "center",
                     lineHeight: 1.5,
-                    padding: "3rem",
+                    padding: "48px",
                 }}
             >
                 <p style={{ color: "#cc0000", fontWeight: 700 }}>

diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss b/packages/@ourworldindata/grapher/src/core/OverlayHeader.scss
@@ -6,7 +6,13 @@
     align-items: center;
     padding: var(--padding) var(--padding) 16px;
 
-    button {
+    .title {
+        @include grapher_h5-black-caps;
+        color: $light-text;
+    }
+
+    .close-button {
         margin-left: 8px;
+        flex-shrink: 0;
     }
 }
diff --git a/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx b/packages/@ourworldindata/grapher/src/core/OverlayHeader.tsx
@@ -4,16 +4,25 @@ import { CloseButton } from "../closeButton/CloseButton.js"
 
 export function OverlayHeader({
     title,
+    onTitleClick,
     onDismiss,
     className,
 }: {
     title: string
+    onTitleClick?: () => void
     onDismiss?: () => void
     className?: string
 }): JSX.Element {
     return (
         <div className={cx("overlay-header", className)}>
-            <h2 className="grapher_h5-black-caps grapher_light">{title}</h2>
+            <h2
+                className={cx("title", {
+                    clickable: !!onTitleClick,
+                })}
+                onClick={onTitleClick}
+            >
+                {title}
+            </h2>
             {onDismiss && <CloseButton onClick={onDismiss} />}
         </div>
     )

diff --git a/packages/@ourworldindata/grapher/src/core/typography.scss b/packages/@ourworldindata/grapher/src/core/typography.scss
@@ -2,12 +2,34 @@
 // headings
 //
 
+@mixin grapher_h1-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 1.1667;
+    letter-spacing: 0;
+}
+
+@mixin grapher_h2-semibold {
+    display: block;
+    margin: 0;
+
+    font-family: $serif-font-stack;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: 1.2;
+    letter-spacing: 0;
+}
+
 @mixin grapher_h3-semibold {
     display: block;
     margin: 0;
 
     font-family: $serif-font-stack;
-    font-size: 1.125rem;
+    font-size: 18px;
     font-weight: 600;
     line-height: 1.1111;
     letter-spacing: 0;
@@ -22,7 +44,7 @@
     margin: 0;
 
     font-family: $serif-font-stack;
-    font-size: 1.1rem;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: 0;
@@ -37,7 +59,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 900;
     line-height: 1.3333;
     letter-spacing: 0.1em;
@@ -58,7 +80,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 600;
     line-height: 1.5;
     letter-spacing: 0;
@@ -73,7 +95,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 500;
     line-height: 1.3846;
     letter-spacing: 0;
@@ -110,7 +132,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 500;
     line-height: 1.2;
     letter-spacing: 0;
@@ -125,7 +147,7 @@
     margin: 0;
 
     font-family: $sans-serif-font-stack;
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 400;
     line-height: 1.2;
     letter-spacing: 0.01em;

diff --git a/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss b/packages/@ourworldindata/grapher/src/dataTable/DataTable.scss
@@ -226,7 +226,7 @@
 }
 
 .closest-time-notice-tippy {
-    max-width: 13rem;
+    max-width: 208px;
     text-align: center;
-    padding: 0.25rem;
+    padding: 4px;
 }
diff --git a/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss b/packages/@ourworldindata/grapher/src/entitySelector/EntitySelector.scss
@@ -1,6 +1,9 @@
 .entity-selector {
     --padding: var(--modal-padding, 16px);
 
+    $sort-button-size: 32px;
+    $sort-button-margin: 16px;
+
     color: $dark-text;
 
     // necessary for scrolling
@@ -114,22 +117,19 @@
         .label {
             flex-shrink: 0;
             margin-right: 8px;
-            color: $dark-text;
         }
 
         button.sort {
             flex-shrink: 0;
-            margin-left: 16px;
-
-            $size: 32px;
+            margin-left: $sort-button-margin;
 
             display: flex;
             align-items: center;
             justify-content: center;
 
             position: relative;
-            height: $size;
-            width: $size;
+            height: $sort-button-size;
+            width: $sort-button-size;
             padding: 7px;
 
             color: $dark-text;
@@ -185,6 +185,14 @@
             position: relative;
             cursor: pointer;
 
+            &.hovered {
+                background: rgba(219, 229, 240, 0.4);
+            }
+
+            &--with-bar.hovered {
+                background: rgba(219, 229, 240, 0.6);
+            }
+
             .value {
                 color: #a1a1a1;
                 white-space: nowrap;
@@ -217,7 +225,7 @@
             }
         }
 
-        .animated-entity {
+        .flipped {
             position: relative;
             z-index: 0;
             background: #fff;
@@ -259,21 +267,17 @@
         box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
 
         .footer__selected {
-            font-size: 0.6875rem;
+            font-size: 11px;
             font-weight: 500;
             letter-spacing: 0.06em;
             text-transform: uppercase;
-
-            display: flex;
-            flex-wrap: wrap;
-            column-gap: 4px;
         }
 
         button {
             background: none;
             border: none;
             color: $dark-text;
-            font-size: 0.8125rem;
+            font-size: 13px;
             font-weight: 500;
             letter-spacing: 0.01em;
             text-decoration-line: underline;
@@ -287,4 +291,8 @@
             }
         }
     }
+
+    .grapher-dropdown .menu {
+        width: calc(100% + $sort-button-margin + $sort-button-size);
+    }
 }