dark styles

20 files changed, 243 insertions, 364 deletions

diff --git a/src/app.css b/src/app.css
index 3a60036e..30bb63ee 100644
--- a/src/app.css
+++ b/src/app.css
@@ -25,11 +25,19 @@ input {
   @apply input input-bordered input-lg input-primary;
 }
 
+input.blank {
+  all: unset;
+}
+
 textarea {
   @apply textarea textarea-bordered textarea-lg textarea-primary;
 }
 
-input, textarea {
+select {
+  @apply select select-bordered select-lg select-primary;
+}
+
+input, textarea, select  {
   @apply w-full rounded-2xl;
 }
 
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 75fc4479..9b311d35 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <footer
-  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around mb-20"
+  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around pb-20"
 >
   <div class="space-y-5">
     <div class="text-center w-full">
@@ -30,9 +30,7 @@
     <div class="flex gap-2 justify-center sm:hidden">
       <div>
         <a href="/register">
-          <button
-            class="bg-black text-white border rounded-full px-4 py-2 font-bold hover:opacity-80 text-lg"
-          >
+          <button class="btn">
             {$t("nav.startInSeconds")}
           </button>
         </a>
@@ -40,9 +38,7 @@
     </div>
     <div class="w-full flex">
       <div class="mx-auto">
-        <LocaleSelector
-          style="p-2 text-center hover:opacity-80 cursor-pointer border rounded-full"
-        />
+        <LocaleSelector />
       </div>
     </div>
   </div>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
new file mode 100644
index 00000000..35f1bbf1
--- /dev/null
+++ b/src/components/InvoiceTypes.svelte
@@ -0,0 +1,56 @@
+<script>
+  export let aid, user, type, types, t, setType;
+</script>
+
+{#if aid === user?.id}
+  <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
+    <button
+      class="btn"
+      class:bg-base-300={type === types.bitcoin}
+      class:text-secondary={type === types.bitcoin}
+      on:click={() => setType(types.bitcoin)}
+    >
+      <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+      <div class="my-auto text-lg">Bitcoin</div>
+    </button>
+
+    <button
+      class="btn"
+      class:bg-base-300={type === types.liquid}
+      class:text-secondary={type === types.liquid}
+      on:click={() => setType(types.liquid)}
+    >
+      <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
+      <div class="my-auto text-lg">Liquid</div>
+    </button>
+
+    <button
+      class="btn"
+      class:bg-base-300={type === types.lightning}
+      class:text-secondary={type === types.lightning}
+      on:click={() => setType(types.lightning)}
+    >
+      <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
+        <div class="m-auto">⚡️</div>
+      </div>
+      <div class="my-auto text-lg">Lightning</div>
+    </button>
+
+    <a href={`/receive`} class="block contents">
+      <button class="btn">
+        <img src="/images/cash.png" class="w-8 my-auto" />
+        <div class="my-auto text-lg">Ecash</div>
+      </button>
+    </a>
+  </div>
+
+  {#if type === types.liquid}
+    <div class="flex justify-center">
+      <div class="my-auto text-xl text-center text-secondary">
+        {t("payments.onlyLbtc")}
+        <span class="text-teal-500 font-bold">L-BTC</span>,
+        {t("payments.dontDeposit")}
+      </div>
+    </div>
+  {/if}
+{/if}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index e6bfc07c..b3ecd159 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -47,27 +47,17 @@
         >
       {/if}
       {#if user}
-        <button
-          class="border rounded-full px-6 py-2 font-bold"
-          on:click={() => goto(`/${user.username}`)}
+        <button class="btn !w-auto" on:click={() => goto(`/${user.username}`)}
           >Home
         </button>
-        <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold"
-          on:click={() => goto("/logout")}
-        >
+        <button class="btn !w-auto" on:click={() => goto("/logout")}>
           {$t("nav.signOut")}
         </button>
       {:else}
-        <button
-          class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
-          on:click={() => goto("/register")}
-          >{$t("nav.startInSeconds")}
+        <button class="btn !w-auto" on:click={() => goto("/register")}
+          >{$t("nav.register")}
         </button>
-        <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
-          on:click={() => goto("/login")}
-        >
+        <button class="btn !w-auto" on:click={() => goto("/login")}>
           {$t("nav.signIn")}
         </button>
       {/if}
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 154944fa..32a6d6f4 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -29,10 +29,7 @@
 
     <div class="flex justify-center">
       <a href="/register">
-        <button
-          use:focus
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
-        >
+        <button use:focus class="btn !rounded-full bg-primary text-primary-content hover:bg-primary hover:bg-opacity-80">
           {$t("nav.startInSeconds")}
         </button>
       </a>
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index a7966977..d837a534 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -11,16 +11,8 @@
   };
 </script>
 
-<select name="language" bind:value={l} class={style} on:change={handleChange}>
+<select name="language" bind:value={l} on:change={handleChange}>
   {#each $locales as locale}
     <option value={locale}>{$t(`lang.${locale}`)}</option>
   {/each}
 </select>
-
-<style>
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-</style>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 5b9aaa01..694f5754 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -230,7 +230,7 @@
         {#if value === arrow}
           <button
             type="button"
-            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
+            class="btn"
             on:click|preventDefault|stopPropagation={() => handleInput(value)}
           >
             <Left />
@@ -238,7 +238,7 @@
         {:else}
           <button
             type="button"
-            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+            class="btn"
             on:click|preventDefault|stopPropagation={() => handleInput(value)}
             >{value}</button
           >
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
new file mode 100644
index 00000000..7f007adc
--- /dev/null
+++ b/src/components/SetAmount.svelte
@@ -0,0 +1,58 @@
+<script>
+  import Numpad from "$comp/Numpad.svelte";
+  import Toggle from "$comp/Toggle.svelte";
+
+  export let currency,
+    rate,
+    fiat,
+    submit,
+    settingAmount,
+    setAmount,
+    newAmount,
+    toggleAmount,
+    t,
+    amountPrompt;
+</script>
+
+{#if settingAmount}
+  <div
+    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+  >
+    <div
+      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-base-100 space-y-5 top-5"
+    >
+      <form on:submit|preventDefault={setAmount} class="space-y-5">
+        <Numpad
+          bind:amount={newAmount}
+          bind:currency
+          bind:rate
+          bind:fiat
+          bind:submit
+        />
+        <div class="w-full flex flex-wrap gap-2">
+          <button
+            bind:this={submit}
+            type="submit"
+            on:click={setAmount}
+            class="btn"
+          >
+            <div class="my-auto">{t("payments.ok")}</div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            on:click={toggleAmount}
+            on:keydown={toggleAmount}
+          >
+            <div class="my-auto">{t("payments.cancel")}</div>
+          </button>
+        </div>
+      </form>
+
+      <div class="flex justify-center gap-3">
+        <div class="text-secondary">{t("payments.amountPrompt")}</div>
+        <Toggle id="notify" bind:value={amountPrompt} />
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/locales/en.json b/src/locales/en.json
index da6a2bf3..42026bdb 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -173,8 +173,9 @@
 		"map": "Map",
 		"merch": "Shop",
 		"profile": "Profile",
-		"startInSeconds": "Start in Seconds",
+		"register": "Register",
 		"account": "Account",
+    "startInSeconds": "Start in Seconds",
 		"signIn": "Sign In",
 		"signOut": "Sign out",
 		"dashboard": "Dashboard",
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 41e2ce2e..446003e2 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -5,11 +5,10 @@
   import { browser } from "$app/environment";
   import { last, showQr, amountPrompt } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
+  import InvoiceTypes from "$comp/InvoiceTypes.svelte";
+  import SetAmount from "$comp/SetAmount.svelte";
   import { t } from "$lib/translations";
   import { goto, invalidate } from "$app/navigation";
-  import Toggle from "$comp/Toggle.svelte";
 
   export let data;
 
@@ -86,7 +85,7 @@
       <a href={link}>
         <img
           {src}
-          class="mx-auto z-10 max-w-[360px]"
+          class="mx-auto z-10 max-w-[360px] border-4 border-white"
           bind:this={qr}
           alt={txt}
         />
@@ -156,110 +155,25 @@
         <button
           class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
         >
-          <Icon icon="mobile" style="mr-1 w-8" />
+          <iconify-icon icon="ph:device-mobile-bold" width="32" />
           <div class="my-auto">{$t("payments.openLink")}</div>
         </button>
       </a>
     {/if}
   </div>
 
-  {#if aid === user?.id}
-    <div class="grid grid-cols-2 justify-around text-secondary">
-      <button
-        class="hover:bg-base-200 my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-base-200={type === types.bitcoin}
-        class:text-black={type === types.bitcoin}
-        on:click={() => setType(types.bitcoin)}
-      >
-        <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
-        <div class="my-auto text-lg">Bitcoin</div>
-      </button>
-
-      <button
-        class="hover:bg-base-200 my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-base-200={type === types.liquid}
-        class:text-black={type === types.liquid}
-        on:click={() => setType(types.liquid)}
-      >
-        <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
-        <div class="my-auto text-lg">Liquid</div>
-      </button>
-
-      <button
-        class="hover:bg-base-200 flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-base-200={type === types.lightning}
-        class:text-black={type === types.lightning}
-        on:click={() => setType(types.lightning)}
-      >
-        <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
-          <div class="m-auto">⚡️</div>
-        </div>
-        <div class="my-auto text-lg">Lightning</div>
-      </button>
-
-      {#if user?.id === invoice?.user?.id}
-        <a href={`/receive`} class="block contents">
-          <button
-            class="hover:bg-base-200 flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-          >
-            <img src="/images/cash.png" class="w-8 my-auto" />
-            <div class="my-auto text-lg">Ecash</div>
-          </button>
-        </a>
-      {/if}
-    </div>
-
-    {#if type === types.liquid}
-      <div class="flex justify-center">
-        <div class="my-auto text-xl text-center text-secondary">
-          {$t("payments.onlyLbtc")}
-          <span class="text-teal-500 font-bold">L-BTC</span>,
-          {$t("payments.dontDeposit")}
-        </div>
-      </div>
-    {/if}
-  {/if}
+  <InvoiceTypes {aid} {user} {type} {types} {setType} t={$t} />
 </div>
 
-{#if settingAmount}
-  <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
-  >
-    <div
-      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-base-100 space-y-5 top-5"
-    >
-      <form on:submit|preventDefault={setAmount} class="space-y-5">
-        <Numpad
-          bind:amount={newAmount}
-          bind:currency
-          bind:rate
-          bind:fiat
-          bind:submit
-        />
-        <div class="w-full flex flex-wrap gap-2">
-          <button
-            bind:this={submit}
-            type="submit"
-            on:click={setAmount}
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
-          >
-            <div class="my-auto">{$t("payments.ok")}</div>
-          </button>
-          <button
-            type="button"
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto w-full"
-            on:click={toggleAmount}
-            on:keydown={toggleAmount}
-          >
-            <div class="my-auto">{$t("payments.cancel")}</div>
-          </button>
-        </div>
-      </form>
-
-      <div class="flex justify-center gap-3">
-        <div class="text-secondary">{$t("payments.amountPrompt")}</div>
-        <Toggle id="notify" bind:value={$amountPrompt} />
-      </div>
-    </div>
-  </div>
-{/if}
+<SetAmount
+  {currency}
+  {rate}
+  {fiat}
+  {submit}
+  {settingAmount}
+  {setAmount}
+  {newAmount}
+  {toggleAmount}
+  amountPrompt={$amountPrompt}
+  t={$t}
+/>
diff --git a/src/routes/(app)/invoice/[id]/[email protected] b/src/routes/(app)/invoice/[id]/[email protected]
index db14b046..74c3fd64 100644
--- a/src/routes/(app)/invoice/[id]/[email protected]
+++ b/src/routes/(app)/invoice/[id]/[email protected]
@@ -10,6 +10,7 @@
     passwordPrompt,
     password,
     pin,
+    theme,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
@@ -103,7 +104,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="pb-20">
+<main class="pb-20" 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 26514022..66503f95 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -6,11 +6,10 @@
   import { browser } from "$app/environment";
   import { last, showQr, amountPrompt } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
-  import Numpad from "$comp/Numpad.svelte";
+  import InvoiceTypes from "$comp/InvoiceTypes.svelte";
+  import SetAmount from "$comp/SetAmount.svelte";
   import { t } from "$lib/translations";
   import { goto, invalidate } from "$app/navigation";
-  import Toggle from "$comp/Toggle.svelte";
 
   export let data;
 
@@ -130,7 +129,7 @@
       >
         <img
           {src}
-          class="mx-auto z-10 max-w-[360px]"
+          class="mx-auto z-10 max-w-[360px] border-4 border-white"
           bind:this={qr}
           alt={txt}
         />
@@ -185,11 +184,7 @@
   {/if}
 
   <div class="text-secondary space-y-2 text-xl pt-2">
-    <button
-      type="button"
-      class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border whitespace-nowrap mb-2"
-      on:click={() => copy(txt)}
-    >
+    <button type="button" class="btn" on:click={() => copy(txt)}>
       <iconify-icon icon="ph:copy-bold" width="32" />
       <div class="my-auto">
         {$t("payments.copy")}
@@ -197,18 +192,13 @@
     </button>
 
     {#if user?.id === invoice?.user?.id}
-      <button
-        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
-        on:click={toggleAmount}
-      >
+      <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 items-center gap-2 rounded-2xl border py-5 px-6 hover:opacity-80"
-        >
+        <button class="btn">
           <iconify-icon icon="ph:wallet-bold" width="32" />
           <div class="my-auto">{$t("payments.openLink")}</div>
         </button>
@@ -217,10 +207,7 @@
 
     {#if type === types.lightning}
       <div class="w-full flex justify-center gap-2 flex-wrap">
-        <button
-          class="w-full flex justify-center items-center gap-2 rounded-2xl border py-5 px-6 hover:opacity-80"
-          on:click={() => ($showQr = !$showQr)}
-        >
+        <button class="btn" on:click={() => ($showQr = !$showQr)}>
           {#if $showQr}
             <iconify-icon icon="ph:text-align-center-bold" width="32" />
           {:else}
@@ -234,101 +221,18 @@
     {/if}
   </div>
 
-  {#if aid === user?.id}
-    <div class="grid grid-cols-2 justify-around text-secondary">
-      <button
-        class="hover:bg-base-300 my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-base-300={type === types.bitcoin}
-        class:text-black={type === types.bitcoin}
-        on:click={() => setType(types.bitcoin)}
-      >
-        <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
-        <div class="my-auto text-lg">Bitcoin</div>
-      </button>
-
-      <button
-        class="hover:bg-base-300 my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-base-300={type === types.liquid}
-        class:text-black={type === types.liquid}
-        on:click={() => setType(types.liquid)}
-      >
-        <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
-        <div class="my-auto text-lg">Liquid</div>
-      </button>
-
-      <button
-        class="hover:bg-base-300 flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-base-300={type === types.lightning}
-        class:text-black={type === types.lightning}
-        on:click={() => setType(types.lightning)}
-      >
-        <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
-          <div class="m-auto">⚡️</div>
-        </div>
-        <div class="my-auto text-lg">Lightning</div>
-      </button>
-
-      <a href={`/receive`} class="block contents">
-        <button
-          class="hover:bg-base-300 flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        >
-          <img src="/images/cash.png" class="w-8 my-auto" />
-          <div class="my-auto text-lg">Ecash</div>
-        </button>
-      </a>
-    </div>
-
-    {#if type === types.liquid}
-      <div class="flex justify-center">
-        <div class="my-auto text-xl text-center text-secondary">
-          {$t("payments.onlyLbtc")}
-          <span class="text-teal-500 font-bold">L-BTC</span>,
-          {$t("payments.dontDeposit")}
-        </div>
-      </div>
-    {/if}
-  {/if}
+  <InvoiceTypes {aid} {user} {type} {types} {setType} t={$t} />
 </div>
 
-{#if settingAmount}
-  <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
-  >
-    <div
-      class="relative mx-auto p-12 border max-w-xl shadow-lg rounded-md bg-base-100 space-y-5 top-5"
-    >
-      <form on:submit|preventDefault={setAmount} class="space-y-5">
-        <Numpad
-          bind:amount={newAmount}
-          bind:currency
-          bind:rate
-          bind:fiat
-          bind:submit
-        />
-        <div class="w-full flex flex-wrap gap-2">
-          <button
-            bind:this={submit}
-            type="submit"
-            on:click={setAmount}
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
-          >
-            <div class="my-auto">{$t("payments.ok")}</div>
-          </button>
-          <button
-            type="button"
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto w-full"
-            on:click={toggleAmount}
-            on:keydown={toggleAmount}
-          >
-            <div class="my-auto">{$t("payments.cancel")}</div>
-          </button>
-        </div>
-      </form>
-
-      <div class="flex justify-center gap-3">
-        <div class="text-secondary">{$t("payments.amountPrompt")}</div>
-        <Toggle id="notify" bind:value={$amountPrompt} />
-      </div>
-    </div>
-  </div>
-{/if}
+<SetAmount
+  {currency}
+  {rate}
+  {fiat}
+  {submit}
+  {settingAmount}
+  {setAmount}
+  {newAmount}
+  {toggleAmount}
+  amountPrompt={$amountPrompt}
+  t={$t}
+/>
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index f0ee1393..93320423 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -1,6 +1,5 @@
 <script>
   import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
   import { onMount } from "svelte";
   import { format } from "date-fns";
   import { newPayment } from "$lib/store";
@@ -128,6 +127,9 @@
       }
     }
   };
+
+  const showPage = (i) => i < 6 || i >= pages.length - 6;
+  const isEllipsis = (i) => pages.length > 12 && i === 6;
 </script>
 
 <div class="space-y-5">
@@ -138,33 +140,29 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
     <div class="mx-auto flex justify-center w-full gap-1">
       {#each presets as { start, end, title }, i}
-        <a
-          class:active={selection === i}
-          href={`/payments/${getUnixTime(start) + "/"}1`}
-        >
-          <button
-            class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]"
-          >
+        <a href={`/payments/${getUnixTime(start) + "/"}1`}>
+          <button class="btn" class:btn-active={selection === i}>
             <div class="my-auto">{title}</div>
           </button>
         </a>
       {/each}
     </div>
 
-    <div class="flex flex-wrap justify-center">
+    <div class="join flex flex-wrap justify-center">
       {#if pages.length > 1}
         {#each pages as _, i}
-          <a
-            class="mr-1 last:mr-0"
-            href={`${path}/${i + 1}`}
-            class:active={parseInt(p) === i + 1}
-          >
-            <div
-              class="border py-2 rounded-full border-2 w-12 h-12 hover:opacity-80 text-center"
-            >
-              {i + 1}
-            </div>
-          </a>
+          {#if showPage(i)}
+            <a href={`${path}/${i + 1}`}>
+              <div
+                class="join-item btn !btn-sm"
+                class:btn-active={parseInt(p) === i + 1}
+              >
+                {i + 1}
+              </div>
+            </a>
+          {:else if isEllipsis(i)}
+            <div class="join-item btn !w-auto !btn-sm btn-disabled">...</div>
+          {/if}
         {/each}
       {/if}
     </div>
@@ -172,7 +170,7 @@
     <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-gray-100 px-4">
+          <div class="grid grid-cols-12 border-b h-24 hover:bg-base-200 px-4">
             <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)}
@@ -217,7 +215,7 @@
                   {:else if p.type === types.ecash}
                     <img src="/images/cash.png" class="w-12" />
                   {:else if p.type === types.reconcile}
-                    <Icon icon="balance" style="w-6" />
+                    <iconify-icon icon="ph:scales-bold" width="32" />
                   {:else if p.type === types.bitcoin}
                     <div class="my-auto">
                       <img
@@ -297,17 +295,11 @@
       {/each}
     </div>
   </div>
-  <button
-    class="ml-auto rounded-2xl border py-5 px-6 hover:opacity-80 flex mx-auto text-xl gap-2"
-    on:click={csv}
-  >
-    <Icon icon="save" style="my-auto" />
-    <div class="my-auto">{$t("payments.export")}</div>
-  </button>
-</div>
 
-<style>
-  .active * {
-    @apply bg-black text-white border-black;
-  }
-</style>
+  <div class="flex justify-center">
+    <button class="btn !w-auto" on:click={csv}>
+      <iconify-icon icon="ph:floppy-disk-bold" width="32" />
+      <div class="my-auto">{$t("payments.export")}</div>
+    </button>
+  </div>
+</div>
diff --git a/src/routes/(app)/receive/[...token]/+page.svelte b/src/routes/(app)/receive/[...token]/+page.svelte
index 988c1e6c..575c8269 100644
--- a/src/routes/(app)/receive/[...token]/+page.svelte
+++ b/src/routes/(app)/receive/[...token]/+page.svelte
@@ -6,7 +6,6 @@
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
   import Avatar from "$comp/Avatar.svelte";
-  import Icon from "$comp/Icon.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { back, fail, focus } from "$lib/utils";
 
@@ -59,31 +58,20 @@
     </div>
 
     <div class="flex gap-2">
-      <a href="/scan" class="w-full">
-        <button
-          type="button"
-          class="flex border rounded-2xl px-5 py-4 hover:opacity-80 w-full justify-center gap-1"
-        >
-          <Icon icon="camera" style="w-8 my-auto" />
+      <a href="/scan" class="contents">
+        <button type="button" class="btn !w-auto flex-grow">
+          <iconify-icon icon="ph:camera-bold" width="32" />
           <div class="my-auto">{$t("user.send.scan")}</div>
         </button>
       </a>
 
-      <button
-        type="button"
-        class="flex border rounded-2xl px-5 py-4 hover:opacity-80 w-full justify-center gap-1"
-        on:click={paste}
-      >
-        <Icon icon="paste" style="w-8 my-auto" />
+      <button type="button" class="btn !w-auto flex-grow" on:click={paste}>
+        <iconify-icon icon="ph:clipboard-text-bold" width="32" />
         <div class="my-auto">{$t("user.send.paste")}</div>
       </button>
     </div>
 
-    <button
-      bind:this={el}
-      type="submit"
-      class="bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold"
-    >
+    <button bind:this={el} type="submit" class="btn">
       {$t("user.send.next")}
     </button>
   </form>
diff --git a/src/routes/(app)/settings/[...tab]/_account.svelte b/src/routes/(app)/settings/[...tab]/_account.svelte
index 8e3323c7..28540280 100644
--- a/src/routes/(app)/settings/[...tab]/_account.svelte
+++ b/src/routes/(app)/settings/[...tab]/_account.svelte
@@ -1,7 +1,6 @@
 <script>
   import { tick } from "svelte";
   import { avatar, banner } from "$lib/store";
-  import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
   import { page } from "$app/stores";
 
@@ -58,12 +57,7 @@
     >{$t("user.settings.username")}</label
   >
   <div class="flex mb-2">
-    <input
-      type="text"
-      name="username"
-      bind:value={user.username}
-      class="w-auto min-w-0 pr-1 grow"
-    />
+    <input type="text" name="username" bind:value={user.username} />
   </div>
 </div>
 
@@ -80,14 +74,23 @@
     {$t("user.settings.emailDescription")}
   </p>
 
-  <div class="relative">
-    <input type="text" name="email" bind:value={user.email} />
-    {#if user.verified}
-      <Icon icon="check" style="absolute right-5 top-3 w-8" />
-    {:else if user.email}
-      <Icon icon="orangeclock" style="absolute right-5 top-3 w-8" />
-    {/if}
-  </div>
+  <label
+    class="input input-bordered input-lg rounded-2xl flex items-center gap-2"
+  >
+    <input
+      type="text"
+      name="email"
+      class="blank grow"
+      bind:value={user.email}
+    />
+    <!-- {#if user.verified} -->
+    <!--   <iconify-icon icon="ph:check-bold" width="32" /> -->
+    <!-- {:else if user.email} -->
+    <div class="text-warning">
+      <iconify-icon icon="ph:clock-bold" width="32" />
+    </div>
+    <!-- {/if} -->
+  </label>
 </div>
 
 <div>
@@ -113,13 +116,14 @@
         on:keydown={selectAvatar}
       >
         <Icon icon="logo-symbol-white" style="mx-auto" />
+        <iconify-icon icon="ph:floppy-disk-bold" width="32" />
       </div>
     {/if}
     <div class="ml-2 p-2">
       <!-- found missing translation -->
       <button
         type="button"
-        class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+        class="btn"
         on:click={selectAvatar}
         on:keydown={selectAvatar}>{$t("user.settings.select")}</button
       >
@@ -161,7 +165,7 @@
 
   <button
     type="button"
-    class="border rounded-2xl font-bold w-24 text-center px-0 py-2 hover:opacity-80"
+    class="btn !w-auto"
     on:click={selectBanner}
     on:keydown={selectBanner}>{$t("user.settings.select")}</button
   >
diff --git a/src/routes/(app)/settings/[...tab]/_pos.svelte b/src/routes/(app)/settings/[...tab]/_pos.svelte
index 1cfa2a39..2804da37 100644
--- a/src/routes/(app)/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/settings/[...tab]/_pos.svelte
@@ -1,7 +1,6 @@
 <script>
   import { onMount, tick } from "svelte";
   import { browser } from "$app/environment";
-  import Icon from "$comp/Icon.svelte";
   import Numpad from "$comp/Numpad.svelte";
   import LocaleSelector from "$comp/LocaleSelector.svelte";
   import Toggle from "$comp/Toggle.svelte";
@@ -94,11 +93,7 @@
   <label for="currency" class="font-bold block mb-1"
     >{$t("user.settings.localCurrency")}</label
   >
-  <select
-    name="currency"
-    class="select block py-3 w-full"
-    value={user.currency}
-  >
+  <select name="currency" value={user.currency}>
     {#each fiats as fiat}
       <option value={fiat}>{fiat}</option>
     {/each}
@@ -263,11 +258,8 @@
   </div>
 {/if}
 
-<a href="./shopify">
-  <button
-    type="button"
-    class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center"
-  >
+<a href="./shopify" class="block">
+  <button type="button" class="btn">
     <img src="/icons/shopify.svg" class="w-8" />
     <div class="my-auto">{$t("user.settings.shopify")}</div>
   </button>
diff --git a/src/routes/(app)/settings/[...tab]/_shopify.svelte b/src/routes/(app)/settings/[...tab]/_shopify.svelte
index 0266fa9c..48fe7718 100644
--- a/src/routes/(app)/settings/[...tab]/_shopify.svelte
+++ b/src/routes/(app)/settings/[...tab]/_shopify.svelte
@@ -27,7 +27,7 @@
   <label for="shopifyStore" class="font-bold mb-1 block">Store ID</label>
   <div class="flex mb-2">
     <div
-      class="text-gray-600 p-4 my-auto bg-gray-100 border rounded-l-2xl border-r-0 pr-1"
+      class="input input-bordered input-lg border-r-0 rounded-2xl rounded-r-none flex items-center text-right pr-1 bg-base-200 border-primary"
     >
       admin.shopify.com/store/
     </div>
diff --git a/src/routes/(static)/login/+page.svelte b/src/routes/(static)/login/+page.svelte
index efaa84b8..a0bba457 100644
--- a/src/routes/(static)/login/+page.svelte
+++ b/src/routes/(static)/login/+page.svelte
@@ -101,7 +101,6 @@
         name="username"
         type="text"
         required
-        class="bg-primary"
         bind:value={username}
         use:focus
         autocapitalize="none"
@@ -117,7 +116,6 @@
           name="password"
           type="text"
           required
-          class="bg-primary"
           bind:value={$password}
           autocapitalize="none"
         />
@@ -126,7 +124,6 @@
           name="password"
           type="password"
           required
-          class="bg-primary"
           bind:value={$password}
           autocapitalize="none"
         />
@@ -146,12 +143,7 @@
       >
     </div>
 
-    <button
-      type="submit"
-      class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
-      disabled={loading}
-      bind:this={btn}
-    >
+    <button type="submit" class="btn" disabled={loading} bind:this={btn}>
       {#if loading}
         <Spinner />
       {:else}
diff --git a/src/routes/(static)/register/+page.svelte b/src/routes/(static)/register/+page.svelte
index 1749bd16..fc760452 100644
--- a/src/routes/(static)/register/+page.svelte
+++ b/src/routes/(static)/register/+page.svelte
@@ -167,7 +167,7 @@
 
   <div class="relative">
     <button
-      class="absolute w-8 h-12 left-12 bg-white rounded top-12"
+      class="absolute w-8 h-12 left-12 bg-base-100 rounded top-12"
       on:click={decr}
     >
       <Icon icon="chevron-left" style="w-8 " />
@@ -183,13 +183,13 @@
         />
       </button>
       <button
-        class="absolute bg-white rounded-full p-2 mx-auto right-0 bottom-0 z-10 bg-opacity-80"
+        class="absolute bg-base-100 rounded-full p-2 mx-auto right-0 bottom-0 z-10 bg-opacity-80"
       >
         <Icon icon="upload" style="w-8" />
       </button>
     </button>
     <button
-      class="absolute w-8 h-12 right-12 bg-white rounded top-12"
+      class="absolute w-8 h-12 right-12 bg-base-100 rounded top-12"
       on:click={incr}
     >
       <Icon icon="chevron-left" style="w-8 rotate-180" />
@@ -217,7 +217,6 @@
         name="username"
         type="text"
         required
-        class="bg-primary"
         bind:value={username}
         on:focus={clear}
         autocapitalize="none"
@@ -241,7 +240,6 @@
           name="password"
           type="text"
           required
-          class="bg-primary"
           bind:value={$password}
           autocapitalize="none"
         />
@@ -250,7 +248,6 @@
           name="password"
           type="password"
           required
-          class="bg-primary"
           bind:value={$password}
           autocapitalize="none"
           on:focus={clear}
@@ -266,12 +263,7 @@
       </button>
     </div>
 
-    <button
-      type="submit"
-      class="bg-black text-white w-full rounded-2xl p-4 font-semibold hover:opacity-80"
-      disabled={loading}
-      bind:this={btn}
-    >
+    <button type="submit" class="btn" disabled={loading} bind:this={btn}>
       {#if loading}
         <Spinner />
       {:else}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a07c42cb..78ce0fd9 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
   import "../app.css";
   import { loading, t } from "$lib/translations";
   import { onMount } from "svelte";
-  import { installPrompt } from "$lib/store";
+  import { installPrompt, theme } from "$lib/store";
 
   export let data;
   let { pathname } = data;
@@ -44,7 +44,9 @@
 </svelte:head>
 
 {#if !$loading}
-  <slot />
+  <main data-theme={$theme}>
+    <slot />
+  </main>
 {/if}
 
 <style global>