From b8efde379de019424ec45c7051853347dc09b21f Mon Sep 17 00:00:00 2001
From: supercolbat <supercolbat@protonmail.com>
Date: Sat, 5 Aug 2023 08:02:48 -0500
Subject: [PATCH] UX changes

Clicking on cryptocurrency QR codes open the images in a new tab

Changed the `details` selector `summary` in `src/app.css` to fix unintended behavior
---
 src/app.css                         |  2 +-
 src/routes/donate/+page.svelte      |  3 +++
 src/routes/donate/CryptoInfo.svelte | 17 ++++++++++++-----
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index a0bb872..c1fa756 100644
--- a/src/app.css
+++ b/src/app.css
@@ -69,7 +69,7 @@ h4 {
 	@apply text-xl font-bold my-8;
 }
 
-details {
+summary {
 	@apply cursor-pointer;
 }
 
diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
index 4bbaa03..59f7109 100644
--- a/src/routes/donate/+page.svelte
+++ b/src/routes/donate/+page.svelte
@@ -49,6 +49,7 @@
 <h4>Monero</h4>
 
 <CryptoInfo
+	name="Monero"
 	address="47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA"
 	qr="Monero.png"
 />
@@ -56,6 +57,7 @@
 <h4>Bitcoin</h4>
 
 <CryptoInfo
+	name="Bitcoin"
 	address="bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd"
 	qr="Bitcoin.png"
 />
@@ -63,6 +65,7 @@
 <h4>Litecoin</h4>
 
 <CryptoInfo
+	name="Litecoin"
 	address="ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj"
 	qr="Litecoin.png"
 />
diff --git a/src/routes/donate/CryptoInfo.svelte b/src/routes/donate/CryptoInfo.svelte
index b6df5b2..1784757 100644
--- a/src/routes/donate/CryptoInfo.svelte
+++ b/src/routes/donate/CryptoInfo.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	export let name: string = "";
 	export let address: string = "";
 	export let qr: string = "";
 </script>
@@ -13,10 +14,16 @@
 {#if qr}
 	<details class="p-0">
 		<summary>QR code</summary>
-		<img
-			src="/qr/{qr}"
-			alt="QR code"
-			class="mt-2"
-		/>
+		<a
+			href="/qr/{qr}"
+			target="_blank"
+			rel="noreferrer"
+		>
+			<img
+				src="/qr/{qr}"
+				alt="QR code to {name} address"
+				class="mt-2"
+			/>
+		</a>
 	</details>
 {/if}