From 68d9e40a14fa654f6ef997a2e69dd0acab2d3dff Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Sun, 3 Nov 2024 23:45:58 -0800
Subject: buttons and icons

---
 src/app.css                                        |  4 ++
 src/components/Account.svelte                      | 20 +++---
 src/components/AppHeader.svelte                    |  4 +-
 src/routes/(app)/[username]/(profile)/+page.svelte | 10 +--
 src/routes/(app)/[username]/receive/+page.svelte   | 26 ++++----
 src/routes/(app)/account/savings/+page.svelte      | 12 ++--
 src/routes/(app)/invoice/[id]/+page.svelte         | 32 ++++-----
 src/routes/(app)/send/[...text]/+page.svelte       | 76 ++++++++--------------
 8 files changed, 82 insertions(+), 102 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index ca2ed53d..7c9ec64a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -26,6 +26,10 @@ textarea {
   @apply input input-bordered input-primary w-full
 }
 
+.btn {
+  @apply rounded-2xl btn-lg btn-block
+}
+
 .select-styles {
   @apply border rounded-2xl py-4 px-5;
   cursor: pointer;
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 96aa1964..8943cb16 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -23,35 +23,31 @@
     <Balance {balance} {user} {rate} />
     <a href={`/payments`} class="contents" on:click={setAccount}>
       <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4">
-        <Icon icon="clock" style="w-8 my-auto" />
+        <iconify-icon icon="ph:clock-bold" width="32" />
       </button>
     </a>
     <a href={`/account/${id}`} class="contents">
       <button class="flex gap-1 mb-auto pb-4 pl-4">
-        <Icon icon="settings" style="w-8 my-auto" />
+        <iconify-icon icon="ph:gear-bold" width="32" />
       </button>
     </a>
   </div>
 
   <div class="flex justify-center w-full text-xl gap-2">
     <a href={`/invoice`} class="contents" on:click={setAccount}>
-      <button class="py-5 px-6 hover:opacity-80 flex grow rounded-2xl">
-        <div class="mx-auto flex gap-2">
-          <Icon icon="receive" style="w-8" />
-          <div class="my-auto">{$t("user.dashboard.receive")}</div>
-        </div>
+      <button class="py-5 px-6 hover:opacity-80 flex grow rounded-2xl gap-2 justify-center items-center">
+        <iconify-icon icon="ph:hand-coins-bold" width="32" />
+        <div class="my-auto">{$t("user.dashboard.receive")}</div>
       </button>
     </a>
 
     <a href={`/send`} class="contents grow" on:click={setAccount}>
       <button
         type="button"
-        class="py-5 px-6 hover:opacity-80 flex grow rounded-2xl"
+        class="py-5 px-6 hover:opacity-80 flex grow rounded-2xa gap-2 justify-center items-center"
       >
-        <div class="mx-auto flex gap-1">
-          <Icon icon="send" style="w-8" />
-          <div class="my-auto">{$t("user.dashboard.send")}</div>
-        </div>
+        <iconify-icon icon="ph:paper-plane-right-bold" width="32" />
+        <div class="my-auto">{$t("user.dashboard.send")}</div>
       </button>
     </a>
   </div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 4accd0dc..426a6059 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -52,7 +52,7 @@
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
           >
-            <iconify-icon icon="pepicons-pop:house" width="32" />
+            <iconify-icon icon="ph:house-bold" width="32" />
           </button>
         </a>
         <a href={`/${user.username}/receive`}>
@@ -93,7 +93,7 @@
               .url.pathname === `/send`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><iconify-icon icon="majesticons:send-line" width="32" />
+            ><iconify-icon icon="ph:paper-plane-right-bold" width="32" />
           </button>
         </a>
         <div class="relative">
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 527c814b..29bf7943 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -41,13 +41,9 @@
     </div>
 
     <a href={`/account/savings`} class="contents">
-      <button class="btn btn-primary">
-        <div class="mx-auto flex gap-2">
-          <Icon icon="plus" style="w-8 mx-auto" />
-          <div class="my-auto text-xl whitespace-nowrap">
-            {$t("accounts.addAccount")}
-          </div>
-        </div>
+      <button class="btn btn-lg w-full rounded-2xl whitespace-nowrap">
+        <iconify-icon icon="ph:plus-circle-bold" width="32" />
+        {$t("accounts.addAccount")}
       </button>
     </a>
 
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 2a0cb6b3..0f36f0fe 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -141,10 +141,10 @@
   <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"
+      class="flex gap-2 items-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)}
     >
-      <Icon icon="copy" style="w-8 my-auto" />
+      <iconify-icon icon="ph:copy-bold" width="32" />
       <div class="my-auto">
         {$t("payments.copy")}
       </div>
@@ -152,10 +152,10 @@
 
     {#if user?.id === invoice?.user?.id}
       <button
-        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+        class="w-full flex justify-center items-center gap-2 rounded-2xl border py-5 px-6 hover:opacity-80"
         on:click={toggleAmount}
       >
-        <Icon icon="edit" style="mr-1 w-8" />
+        <iconify-icon icon="ph:pencil-bold" width="32" />
         <div class="my-auto">{$t("payments.setAmount")}</div>
       </button>
     {:else}
@@ -173,8 +173,8 @@
   {#if aid === user.id}
     <div class="grid grid-cols-2 justify-around text-secondary">
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.bitcoin}
+        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)}
       >
@@ -183,8 +183,8 @@
       </button>
 
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.liquid}
+        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)}
       >
@@ -193,12 +193,12 @@
       </button>
 
       <button
-        class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.lightning}
+        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-white rounded-full w-8 h-8 text-center flex">
+        <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>
@@ -207,7 +207,7 @@
       {#if user?.id === invoice?.user?.id}
         <a href={`/receive`} class="block contents">
           <button
-            class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+            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>
@@ -233,7 +233,7 @@
     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-white space-y-5 top-5"
+      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
diff --git a/src/routes/(app)/account/savings/+page.svelte b/src/routes/(app)/account/savings/+page.svelte
index 8cc24aa2..340af628 100644
--- a/src/routes/(app)/account/savings/+page.svelte
+++ b/src/routes/(app)/account/savings/+page.svelte
@@ -11,8 +11,10 @@
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
     <div class="space-y-5">
       <a href="/account/seed" class="block">
-        <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-          <img src="/icons/random.svg" class="w-20" />
+        <div class="card card-side shadow p-8 hover:bg-base-200">
+          <figure class="w-20">
+            <iconify-icon icon="ph:file-plus-bold" width="64" />
+          </figure>
           <div>
             <div class="text-xl">{$t("accounts.create")}</div>
             <div class="text-secondary">{$t("accounts.generateSeed")}</div>
@@ -20,8 +22,10 @@
         </div>
       </a>
       <a href="/account/import" class="block">
-        <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
-          <img src="/images/keys.png" class="w-20" />
+        <div class="card card-side shadow p-8 hover:bg-base-200">
+          <figure class="w-20">
+            <iconify-icon icon="ph:folder-open-bold" width="64" />
+          </figure>
           <div>
             <div class="text-xl">{$t("accounts.import")}</div>
             <div class="text-secondary">{$t("accounts.importSeed")}</div>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 1a32b5b4..26514022 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -190,7 +190,7 @@
       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)}
     >
-      <Icon icon="copy" style="w-8 my-auto" />
+      <iconify-icon icon="ph:copy-bold" width="32" />
       <div class="my-auto">
         {$t("payments.copy")}
       </div>
@@ -201,15 +201,15 @@
         class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
         on:click={toggleAmount}
       >
-        <Icon icon="edit" style="mr-1 w-8" />
+        <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"
+          class="w-full flex justify-center items-center gap-2 rounded-2xl border py-5 px-6 hover:opacity-80"
         >
-          <Icon icon="mobile" style="mr-1 w-8" />
+          <iconify-icon icon="ph:wallet-bold" width="32" />
           <div class="my-auto">{$t("payments.openLink")}</div>
         </button>
       </a>
@@ -218,13 +218,13 @@
     {#if type === types.lightning}
       <div class="w-full flex justify-center gap-2 flex-wrap">
         <button
-          class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
+          class="w-full flex justify-center items-center gap-2 rounded-2xl border py-5 px-6 hover:opacity-80"
           on:click={() => ($showQr = !$showQr)}
         >
           {#if $showQr}
-            <Icon icon="text" style="w-6 mr-2 my-auto" />
+            <iconify-icon icon="ph:text-align-center-bold" width="32" />
           {:else}
-            <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
+            <iconify-icon icon="ph:qr-code-bold" width="32" />
           {/if}
           <div class="my-auto">
             {$showQr ? $t("payments.showText") : $t("payments.showQr")}
@@ -237,8 +237,8 @@
   {#if aid === user?.id}
     <div class="grid grid-cols-2 justify-around text-secondary">
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.bitcoin}
+        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)}
       >
@@ -247,8 +247,8 @@
       </button>
 
       <button
-        class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.liquid}
+        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)}
       >
@@ -257,12 +257,12 @@
       </button>
 
       <button
-        class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
-        class:bg-primary={type === types.lightning}
+        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-white rounded-full w-8 h-8 text-center flex">
+        <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>
@@ -270,7 +270,7 @@
 
       <a href={`/receive`} class="block contents">
         <button
-          class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 justify-center"
+          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>
@@ -295,7 +295,7 @@
     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-white space-y-5 top-5"
+      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
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 519e9547..2dd4a723 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -48,60 +48,42 @@
       </div>
     {/if}
 
-    <div class="mb-2">
-      <textarea
-        use:focus
-        name="text"
-        placeholder={$t("user.send.placeholder")}
-        on:keypress={keypress}
-        class="w-full p-4 border rounded-xl h-32 text-xl"
-        bind:value={text}
-        on:paste={() => (pasted = true)}
-        autocapitalize="none"
-      />
-    </div>
+    <textarea
+      use:focus
+      name="text"
+      placeholder={$t("user.send.placeholder")}
+      on:keypress={keypress}
+      class="w-full p-4 border rounded-xl h-32 text-xl"
+      bind:value={text}
+      on:paste={() => (pasted = true)}
+      autocapitalize="none"
+    />
 
     <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-2"
-        >
-          <Icon icon="camera" style="w-8 my-auto" />
-          <div class="my-auto">{$t("user.send.scan")}</div>
+      <a href="/scan" class="contents">
+        <button type="button" class="btn !w-auto flex-grow">
+          <iconify-icon icon="ph:camera-bold" width="32" />
+          {$t("user.send.scan")}
         </button>
       </a>
 
-      <button
-        type="button"
-        class="flex border rounded-2xl px-5 py-4 hover:opacity-80 w-full justify-center gap-2"
-        on:click={paste}
-      >
-        <Icon icon="paste" style="w-8 my-auto" />
-        <div class="my-auto">{$t("user.send.paste")}</div>
+      <button type="button" class="btn !w-auto flex-grow" on:click={paste}>
+        <iconify-icon icon="ph:clipboard-text-bold" width="32" />
+        {$t("user.send.paste")}
       </button>
     </div>
 
-    <div class="flex gap-2 flex-wrap">
-      <button
-        bind:this={el}
-        type="submit"
-        class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
-      >
-        <Icon icon="send" style="w-8 my-auto invert" />
-        <div class="my-auto">{$t("user.send.next")}</div>
-      </button>
+    <button bind:this={el} type="submit" class="btn btn-accent">
+      <iconify-icon icon="ph:paper-plane-right-bold" width="32" />
+      <div class="my-auto">{$t("user.send.next")}</div>
+    </button>
 
-      <a href="/send/ecash" class="contents">
-        <button
-          type="button"
-          class="flex border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center text-xl bg-primary"
-        >
-          <img src="/images/cash.png" class="w-8" />
-          <div class="my-auto">{$t("payments.createEcash")}</div>
-        </button>
-      </a>
-    </div>
+    <a href="/send/ecash" class="block">
+      <button type="button" class="btn">
+        <img src="/images/cash.png" class="w-8" />
+        <div class="my-auto">{$t("payments.createEcash")}</div>
+      </button>
+    </a>
   </form>
 
   {#if contacts.length}
@@ -112,9 +94,7 @@
       <div>
         {#each contacts as c}
           <a href={`/pay/${c.username}`}>
-            <div
-              class="border-b p-2 last:border-b-0 hover:bg-base-200 rounded-2xl"
-            >
+            <div class="border-b p-2 last:border-b-0 hover:bg-base-200">
               <div class="flex">
                 <div>
                   <div class="flex">
-- 
cgit v1.2.3