From e3afaf16b32558ac2ac407777760e462b4896a92 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 5 Nov 2024 13:31:53 -0800
Subject: dark styles

---
 src/components/Numpad.svelte                   | 35 +++++-----
 src/components/Password.svelte                 | 10 +--
 src/components/Pin.svelte                      | 13 ++--
 src/components/Pinpad.svelte                   | 93 +++++++++++++-------------
 src/components/SetAmount.svelte                |  4 +-
 src/routes/(app)/+layout.svelte                |  2 +-
 src/routes/(app)/settings/[...tab]/_pos.svelte | 20 +++---
 7 files changed, 84 insertions(+), 93 deletions(-)

(limited to 'src')

diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 694f5754..07d1ef4c 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -181,6 +181,18 @@
 
   let keydown = (e) =>
     e.key === "Enter" && (e.preventDefault() || submit.click());
+
+  let swap = () => {
+    if (fiat) {
+      amount = parseInt((amountFiat / (rate / sats)).toFixed(0));
+    } else {
+      amountFiat =
+        (amount * (rate / sats)).toFixed(2) > 0.0
+          ? (amount * (rate / sats)).toFixed(2)
+          : 0;
+    }
+    fiat = !fiat;
+  };
 </script>
 
 <div class="flex justify-center items-center">
@@ -204,24 +216,11 @@
           bind:this={element}
         />
       </div>
-      <div class="mt-2">
-        <span class="text-secondary mr-1"
-          >{fiat ? "⚡️" + s(amount) : f(amountFiat, currency)}</span
-        >
-        <button
-          type="button"
-          on:click|preventDefault|stopPropagation={() => {
-            if (fiat) {
-              amount = parseInt((amountFiat / (rate / sats)).toFixed(0));
-            } else {
-              amountFiat =
-                (amount * (rate / sats)).toFixed(2) > 0.0
-                  ? (amount * (rate / sats)).toFixed(2)
-                  : 0;
-            }
-            fiat = !fiat;
-          }}><Icon icon="swap" style="inline hover:opacity-80" /></button
-        >
+      <div
+        class="flex items-center justify-center text-2xl cursor-pointer"
+        on:click|preventDefault|stopPropagation={swap}
+      >
+        {fiat ? "⚡️" + s(amount) : f(amountFiat, currency)}
       </div>
     </div>
 
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index 14fdf500..cb57eec5 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -23,7 +23,7 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+  class="fixed inset-0 bg-base-100 bg-opacity-90 overflow-y-auto h-full w-full z-50"
 >
   <div
     class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
@@ -57,10 +57,10 @@
           on:click={() => (revealPassword = !revealPassword)}
           class="absolute right-5 top-6"
         >
-    <iconify-icon
-      icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
-      width="32"
-    />
+          <iconify-icon
+            icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+            width="32"
+          />
         </button>
       </div>
       <div class="w-full flex">
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 3a8e9e84..fb17c612 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -44,9 +44,12 @@
 </script>
 
 {#if loaded}
-  <div class="fixed inset-0 overflow-y-auto h-full w-full z-50">
+  <div
+    class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
+    on:click|preventDefault
+  >
     <div
-      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-base-100 space-y-5"
+      class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
     >
       <h1 class="text-center text-2xl font-semibold">{title}</h1>
       <Pinpad bind:v={p} {cancel} />
@@ -57,7 +60,6 @@
         >
         <select
           name="locktime"
-          class="select-styles block py-3 w-full"
           bind:value={locktime}
         >
           <option value={30}>30 {$t("user.settings.seconds")}</option>
@@ -70,10 +72,7 @@
       </div>
 
       <div class="w-full flex">
-        <button
-          class="border-2 border-primary rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-          on:click|preventDefault={cancel}
-        >
+        <button class="btn" on:click|preventDefault={cancel}>
           <div class="my-auto">Cancel</div>
         </button>
       </div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index f39d8e02..ca308519 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -36,56 +36,53 @@
   let hide = true;
 </script>
 
-<div class="flex justify-center items-center">
-  <div class="space-y-5">
-    <div class="font-semibold relative w-[300px]">
-      {#if hide}
-        <input
-          on:keydown={validate}
-          use:focus
-          bind:value={v}
-          type="password"
-          class="outline-none border-0 text-center py-0 !text-5xl"
-          pattern="[0-9]+"
-        />
-      {:else}
-        <input
-          on:keydown={validate}
-          use:focus
-          bind:value={v}
-          class="outline-none border-0 text-center py-0 !text-5xl"
-          type="text"
-          pattern="[0-9]+"
-        />
-      {/if}
+<label
+  class="input input-bordered border-primary input-lg rounded-2xl flex items-center gap-2"
+>
+  {#if hide}
+    <input
+      on:keydown={validate}
+      use:focus
+      bind:value={v}
+      type="password"
+      class="blank text-center !text-5xl !w-96 block"
+      pattern="[0-9]+"
+    />
+  {:else}
+    <input
+      on:keydown={validate}
+      use:focus
+      bind:value={v}
+      class="blank text-center !text-5xl !w-96 block"
+      type="text"
+      pattern="[0-9]+"
+    />
+  {/if}
+  <iconify-icon
+    icon={hide ? "ph:eye-slash-bold" : "ph:eye-bold"}
+    width="32"
+    on:click|stopPropagation|preventDefault={() => (hide = !hide)}
+    class="cursor-pointer"
+  />
+</label>
+
+<div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
+  {#each numPad as value}
+    {#if value === arrow}
       <button
         type="button"
-        on:click={() => (hide = !hide)}
-        class="absolute -right-5 top-5"
+        class="btn"
+        on:click|stopPropagation|preventDefault={() => handleInput(value)}
       >
-        <Icon icon={hide ? "eye-off" : "eye"} style="w-8" />
+        <Left />
       </button>
-    </div>
-
-    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
-      {#each numPad as value}
-        {#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"
-            on:click|stopPropagation|preventDefault={() => handleInput(value)}
-          >
-            <Left />
-          </button>
-        {:else}
-          <button
-            type="button"
-            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
-            on:click|stopPropagation|preventDefault={() => handleInput(value)}
-            >{value}</button
-          >
-        {/if}
-      {/each}
-    </div>
-  </div>
+    {:else}
+      <button
+        type="button"
+        class="btn"
+        on:click|stopPropagation|preventDefault={() => handleInput(value)}
+        >{value}</button
+      >
+    {/if}
+  {/each}
 </div>
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
index 7f007adc..8b581096 100644
--- a/src/components/SetAmount.svelte
+++ b/src/components/SetAmount.svelte
@@ -16,10 +16,10 @@
 
 {#if settingAmount}
   <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-base-100 bg-opacity-90 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"
+      class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
     >
       <form on:submit|preventDefault={setAmount} class="space-y-5">
         <Numpad
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 491dfc8c..301b838b 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -113,7 +113,7 @@
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
-<main class="min-h-dvh" data-theme={$theme}>
+<main class="pb-20 min-h-dvh" data-theme={$theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
     <slot />
diff --git a/src/routes/(app)/settings/[...tab]/_pos.svelte b/src/routes/(app)/settings/[...tab]/_pos.svelte
index 2804da37..f4a01c09 100644
--- a/src/routes/(app)/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/settings/[...tab]/_pos.svelte
@@ -165,7 +165,7 @@
       >{$t("user.settings.threshold")}</label
     >
     <button type="button" class="flex w-full" on:click={editThreshold}>
-      <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-primary">
+      <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
         ⚡️
       </div>
       <div
@@ -185,7 +185,7 @@
       >{$t("user.settings.reserve")}</label
     >
     <button type="button" class="flex w-full" on:click={editReserve}>
-      <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-primary">
+      <div class="p-4 border rounded-2xl rounded-r-none border-r-0 bg-base-200">
         ⚡️
       </div>
       <div
@@ -203,11 +203,9 @@
 
 {#if editingThreshold}
   <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 max-w-lg mx-auto"
   >
-    <div
-      class="relative top-40 mx-auto p-5 border shadow-lg rounded-md bg-white space-y-5 w-lg max-w-lg"
-    >
+    <div class="relative p-5 border shadow-lg rounded-md bg-base-100 space-y-5">
       <h1 class="text-center text-2xl font-semibold">
         {$t("user.settings.threshold")}
       </h1>
@@ -223,8 +221,7 @@
         bind:this={doneReserve}
         type="button"
         on:click={doneEditing}
-        class="p-4 bg-black text-white rounded-2xl text-lg font-semibold w-full"
-        >Ok</button
+        class="btn">Ok</button
       >
     </div>
   </div>
@@ -232,10 +229,10 @@
 
 {#if editingReserve}
   <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+    class="fixed bg-base-100 bg-opacity-90 inset-0 overflow-y-auto h-full w-full z-50 mx-auto max-w-lg"
   >
     <div
-      class="relative top-40 mx-auto p-5 border shadow-lg rounded-md bg-white space-y-5 w-lg max-w-lg text-center"
+      class="relative mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 text-center"
     >
       <h1 class="text-2xl font-semibold">
         {$t("user.settings.reserve")}
@@ -251,8 +248,7 @@
         bind:this={doneReserve}
         type="button"
         on:click={doneEditing}
-        class="p-4 bg-black text-white rounded-2xl text-lg font-semibold w-full"
-        >Ok</button
+        class="btn">Ok</button
       >
     </div>
   </div>
-- 
cgit v1.2.3