dark styles

5 files changed, 28 insertions, 44 deletions

diff --git a/src/routes/(app)/ecash/[id]/[...version]/+page.svelte b/src/routes/(app)/ecash/[id]/[...version]/+page.svelte
index d9829c12..2b73bc3d 100644
--- a/src/routes/(app)/ecash/[id]/[...version]/+page.svelte
+++ b/src/routes/(app)/ecash/[id]/[...version]/+page.svelte
@@ -2,7 +2,6 @@
   import { enhance } from "$app/forms";
   import { copy, sats, f, s } from "$lib/utils";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
   import { page } from "$app/stores";
 
   export let data;
@@ -21,34 +20,32 @@
 {/if}
 
 <div class="flex flex-wrap gap-2 text-xl">
-  <button
-    type="button"
-    class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
-    on:click={() => copy(link)}
-  >
-    <Icon icon="link" style="w-8 my-auto" />
+  <button type="button" class="btn" on:click={() => copy(link)}>
+    <iconify-icon icon="ph:link-bold" width="32" />
     <div class="my-auto">{$t("payments.shareLink")}</div>
   </button>
 
   {#if spent < total}
     {#if external}
       <a href={`/ecash/${id}/swap`} class="contents">
-        <button
-          type="submit"
-          class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
-        >
-          <Icon icon="receive" style="w-8 my-auto" />
+        <button type="submit" class="btn">
+          <iconify-icon
+            icon="ph:hand-coins-bold"
+            width="32"
+            flip="horizontal"
+          />
           <div class="my-auto">{$t("payments.swap")}</div>
         </button>
       </a>
     {:else}
       <form method="POST" use:enhance class="w-full">
         <input type="hidden" name="token" bind:value={token} />
-        <button
-          type="submit"
-          class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
-        >
-          <Icon icon="receive" style="w-8 my-auto" />
+        <button type="submit" class="btn">
+          <iconify-icon
+            icon="ph:hand-coins-bold"
+            width="32"
+            flip="horizontal"
+          />
           <div class="my-auto">{$t("payments.redeem")}</div>
         </button>
       </form>
@@ -56,7 +53,7 @@
   {/if}
 
   <button
-    class="border rounded-2xl px-6 py-5 w-full break-all text-xl hover:bg-slate-100"
+    class="btn break-all text-xl !h-auto !py-5 font-normal"
     on:click={() => copy(token)}
   >
     {token}
@@ -64,21 +61,15 @@
 
   {#if version === 4}
     <a data-sveltekit-reload href={`/ecash/${id}/3`} class="contents">
-      <button
-        type="button"
-        class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
-      >
-        <Icon icon="settings" style="w-8 my-auto" />
+      <button type="button" class="btn">
+        <iconify-icon icon="ph:gear-bold" width="32" />
         <div class="my-auto">{$t("payments.legacyVersion")}</div>
       </button>
     </a>
   {:else}
     <a data-sveltekit-reload href={`/ecash/${id}`} class="contents">
-      <button
-        type="button"
-        class="flex border rounded-2xl px-6 py-5 font-bold hover:opacity-80 w-full justify-center gap-2"
-      >
-        <Icon icon="settings" style="w-8 my-auto" />
+      <button type="button" class="btn">
+        <iconify-icon icon="ph:gear-bold" width="32" />
         <div class="my-auto">{$t("payments.newVersion")}</div>
       </button>
     </a>
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 619c6d04..150c2bc4 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -190,9 +190,7 @@
 
   {#if type === types.ecash && amount < 0}
     <a href={`/ecash/${memo}`} class="block">
-      <button
-        class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white gap-2 items-center"
-      >
+      <button class="btn">
         <img src="/images/cash.png" class="w-8" />
         <div>{$t("payments.ecashToken")}</div>
       </button>
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index 6b938c38..20fed58a 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -34,18 +34,13 @@
   <div class="flex justify-center gap-2">
     <button
       type="button"
-      class="hover:opacity-80 bg-black text-white rounded-2xl py-3 px-4 mt-2 border font-bold"
+      class="btn !w-auto grow"
       on:click|preventDefault={setMax}
       on:keydown={setMax}>Max ⚡️{s(balance)}</button
     >
 
-    <form action={`/send/bitcoin/${address}/${amount}`}>
-      <button
-        use:focus
-        bind:this={submit}
-        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"
-      >
+    <form action={`/send/bitcoin/${address}/${amount}`} class="contents">
+      <button use:focus bind:this={submit} type="submit" class="btn !w-auto grow btn-accent">
         {$t("payments.next")}
       </button>
     </form>
diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
index 903bd372..15080493 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
@@ -193,7 +193,7 @@
           use:focus
           bind:this={submit}
           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"
+          class="btn btn-accent"
           disabled={submitting}
         >
           {#if submitting}
diff --git a/src/routes/(app)/send/ecash/+page.svelte b/src/routes/(app)/send/ecash/+page.svelte
index fa3f97da..3a708f80 100644
--- a/src/routes/(app)/send/ecash/+page.svelte
+++ b/src/routes/(app)/send/ecash/+page.svelte
@@ -43,10 +43,10 @@
     <Numpad bind:amount bind:fiat {currency} {submit} bind:rate={$rate} />
     <input type="hidden" name="amount" bind:value={amount} />
 
-    <div>
+    <div class="flex gap-2">
       <button
         type="button"
-        class="hover:opacity-80 rounded-2xl py-5 px-6 mt-2 font-bold w-full mx-auto bg-primary"
+        class="btn !w-auto grow"
         on:click|preventDefault={setMax}
         disabled={submitting}
         on:keydown={setMax}>Max ⚡️{s(balance)}</button
@@ -56,12 +56,12 @@
         use:focus
         bind:this={submit}
         type="submit"
-        class="opacity-100 hover:opacity-80 rounded-2xl border py-5 font-bold mt-2 bg-black text-white px-6 w-full flex justify-center gap-2 mx-auto"
+        class="btn btn-accent !w-auto grow"
       >
         {#if submitting}
           <Spinner />
         {:else}
-          <div class="my-auto">{$t("payments.mint")}</div>
+          <div class="my-auto">{$t("payments.next")}</div>
         {/if}
       </button>
     </div>