daisy fixes

5 files changed, 66 insertions, 79 deletions

diff --git a/src/app.css b/src/app.css
index c04131bd..fca47b23 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,50 +1,59 @@
+/* 1) Load Tailwind first */
 @import "tailwindcss";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-
-@font-face {
-  font-family: "PublicSans";
-  src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf")
-    format("truetype");
+/* 2) Register DaisyUI themes */
+@plugin "daisyui" {
+  themes: lofi --default, black --prefersdark;
 }
 
-html {
-  font-family: PublicSans, sans-serif;
+@plugin "daisyui/theme" {
+  name: "lofi";
+  default: true;
+  --gradient: #C3CFE2;
+  --color-error: #b91c1c;
 }
 
-::selection {
-  color: black;
-  background: #eaf2ff;
+@plugin "daisyui/theme" {
+  name: "black";
+  prefersdark: true;
+  --gradient: #C3CFE2;
+  --color-secondary: #CCC;
+  --color-error: #f87171;
 }
 
-:fullscreen {
-  background-color: white;
-}
+/* 3) Tell Tailwind which layers we’ll @apply from */
+@reference utilities;
+@reference components;
 
-input:not([type="range"]) {
-  @apply input
+/* 4) Now your custom CSS that uses @apply */
+.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;
 }
 
-.input {
-  @apply input-lg input-primary;
+@font-face {
+  font-family: "PublicSans";
+  src: url("/fonts/Public_Sans/static/PublicSans-Regular.ttf") format("truetype");
 }
 
-textarea {
-  @apply textarea textarea-lg textarea-primary;
-}
+html { font-family: PublicSans, sans-serif; }
 
-select {
-  @apply select select-lg select-primary;
-}
+::selection { color: black; background: #eaf2ff; }
+:fullscreen { background-color: white; }
 
-input:not([type="range"]), textarea, select, .input  {
-  @apply w-full rounded-2xl;
-}
+/* Note: @apply-ing DaisyUI component classes requires components reference */
+.input { @apply input-lg input-primary h-16 px-4; }
+
+/* If you want to *turn* native inputs into DaisyUI inputs via @apply: */
+input:not([type="range"]) { @apply input input-lg input-primary h-16 px-4; }
+textarea { @apply textarea textarea-lg textarea-primary py-4; }
+select { @apply select select-lg select-primary h-16 px-4; }
 
-textarea:focus, textarea:focus-within, .input:focus, .input:focus-within {
-  @apply outline-offset-0;
+input:not([type="range"]), textarea, select, .input  {
+  @apply rounded-2xl w-full;
 }
 
 input.clean, textarea.clean {
@@ -56,33 +65,11 @@ input.clean, textarea.clean {
   box-shadow: none !important;
 }
 
-.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;
-}
+button { cursor: pointer !important; }
+.btn { @apply rounded-2xl btn-lg btn-block outline-none h-16 cursor-pointer; }
 
-:root, [data-theme="dark"] {
+@layer components {
+  :where(input, textarea, select, .input, .textarea, .select) {
+    outline-offset: 0 !important;
+  }
 }
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index 421b590a..9129e8f3 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -163,25 +163,25 @@
 
 <div class="space-y-2">
   <div class="font-bold">{$t("user.nostrPubkey")}</div>
-  <div class="flex gap-4">
-    <textarea name="pubkey" bind:value={npub} rows={3}> </textarea>
-    <div class="flex my-auto gap-1">
-      <button
-        type="button"
-        class="my-auto btn btn-circle"
-        onclick={() => copy(npub)}
-        aria-label="Copy"
-        ><iconify-icon noobserver icon="ph:copy-bold" width="32"
-        ></iconify-icon></button
-      >
-      <a
-        href={`/qr/${encodeURIComponent(npub)}`}
-        class="my-auto btn btn-circle"
-        aria-label="QR"
-      >
-        <iconify-icon noobserver icon="ph:qr-code-bold" width="32"
-        ></iconify-icon>
-      </a>
+  <textarea name="pubkey" bind:value={npub} rows={3}></textarea>
+  <div>
+  <div class="flex my-auto gap-1">
+    <button
+      type="button"
+      class="my-auto btn btn-circle !w-auto grow"
+      onclick={() => copy(npub)}
+      aria-label="Copy"
+      ><iconify-icon noobserver icon="ph:copy-bold" width="32"
+      ></iconify-icon></button
+    >
+
+    <a
+      href={`/qr/${encodeURIComponent(npub)}`}
+      class="my-auto btn btn-circle !w-auto grow"
+      aria-label="QR"
+    >
+      <iconify-icon noobserver icon="ph:qr-code-bold" width="32"></iconify-icon>
+    </a>
     </div>
   </div>
 
diff --git a/src/routes/(app)/settings/profile/+page.svelte b/src/routes/(app)/settings/profile/+page.svelte
index ec9855d0..3b7de9d3 100644
--- a/src/routes/(app)/settings/profile/+page.svelte
+++ b/src/routes/(app)/settings/profile/+page.svelte
@@ -116,7 +116,7 @@
       >
       <input
         type="file"
-        class="hidden"
+        class="hidden!"
         bind:this={avatarInput}
         onchange={(e) => handleFile(e, "picture")}
       />
@@ -158,7 +158,7 @@
   >
   <input
     type="file"
-    class="hidden"
+    class="hidden!"
     bind:this={bannerInput}
     onchange={(e) => handleFile(e, "banner")}
   />
diff --git a/src/routes/(static)/login/+page.svelte b/src/routes/(static)/login/+page.svelte
index 1a1f745c..825f6a88 100644
--- a/src/routes/(static)/login/+page.svelte
+++ b/src/routes/(static)/login/+page.svelte
@@ -124,7 +124,7 @@
 </script>
 
 <div
-  class="mx-auto md:shadow-xl rounded-3xl max-w-xl w-full md:w-[480px] md:p-8 mb-20"
+  class="mx-auto md:shadow-xl rounded-3xl max-w-xl w-full md:w-[480px] md:p-8 mb-20 space-y-5"
 >
   <h1 class="text-2xl font-bold text-center">{$t("login.signIn")}</h1>
   {#if form?.error && !form?.message.includes("2fa")}
diff --git a/src/routes/(static)/register/+page.svelte b/src/routes/(static)/register/+page.svelte
index edb63de1..b0368d47 100644
--- a/src/routes/(static)/register/+page.svelte
+++ b/src/routes/(static)/register/+page.svelte
@@ -222,7 +222,7 @@
   <h1 class="text-2xl font-bold text-center">{$t("login.createAccount")}</h1>
   <input
     type="file"
-    class="hidden"
+    class="hidden!"
     bind:this={avatarInput}
     onchange={(e) => handleFile(e, "picture")}
   />