qr fade in

2 files changed, 8 insertions, 14 deletions

diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index c996a913..ca7d5e7b 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -16,15 +16,19 @@
     t,
   } = $props();
 
+  let loaded = $state(false);
   let { memo } = $derived(invoice);
+  let load = () => (loaded = true);
 </script>
 
 {#if showQr}
-  <div class="max-w-[360px] mx-auto min-h-[340px]">
+  <div class="max-w-[360px] mx-auto min-h-[360px]">
     <a href={link}>
       <img
         src={`/qr/${encodeURIComponent(invoice.text)}/raw`}
-        class="z-10 border-4 border-white"
+        class="z-10 border-4 border-white opacity-0 transition-opacity duration-300"
+        class:opacity-100={loaded}
+        onload={load}
         alt={txt}
       />
     </a>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index 00b5cfb3..532f5699 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -55,22 +55,12 @@
       <div class="my-auto text-lg">Liquid</div>
     </button>
 
-    <button
-      class="btn flex-nowrap"
-      class:bg-base-300={type === types.liquid}
-      class:text-secondary={type === types.liquid}
-      onclick={() => goto("/scan")}
-    >
+    <button class="btn flex-nowrap" onclick={() => goto("/scan")}>
       <iconify-icon icon="ph:camera-bold" width="32"></iconify-icon>
       <div class="my-auto text-lg">{t("user.send.scan")}</div>
     </button>
 
-    <button
-      class="btn flex-nowrap"
-      class:bg-base-300={type === types.bitcoin}
-      class:text-secondary={type === types.bitcoin}
-      onclick={() => goto("/receive")}
-    >
+    <button class="btn flex-nowrap" onclick={() => goto("/receive")}>
       <iconify-icon icon="ph:clipboard-text-bold" width="32"></iconify-icon>
       <div class="my-auto text-lg">{t("user.send.paste")}</div>
     </button>