From eeb31fbcf9647f0b2d89241c192c649555583318 Mon Sep 17 00:00:00 2001
From: samyak <samyak257@gmail.com>
Date: Sat, 2 Sep 2023 15:38:03 -0500
Subject: [PATCH] Changing toggle frontend to be more smooth

---
 src/routes/+page.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 722114d..888e0b7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,6 +14,8 @@
 	let qrImg: string | null = null;
 	let walletUrl: null | string = null;
 
+	let showQR = true;
+
 	let user: User | null = null;
 	userStore.subscribe((data) => (user = data));
 
@@ -68,7 +70,13 @@
 			<div class="block w-full md:max-w-sm md:w-8/12 mx-auto mb-10" in:slide>
 				<div class="bg-rp-cream px-8 pt-8 pb-5 rounded-md qr-pass flex flex-col items-center gap-2">
 					{#if qrImg}
-						<img class="w-full aspect-square" src={qrImg} alt="QR Pass" />
+						<button on:click={() => { showQR = !showQR }} class="w-full aspect-square">
+							{#if showQR}
+								<img src={qrImg} class="w-full aspect-square" alt="QR Pass" />
+							{:else}
+								<p class="w-full aspect-square bg-white font-semibold text-rp-blue flex items-center justify-center">{user.email}</p>
+							{/if}
+						</button>
 					{:else}
 						<div class="w-full aspect-square bg-white animate-pulse rounded-md" />
 					{/if}