dark styles

12 files changed, 59 insertions, 94 deletions

diff --git a/src/app.css b/src/app.css
index 7c9ec64a..3a60036e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,22 +21,18 @@ html {
   background-color: white;
 }
 
-input,
+input {
+  @apply input input-bordered input-lg input-primary;
+}
+
 textarea {
-  @apply input input-bordered input-primary w-full
+  @apply textarea textarea-bordered textarea-lg textarea-primary;
 }
 
-.btn {
-  @apply rounded-2xl btn-lg btn-block
+input, textarea {
+  @apply w-full rounded-2xl;
 }
 
-.select-styles {
-  @apply border rounded-2xl py-4 px-5;
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  background: transparent;
-  background-repeat: no-repeat;
-  background-position-x: 95%;
-  background-position-y: 1em;
+.btn {
+  @apply rounded-2xl btn-lg btn-block
 }
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 8943cb16..473e59fd 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -35,17 +35,14 @@
 
   <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 gap-2 justify-center items-center">
+      <button class="btn !w-auto flex-grow">
         <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-2xa gap-2 justify-center items-center"
-      >
+      <button type="button" class="btn !w-auto flex-grow">
         <iconify-icon icon="ph:paper-plane-right-bold" width="32" />
         <div class="my-auto">{$t("user.dashboard.send")}</div>
       </button>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index ca711d7f..75fc4479 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -23,7 +23,9 @@
 >
   <div class="space-y-5">
     <div class="text-center w-full">
-      <a href="/"><Icon icon="logo" style="w-48 mx-auto md:mx-0" /></a>
+      <a href="/">
+        <iconify-icon icon="coinos:logo" width="224" />
+      </a>
     </div>
     <div class="flex gap-2 justify-center sm:hidden">
       <div>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 232e53eb..e6bfc07c 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -27,8 +27,7 @@
       class="flex justify-start lg:justify-center items-center lg:space-x-10"
     >
       <a href="/" on:click={() => scroll(header)}>
-        <Icon icon="logo" style="hidden lg:block mb-5 xl:mb-0" />
-        <Icon icon="logo" style="block lg:hidden ml-5 w-48" />
+        <iconify-icon icon="coinos:logo" width="224" />
       </a>
     </div>
 
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index da65d718..14fdf500 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -23,10 +23,10 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+  class="fixed inset-0 bg-opacity-50 overflow-y-auto h-full w-full z-20"
 >
   <div
-    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
   >
     <h1 class="text-center text-2xl font-semibold">
       Please enter your password
@@ -38,7 +38,6 @@
             name="password"
             type="text"
             required
-            class="bg-primary"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -48,7 +47,6 @@
             name="password"
             type="password"
             required
-            class="bg-primary"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -59,7 +57,10 @@
           on:click={() => (revealPassword = !revealPassword)}
           class="absolute right-5 top-6"
         >
-          <Icon icon={revealPassword ? "eye" : "eye-off"} />
+    <iconify-icon
+      icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+      width="32"
+    />
         </button>
       </div>
       <div class="w-full flex">
diff --git a/src/locales/en.json b/src/locales/en.json
index 7a0ad3a6..da6a2bf3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -270,7 +270,7 @@
 			"saved": "Settings saved!",
 			"verifying": "Verification email sent",
 			"verified": "Email verified!",
-			"revealNsec": "Reveal nostr secret key",
+			"revealNsec": "Reveal secret key",
 			"hideSeed": "Hide seed phrase",
 			"revealSeed": "Reveal seed phrase",
 			"saveSettings": "Save Settings",
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}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index b88e5f25..5329478e 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,15 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ["./src/**/*.{html,js,svelte}"],
-	theme: {
-		extend: {
-			colors: {
-				primary: "#F5F7FA",
-				secondary: "#70757E",
-				gradient: "#C3CFE2",
-			},
-		},
-	},
 	plugins: [require("tailwind-scrollbar"), require("daisyui")],
 	daisyui: {
 		themes: [
@@ -22,6 +13,7 @@ module.exports = {
 			{
 				dark: {
 					...require("daisyui/src/theming/themes").black,
+          secondary: "#CCC",
 					gradient: "#C3CFE2",
 				},
 			},