dark styles

3 files changed, 29 insertions, 101 deletions

diff --git a/src/routes/(app)/invoice/[id]/[email protected] b/src/routes/(app)/invoice/[id]/[email protected]
index 74c3fd64..da801750 100644
--- a/src/routes/(app)/invoice/[id]/[email protected]
+++ b/src/routes/(app)/invoice/[id]/[email protected]
@@ -104,7 +104,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="pb-20" data-theme={$theme}>
+<main class="min-h-dvh" data-theme={$theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     <slot />
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 66503f95..1b4ef5c8 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -6,6 +6,8 @@
   import { browser } from "$app/environment";
   import { last, showQr, amountPrompt } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";
+  import InvoiceData from "$comp/InvoiceData.svelte";
+  import InvoiceActions from "$comp/InvoiceActions.svelte";
   import InvoiceTypes from "$comp/InvoiceTypes.svelte";
   import SetAmount from "$comp/SetAmount.svelte";
   import { t } from "$lib/translations";
@@ -120,106 +122,32 @@
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
-  {#if $showQr}
-    <div>
-      <a
-        href={[types.bitcoin, types.liquid].includes(invoice.type)
-          ? invoice.text
-          : "lightning:" + invoice.text}
-      >
-        <img
-          {src}
-          class="mx-auto z-10 max-w-[360px] border-4 border-white"
-          bind:this={qr}
-          alt={txt}
-        />
-      </a>
-    </div>
-  {/if}
+  <InvoiceData
+    {src}
+    {link}
+    {qr}
+    {txt}
+    {invoice}
+    {amount}
+    {amountFiat}
+    {currency}
+    {tip}
+    {rate}
+    bind:showQr={$showQr}
+  />
 
-  {#if type !== types.lightning || !$showQr}
-    <div class="break-all text-center text-xl text-secondary flex">
-      <div class="m-auto">{txt}</div>
-    </div>
-  {/if}
-
-  {#each invoice.items as i}
-    <div class="grid grid-cols-12 text-xl">
-      <div class="col-span-1 my-auto">{i.quantity}</div>
-      <div class="mr-auto grow col-span-7 my-auto">
-        {i.name}
-      </div>
-      <div class="col-span-2 font-semibold text-right my-auto">
-        {f(i.price * i.quantity, currency)}
-      </div>
-      <div class="col-span-2 text-secondary text-right text-lg my-auto">
-        {sat(btc(i.price * i.quantity, rate))}
-      </div>
-    </div>
-  {/each}
-
-  {#if amount > 0}
-    <div class="text-center font-bold text-2xl">
-      <div>
-        {f(amountFiat, currency)}
-
-        {#if tip}
-          <span class="text-sm">
-            +{f(tip * (rate / sats), currency)}
-          </span>
-        {/if}
-      </div>
-      <div>
-        <span class="text-secondary font-normal text-xl"
-          >⚡️{`${s(amount)}`}</span
-        >
-
-        {#if tip}
-          <span class="text-sm text-secondary font-normal">
-            +⚡️{s(tip)}
-          </span>
-        {/if}
-      </div>
-    </div>
-  {/if}
-
-  <div class="text-secondary space-y-2 text-xl pt-2">
-    <button type="button" class="btn" on:click={() => copy(txt)}>
-      <iconify-icon icon="ph:copy-bold" width="32" />
-      <div class="my-auto">
-        {$t("payments.copy")}
-      </div>
-    </button>
-
-    {#if user?.id === invoice?.user?.id}
-      <button class="btn" on:click={toggleAmount}>
-        <iconify-icon icon="ph:pencil-bold" width="32" />
-        <div class="my-auto">{$t("payments.setAmount")}</div>
-      </button>
-    {:else}
-      <a href={link} class="w-full">
-        <button class="btn">
-          <iconify-icon icon="ph:wallet-bold" width="32" />
-          <div class="my-auto">{$t("payments.openLink")}</div>
-        </button>
-      </a>
-    {/if}
-
-    {#if type === types.lightning}
-      <div class="w-full flex justify-center gap-2 flex-wrap">
-        <button class="btn" on:click={() => ($showQr = !$showQr)}>
-          {#if $showQr}
-            <iconify-icon icon="ph:text-align-center-bold" width="32" />
-          {:else}
-            <iconify-icon icon="ph:qr-code-bold" width="32" />
-          {/if}
-          <div class="my-auto">
-            {$showQr ? $t("payments.showText") : $t("payments.showQr")}
-          </div></button
-        >
-      </div>
-    {/if}
-  </div>
+  <InvoiceActions
+    {toggleAmount}
+    {user}
+    {invoice}
+    {copy}
+    {link}
+    {type}
+    {types}
+    {txt}
+    t={$t}
+    bind:showQr={$showQr}
+  />
 
   <InvoiceTypes {aid} {user} {type} {types} {setType} t={$t} />
 </div>
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index e4279e48..b3b6e71a 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -80,6 +80,6 @@
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
 </a>
 
-<div class="fixed bottom-10 w-full text-center">
+<div class="flex justify-center">
   {$t("payments.tapAnywhere")}
 </div>