From 5edb37a89a4ad6d5a94afbafed441c8149a41ef6 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 26 Nov 2024 16:39:35 +0100
Subject: [PATCH] enhance: explorer tile touchups (#4220)

* enhance: add background color to explorer tiles

for when the webp image cannot be loaded (e.g. in Safari 13)

* enhance: add background to explorer tile icons
---
 site/gdocs/components/ExplorerTiles.scss | 1 +
 site/gdocs/components/ExplorerTiles.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/site/gdocs/components/ExplorerTiles.scss b/site/gdocs/components/ExplorerTiles.scss
index 69658f22cde..8c4a9c292c3 100644
--- a/site/gdocs/components/ExplorerTiles.scss
+++ b/site/gdocs/components/ExplorerTiles.scss
@@ -29,6 +29,7 @@
         }
     }
     .explorer-tile {
+        background-color: $oxford-blue; // show this if the webp image cannot be loaded
         background-image: url("https://ourworldindata.org/explorer-thumbnail.webp");
         background-size: cover;
         background-position: center;
diff --git a/site/gdocs/components/ExplorerTiles.tsx b/site/gdocs/components/ExplorerTiles.tsx
index 2884085df24..769ea8352b9 100644
--- a/site/gdocs/components/ExplorerTiles.tsx
+++ b/site/gdocs/components/ExplorerTiles.tsx
@@ -16,6 +16,7 @@ function ExplorerTile({ url }: { url: string }) {
     }
     const icon = linkedChart.tags[0] ? (
         <img
+            className="explorer-tile__icon"
             height={40}
             width={40}
             src={`${BAKED_BASE_URL}/images/tag-icons/${encodeURIComponent(