more qr tweaking

4 files changed, 25 insertions, 25 deletions

diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index de292f2a..55ce96d4 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -112,7 +112,7 @@
 			>
 		</div>
 
-		<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
+		<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto">
 			{#each numPad as value}
 				{#if value === '<'}
 					<button
diff --git a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
index 7f2cf666..634b091a 100644
--- a/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...recipient]/+page.svelte
@@ -64,7 +64,7 @@
 
 		<input type="hidden" name="prompt" value="true" />
 
-		<div class="space-y-3 w-full md:w-[300px] mx-auto">
+		<div class="space-y-3 w-[300px] mx-auto">
 			<Numpad bind:amount bind:currency />
 			<button
 				type="submit"
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 9df99035..4b6cf97e 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -4,7 +4,8 @@ import { get } from '$lib/utils';
 export async function load({ params }) {
 	let { id } = params;
 	let invoice = await get(`/invoice?uuid=${id}`);
-	let src = Qr.drawImg(invoice.text, { size: 600 });
+	let sm = Qr.drawImg(invoice.text, { size: 300 });
+	let lg = Qr.drawImg(invoice.text, { size: 1200 });
 
-	return { id, invoice, src };
+	return { id, invoice, sm, lg };
 }
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index cf87d39b..463cf31f 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -14,7 +14,7 @@
 	let showQr;
 
 	$: refresh(data);
-	let { invoice, id, user, src } = data;
+	let { invoice, id, user, sm, lg } = data;
 	let {
 		address,
 		amount,
@@ -27,6 +27,8 @@
 		user: { username, currency }
 	} = invoice;
 
+let src = sm;
+
 	let qr;
 	let tipPercent = 0;
 
@@ -67,10 +69,13 @@
 
 	$: link = address ? text : `lightning:${text}`;
 
-	let click = () => {
-		if (screenfull.isFullscreen) screenfull.toggle(qr);
-		else window.location.href = link;
-	};
+  let full;
+  let toggle = () => {
+    screenfull.toggle(qr);
+    full = !full;
+    if (full) src = lg;
+    else src = sm;
+  } 
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -78,25 +83,25 @@
 </button>
 
 <div class="container mx-auto max-w-lg px-4 space-y-5">
-	<h1 class="text-secondary block text-2xl flex">
-		<div class="flex mx-auto">
-			<div class="my-auto">Please pay</div>
+	<div class="w-full flex">
+		<h1 class="text-secondary block text-2xl flex mx-auto">
+			<div class="my-auto">Pay</div>
 
-			<div class="my-auto">
-				<a href="/{username}" class="text-black font-semibold hover:opacity-80">
+			<div>
+				<a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">
 					<div class="flex my-auto">
-						<Avatar user={username} size={12} />
+						<Avatar user={invoice.user} size={20} />
 						<div class="my-auto">{username}</div>
 					</div>
 				</a>
 			</div>
-		</div>
-	</h1>
+		</h1>
+	</div>
 
 	<div class="text-center space-y-5">
 		{#if !user || user.username === username || showQr}
-			<div class="w-80 md:w-96 mx-auto">
-				<img {src} class="px-4" bind:this={qr} on:click={click} />
+			<div class="mx-auto">
+        <img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
 			</div>
 
 			<div class="mb-10 flex gap-2 justify-center">
@@ -106,12 +111,6 @@
 					><Icon icon="copy" style="mr-1" />
 					<div>Copy</div></button
 				>
-				<button
-					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2"
-					on:click={() => screenfull.toggle(qr)}
-					><Icon icon="expand" style="mr-1" />
-					<div>Enlarge</div></button
-				>
 			</div>
 		{/if}