enhance: make "explore the data" button blue

owid · Dec 19, 2024 · be8aa57 · be8aa57
1 parent 10da0a2
commit be8aa57
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss b/packages/@ourworldindata/grapher/src/controls/ActionButtons.scss
@@ -26,10 +26,20 @@ $paddingX: 12px; // keep in sync with PADDING_X
     }
 }
 
-.ActionButton {
-    $light-fill: $gray-10;
-    $hover-fill: $gray-20;
-    $active-fill: $blue-20;
+div.ActionButton {
+    --light-fill: #{$gray-10};
+    --hover-fill: #{$gray-20};
+    --active-fill: #{$blue-20};
+    --text-color: #{$dark-text};
+
+    &.ActionButton--exploreData {
+        --light-fill: #{$blue-20};
+        --hover-fill: #{$blue-20};
+        --active-fill: #{$blue-10};
+        --text-color: #{$blue-90};
+
+        --hover-decoration: underline;
+    }
 
     height: 100%;
     border-radius: 4px;
@@ -43,12 +53,12 @@ $paddingX: 12px; // keep in sync with PADDING_X
         height: 100%;
         width: 100%;
         cursor: pointer;
-        color: $dark-text;
+        color: var(--text-color);
         font-size: 13px;
         font-weight: 500;
         padding: 0 $paddingX;
         border-radius: inherit;
-        background-color: $light-fill;
+        background-color: var(--light-fill);
         position: relative;
         letter-spacing: 0.01em;
 
@@ -62,13 +72,14 @@ $paddingX: 12px; // keep in sync with PADDING_X
         }
 
         &:hover {
-            background-color: $hover-fill;
+            background-color: var(--hover-fill);
+            text-decoration: var(--hover-decoration);
         }
 
         &:active,
         &.active {
             color: $active-text;
-            background-color: $active-fill;
+            background-color: var(--active-fill);
         }
     }
 

diff --git a/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx b/packages/@ourworldindata/grapher/src/controls/ActionButtons.tsx
@@ -304,7 +304,7 @@ export class ActionButtons extends React.Component<{
                     {this.hasExploreTheDataButton && (
                         <li style={{ width: this.exploreTheDataButtonWidth }}>
                             <div
-                                className="ActionButton"
+                                className="ActionButton ActionButton--exploreData"
                                 style={{ width: "100%" }}
                             >
                                 <a