From 4abcb74a24cff284842b132316f047b39d878d92 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sun, 6 Nov 2022 21:36:11 -0800
Subject: invoice and popup styles

---
 src/components/Invoice.svelte | 44 +++++++++++++++++++++++-------------------
 src/components/Request.svelte | 45 +++++++++++++++++++++----------------------
 2 files changed, 46 insertions(+), 43 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index 4b42f851..d68824a8 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { f, sat, sats } from '$lib/utils';
 	import { fly } from 'svelte/transition';
 	import { Avatar, Icon } from '$comp';
 	import { invoice } from '$lib/store';
@@ -7,28 +8,31 @@
 </script>
 
 {#if $invoice}
-	<div
-		class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
-		in:fly
-	>
-		<div class="my-auto md:w-1/2">
-			<div class="flex">
-				<Avatar user={$invoice.user.username} size={12} />
-				<h1 class="my-auto"><b>{$invoice.user.username}</b> sent an invoice</h1>
+	<div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
+		<div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
+			<div class="my-auto mx-auto">
+				<div class="flex">
+					<Avatar user={$invoice.user.username} size={12} />
+					<h1 class="my-auto">
+						<b>{$invoice.user.username}</b> sent an invoice for
+						<b>{f(($invoice.amount * $invoice.rate) / sats, $invoice.currency)}</b>
+						{sat($invoice.amount)}
+					</h1>
+				</div>
 			</div>
-		</div>
-		<div class="mx-auto my-auto">
-			<a href={`/invoice/${$invoice.uuid}`}>
-				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
-					Pay
+			<div class="mx-auto my-auto flex gap-2">
+				<a href={`/invoice/${$invoice.uuid}/tip`}>
+					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40">
+						Pay
+					</button>
+				</a>
+				<button
+					class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40"
+					on:click={() => ($invoice = undefined)}
+				>
+					Dismiss
 				</button>
-			</a>
+			</div>
 		</div>
-		<button
-			class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
-			on:click={() => ($invoice = undefined)}
-		>
-			<Icon icon="close" />
-		</button>
 	</div>
 {/if}
diff --git a/src/components/Request.svelte b/src/components/Request.svelte
index 2c87d436..e1071272 100644
--- a/src/components/Request.svelte
+++ b/src/components/Request.svelte
@@ -7,31 +7,30 @@
 </script>
 
 {#if $request}
-	<div
-		class="flex flex-wrap md:flex-nowrap fixed bottom-0 border-t w-full p-4 bg-white z-50"
-		in:fly
-	>
-		<div class="my-auto md:w-1/2">
-			<div class="flex">
-				<Avatar user={$request.requester} size={12} />
-				<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+	<div class="fixed bottom-0 border-t w-full p-4 bg-white z-50" in:fly>
+		<div class="flex flex-wrap md:flex-nowrap max-w-xl mx-auto gap-2">
+			<div class="my-auto mx-auto">
+				<div class="flex">
+					<Avatar user={$request.requester} size={12} />
+					<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+				</div>
+				{#if $request.memo}
+					<div class="border-l-4 pl-4 my-2">{$request.memo}</div>
+				{/if}
 			</div>
-			{#if $request.memo}
-				<div class="border-l-4 pl-4 my-2">{$request.memo}</div>
-			{/if}
-		</div>
-		<div class="mx-auto my-auto">
-			<a href={`/${user.username}/receive`}>
-				<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full">
-					Create invoice
+			<div class="mx-auto my-auto flex gap-2">
+				<a href={`/${user.username}/receive`}>
+					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-40">
+						Invoice
+					</button>
+				</a>
+				<button
+					class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80 w-full"
+					on:click={() => ($request = undefined)}
+				>
+					Dismiss
 				</button>
-			</a>
+			</div>
 		</div>
-		<button
-			class="absolute right-4 top-4 ml-auto mb-auto rounded-full border font-bold hover:opacity-80 p-3"
-			on:click={() => ($request = undefined)}
-		>
-			<Icon icon="close" />
-		</button>
 	</div>
 {/if}
-- 
cgit v1.2.3