upgrade dependencies

5 files changed, 79 insertions, 28 deletions

diff --git a/src/app.css b/src/app.css
index f01c9346..c04131bd 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,7 +1,9 @@
+@import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 @font-face {
   font-family: "PublicSans";
   src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf")
@@ -26,15 +28,15 @@ input:not([type="range"]) {
 }
 
 .input {
-  @apply input-bordered input-lg input-primary;
+  @apply input-lg input-primary;
 }
 
 textarea {
-  @apply textarea textarea-bordered textarea-lg textarea-primary;
+  @apply textarea textarea-lg textarea-primary;
 }
 
 select {
-  @apply select select-bordered select-lg select-primary;
+  @apply select select-lg select-primary;
 }
 
 input:not([type="range"]), textarea, select, .input  {
@@ -57,3 +59,30 @@ input.clean, textarea.clean {
 .btn {
   @apply rounded-2xl btn-lg btn-block outline-none
 }
+
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark;
+}
+
+@plugin "daisyui/theme" {
+  name: "light";
+  default: true;
+
+  --gradient: #C3CFE2;
+  --color-error: #b91c1c; 
+  --color-primary: #000;
+  --color-secondary: #111;
+}
+
+@plugin "daisyui/theme" {
+  name: "dark";
+  prefersdark: true;
+
+  --gradient: #C3CFE2;
+  --color-primary: #FFF;
+  --color-secondary: #CCC;
+  --color-error: #f87171;
+}
+
+:root, [data-theme="dark"] {
+}
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 7ed4563f..326f488b 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -93,7 +93,7 @@
 
 <style>
   .btn-menu {
-    @apply flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl;
+    @apply flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 drop-shadow-xl;
   }
 
   header {
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index 5d7628f2..c09ed75f 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -1,7 +1,7 @@
 <script>
   import { theme } from "$lib/store";
   import DarkToggle from "$comp/DarkToggle.svelte";
-  import OutClick from "svelte-outclick";
+  import { OutClick } from "svelte-outclick";
   let { t, user, w, opacity } = $props();
 
   let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
diff --git a/src/lib/locales.ts b/src/lib/locales.ts
index b87ecc7a..68a28abd 100644
--- a/src/lib/locales.ts
+++ b/src/lib/locales.ts
@@ -1,23 +1,41 @@
-import {
-	de,
-	el,
-	enUS as en,
-	es,
-	faIR as fa,
-	fr,
-	ja,
-	pt,
-	ru,
-	zhCN as zh,
-	arSA as ar,
-	hiIN as hi,
-	bnBD as bn,
-	tr,
-	ko,
-	it,
-	nl,
-	th,
-	pl
-} from "date-fns/locale/index.js";
+import de from "date-fns/locale/de";
+import el from "date-fns/locale/el";
+import en from "date-fns/locale/en-US";
+import es from "date-fns/locale/es";
+import fa from "date-fns/locale/fa-IR";
+import fr from "date-fns/locale/fr";
+import ja from "date-fns/locale/ja";
+import pt from "date-fns/locale/pt";
+import ru from "date-fns/locale/ru";
+import zh from "date-fns/locale/zh-CN";
+import ar from "date-fns/locale/ar-SA";
+import hi from "date-fns/locale/hi";
+import bn from "date-fns/locale/bn";
+import tr from "date-fns/locale/tr";
+import ko from "date-fns/locale/ko";
+import it from "date-fns/locale/it";
+import nl from "date-fns/locale/nl";
+import th from "date-fns/locale/th";
+import pl from "date-fns/locale/pl";
 
-export default { de, el, en, es, fa, fr, ja, pt, ru, zh, ar, hi, bn, tr, ko, it, nl, th, pl };
+export default {
+  de,
+  el,
+  en,
+  es,
+  fa,
+  fr,
+  ja,
+  pt,
+  ru,
+  zh,
+  ar,
+  hi,
+  bn,
+  tr,
+  ko,
+  it,
+  nl,
+  th,
+  pl
+};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0d686f47..8ae31608 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -11,6 +11,9 @@
   let { pathname, theme } = $state(data);
   $effect(() => ($themeStore = data.theme));
   $effect(() => (theme = $themeStore));
+  $effect(() => {
+      document.documentElement.setAttribute("data-theme", theme);
+  });
 
   let host = PUBLIC_DOMAIN.includes("localhost")
     ? `http://${PUBLIC_DOMAIN}`
@@ -21,6 +24,7 @@
       navigator.clearAppBadge().catch(() => {});
     }
   }
+
   onMount(() => {
     if (!browser) return;
 
@@ -83,7 +87,7 @@
 </svelte:head>
 
 {#if !$loading}
-  <main data-theme={theme}>
+  <main>
     {@render children?.()}
   </main>
 {/if}