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/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 +
 4 files changed, 49 insertions(+), 56 deletions(-)

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

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