stylin

14 files changed, 90 insertions, 123 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 8f72119e..d4a89556 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -10,42 +10,52 @@
   $: refresh(account);
   let refresh = (a) => ({ seed, balance, id } = a);
 
-  let setAccount = () => 
-    (document.cookie = `aid=${id}; path=/; max-age=86400`);
+  let setAccount = () => (document.cookie = `aid=${id}; path=/; max-age=86400`);
 </script>
 
 <a href={`/payments`} class="block" on:click={setAccount}>
-  <div class="border rounded-xl shadow p-4 space-y-5">
+  <div class="p-8 space-y-5 bg-primary rounded-2xl border">
     <div class="flex">
       <Balance {balance} {user} {rate} />
+      {#if seed}
       <a href={`/account/${id}`} class="contents">
-        <button class="ml-auto flex gap-1 mb-auto pb-2 pl-2">
-          <div class="my-auto text-secondary">{name}</div>
+        <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4">
           <Icon icon="settings" style="w-8 my-auto" />
         </button>
       </a>
+      {/if}
     </div>
 
-    <div class="flex flex-wrap gap-3 justify-center w-full text-xl">
-      <a href={`/send`} class="contents grow" on:click={setAccount}>
+    <div class="flex flex-wrap gap-1 justify-center w-full text-xl">
+      <a href={`/invoice`} class="contents" on:click={setAccount}>
         <button
-          type="button"
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
+          class="rounded-2xl border py-5 px-6 hover:opacity-80 flex grow bg-white"
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="send" style="w-8" />
-            <div class="my-auto">{$t("user.dashboard.send")}</div>
+            <Icon icon="receive" style="w-8" />
+            <div class="my-auto">{$t("user.dashboard.receive")}</div>
           </div>
         </button>
       </a>
 
-      <a href={`/invoice`} class="contents" on:click={setAccount}>
+      <a href={`/scan`} class="contents" on:click={setAccount}>
         <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
+          class="rounded-2xl border py-5 px-6 hover:opacity-80 flex shrink bg-white"
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="receive" style="w-8" />
-            <div class="my-auto">{$t("user.dashboard.receive")}</div>
+            <Icon icon="camera" style="w-8" />
+          </div>
+        </button>
+      </a>
+
+      <a href={`/send`} class="contents grow" on:click={setAccount}>
+        <button
+          type="button"
+          class="rounded-2xl border py-5 px-6 hover:opacity-80 flex bg-white grow"
+        >
+          <div class="mx-auto flex gap-1">
+            <Icon icon="send" style="w-8" />
+            <div class="my-auto">{$t("user.dashboard.send")}</div>
           </div>
         </button>
       </a>
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
index 69b95107..75c94f34 100644
--- a/src/components/WalletPass.svelte
+++ b/src/components/WalletPass.svelte
@@ -22,7 +22,6 @@
             name="password"
             type="text"
             required
-            class="bg-primary"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -32,7 +31,6 @@
             name="password"
             type="password"
             required
-            class="bg-primary"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -41,7 +39,7 @@
         <button
           type="button"
           on:click={() => (revealPassword = !revealPassword)}
-          class="absolute right-5 top-6"
+          class="absolute right-5 top-1/2"
         >
           <Icon icon={revealPassword ? "eye" : "eye-off"} />
         </button>
@@ -49,7 +47,7 @@
       <div class="w-full flex justify-center gap-2">
         <button
           type="button"
-          class="border-2 bg-primary rounded-2xl font-semibold mx-auto py-5 px-6 hover:opacity-80 mx-auto grow"
+          class="border rounded-2xl font-semibold mx-auto py-5 px-6 hover:opacity-80 mx-auto grow"
           on:click={cancel}
           on:keydown={cancel}
         >
@@ -57,7 +55,7 @@
         </button>
         <button
           type="submit"
-          class="rounded-2xl font-semibold mx-auto py-5 px-6 hover:opacity-80 mx-auto grow bg-black text-white"
+          class="border rounded-2xl font-semibold mx-auto py-5 px-6 hover:opacity-80 mx-auto grow"
         >
           <div class="my-auto">Submit</div>
         </button>
diff --git a/src/locales/en.json b/src/locales/en.json
index f65841d3..1d875536 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -323,7 +323,7 @@
 		}
 	},
 	"payments": {
-    "enterWalletPass": "Please enter your wallet password",
+    "enterWalletPass": "Wallet password",
 		"legacyVersion": "Legacy version",
 		"newVersion": "New version",
 		"income": "Income",
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 0d85fc56..399a33e9 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -35,10 +35,10 @@
     <div class="flex justify-center gap-2">
       <a href={`/account/savings`} class="contents">
         <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white w-full justify-center"
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full justify-center"
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="plus" style="w-8 mx-auto invert" />
+            <Icon icon="plus" style="w-8 mx-auto" />
             <div class="my-auto text-xl whitespace-nowrap">
               {$t("accounts.addAccount")}
             </div>
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index 06494dd8..76473a89 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -39,17 +39,17 @@
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
     <form class="space-y-5" method="POST">
-      <div>
-        <label for="display" class="font-bold mb-1 block">Account name</label>
-        <input use:focus type="text" name="name" bind:value={name} />
-      </div>
-
+      <!-- <div> -->
+      <!--   <label for="display" class="font-bold mb-1 block">Account name</label> -->
+      <!--   <input use:focus type="text" name="name" bind:value={name} /> -->
+      <!-- </div> -->
+      <!--  -->
       <div class="space-y-2">
-        <button
-          type="submit"
-          class="rounded-2xl border py-5 font-bold mx-auto bg-black text-white px-6 w-full"
-          >{$t("accounts.save")}</button
-        >
+        <!-- <button -->
+        <!--   type="submit" -->
+        <!--   class="rounded-2xl border py-5 font-bold mx-auto bg-black text-white px-6 w-full" -->
+        <!--   >{$t("accounts.save")}</button -->
+        <!-- > -->
         {#if mnemonic}
           <Mnemonic {mnemonic} />
 
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index 36992a98..77298cc4 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -133,14 +133,14 @@
       <a href={`/account/seed`} class="contents">
         <button
           type="button"
-          class="bg-primary w-full px-5 py-6 text-xl rounded-2xl font-bold"
+          class="border grow px-5 py-6 text-xl rounded-2xl"
         >
           {$t("accounts.back")}
         </button>
       </a>
       <button
         type="submit"
-        class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
+        class="border grow px-5 py-6 text-xl rounded-2xl"
       >
         {$t("accounts.next")}
       </button>
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index 4e55534b..ec5ab1cf 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -58,7 +58,7 @@
       <a href={`/account/savings`} class="contents">
         <button
           type="button"
-          class="bg-primary w-full px-5 py-6 text-xl rounded-2xl font-bold"
+          class="border w-full py-5 px-6 text-xl rounded-2xl"
         >
           {$t("accounts.back")}
         </button>
@@ -66,7 +66,7 @@
       <a href={`/account/pass`} class="contents">
         <button
           type="button"
-          class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
+          class="border w-full py-5 px-6 text-xl rounded-2xl"
         >
           {$t("accounts.next")}
         </button>
diff --git a/src/routes/(app)/invoice/+page.server.ts b/src/routes/(app)/invoice/+page.server.ts
index 45389f8c..b8a2fe06 100644
--- a/src/routes/(app)/invoice/+page.server.ts
+++ b/src/routes/(app)/invoice/+page.server.ts
@@ -4,7 +4,6 @@ import type { Invoice } from "$lib/types";
 
 export let load = async ({ cookies, parent }) => {
   let aid = cookies.get("aid");
-  console.log("AID", aid)
   let { subject, user, rates } = await parent();
 
   let invoice: Invoice = {
diff --git a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
index f45218ea..8e3abab4 100644
--- a/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/pay/[username]/[...amount]/+page.svelte
@@ -61,7 +61,7 @@
   </div>
 {/if}
 
-<div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
+<div class="container px-4 mt-20 max-w-xl mx-auto space-y-2">
   <Numpad
     bind:amount={a}
     bind:amountFiat={af}
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 481d0242..f7a36717 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -3,7 +3,6 @@
   import { onMount, tick } from "svelte";
   import { t, loading } from "$lib/translations";
   import {
-    back,
     copy,
     f,
     s,
@@ -98,12 +97,6 @@
   });
 </script>
 
-<a href={`/payments`}>
-  <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80">
-    <Icon icon="arrow-left" style="w-10" />
-  </button>
-</a>
-
 <div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
     {$t(amount < 0 ? "payments.sent" : "payments.received")}
@@ -241,41 +234,4 @@
       </div>
     </div>
   {/if}
-
-  <div class="flex gap-2">
-    {#if user.admin}
-      <button
-        class="rounded-full border py-3 px-6 hover:opacity-80 flex w-full md:w-60"
-        on:click={bump}
-      >
-        <div class="mx-auto flex">
-          <Icon icon="clock" style="my-auto h-6 mr-2" />
-          <div class="my-auto mt-1 text-base">{$t("payments.bump")}</div>
-        </div>
-      </button>
-    {/if}
-
-    {#if user.hasprinter}
-      <button
-        class="rounded-full border py-3 px-6 hover:opacity-80 flex w-full md:w-60"
-        on:click={print}
-      >
-        <div class="mx-auto flex">
-          <Icon icon="printer" style="my-auto h-6 mr-2" />
-          <div class="my-auto mt-1 text-base">{$t("payments.print")}</div>
-        </div>
-      </button>
-    {:else}
-      <a href={`/payment/${id}/plain`}>
-        <button
-          class="rounded-full border py-3 px-6 hover:opacity-80 flex w-full md:w-60"
-        >
-          <div class="mx-auto flex">
-            <Icon icon="printer" style="my-auto h-6 mr-2" />
-            <div class="my-auto mt-1 text-base">{$t("payments.print")}</div>
-          </div>
-        </button>
-      </a>
-    {/if}
-  </div>
 </div>
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index 2ffed537..bfd30f55 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -78,7 +78,9 @@
       platform_fee: p.ourfee,
       amount_fiat: f((p.amount * p.rate) / sats, p.currency),
       fee_fiat: p.fee ? f((p.fee * p.rate) / sats, p.currency) : null,
-      platform_fee_fiat: p.ourfee ? f((p.ourfee * p.rate) / sats, p.currency) : null,
+      platform_fee_fiat: p.ourfee
+        ? f((p.ourfee * p.rate) / sats, p.currency)
+        : null,
       tip_fiat: p.tip ? f((p.tip * p.rate) / sats, p.currency) : null,
       total_fiat: f(((p.amount + (p.tip || 0)) * p.rate) / sats, p.currency),
     }));
@@ -127,30 +129,28 @@
   };
 </script>
 
-<div class="mt-24 mb-20 payments">
-  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+<div class="mt-24 mb-20 payments space-y-5">
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">
     {$t("payments.header")}
   </h1>
 
-  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-    <div class="flex text-md text-secondary relative">
-      <div class="mx-auto flex justify-center w-full gap-1">
-        {#each presets as { start, end, title }, i}
-          <a
-            class:active={selection === i}
-            href={`/payments/${getUnixTime(start) + "/"}1`}
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
+    <div class="mx-auto flex justify-center w-full gap-1">
+      {#each presets as { start, end, title }, i}
+        <a
+          class:active={selection === i}
+          href={`/payments/${getUnixTime(start) + "/"}1`}
+        >
+          <button
+            class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]"
           >
-            <button
-              class="text-sm md:text-lg rounded-full border py-2 px-4 hover:opacity-80 min-w-[72px]"
-            >
-              <div class="my-auto">{title}</div>
-            </button>
-          </a>
-        {/each}
-      </div>
+            <div class="my-auto">{title}</div>
+          </button>
+        </a>
+      {/each}
     </div>
 
-    <div class="flex flex-wrap justify-center mb-8">
+    <div class="flex flex-wrap justify-center">
       {#if pages.length > 1}
         {#each pages as _, i}
           <a
@@ -261,16 +261,14 @@
 
     <div class="grid grid-cols-3 w-full text-center text-lg">
       {#each Object.keys(incoming) as c}
-        <span class="text-base text-secondary text-left"></span>
+        <span class="text-base text-secondary text-left" />
         <!-- <span class="text-base text-secondary" -->
         <!--   >{$t("payments.subtotal")}</span -->
         <!-- > -->
         <span class="text-base text-secondary">
           {#if tipsIn || tipsOut}{$t("payments.tips")}{/if}
         </span>
-        <span class="text-base text-secondary"
-          >{$t("payments.total")}</span
-        >
+        <span class="text-base text-secondary">{$t("payments.total")}</span>
 
         {@const totalIn = incoming[c]?.fiat || 0}
         {@const tipsIn = incoming[c]?.fiatTips || 0}
@@ -295,15 +293,14 @@
         <span><b>{totalOut ? f(totalOut, c) : "-"}</b></span>
       {/each}
     </div>
-
-    <button
-      class="ml-auto rounded-full border py-2 px-4 w-36 hover:opacity-80 flex mx-auto"
-      on:click={csv}
-    >
-      <Icon icon="save" style="opacity-50 mr-2 my-auto" />
-      <div class="my-auto">{$t("payments.export")}</div>
-    </button>
   </div>
+  <button
+    class="ml-auto rounded-2xl border py-5 px-6 hover:opacity-80 flex mx-auto text-xl gap-2"
+    on:click={csv}
+  >
+    <Icon icon="save" style="my-auto" />
+    <div class="my-auto">{$t("payments.export")}</div>
+  </button>
 </div>
 
 <style>
diff --git a/src/routes/(app)/scan/+page.svelte b/src/routes/(app)/scan/+page.svelte
index e23b9bb8..150a66f4 100644
--- a/src/routes/(app)/scan/+page.svelte
+++ b/src/routes/(app)/scan/+page.svelte
@@ -21,10 +21,6 @@
   onDestroy(() => scanner?.stop());
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
-  <Icon icon="arrow-left" style="w-10" />
-</button>
-
 <div class="flex w-full mb-4 px-4">
   <div class="bg-black mx-auto rounded-3xl">
     <video
diff --git a/src/routes/(app)/send/bitcoin/[address]/+layout.server.ts b/src/routes/(app)/send/bitcoin/[address]/+layout.server.ts
index 6c22f5f1..a6edf8b0 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+layout.server.ts
+++ b/src/routes/(app)/send/bitcoin/[address]/+layout.server.ts
@@ -1,12 +1,23 @@
 import { auth, get } from "$lib/utils";
 import { redirect } from "@sveltejs/kit";
 
-export async function load({ cookies, params }) {
+export async function load({ cookies, params, parent }) {
+  let { user } = await parent();
   let aid = cookies.get("aid");
   let { address } = params;
   let { balance } = await get(`/account/${aid}`, auth(cookies));
-  let invoice = await get(`/invoice/${address}`);
-  let recipient = await get(`/user/${invoice.uid}`);
-  if (invoice.aid === invoice.uid) redirect(307, `/send/${recipient.username}`);
+
+  try {
+    let invoice = await get(`/invoice/${address}`);
+
+    if (invoice) {
+      let recipient = await get(`/users/${invoice.uid}`);
+      if (recipient?.id !== user.id)
+        redirect(307, `/pay/${recipient.username}`);
+    }
+  } catch (e) {
+    // invoice not found
+  }
+
   return { balance };
 }
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
index 24804974..ce2c8d6e 100644
--- a/src/routes/(app)/sent/[id]/+page.svelte
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -15,7 +15,7 @@
 
 <div class="text-center mt-20 md:mt-0">
   <div
-    class="flex w-full max-w-[200px] mx-auto py-20"
+    class="flex w-full max-w-[200px] mx-auto py-4"
     in:scale={{ start: 0.5 }}
   >
     <Icon icon="check" style="mx-auto" />