Merge pull request #2694 from owid/grapher-redesign-button-image-in-a…

…rticles Grapher redesign: Update appearance of injected "Add button" text
owid · Oct 6, 2023 · fc63f6f · fc63f6f
2 parents 9e23ca6 + 66a021e
commit fc63f6f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 33 deletions.
diff --git a/baker/formatWordpressPost.tsx b/baker/formatWordpressPost.tsx
@@ -266,9 +266,11 @@ export const formatWordpressPost = async (
         /(\+ )?[a|A]dd [c|C]ountry/g,
         `<span class="add-country">
             <span class="icon">
-                <svg width="16" height="16"><path d="M3,8 h10 m-5,-5 v10"></path></svg>
+                <svg viewBox="0 0 512 512">
+                    <path fill="currentColor" d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"></path>
+                </svg>
             </span>
-            Add country
+            Edit countries and regions
         </span>`
     )
 

diff --git a/site/css/content.scss b/site/css/content.scss
@@ -256,39 +256,22 @@ figure[data-explorer-src] {
 .article-content {
     span.add-country {
         font-size: 0.9rem;
-        font-weight: bold;
-        color: $controls-color;
+        font: 400 13px/16px Lato, "Helvetica Neue", Helvetica, Arial,
+            "Liberation Sans", sans-serif;
+        letter-spacing: 0.01em;
+        display: inline-flex;
+        align-items: center;
+        border: 1px solid #e7e7e7;
+        border-radius: 4px;
+        padding: 5px 7px;
+        color: #5b5b5b;
+        white-space: nowrap;
+        margin: -5px 0px -5px -2px;
 
         .icon {
-            position: relative;
-            display: inline-block;
-            width: 16px;
-            height: 16px;
-            margin-right: 3px;
-            vertical-align: text-bottom;
-
-            svg {
-                position: absolute;
-                top: 0;
-                left: 0;
-            }
-
-            path {
-                stroke: #fff;
-                stroke-width: 2px;
-            }
-
-            &::before {
-                display: block;
-                content: "";
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 16px;
-                height: 16px;
-                background-color: $controls-color;
-                border-radius: 50%;
-            }
+            width: 0.75rem;
+            height: 0.75rem;
+            margin-right: 5px;
         }
     }
 }