invoice and popup styles

2 files changed, 65 insertions, 37 deletions

diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 25ebf227..47f5281b 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -3,12 +3,15 @@
 	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
-	import { invoice as inv, invoices, last } from '$lib/store';
-	import { Icon, Heart, Image, Qr } from '$comp';
+	import { invoices, last } from '$lib/store';
+	import { Avatar, Icon, Heart, Image, Qr } from '$comp';
 	import { goto } from '$app/navigation';
 	import { t } from '$lib/translations';
 
 	export let data;
+
+	let showQr;
+
 	$: refresh(data);
 	let { invoice, id, user, src } = data;
 	let {
@@ -24,8 +27,6 @@
 	let tipPercent = 0;
 
 	let refresh = (data) => {
-		$inv = null;
-
 		({ invoice, id } = data);
 		({
 			amount,
@@ -63,18 +64,27 @@
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-10 lg:space-y-0">
-	<div class="space-y-10 lg:space-y-0">
-		<div class="text-center">
-			<span class="text-secondary block text-2xl break-all"
-				>Scan to pay <a href="/{username}" class="text-black font-semibold hover:opacity-80"
-					>{username}</a
-				></span
-			>
+<div class="container mx-auto max-w-lg px-4 mt-20">
+	<h1 class="text-secondary block text-2xl flex">
+		<div class="flex mx-auto">
+			<div class="my-auto">Please pay</div>
 
+			<div class="my-auto">
+				<a href="/{username}" class="text-black font-semibold hover:opacity-80">
+					<div class="flex my-auto">
+						<Avatar user={username} size={12} />
+            <div class="my-auto">{username}</div>
+					</div>
+				</a>
+			</div>
+		</div>
+	</h1>
+
+	<div class="text-center space-y-10">
+		{#if !user || user.username === username || showQr}
 			<Qr {src} />
 
-			<div class="mb-10">
+			<div>
 				<button
 					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2 mx-auto"
 					on:click={() => copy(text)}
@@ -82,35 +92,51 @@
 					<div>Copy</div></button
 				>
 			</div>
+		{/if}
 
-			<div class="px-5 space-y-3 w-80 mx-auto">
-				{#if invoice.tip}
-					<div class="flex justify-between">
-						{$t('invoice.invoice')}
-						<span>
-							{f(amountFiat, currency)}
-							<span class="text-secondary">{`${sat(amount)}`}</span>
-						</span>
-					</div>
-
-					<div class="flex justify-between">
-						{$t('invoice.tip')}
-						<span
-							>{f(tipAmount, currency)}
-							<span class="text-secondary">{`${sat(tip)}`}</span>
-						</span>
-					</div>
-				{/if}
+		<div class="px-5 space-y-4 w-80 mx-auto mb-4">
+			{#if invoice.tip}
+				<div class="flex justify-between">
+					{$t('invoice.invoice')}
+					<span>
+						{f(amountFiat, currency)}
+						<span class="text-secondary">{`${sat(amount)}`}</span>
+					</span>
+				</div>
 
-				<div class="flex flex-wrap justify-between font-bold">
-					<span class="mr-1">{$t('invoice.total')}</span>
+				<div class="flex justify-between">
+					{$t('invoice.tip')}
 					<span
-						>{f(amountFiat + parseFloat(tipAmount), currency)}
-						<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
-					>
+						>{f(tipAmount, currency)}
+						<span class="text-secondary">{`${sat(tip)}`}</span>
+					</span>
 				</div>
+			{/if}
+
+			<div class="flex flex-wrap justify-between font-bold text-2xl !my-8">
+				<span class="mr-1">{$t('invoice.total')}</span>
+				<span
+					>{f(amountFiat + parseFloat(tipAmount), currency)}
+					<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
+				>
 			</div>
 		</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>
 </div>
 
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index ef878831..8f07fdb8 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { browser } from '$app/environment';
-	import { invoices } from '$lib/store';
+	import { invoice as inv, invoices } from '$lib/store';
 	import { back, copy, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
 	import { Icon } from '$comp';
 	import { goto } from '$app/navigation';
@@ -79,6 +79,8 @@
 	let fullscreen;
 
 	let refresh = (data) => {
+		$inv = null;
+
 		({ invoice, id } = data);
 		({
 			amount,