lightning bolt

3 files changed, 28 insertions, 24 deletions

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 0129d1ab..ebd46f44 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -34,7 +34,7 @@
       {#if isNaN(rate)}
         <div class="text-gray-200">&mdash;</div>
       {:else}
-        {f(fiat(balance, rate))} {user.currency}
+        {f(fiat(balance, rate), user.currency)}
       {/if}
     </div>
   {/if}
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>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index cdd01aac..4dae235a 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -1,15 +1,8 @@
 <script>
-  let {
-    aid,
-    user,
-    type,
-    types,
-    t,
-    setType
-  } = $props();
+  let { aid, invoice, user, type, types, t, setType } = $props();
 </script>
 
-{#if aid === user?.id}
+{#if invoice.uid === aid}
   <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
     <button
       class="btn flex-nowrap"
@@ -38,7 +31,10 @@
       onclick={() => setType(types.lightning)}
     >
       <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
-        <div class="m-auto">⚡️</div>
+        <div class="m-auto">
+          <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+          ></iconify-icon>
+        </div>
       </div>
       <div class="my-auto text-lg">Lightning</div>
     </button>