ui tweaks

5 files changed, 12 insertions, 23 deletions

diff --git a/src/app.css b/src/app.css
index 168ea02a..7f8e96fd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -104,7 +104,7 @@ button {
   cursor: pointer !important;
 }
 .btn {
-  @apply rounded-2xl btn-lg btn-block outline-none h-16 cursor-pointer;
+  @apply rounded-none btn-lg btn-block outline-none h-16 cursor-pointer;
 }
 
 @layer components {
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index f3f85b13..cc11587c 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -158,7 +158,7 @@
 
   <div class="flex w-full text-xl gap-2">
     <a href={"/invoice"} class="contents" onclick={(e) => setAccount(e, "/invoice")}>
-      <button class="btn !w-auto flex-1 !rounded-none" data-testid="account-receive">
+      <button class="btn !w-auto flex-1" data-testid="account-receive">
         <iconify-icon noobserver icon="ph:hand-coins-bold" width="32" flip="horizontal"
         ></iconify-icon>
         <div class="my-auto hidden sm:block">{$t("user.dashboard.receive")}</div>
@@ -166,7 +166,7 @@
     </a>
 
     <a href={`/send`} class="contents" onclick={(e) => setAccount(e, "/send")}>
-      <button type="button" class="btn btn-accent !w-auto flex-1 !rounded-none">
+      <button type="button" class="btn btn-accent !w-auto flex-1">
         <iconify-icon noobserver icon="ph:paper-plane-right-bold" width="32"></iconify-icon>
         <div class="my-auto hidden sm:block">{$t("user.dashboard.send")}</div>
       </button>
diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index 356fe18a..53447fec 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -66,18 +66,7 @@
     </button>
   </div>
 
-  {#if txt?.length > 120}
-    <div class="w-full flex justify-center gap-2 flex-wrap">
-      <button class="btn" onclick={() => (showQr = !showQr)}>
-        {#if showQr}
-          <iconify-icon noobserver icon="ph:text-align-center-bold" width="32"></iconify-icon>
-        {:else}
-          <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
-        {/if}
-        <div class="my-auto">{showQr ? t("payments.showText") : t("payments.showQr")}</div>
-      </button>
-    </div>
-  {/if}
+
 
   <div class="flex gap-2">
     {#if aid === user.id}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 2852e97a..84a52308 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -50,15 +50,15 @@
   </div>
 {/if}
 
-{#if !showQr || txt?.length <= 120}
-  <div
+  <button
     data-testid="invoice-text"
-onclick={() => copy(txt)} aria-label="Copy invoice"
-    class="break-all text-center text-secondary text-xl flex gap-1 items-center justify-center"
+    onclick={() => copy(txt)}
+    aria-label="Copy invoice"
+    class="w-full text-center text-secondary text-xl flex gap-1 items-center justify-center cursor-pointer hover:opacity-70"
   >
-    {txt}
-  </div>
-{/if}
+    <span class="truncate">{txt}</span>
+    <iconify-icon noobserver icon="ph:copy-bold" width="32" class="shrink-0"></iconify-icon>
+  </button>
 
 {#each invoice.items as i}
   {@const itemTotal = i.price * i.quantity}
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 2810b39c..d8f30fd1 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -141,7 +141,7 @@
   let txt = $derived([types.bitcoin, types.liquid].includes(type) ? hash : text);
 </script>
 
-<div class="invoice container mx-auto max-w-xl px-4 space-y-2">
+<div class="invoice container mx-auto max-w-xl px-4 pb-4 space-y-2">
   <InvoiceData
     {src}
     {link}