From 674de46a6a9f1b793313b5c027a34d396217ed84 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 5 Nov 2024 00:10:30 -0800
Subject: dark styles

---
 src/components/AppHeader.svelte      | 19 +++++++---
 src/components/Code.svelte           |  2 +-
 src/components/InvoiceActions.svelte | 50 +++++++++++++++++++++++++
 src/components/InvoiceData.svelte    | 72 ++++++++++++++++++++++++++++++++++++
 src/components/LandingHeader.svelte  |  9 ++---
 src/components/LocationsMap.svelte   |  6 +--
 6 files changed, 143 insertions(+), 15 deletions(-)
 create mode 100644 src/components/InvoiceActions.svelte
 create mode 100644 src/components/InvoiceData.svelte

(limited to 'src/components')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index e4c971c0..6b2497aa 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -131,11 +131,20 @@
                         class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
                         on:click={dark}
                       >
-                        <iconify-icon {icon} width="30" />
-                        {$t(key)}
+                        <iconify-icon
+                          icon={$theme === "dark"
+                            ? "ph:sun-bold"
+                            : "ph:moon-stars-bold"}
+                          width="30"
+                        />
+                        {$t(`nav.${$theme === "dark" ? "light" : "dark"}`)}
                       </button>
                     {:else}
-                      <a {href} data-sveltekit-preload-code="eager">
+                      <a
+                        {href}
+                        data-sveltekit-preload-code="eager"
+                        data-sveltekit-preload-data="false"
+                      >
                         <button
                           class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
                         >
@@ -156,9 +165,7 @@
         </div>
       {:else}
         <a href={`/login?redirect=${$page.url.pathname}`}>
-          <button class="bg-base-100 px-5 py-2 rounded-xl font-semibold text-sm"
-            >{$t("nav.signIn")}</button
-          >
+          <button class="btn !rounded-full">{$t("nav.signIn")}</button>
         </a>
       {/if}
     </nav>
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index c8c1058a..7ec046a6 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-  class="bg-black text-white rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono"
+  class="bg-primary text-primary-content rounded-lg p-4 flex gap-4 whitespace-pre-wrap font-mono"
 >
   <div class="overflow-x-scroll max-w-full scrollbar-hide">
     <div class="break-all min-w-[800px]">{samples[sample]}</div>
diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
new file mode 100644
index 00000000..47dbffbb
--- /dev/null
+++ b/src/components/InvoiceActions.svelte
@@ -0,0 +1,50 @@
+<script>
+  export let user,
+    invoice,
+    copy,
+    t,
+    link,
+    type,
+    types,
+    showQr,
+    txt,
+    toggleAmount;
+</script>
+
+<div class="text-secondary space-y-2 text-xl pt-2">
+  <button type="button" class="btn" on:click={() => copy(txt)}>
+    <iconify-icon icon="ph:copy-bold" width="32" />
+    <div class="my-auto">
+      {t("payments.copy")}
+    </div>
+  </button>
+
+  {#if user?.id === invoice?.user?.id}
+    <button class="btn" on:click={toggleAmount}>
+      <iconify-icon icon="ph:pencil-simple-bold" width="32" />
+      <div class="my-auto">{t("payments.setAmount")}</div>
+    </button>
+  {:else}
+    <a href={link} class="w-full">
+      <button class="btn">
+        <iconify-icon icon="ph:wallet-bold" width="32" />
+        <div class="my-auto">{t("payments.openLink")}</div>
+      </button>
+    </a>
+  {/if}
+
+  {#if txt.startsWith("ln")}
+    <div class="w-full flex justify-center gap-2 flex-wrap">
+      <button class="btn" on:click={() => (showQr = !showQr)}>
+        {#if showQr}
+          <iconify-icon icon="ph:text-align-center-bold" width="32" />
+        {:else}
+          <iconify-icon icon="ph:qr-code-bold" width="32" />
+        {/if}
+        <div class="my-auto">
+          {showQr ? t("payments.showText") : t("payments.showQr")}
+        </div></button
+      >
+    </div>
+  {/if}
+</div>
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
new file mode 100644
index 00000000..7723eb56
--- /dev/null
+++ b/src/components/InvoiceData.svelte
@@ -0,0 +1,72 @@
+<script>
+  import { btc, f, sat, s, sats } from "$lib/utils";
+  export let showQr,
+    src,
+    link,
+    qr,
+    txt,
+    invoice,
+    amount,
+    amountFiat,
+    currency,
+    tip,
+    rate;
+</script>
+
+{#if showQr}
+  <div>
+    <a href={link}>
+      <img
+        {src}
+        class="mx-auto z-10 max-w-[360px] border-4 border-white"
+        bind:this={qr}
+        alt={txt}
+      />
+    </a>
+  </div>
+{/if}
+
+{#if !showQr || !txt.startsWith("ln")}
+  <div class="break-all text-center text-secondary text-xl">
+    {txt}
+  </div>
+{/if}
+
+{#each invoice.items as i}
+  <div class="grid grid-cols-12 text-xl">
+    <div class="col-span-1 my-auto">{i.quantity}</div>
+    <div class="mr-auto grow col-span-7 my-auto">
+      {i.name}
+    </div>
+    <div class="col-span-2 font-semibold text-right my-auto">
+      {f(i.price * i.quantity, currency)}
+    </div>
+    <div class="col-span-2 text-secondary text-right text-lg my-auto">
+      {sat(btc(i.price * i.quantity, rate))}
+    </div>
+  </div>
+{/each}
+
+{#if amount > 0}
+  <div class="text-center font-bold text-2xl">
+    <div>
+      {f(amountFiat, currency)}
+
+      {#if tip}
+        <span class="text-sm">
+          +{f(tip * (rate / sats), currency)}
+        </span>
+      {/if}
+    </div>
+    <div>
+      <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span
+      >
+
+      {#if tip}
+        <span class="text-sm text-secondary font-normal">
+          +⚡️{s(tip)}
+        </span>
+      {/if}
+    </div>
+  </div>
+{/if}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index b3ecd159..b46d2790 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -47,23 +47,22 @@
         >
       {/if}
       {#if user}
-        <button class="btn !w-auto" on:click={() => goto(`/${user.username}`)}
+        <button class="btn !w-auto !rounded-full" on:click={() => goto(`/${user.username}`)}
           >Home
         </button>
-        <button class="btn !w-auto" on:click={() => goto("/logout")}>
+        <button class="btn !w-auto !rounded-full" on:click={() => goto("/logout")}>
           {$t("nav.signOut")}
         </button>
       {:else}
-        <button class="btn !w-auto" on:click={() => goto("/register")}
+        <button class="btn !w-auto !rounded-full" on:click={() => goto("/register")}
           >{$t("nav.register")}
         </button>
-        <button class="btn !w-auto" on:click={() => goto("/login")}>
+        <button class="btn !w-auto !rounded-full" on:click={() => goto("/login")}>
           {$t("nav.signIn")}
         </button>
       {/if}
     </div>
 
-    <!-- mobile nav -->
     <button
       class="block lg:hidden absolute top-[34.5px] right-10 z"
       on:click={() => (showMobileMenu = !showMobileMenu)}
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 4c3532b3..c01d8b75 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -262,7 +262,7 @@
   />
   <div class="absolute flex top-2 left-2 gap-2">
     <button
-      class="rounded-full border-2 border-black bg-white w-10 h-10"
+      class="rounded-full border-2 border-black bg-base-100 w-10 h-10"
       on:click={back}
     >
       <Icon icon="arrow-left" style="w-4 m-auto" />
@@ -271,9 +271,9 @@
   <div class="relative">
     {#if !showList}
       <div
-        class="space-y-1 text-sm w-[300px] max-w-[calc(100vw*0.5)] h-[300px] max-h-[calc(100vh*0.4)] overflow-y-scroll p-4 bg-opacity-90 bg-primary absolute right-4 bottom-8 rounded-2xl shadow text-ellipsis overflow-x-hidden"
+        class="space-y-1 text-sm w-[300px] max-w-[calc(100vw*0.5)] h-[300px] max-h-[calc(100vh*0.4)] overflow-y-scroll p-4 bg-opacity-90 bg-white absolute right-4 bottom-8 rounded-2xl shadow text-ellipsis overflow-x-hidden"
       >
-        <div class="relative mb-4 sticky top-0 bg-primary z-10">
+        <div class="relative mb-4 sticky top-0 bg-white z-10">
           <input bind:value={search} class="w-full" />
           <div class="flex gap-1 absolute right-6 top-3">
             {#if search}
-- 
cgit v1.2.3