From 520d5eb794bb0303b0d2b8b01f487d848a6567f4 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Mon, 4 Nov 2024 20:08:42 -0800
Subject: dark styles

---
 src/routes/(app)/[username]/receive/+page.svelte   | 11 +---
 src/routes/(app)/account/savings/+page.svelte      |  2 +-
 src/routes/(app)/settings/[...tab]/+page.svelte    | 10 ++--
 src/routes/(app)/settings/[...tab]/_pos.svelte     |  2 +-
 .../(app)/settings/[...tab]/_security.svelte       | 69 +++++++++-------------
 5 files changed, 36 insertions(+), 58 deletions(-)

(limited to 'src/routes/(app)')

diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 6480f1b9..41e2ce2e 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -139,11 +139,7 @@
   {/if}
 
   <div class="text-secondary space-y-2 text-xl pt-2">
-    <button
-      type="button"
-      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)}
-    >
+    <button type="button" class="btn" on:click={() => copy(txt)}>
       <iconify-icon icon="ph:copy-bold" width="32" />
       <div class="my-auto">
         {$t("payments.copy")}
@@ -151,10 +147,7 @@
     </button>
 
     {#if user?.id === invoice?.user?.id}
-      <button
-        class="w-full flex justify-center items-center gap-2 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>
diff --git a/src/routes/(app)/account/savings/+page.svelte b/src/routes/(app)/account/savings/+page.svelte
index 340af628..2461bd20 100644
--- a/src/routes/(app)/account/savings/+page.svelte
+++ b/src/routes/(app)/account/savings/+page.svelte
@@ -11,7 +11,7 @@
   <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="card card-side shadow p-8 hover:bg-base-200">
+        <div class="card card-side shadow shadow-base-400 p-8 hover:bg-base-200">
           <figure class="w-20">
             <iconify-icon icon="ph:file-plus-bold" width="64" />
           </figure>
diff --git a/src/routes/(app)/settings/[...tab]/+page.svelte b/src/routes/(app)/settings/[...tab]/+page.svelte
index 27e4e9b9..caa46888 100644
--- a/src/routes/(app)/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/settings/[...tab]/+page.svelte
@@ -213,14 +213,14 @@
       </h1>
 
       <div
-        class="font-bold flex justify-around items-center border-b pb-3 text-secondary"
+        class="flex justify-around items-center border-b pb-3"
       >
         {#each tabs.filter((t) => t.name !== "shopify") as { name, key }}
           <a href={`/settings/${name}`}>
             <button
               type="button"
               class="hover:opacity-80"
-              class:text-primary={tab === name ||
+              class:font-bold={tab === name ||
                 (tab === "shopify" && name === "pos")}
               >{$t(`user.settings.${key}`)}</button
             >
@@ -233,13 +233,13 @@
   </div>
 
   <div
-    class="z-10 fixed bottom-0 bg-white shadow border-t w-full flex justify-center items-center py-3"
+    class="z-10 fixed bottom-0 bg-base-100 shadow border-t w-full flex justify-center items-center py-3"
   >
     <button
       bind:this={submit}
       type="submit"
-      class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
-      class:bg-black={submitting}
+      class="btn !w-auto"
+      class:bg-base-200={submitting}
     >
       {#if submitting}
         <Spinner />
diff --git a/src/routes/(app)/settings/[...tab]/_pos.svelte b/src/routes/(app)/settings/[...tab]/_pos.svelte
index 8cff4b1f..1cfa2a39 100644
--- a/src/routes/(app)/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/settings/[...tab]/_pos.svelte
@@ -96,7 +96,7 @@
   >
   <select
     name="currency"
-    class="select-styles block py-3 w-full"
+    class="select block py-3 w-full"
     value={user.currency}
   >
     {#each fiats as fiat}
diff --git a/src/routes/(app)/settings/[...tab]/_security.svelte b/src/routes/(app)/settings/[...tab]/_security.svelte
index eec178ad..d67bda37 100644
--- a/src/routes/(app)/settings/[...tab]/_security.svelte
+++ b/src/routes/(app)/settings/[...tab]/_security.svelte
@@ -177,7 +177,10 @@
     on:keydown={togglePassword}
     class="absolute right-5 top-11"
   >
-    <Icon icon={revealPassword ? "eye" : "eye-off"} />
+    <iconify-icon
+      icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+      width="32"
+    />
   </button>
 </div>
 
@@ -200,8 +203,12 @@
       notify={false}
     />
   {:else}
-    <button type="button" class="btn btn-primary" on:click={togglePin}
-      ><Icon icon="lock" style="mr-1" />
+    <button type="button" class="btn" on:click={togglePin}
+      >
+      <iconify-icon
+        icon={user.haspin ? "ph:lock-key-open-bold" : "ph:lock-key-bold"}
+        width="32"
+      />
       {user.haspin
         ? $t("user.settings.disablePIN")
         : $t("user.settings.enablePIN")}</button
@@ -225,18 +232,18 @@
       <b>{otp.secret}</b>
     </div>
 
-    <button type="button" class="btn btn-primary" on:click={startConfirming2fa}>
-      <Icon icon="numpad" style="w-8 mr-1" />
+    <button type="button" class="btn" on:click={startConfirming2fa}>
+      <iconify-icon icon="ph:numpad-bold" width="32" />
       <div class="my-auto">Confirm</div>
     </button>
   {:else if user.twofa}
-    <button type="button" class="btn btn-primary" on:click={startDisabling2fa}>
-      <Icon icon="mobile" style="w-8 mr-1" />
+    <button type="button" class="btn" on:click={startDisabling2fa}>
+      <iconify-icon icon="ph:device-mobile-bold" width="32" />
       <div class="my-auto">{$t("user.settings.twofaDisable")}</div>
     </button>
   {:else}
-    <button type="button" class="btn btn-primary" on:click={startEnabling2fa}>
-      <Icon icon="mobile" style="w-8 mr-1" />
+    <button type="button" class="btn" on:click={startEnabling2fa}>
+      <iconify-icon icon="ph:device-mobile-bold" width="32" />
       <div class="my-auto">{$t("user.settings.twofaSetup")}</div>
     </button>
   {/if}
@@ -252,32 +259,6 @@
   {/if}
 </div>
 
-<!-- <div> -->
-<!--   <label for="seedphrase" class="font-bold" -->
-<!--     >{$t("user.settings.seedPhrase")}</label -->
-<!--   > -->
-<!--  -->
-<!--   <p class="text-secondary mb-1"> -->
-<!--     {$t("user.settings.seedDescription")} -->
-<!--   </p> -->
-<!--  -->
-<!--   <button type="button" class="primary" on:click={toggleSeed}> -->
-<!--     <Icon icon="warning" style="mr-1 w-6 my-auto" /> -->
-<!--     {revealSeed ? $t("user.settings.hideSeed") : $t("user.settings.revealSeed")} -->
-<!--   </button> -->
-<!--  -->
-<!--   {#if revealSeed} -->
-<!--     <div class="text-lg"> -->
-<!--       {mnemonic} -->
-<!--     </div> -->
-<!--  -->
-<!--     <button type="button" class="primary" on:click={() => copy(mnemonic)}> -->
-<!--       <Icon icon="copy" style="mr-1 w-6 my-auto" /> -->
-<!--       Copy -->
-<!--     </button> -->
-<!--   {/if} -->
-<!-- </div> -->
-
 <div>
   <label for="seedphrase" class="font-bold"
     >{$t("user.settings.nostrKeys")}</label
@@ -288,18 +269,22 @@
   </p>
 
   <div class="flex gap-2">
-    <button type="button" class="btn btn-primary" on:click={toggleNsec}>
+    <button type="button" class="btn !w-auto flex-grow" on:click={toggleNsec}>
       {#if revealNsec}
-        <Icon icon="eye-off" style="mr-1 w-6 my-auto" />
+        <iconify-icon icon="ph:eye-slash-bold" width="32" />
         {$t("user.settings.hideNsec")}
       {:else}
-        <Icon icon="warning" style="mr-1 w-6 my-auto" />
+        <iconify-icon icon="ph:warning-bold" width="32" />
         {$t("user.settings.revealNsec")}
       {/if}
     </button>
 
-    <button type="button" class="btn btn-primary" on:click={toggleImporting}>
-      <Icon icon="save" style="mr-1 w-6 my-auto" />
+    <button
+      type="button"
+      class="btn !w-auto flex-grow"
+      on:click={toggleImporting}
+    >
+      <iconify-icon icon="ph:floppy-disk-bold" width="32" />
       {$t("user.settings.import")}
     </button>
   </div>
@@ -313,8 +298,8 @@
       {nsec}
     </div>
 
-    <button type="button" class="btn btn-primary" on:click={() => copy(nsec)}>
-      <Icon icon="copy" style="mr-1 w-6 my-auto" />
+    <button type="button" class="btn" on:click={() => copy(nsec)}>
+      <iconify-icon icon="ph:copy-bold" width="32" />
       Copy
     </button>
   {/if}
-- 
cgit v1.2.3