updated: dark theme

7 files changed, 44 insertions, 41 deletions

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 51607030..143e45eb 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -41,36 +41,36 @@
 
 {#if !$loading}
   <header
-    class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover mb-20"
+    class="bg-gradient-to-r {$colorTheme} dark:!from-violet-600 dark:!to-swapee-purple h-[175px] w-full relative bg-cover mb-20"
     style:background-image={bg}
   >
     <nav class="flex justify-end items-center gap-x-2 xs:gap-x-4 p-5">
       {#if user}
         <a href={`/${user.username}`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="home" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="home" style="mx-auto w-6 md:w-8 dark:invert" />
           </button>
         </a>
         <a href={`/${user.username}/receive`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/receive`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="numpad" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="numpad" style="mx-auto w-6 md:w-8 dark:invert" />
           </button>
         </a>
         <a href={`/${user.username}/payments`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}/payments`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'} relative"
-            ><Icon icon="clock" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="clock" style="mx-auto w-6 md:w-8 dark:invert" />
             {#if $newPayment}
               <span class="absolute top-0 right-0">
                 <span class="flex h-3 w-3">
@@ -87,17 +87,17 @@
         </a>
         <a href={`/send`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+            class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/send`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="send" style="mx-auto w-6 md:w-8" />
+            ><Icon icon="send" style="mx-auto w-6 md:w-8 dark:invert" />
           </button>
         </a>
         <div class="relative">
           <OutClick on:outclick={() => (showMenu = false)}>
             <button
-              class="bg-white p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
+              class="bg-white dark:bg-black p-2 rounded-full w-12 h-12 md:w-16 md:h-16 drop-shadow-xl border border-black/10 {$page
                 .url.pathname === `/${user.username}` ||
               $page.url.pathname === `/${user.username}/settings` ||
               $page.url.pathname === `/support`
@@ -106,36 +106,37 @@
                     showMenu ? 'opacity-80' : ''
                   }`}"
               on:click={() => (showMenu = !showMenu)}
-              ><Icon icon="menu" style="mx-auto w-6 md:w-8" />
+              ><Icon icon="menu" style="mx-auto w-6 md:w-8 dark:invert" />
             </button>
 
             <div
               class="{showMenu
                 ? 'block'
-                : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z-50"
+                : 'hidden'} absolute top-14 right-0 bg-white dark:bg-black dark:border-2 dark:border-gray-50 rounded-3xl p-8 shadow-xl z-50"
             >
               <ul class="space-y-5 w-48">
                 {#each menuButtons as { href, icon, key }}
                   <li>
                     <a {href} data-sveltekit-prefetch="off">
                       <button
-                        class="flex justify-center items-center font-semibold hover:opacity-80"
-                        ><Icon {icon} style="mr-2 w-6 md:w-8" /> {$t(key)}
+                        class="flex justify-center items-center font-semibold hover:opacity-80 dark:hover:opacity-70"
+                        ><Icon {icon} style="mr-2 w-6 md:w-8 dark:invert" /> {$t(key)}
                       </button>
                     </a>
                   </li>
                 {/each}
               </ul>
-              <hr class="my-4" />
+              <hr class="my-4 dark:border-white" />
               <a href="/">
-                <img src="/images/logo.svg" alt="Swapee" class="w-32" />
+                <img src="/images/logo.svg" alt="Swapee" class="w-32 dark:hidden" />
+                <img src="/images/logo-white.png" alt="Swapee" class="w-32 hidden dark:block" />
               </a>
             </div>
           </OutClick>
         </div>
       {:else}
         <a href={`/login?redirect=${$page.url.pathname}`}>
-          <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
+          <button class="bg-white dark:bg-black px-5 py-2 rounded-xl font-semibold text-sm"
             >{$t("nav.signIn")}</button
           >
         </a>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 98a04ef6..d72f10e6 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -21,13 +21,13 @@
   {:else}
     <div class="text-5xl font-bold tabular-nums">
       {#if isNaN(rate)}
-        <div class="text-gray-200">&mdash;</div>
+        <div class="text-gray-200 ">&mdash;</div>
       {:else}
         {f((user.balance * rate) / sats, user.currency)}
       {/if}
     </div>
 
-    <div class="text-secondary text-2xl">
+    <div class="text-secondary dark:text-gray-300 text-2xl">
       ⚡️{s(user.balance)}
     </div>
   {/if}
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 901d11ba..5690609c 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -198,7 +198,7 @@
         />
       </div>
       <div class="mt-2">
-        <span class="text-secondary mr-1"
+        <span class="text-secondary dark:text-gray-300 mr-1"
           >{fiat ? sat(amount) : f(amountFiat, currency)}</span
         >
         <button
@@ -213,7 +213,7 @@
                   : 0;
             }
             fiat = !fiat;
-          }}><Icon icon="swap" style="inline hover:opacity-80" /></button
+          }}><Icon icon="swap" style="inline hover:opacity-80 dark:invert" /></button
         >
       </div>
     </div>
@@ -223,7 +223,7 @@
 				{#if value === arrow}
 					<button
 						type="button"
-						class="bg-gray-100 rounded-xl py-4 px-8 font-semibold active:bg-black active:flex justify-center items-center hover:opacity-80"
+						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black active:flex justify-center items-center hover:opacity-80"
 						on:click={() => handleInput(value)}
 					>
 						<Left />
@@ -231,7 +231,7 @@
 				{:else}
 					<button
 						type="button"
-						class="bg-gray-100 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
+						class="bg-gray-100 dark:bg-stone-800 rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
 						on:click={() => handleInput(value)}>{value}</button
 					>
 				{/if}
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index da65d718..81714904 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -23,10 +23,10 @@
 </script>
 
 <div
-  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+  class="fixed inset-0 bg-gray-600 dark:bg-stone-950 dark:bg-opacity-90 bg-opacity-50 overflow-y-auto h-full w-full z-20"
 >
   <div
-    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-stone-800 dark:border-0 space-y-5"
   >
     <h1 class="text-center text-2xl font-semibold">
       Please enter your password
@@ -38,7 +38,7 @@
             name="password"
             type="text"
             required
-            class="bg-primary"
+            class="bg-primary dark:bg-stone-700 dark:border-gray-50"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -48,7 +48,7 @@
             name="password"
             type="password"
             required
-            class="bg-primary"
+            class="bg-primary dark:bg-stone-700 dark:border-gray-50"
             bind:value={password}
             autocapitalize="none"
             use:focus
@@ -57,7 +57,7 @@
         <button
           type="button"
           on:click={() => (revealPassword = !revealPassword)}
-          class="absolute right-5 top-6"
+          class="absolute right-5 dark:invert {revealPassword ? 'top-[18px]' : 'top-[16px]'}"
         >
           <Icon icon={revealPassword ? "eye" : "eye-off"} />
         </button>
@@ -65,7 +65,7 @@
       <div class="w-full flex">
         <button
           type="button"
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 dark:text-gray-50 rounded-xl font-semibold py-3 w-40 hover:opacity-80 mx-auto"
           on:click={cancel}
           on:keydown={cancel}
         >
@@ -73,7 +73,7 @@
         </button>
         <button
           type="submit"
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 bg-black text-white dark:bg-gray-50 dark:text-black rounded-xl font-semibold py-3 w-40 hover:opacity-80 mx-auto"
         >
           <div class="my-auto">Submit</div>
         </button>
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index 9938f9a1..58a669e8 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -43,16 +43,16 @@
 
 {#if loaded}
   <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50"
+    class="fixed inset-0 bg-gray-600 dark:bg-stone-950 dark:bg-opacity-90 bg-opacity-50 overflow-y-auto h-full w-full z-50"
   >
     <div
-      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+      class="relative top-40 mx-auto p-5 border w-96 shadow-lg rounded-lg bg-white dark:bg-stone-800 dark:border-0 space-y-5"
     >
       <h1 class="text-center text-2xl font-semibold">{title}</h1>
       <Pinpad bind:v={p} {cancel} />
       <div class="w-full flex">
         <button
-          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          class="border-2 border-black dark:border-gray-50 dark:text-gray-50 rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80"
           on:click|preventDefault={cancel}
         >
           <div class="my-auto">Cancel</div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index 641ddb2b..1dc20366 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -45,14 +45,14 @@
           use:focus
           bind:value={v}
           type="password"
-          class="outline-none border-0 text-center py-0"
+          class="outline-none border-0 text-center py-0 dark:bg-stone-800 dark:text-white"
           pattern="[0-9]+"
         />
       {:else}
         <input
           on:keydown={validate}
           bind:value={v}
-          class="outline-none border-0 text-center py-0"
+          class="outline-none border-0 text-center py-0 dark:bg-stone-800 dark:text-white" 
           type="text"
           pattern="[0-9]+"
         />
@@ -60,18 +60,18 @@
       <button
         type="button"
         on:click={() => (hide = !hide)}
-        class="absolute -right-5 top-5"
+        class="absolute -right-5 dark:invert {hide ? 'top-5' : 'top-[22px]'}"
       >
         <Icon icon={hide ? "eye-off" : "eye"} style="w-8" />
       </button>
     </div>
 
-    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
+    <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto">
       {#each numPad as value}
         {#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="bg-primary dark:bg-stone-700 rounded-xl py-4 px-8 font-semibold dark:text-gray-50 active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
             on:click={() => handleInput(value)}
           >
             <Left />
@@ -79,7 +79,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="bg-primary dark:bg-stone-700 rounded-xl py-4 px-8 font-semibold dark:text-gray-50 active:bg-black dark:active:bg-stone-900 active:text-white hover:opacity-80"
             on:click={() => handleInput(value)}>{value}</button
           >
         {/if}
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 2f92837d..1d34ccd6 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -3,7 +3,9 @@
   export let value;
 </script>
 
-<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<label for={id} class="inline-flex relative items-center mr-5 cursor-pointer" on:click>
   <input
     type="checkbox"
     bind:checked={value}
@@ -12,6 +14,6 @@
     class="sr-only peer"
   />
   <div
-    class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-500"
+    class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-stone-800 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-500"
   />
 </label>