From 596490878ca5ae2b8a86cb830918789d3af682a5 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Wed, 20 Nov 2024 14:22:43 -0800
Subject: styles

---
 src/app.css                                        | 16 +++---
 src/components/Mnemonic.svelte                     |  6 +--
 src/components/Slider.svelte                       | 47 +-----------------
 src/routes/(app)/account/pass/+page.svelte         | 57 +++++++++++++---------
 src/routes/(app)/account/savings/+page.svelte      |  4 +-
 src/routes/(app)/account/seed/+page.svelte         | 43 +++++-----------
 .../(app)/send/lightning/[payreq]/+page.svelte     |  1 +
 7 files changed, 62 insertions(+), 112 deletions(-)

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index 3d3ffd94..f01c9346 100644
--- a/src/app.css
+++ b/src/app.css
@@ -21,7 +21,7 @@ html {
   background-color: white;
 }
 
-input {
+input:not([type="range"]) {
   @apply input
 }
 
@@ -37,7 +37,7 @@ select {
   @apply select select-bordered select-lg select-primary;
 }
 
-input, textarea, select, .input  {
+input:not([type="range"]), textarea, select, .input  {
   @apply w-full rounded-2xl;
 }
 
@@ -46,12 +46,12 @@ textarea:focus, textarea:focus-within, .input:focus, .input:focus-within {
 }
 
 input.clean, textarea.clean {
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  background: none;
-  box-shadow: none;
+  border: none !important;
+  outline: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  background: none !important;
+  box-shadow: none !important;
 }
 
 .btn {
diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte
index 93035230..117c98f2 100644
--- a/src/components/Mnemonic.svelte
+++ b/src/components/Mnemonic.svelte
@@ -2,13 +2,13 @@
   let { mnemonic } = $props();
 </script>
 
-<div class="flex w-full border p-4 rounded-2xl h-full">
+<div class="card">
   <div
-    class="text-secondary grid grid-flow-col grid-rows-6 sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center whitespace-nowrap m-auto"
+    class="card-body text-secondary grid grid-flow-col grid-rows-6 sm:grid-rows-none grid-cols-2 sm:grid-cols-3 sm:grid-flow-row gap-x-8 gap-y-2 justify-center whitespace-nowrap m-auto"
   >
     {#each mnemonic.split(" ") as w, i}
       <div>
-        <span class="select-none text-black">{i + 1}.</span>
+        <span class="select-none text-neutral">{i + 1}.</span>
         <span>{@html w === "-" ? "&mdash;" : w}</span>
       </div>
     {/each}
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index 137c28b4..401b415a 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -6,12 +6,7 @@
     max?: number;
   }
 
-  let {
-    value = $bindable(),
-    handle,
-    min = 0,
-    max = 100
-  }: Props = $props();
+  let { value = $bindable(), handle, min = 0, max = 100 }: Props = $props();
 </script>
 
 <input
@@ -20,46 +15,8 @@
   {min}
   {max}
   bind:value
-  class="px-0 py-0 my-5"
-  style="--bgPercent: {((value - min) * 100) / (max - min)}%;"
+  class="range"
   oninput={handle}
 />
 
-<style>
-  #slider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 6px;
-    border-radius: 5px;
-    background: linear-gradient(
-      to right,
-      black 0%,
-      black var(--bgPercent),
-      #f5f7fa var(--bgPercent),
-      #f5f7fa 100%
-    );
-    outline: none;
-  }
-
-  #slider:active {
-    background-color: black;
-  }
 
-  #slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: black;
-    cursor: pointer;
-  }
-
-  #slider::-moz-range-thumb {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: black;
-    cursor: pointer;
-  }
-</style>
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index 62ef9b8e..3a372a33 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
-  import { preventDefault } from 'svelte/legacy';
+  import { preventDefault } from "svelte/legacy";
 
   import { tick, onMount } from "svelte";
   import { t } from "$lib/translations";
   import { mnemonic } from "$lib/store";
-  import Icon from "$comp/Icon.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { encrypt } from "nostr-tools/nip49";
   import {
@@ -22,7 +21,10 @@
   let { user } = data;
   let submitting = $state();
 
-  let confirm = $state(), password = $state(), revealPassword = $state(), revealConfirm = $state();
+  let confirm = $state(),
+    password = $state(),
+    revealPassword = $state(),
+    revealConfirm = $state();
   let type = "bitcoin";
   let name = $t("accounts.savings");
 
@@ -79,7 +81,10 @@
       {$t("accounts.passwordWarning")}
     </p>
 
-    <div class="relative">
+    <label
+      for="password"
+      class="input flex items-center justify-center gap-2 w-full"
+    >
       {#if revealPassword}
         <input
           name="password"
@@ -87,6 +92,7 @@
           required
           bind:value={password}
           autocapitalize="none"
+          class="clean"
         />
       {:else}
         <input
@@ -97,27 +103,31 @@
           required
           bind:value={password}
           autocapitalize="none"
+          class="clean"
         />
       {/if}
-      <button
-        tabindex="-1"
-        type="button"
+
+      <iconify-icon
+        class="cursor-pointer ml-auto"
         onclick={() => (revealPassword = !revealPassword)}
-        class="absolute right-5 -translate-y-1/2 top-1/2"
-      >
-        <Icon icon={revealPassword ? "eye" : "eye-off"} />
-      </button>
-    </div>
+        icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
+        width="32"
+      ></iconify-icon>
+    </label>
 
-    <div class="relative">
+    <label
+      for="confirm"
+      class="input flex items-center justify-center gap-2 w-full"
+    >
       {#if revealConfirm}
         <input
-          name="password"
+          name="confirm"
           type="text"
           placeholder="Confirm password"
           required
           bind:value={confirm}
           autocapitalize="none"
+          class="clean"
         />
       {:else}
         <input
@@ -126,28 +136,27 @@
           required
           bind:value={confirm}
           autocapitalize="none"
+          class="clean"
         />
       {/if}
-      <button
-        type="button"
-        tabindex="-1"
+      <iconify-icon
+        class="cursor-pointer ml-auto"
         onclick={() => (revealConfirm = !revealConfirm)}
-        class="absolute right-5 -translate-y-1/2 top-1/2"
-      >
-        <Icon icon={revealConfirm ? "eye" : "eye-off"} />
-      </button>
-    </div>
+        icon={revealConfirm ? "ph:eye-bold" : "ph:eye-slash-bold"}
+        width="32"
+      ></iconify-icon>
+    </label>
 
     <div class="flex gap-2">
       <a href={`/account/seed`} class="contents">
-        <button type="button" class="border grow px-5 py-6 text-xl rounded-2xl">
+        <button type="button" class="btn !w-auto grow">
           {$t("accounts.back")}
         </button>
       </a>
       <button
         disabled={submitting}
         type="submit"
-        class="border grow px-5 py-6 text-xl rounded-2xl bg-black text-white"
+        class="btn btn-accent !w-auto grow"
       >
         {#if submitting}
           <Spinner />
diff --git a/src/routes/(app)/account/savings/+page.svelte b/src/routes/(app)/account/savings/+page.svelte
index d0474636..2e860076 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 shadow-base-400 p-8 hover:bg-base-200">
+        <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200">
           <figure class="w-20">
             <iconify-icon icon="ph:file-plus-bold" width="64"></iconify-icon>
           </figure>
@@ -22,7 +22,7 @@
         </div>
       </a>
       <a href="/account/import" class="block">
-        <div class="card card-side shadow p-8 hover:bg-base-200">
+        <div class="card card-side shadow shadow-base-300 p-8 hover:bg-base-200">
           <figure class="w-20">
             <iconify-icon icon="ph:folder-open-bold" width="64"></iconify-icon>
           </figure>
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index b3e7d57c..a3e65ec2 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -4,7 +4,6 @@
   import { tick, onMount } from "svelte";
   import { copy } from "$lib/utils";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
   import { mnemonic } from "$lib/store";
   import { generateMnemonic } from "@scure/bip39";
   import { wordlist } from "@scure/bip39/wordlists/english";
@@ -27,47 +26,31 @@
     {$t("accounts.seedPhrase")}
   </h1>
 
-  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
     {#if $mnemonic}
       <Mnemonic mnemonic={$mnemonic} />
     {/if}
 
-    <div>
-      <button
-        type="button"
-        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-3 px-4 w-full mx-auto justify-center border whitespace-nowrap mb-2"
-        onclick={generate}
-      >
-        <Icon icon="random" style="w-8 my-auto" />
-        <div class="my-auto">{$t("accounts.regenerate")}</div>
-      </button>
+    <button type="button" class="btn" onclick={generate}>
+      <iconify-icon icon="ph:dice-three-bold" width="32" />
+      <div class="my-auto">{$t("accounts.regenerate")}</div>
+    </button>
 
-      <button
-        type="button"
-        class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-3 px-4 w-full mx-auto justify-center border whitespace-nowrap mb-2"
-        onclick={() => copy($mnemonic)}
-      >
-        <Icon icon="copy" style="w-8 my-auto" />
-        <div class="my-auto">
-          {$t("payments.copy")}
-        </div>
-      </button>
-    </div>
+    <button type="button" class="btn" onclick={() => copy($mnemonic)}>
+      <iconify-icon icon="ph:copy-bold" width="32" />
+      <div class="my-auto">
+        {$t("payments.copy")}
+      </div>
+    </button>
 
     <div class="flex gap-2">
       <a href={`/account/savings`} class="contents">
-        <button
-          type="button"
-          class="border w-full py-5 px-6 text-xl rounded-2xl"
-        >
+        <button type="button" class="btn !w-auto grow">
           {$t("accounts.back")}
         </button>
       </a>
       <a href={`/account/pass`} class="contents">
-        <button
-          type="button"
-          class="border w-full py-5 px-6 text-xl rounded-2xl"
-        >
+        <button type="button" class="btn btn-accent !w-auto grow">
           {$t("accounts.next")}
         </button>
       </a>
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 58508809..2d981326 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -20,6 +20,7 @@
   let a = $state();
 
   $effect(() => ($rate ||= rates[currency]));
+  $effect(() => form && (loading = false));
 
   let showMax = $state();
 
-- 
cgit v1.2.3