dark styles

7 files changed, 126 insertions, 37 deletions

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 75fc4479..9b311d35 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -19,7 +19,7 @@
 </script>
 
 <footer
-  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around mb-20"
+  class="space-y-10 md:space-y-0 text-xl block md:flex justify-around pb-20"
 >
   <div class="space-y-5">
     <div class="text-center w-full">
@@ -30,9 +30,7 @@
     <div class="flex gap-2 justify-center sm:hidden">
       <div>
         <a href="/register">
-          <button
-            class="bg-black text-white border rounded-full px-4 py-2 font-bold hover:opacity-80 text-lg"
-          >
+          <button class="btn">
             {$t("nav.startInSeconds")}
           </button>
         </a>
@@ -40,9 +38,7 @@
     </div>
     <div class="w-full flex">
       <div class="mx-auto">
-        <LocaleSelector
-          style="p-2 text-center hover:opacity-80 cursor-pointer border rounded-full"
-        />
+        <LocaleSelector />
       </div>
     </div>
   </div>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
new file mode 100644
index 00000000..35f1bbf1
--- /dev/null
+++ b/src/components/InvoiceTypes.svelte
@@ -0,0 +1,56 @@
+<script>
+  export let aid, user, type, types, t, setType;
+</script>
+
+{#if aid === user?.id}
+  <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
+    <button
+      class="btn"
+      class:bg-base-300={type === types.bitcoin}
+      class:text-secondary={type === types.bitcoin}
+      on:click={() => setType(types.bitcoin)}
+    >
+      <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
+      <div class="my-auto text-lg">Bitcoin</div>
+    </button>
+
+    <button
+      class="btn"
+      class:bg-base-300={type === types.liquid}
+      class:text-secondary={type === types.liquid}
+      on:click={() => setType(types.liquid)}
+    >
+      <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
+      <div class="my-auto text-lg">Liquid</div>
+    </button>
+
+    <button
+      class="btn"
+      class:bg-base-300={type === types.lightning}
+      class:text-secondary={type === types.lightning}
+      on:click={() => setType(types.lightning)}
+    >
+      <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
+        <div class="m-auto">⚡️</div>
+      </div>
+      <div class="my-auto text-lg">Lightning</div>
+    </button>
+
+    <a href={`/receive`} class="block contents">
+      <button class="btn">
+        <img src="/images/cash.png" class="w-8 my-auto" />
+        <div class="my-auto text-lg">Ecash</div>
+      </button>
+    </a>
+  </div>
+
+  {#if type === types.liquid}
+    <div class="flex justify-center">
+      <div class="my-auto text-xl text-center text-secondary">
+        {t("payments.onlyLbtc")}
+        <span class="text-teal-500 font-bold">L-BTC</span>,
+        {t("payments.dontDeposit")}
+      </div>
+    </div>
+  {/if}
+{/if}
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index e6bfc07c..b3ecd159 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -47,27 +47,17 @@
         >
       {/if}
       {#if user}
-        <button
-          class="border rounded-full px-6 py-2 font-bold"
-          on:click={() => goto(`/${user.username}`)}
+        <button class="btn !w-auto" on:click={() => goto(`/${user.username}`)}
           >Home
         </button>
-        <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold"
-          on:click={() => goto("/logout")}
-        >
+        <button class="btn !w-auto" on:click={() => goto("/logout")}>
           {$t("nav.signOut")}
         </button>
       {:else}
-        <button
-          class="border rounded-full px-6 py-2 font-bold hover:opacity-80"
-          on:click={() => goto("/register")}
-          >{$t("nav.startInSeconds")}
+        <button class="btn !w-auto" on:click={() => goto("/register")}
+          >{$t("nav.register")}
         </button>
-        <button
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
-          on:click={() => goto("/login")}
-        >
+        <button class="btn !w-auto" on:click={() => goto("/login")}>
           {$t("nav.signIn")}
         </button>
       {/if}
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 154944fa..32a6d6f4 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -29,10 +29,7 @@
 
     <div class="flex justify-center">
       <a href="/register">
-        <button
-          use:focus
-          class="bg-black text-white border rounded-full px-6 py-2 font-bold hover:opacity-80"
-        >
+        <button use:focus class="btn !rounded-full bg-primary text-primary-content hover:bg-primary hover:bg-opacity-80">
           {$t("nav.startInSeconds")}
         </button>
       </a>
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index a7966977..d837a534 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -11,16 +11,8 @@
   };
 </script>
 
-<select name="language" bind:value={l} class={style} on:change={handleChange}>
+<select name="language" bind:value={l} on:change={handleChange}>
   {#each $locales as locale}
     <option value={locale}>{$t(`lang.${locale}`)}</option>
   {/each}
 </select>
-
-<style>
-  select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-</style>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 5b9aaa01..694f5754 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -230,7 +230,7 @@
         {#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"
+            class="btn"
             on:click|preventDefault|stopPropagation={() => handleInput(value)}
           >
             <Left />
@@ -238,7 +238,7 @@
         {:else}
           <button
             type="button"
-            class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+            class="btn"
             on:click|preventDefault|stopPropagation={() => handleInput(value)}
             >{value}</button
           >
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
new file mode 100644
index 00000000..7f007adc
--- /dev/null
+++ b/src/components/SetAmount.svelte
@@ -0,0 +1,58 @@
+<script>
+  import Numpad from "$comp/Numpad.svelte";
+  import Toggle from "$comp/Toggle.svelte";
+
+  export let currency,
+    rate,
+    fiat,
+    submit,
+    settingAmount,
+    setAmount,
+    newAmount,
+    toggleAmount,
+    t,
+    amountPrompt;
+</script>
+
+{#if settingAmount}
+  <div
+    class="fixed inset-0 bg-gray-600 bg-opacity-50 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"
+    >
+      <form on:submit|preventDefault={setAmount} class="space-y-5">
+        <Numpad
+          bind:amount={newAmount}
+          bind:currency
+          bind:rate
+          bind:fiat
+          bind:submit
+        />
+        <div class="w-full flex flex-wrap gap-2">
+          <button
+            bind:this={submit}
+            type="submit"
+            on:click={setAmount}
+            class="btn"
+          >
+            <div class="my-auto">{t("payments.ok")}</div>
+          </button>
+          <button
+            type="button"
+            class="btn"
+            on:click={toggleAmount}
+            on:keydown={toggleAmount}
+          >
+            <div class="my-auto">{t("payments.cancel")}</div>
+          </button>
+        </div>
+      </form>
+
+      <div class="flex justify-center gap-3">
+        <div class="text-secondary">{t("payments.amountPrompt")}</div>
+        <Toggle id="notify" bind:value={amountPrompt} />
+      </div>
+    </div>
+  </div>
+{/if}