From bee96ca44e871b0482012be50e8e7686f534c5a3 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 12 Nov 2024 23:36:15 -0800
Subject: lightning bolt

---
 src/components/InvoiceData.svelte | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

(limited to 'src/components/InvoiceData.svelte')

diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 2298d150..c6721829 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -10,7 +10,7 @@
     amountFiat,
     currency,
     tip,
-    rate
+    rate,
   } = $props();
 </script>
 
@@ -49,23 +49,31 @@
 
 {#if amount > 0}
   <div class="text-center font-bold text-2xl">
-    <div>
-      {f(amountFiat, currency)}
+    <div class="flex justify-center items-end gap-2">
+      <div>{f(amountFiat, currency)}</div>
 
       {#if tip}
-        <span class="text-sm">
-          +{f(tip * (rate / sats), currency)}
-        </span>
+        <div class="text-base flex items-center gap-1">
+          <div>+</div>
+          <div>{f(tip * (rate / sats), currency)}</div>
+        </div>
       {/if}
     </div>
-    <div>
-      <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span
-      >
-
+    <div class="flex justify-center items-end text-secondary font-normal text-xl gap-2">
+      <div class="flex items-center">
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon>
+        <div>
+          {`${s(amount)}`}
+        </div>
+      </div>
       {#if tip}
-        <span class="text-sm text-secondary font-normal">
-          +⚡️{s(tip)}
-        </span>
+        <div class="text-base flex items-center">
+          <div>+</div>
+          <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+          ></iconify-icon>
+          <div>{s(tip)}</div>
+        </div>
       {/if}
     </div>
   </div>
-- 
cgit v1.2.3