From eb31b942f41255fc85b4396545ba06e8b0954845 Mon Sep 17 00:00:00 2001
From: afn <hey@afn.im>
Date: Sun, 13 Aug 2023 12:14:33 -0400
Subject: [PATCH] perf(donate): use svg fallback for card images

---
 src/routes/donate/+page.svelte         |   4 ++--
 static/donate/card-images/fallback.png | Bin 5798 -> 0 bytes
 static/donate/card-images/fallback.svg |   1 +
 3 files changed, 3 insertions(+), 2 deletions(-)
 delete mode 100644 static/donate/card-images/fallback.png
 create mode 100644 static/donate/card-images/fallback.svg

diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
index ac92c2c..0fc5ed1 100644
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -67,7 +67,7 @@
 					<a class="donate-card" target="_blank" rel="noreferrer" href={platform.url}>
 						<!-- not using <img/> because we want the image height to always be 200px -->
 						<div
-							style="background-image: url('/donate/card-images/{platform.name}.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.png');"
+							style="background-image: url('/donate/card-images/{platform.name}.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.svg');"
 							role="img"
 							aria-label="{platform.name} preview image"
 							>
@@ -79,7 +79,7 @@
 			{#if data.wallets}
 				<button class="donate-card" on:click={() => (cryptoDialogue = !cryptoDialogue)}>
 					<div
-						style="background-image: url('/donate/card-images/Cryptocurrencies.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.png');"
+						style="background-image: url('/donate/card-images/Cryptocurrencies.{supportsWebP() ? 'webp' : 'png'}'), url('/donate/card-images/fallback.svg');"
 						role="img"
 						aria-label="Cryptocurrencies preview image"
 					/>
diff --git a/static/donate/card-images/fallback.png b/static/donate/card-images/fallback.png
deleted file mode 100644
index 27ed6356129e0acdbaec38921dd9bd84f2029f4e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5798
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

diff --git a/static/donate/card-images/fallback.svg b/static/donate/card-images/fallback.svg
new file mode 100644
index 0000000..fd5dedf
--- /dev/null
+++ b/static/donate/card-images/fallback.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 2400 1260"><path fill="#E0F2FF" d="M0 0h2400v1260H0z"/><path fill="#182244" d="M1176 812v-45h52v45h-52Zm0-301v-45h52v45h-52Zm26 269c-19 0-37-3-52-11a98 98 0 0 1-56-77l51-8a59 59 0 0 0 60 48c15 0 26-3 36-10 9-6 14-15 14-24 0-7-2-13-7-17-4-4-10-8-19-11l-67-20c-38-12-58-36-58-71a75 75 0 0 1 45-71c15-7 32-10 51-10a106 106 0 0 1 83 37c10 11 16 25 21 42l-53 10a51 51 0 0 0-28-36c-7-3-15-5-23-5-9-1-16 1-23 3-7 3-12 7-16 11-4 5-6 10-6 16 0 7 3 12 8 17 6 5 15 9 27 12l48 14c24 7 41 16 52 28 10 12 16 27 16 47 0 17-5 32-13 45-9 13-21 23-37 30-15 8-33 11-54 11Z"/></svg>
\ No newline at end of file