dark styles

15 files changed, 115 insertions, 259 deletions

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 4316c2bb..491dfc8c 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -113,7 +113,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="pb-20 min-h-screen" data-theme={$theme}>
+<main class="min-h-dvh" data-theme={$theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     <slot />
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 5ad30f46..bb3c0d15 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -3,7 +3,6 @@
   import { browser } from "$app/environment";
   import { hexToUint8Array } from "uint8array-extras";
   import { copy, f, get, post, s, sats, success, fail, si } from "$lib/utils";
-  import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
   import { sign, send } from "$lib/nostr";
   import { bech32m } from "@scure/base";
@@ -127,7 +126,7 @@
       class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
     >
       <div class="my-auto break-words">{display || username}</div>
-      <Icon icon="qr" style="w-8 invert my-auto" />
+      <iconify-icon icon="ph:qr-code-bold" width="32" />
     </button>
 
     {#if subject.address || subject.about}
@@ -179,13 +178,10 @@
               </div>
               <div class="flex mb-auto gap-1">
                 <button class="my-auto" on:click={() => copy(lnaddr)}
-                  ><Icon
-                    icon="copy"
-                    style="max-w-max w-8 min-w-[32px]"
-                  /></button
+                  ><iconify-icon icon="ph:copy-bold" width="32" /></button
                 >
                 <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
-                  <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+                  <iconify-icon icon="ph:qr-code-bold" width="32" />
                 </a>
               </div>
             </div>
@@ -199,7 +195,7 @@
             </div>
             <div class="flex mb-auto gap-1">
               <button class="my-auto" on:click={() => copy(profile)}
-                ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
+                ><iconify-icon icon="ph:copy-bold" width="32" /></button
               >
               <a
                 href={`/qr/${encodeURIComponent(
@@ -207,7 +203,7 @@
                 )}`}
                 class="my-auto"
               >
-                <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+                <iconify-icon icon="ph:qr-code-bold" width="32" />
               </a>
             </div>
           </div>
@@ -220,10 +216,10 @@
             </div>
             <div class="flex my-auto gap-1">
               <button class="my-auto" on:click={() => copy(npub)}
-                ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
+                ><iconify-icon icon="ph:copy-bold" width="32" /></button
               >
               <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto">
-                <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+                <iconify-icon icon="ph:qr-code-bold" width="32" />
               </a>
             </div>
           </div>
@@ -234,24 +230,14 @@
     <div class="flex flex-wrap gap-2 w-full text-lg">
       {#if user && user.username !== subject.username && subject.pubkey}
         {#if following}
-          <button
-            class="mx-auto rounded-2xl border py-2 px-3 font-bold hover:opacity-80 flex bg-black text-white grow"
-            on:click={unfollow}
-          >
-            <div class="mx-auto flex">
-              <Icon icon={"profile"} style="my-auto w-8 mr-2 invert" />
-              <div class="my-auto">{$t("user.unfollow")}</div>
-            </div>
+          <button class="btn" on:click={unfollow}>
+            <iconify-icon icon="ph:user-bold" width="32" />
+            <div class="my-auto">{$t("user.unfollow")}</div>
           </button>
         {:else}
-          <button
-            class="mx-auto rounded-2xl border py-2 px-3 font-bold hover:opacity-80 flex grow"
-            on:click={follow}
-          >
-            <div class="mx-auto flex">
-              <Icon icon={"profile"} style="my-auto h-6 mr-2" />
-              <div class="my-auto">{$t("user.follow")}</div>
-            </div>
+          <button class="btn" on:click={follow}>
+            <iconify-icon icon="ph:user-bold" width="32" />
+            <div class="my-auto">{$t("user.follow")}</div>
           </button>
         {/if}
       {/if}
@@ -277,7 +263,7 @@
             class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60"
           >
             <div class="mx-auto flex">
-              <Icon icon="clock" style="mr-2 my-auto w-8" />
+              <iconify-icon icon="ph:clock" width="32" />
             </div>
           </button>
         </form>
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 446003e2..e9e5ca43 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -5,6 +5,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";
@@ -80,87 +82,32 @@
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
-  {#if $showQr}
-    <div>
-      <a href={link}>
-        <img
-          {src}
-          class="mx-auto z-10 max-w-[360px] border-4 border-white"
-          bind:this={qr}
-          alt={txt}
-        />
-      </a>
-    </div>
-  {/if}
-
-  <div class="break-all text-center text-secondary text-xl">
+  <InvoiceData
+     {src}
+    {link}
+    {qr}
     {txt}
-  </div>
-
-  {#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
-        >
+    {invoice}
+    {amount}
+    {amountFiat}
+    {currency}
+    {tip}
+    {rate}
+    showQr={$showQr}
+  />
 
-        {#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="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
-        >
-          <iconify-icon icon="ph:device-mobile-bold" width="32" />
-          <div class="my-auto">{$t("payments.openLink")}</div>
-        </button>
-      </a>
-    {/if}
-  </div>
+  <InvoiceActions
+    {toggleAmount}
+    {user}
+    {invoice}
+    {copy}
+    {link}
+    {type}
+    {types}
+    {showQr}
+    {txt}
+    t={$t}
+  />
 
   <InvoiceTypes {aid} {user} {type} {types} {setType} t={$t} />
 </div>
diff --git a/src/routes/(app)/fund/[id]/sweep/+page.svelte b/src/routes/(app)/fund/[id]/sweep/+page.svelte
index e142f00d..927c59d3 100644
--- a/src/routes/(app)/fund/[id]/sweep/+page.svelte
+++ b/src/routes/(app)/fund/[id]/sweep/+page.svelte
@@ -36,6 +36,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>
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>
diff --git a/src/routes/(app)/ln/withdrawal/sent/+page.svelte b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
index 90814960..143a92f4 100644
--- a/src/routes/(app)/ln/withdrawal/sent/+page.svelte
+++ b/src/routes/(app)/ln/withdrawal/sent/+page.svelte
@@ -23,6 +23,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>
diff --git a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
index 5089e78c..75e66a10 100644
--- a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
@@ -97,7 +97,7 @@
         <button
           type="button"
           bind:this={next}
-          class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40"
+          class="btn"
           on:click={setAmount}
           on:keydown={setAmount}
         >
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index 93320423..90245bb6 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -168,9 +168,12 @@
     </div>
 
     <div class="text-base">
-      {#each payments as p}
-        <a href={`/payment/${p.id}`}>
-          <div class="grid grid-cols-12 border-b h-24 hover:bg-base-200 px-4">
+      {#each payments as p, i}
+        <a href={`/payment/${p.id}`} class="contents">
+          <div
+            class="grid grid-cols-12 border-b border-base-200 h-24 hover:bg-base-200 px-4"
+            class:border-b-0={i === payments.length - 1}
+          >
             <div class="whitespace-nowrap my-auto col-span-3">
               <div class="font-bold" class:text-red-800={p.amount < 0}>
                 {f(Math.abs(p.amount) * (p.rate / sats), p.currency)}
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index fe60c9a6..5a9729a2 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -166,7 +166,7 @@
     />
   {/if}
 
-  <form method="POST" use:enhance={handler(toggle)}>
+  <form method="POST" use:enhance={handler(toggle)} class="space-y-2">
     <input name="address" value={address} type="hidden" />
     <input name="amount" value={amount} type="hidden" />
     <input name="payreq" value={payreq} type="hidden" />
@@ -178,7 +178,7 @@
         <button
           use:focus
           type="submit"
-          class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40"
+          class="btn btn-primary"
           disabled={submitting}
         >
           {#if submitting}
@@ -191,17 +191,15 @@
         <button
           bind:this={submit}
           type="button"
-          class="opacity-100 hover:opacity-80'} rounded-2xl border py-5 font-bold mx-auto mt-2 bg-black text-white px-6 w-40"
+          class="btn !w-auto"
           on:click={setAmount}
         >
           {$t("payments.next")}
         </button>
       {/if}
     </div>
-  </form>
-  <div class="flex my-10 text-xl">
-    <button class="mx-auto" on:click={external}
+    <button type="button" class="btn" on:click={external}
       >{$t("payments.moreOptions")}</button
     >
-  </div>
+  </form>
 </div>
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 7324c4f1..29dd4c05 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -107,39 +107,39 @@
             {$t("payments.maxFeeDesc")}
           </div>
 
-          <div class="flex">
+          <label
+            class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2 text-left"
+          >
             <input
               id="maxfee"
               name="maxfee"
               bind:value={maxfee}
-              class="border-r-0 rounded-r-none py-2"
+              class="blank !grow"
             />
-            <div
-              class="text-gray-600 rounded-r-2xl p-4 my-auto rounded-l-none rounded border bg-gray-100"
-            >
-              ⚡️
-            </div>
-          </div>
+            <div class="ml-auto">⚡️</div>
+          </label>
         </div>
-      {:else}
-        <button on:click={() => (showMax = !showMax)}>Advanced settings</button>
-        <input name="maxfee" type="hidden" bind:value={maxfee} />
       {/if}
 
-      <div class="flex w-full">
-        <button
-          type="submit"
-          class="opacity-100 hover:opacity-80 rounded-2xl border py-3 font-bold mt-2 bg-black text-white px-4 w-24 mx-auto"
-          disabled={loading}
-          use:focus
+      <button
+        type="submit"
+        class="btn btn-primary"
+        disabled={loading}
+        use:focus
+      >
+        {#if loading}
+          <Spinner />
+        {:else}
+          {$t("payments.send")}
+        {/if}
+      </button>
+
+      {#if !(form?.message || showMax)}
+        <button type="button" class="btn" on:click={() => (showMax = !showMax)}
+          >Advanced settings</button
         >
-          {#if loading}
-            <Spinner />
-          {:else}
-            {$t("payments.send")}
-          {/if}
-        </button>
-      </div>
+        <input name="maxfee" type="hidden" bind:value={maxfee} />
+      {/if}
     </form>
   {:else}
     <form
@@ -152,13 +152,7 @@
       <input name="rate" value={$rate} type="hidden" />
 
       <Numpad bind:amount={a} {currency} bind:rate={$rate} />
-      <button
-        type="submit"
-        class="bg-black text-white rounded-xl h-[48px] flex w-full justify-center items-center font-semibold
-				opacity-100 hover:opacity-80"
-      >
-        Next
-      </button>
+      <button type="submit" class="btn"> Next </button>
     </form>
   {/if}
 </div>
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
index a71a5360..b4f6ab68 100644
--- a/src/routes/(app)/sent/[id]/+page.svelte
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -41,6 +41,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>
diff --git a/src/routes/(app)/verify/[code]/+page.svelte b/src/routes/(app)/verify/[code]/+page.svelte
index 1e099dae..de5212e5 100644
--- a/src/routes/(app)/verify/[code]/+page.svelte
+++ b/src/routes/(app)/verify/[code]/+page.svelte
@@ -30,6 +30,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>
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index c65a29b0..f83ba8c0 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -26,19 +26,19 @@
     and connect it to your own Bitcoin and Lightning nodes. The code is
     available for download at <a
       href="https://github.com/coinos"
-      class="text-black">https://github.com/coinos</a
+      class="text-primary-content">https://github.com/coinos</a
     >
   </p>
 
   <p class="text-secondary">
     Coinos has a simple REST API that can be used to register accounts and make
     payments and queries. The following examples show how you can call the API
-    with <a href="https://curl.se/" class="text-black">curl</a> from your command
+    with <a href="https://curl.se/" class="text-primary-content">curl</a> from your command
     line.
   </p>
 
   <h2 class="text-2xl">API Base URL</h2>
-  <div class="bg-black text-white rounded-lg p-4 flex gap-4">
+  <div class="bg-primary text-primary-content rounded-lg p-4 flex gap-4">
     <div>{api}</div>
     <button class="ml-auto my-auto invert opacity-90" on:click={() => copy(api)}
       ><Icon icon="copy" style="w-10 max-w-none" /></button
@@ -57,7 +57,7 @@
     Save it in a variable called <b>$token</b> to run the examples.
   </p>
 
-  <div class="bg-black text-white rounded-lg p-4 flex gap-4">
+  <div class="bg-primary text-primary-content rounded-lg p-4 flex gap-4">
     <div class="w-full break-all">{tokenSample}</div>
     <button
       class="ml-auto my-auto invert opacity-90"