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

@@ -69,7 +69,7 @@ h4 {
 	@apply text-xl font-bold my-8;
 }
 
-details {
+summary {
 	@apply cursor-pointer;
 }
 

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"
 />

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
+		<a
-			src="/qr/{qr}"
+			href="/qr/{qr}"
-			alt="QR code"
+			target="_blank"
-			class="mt-2"
+			rel="noreferrer"
-		/>
+		>
+			<img
+				src="/qr/{qr}"
+				alt="QR code to {name} address"
+				class="mt-2"
+			/>
+		</a>
 	</details>
 {/if}