style tweaks

5 files changed, 41 insertions, 40 deletions

diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 48d92a36..b4d7d496 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -8,6 +8,7 @@ export async function load({ depends, params, url }) {
 	let { id } = params;
 	let invoice = await get(`/invoice?uuid=${id}`);
 	let { amount, received, pending } = invoice;
+	amount = parseInt(amount);
 
 	let paid = (!amount && (received || pending)) || (amount > 0 && received + pending >= amount);
 	if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${id}/paid`);
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 46b0f07e..50495724 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -73,11 +73,11 @@
 	};
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 mt-5 sm:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-2 md:space-y-5">
+<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
 	<div>
 		<h1 class="text-secondary text-center text-xl">Please pay</h1>
 
@@ -93,25 +93,35 @@
 		</div>
 	</div>
 
-	{#if !user || user.username === username || showQr}
-		<div class="mx-auto">
-			<img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
+	<div class="w-full !mt-5 sm:!mt-8">
+		<div class="relative mx-auto w-[330px] h-[330px]">
+			<img {src} class:p-4={full} class="w-[300px] mx-auto pt-1" bind:this={qr} on:click={toggle} />
+			<div class="border-2 rounded-[20%] w-[330px] -top-[10px] absolute h-[330px]" />
 		</div>
+	</div>
 
-		{#if address}
-			<div class="text-secondary">{address}</div>
-		{/if}
-
-		<div class="flex gap-2 justify-center">
-			<button
-				class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
-				on:click={() => copy(text)}
-				><Icon icon="copy" style="mr-1" />
-				<div>Copy</div></button
-			>
-		</div>
+	{#if address}
+		<div class="text-secondary text-center">{address}</div>
 	{/if}
 
+	<div class="flex gap-2 justify-center">
+		<button
+			class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
+			on:click={() => copy(text)}
+			><Icon icon="copy" style="mr-1" />
+			<div>Copy</div></button
+		>
+
+		{#if user && user.username !== username}
+			<a href={`/send/${invoice.uuid}`}>
+				<button class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80">
+					<Icon icon="send" style="mr-1" />
+					<div class="my-auto">Pay</div>
+				</button>
+			</a>
+		{/if}
+	</div>
+
 	<div class="space-y-2 w-80 mx-auto">
 		{#if invoice.tip}
 			<div class="flex justify-between">
@@ -141,22 +151,6 @@
 			</div>
 		{/if}
 	</div>
-
-	{#if user && user.username !== username}
-		<div class="mx-auto my-auto flex gap-2 justify-center">
-			<a href={`/send/${invoice.uuid}`}>
-				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
-					Pay now
-				</button>
-			</a>
-			<button
-				class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80"
-				on:click={() => (showQr = !showQr)}
-			>
-				{showQr ? 'Hide' : 'Show'} QR
-			</button>
-		</div>
-	{/if}
 </div>
 
 <style>
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 60bc4592..ec80c14d 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -54,10 +54,8 @@
 			{/if}
 		</h3>
 	{/if}
-
-	<a href={`/${user.username}/receive`}>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
-			{$t('invoice.done')}
-		</button>
-	</a>
 </div>
+
+<a href={`/${user.username}/receive`}>
+	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.server.js b/src/routes/(app)/invoice/[id]/tip/+page.server.js
index 1068f273..dd618b8a 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.server.js
+++ b/src/routes/(app)/invoice/[id]/tip/+page.server.js
@@ -1,4 +1,10 @@
 import invoice from '$lib/invoice';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent }) {
+	let { invoice } = await parent();
+	if (!invoice.amount) throw redirect(307, `/invoice/${invoice.uuid}`);
+}
 
 export const actions = {
 	default: invoice
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 74c1639e..ca0a0437 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -102,7 +102,9 @@
 	$invoices[id] = { amount, id, network, rate, received, text, tip, username };
 
 	$: browser &&
-		$invoices[id]?.received >= $invoices[id]?.amount &&
+		($invoices[id]?.amount > 0
+			? $invoices[id]?.received >= $invoices[id]?.amount
+			: $invoices[id]?.received) &&
 		goto(($invoices[id].memo === 'launch' && '/launch/purchase') || `/invoice/${id}/paid`);
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));