From a865df6eb042bb305d2f880386fd6d9e5551ec4d Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 13 Mar 2023 00:44:43 -0700
Subject: payments page formatting

---
 src/routes/(app)/payment/[id]/+page.svelte | 39 ++++++++++++++++++------------
 1 file changed, 24 insertions(+), 15 deletions(-)

(limited to 'src/routes/(app)/payment')

diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 2e170a43..c3f8cdf0 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -7,6 +7,7 @@
 
 	export let data;
 	let { user, payment: p } = data;
+
 	let { username } = user;
 	let { id, amount, created, rate, type, ref, tip, ourfee, fee, currency } = p;
 	let a = Math.abs(amount);
@@ -36,33 +37,41 @@
 			</a>
 		</div>
 	{/if}
-
 	<div>
 		<span class="text-lg text-secondary">Amount</span>
 		<div>
 			{f(fiat(a, rate), currency)}
-			{#if tip}
-				<span class="text-lg">
-					+ {f(fiat(tip, rate), currency)}
-				</span>
-			{/if}
-			<span class="text-secondary"
-				>⚡️{`${s(a)}`}
-
-				{#if tip}
-					<span class="text-lg">
-						+ ⚡️{s(tip)}
-					</span>
-				{/if}
+			<span class="text-secondary text-lg">
+				⚡️{s(a)}
 			</span>
 		</div>
 	</div>
 
+	{#if tip}
+		<div>
+			<span class="text-lg text-secondary">Tip</span>
+			<div>
+				{f(fiat(tip, rate), currency)}
+				<span class="text-secondary text-lg">
+					⚡️{s(tip)}
+				</span>
+			</div>
+		</div>
+
+		<div>
+			<span class="text-lg text-secondary">Total</span>
+			<div>
+				{f(fiat(a + tip || 0, rate), currency)}
+				<span class="text-secondary text-lg">⚡️{`${s(a + tip || 0)}`} </span>
+			</div>
+		</div>
+	{/if}
+
 	<div>
 		<span class="text-lg text-secondary">Network fee</span>
 		<div>
 			{f(fiat(fee, rate), currency)}
-			<span class="text-secondary">⚡️{`${s(fee)}`}</span>
+			<span class="text-secondary text-lg">⚡️{`${s(fee)}`}</span>
 		</div>
 	</div>
 
-- 
cgit v1.2.3