From ef7b4efa8153285e709b205437b731a59b43326a Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Sat, 19 Apr 2025 01:07:08 +0200
Subject: [PATCH] fix: dialogs look kinda bad

---
 src/app.css                                        |  8 ++++++++
 src/lib/components/app/disclaimer.svelte           |  2 +-
 src/lib/components/ui/dialog/dialog-content.svelte | 13 +++++++------
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/app.css b/src/app.css
index f43de59..a1a975a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -38,6 +38,10 @@
     --glass-bg: rgba(0, 0, 0, 0.1);
     --glass-hover: rgba(0, 0, 0, 0.15);
     --glass-border: rgba(0, 0, 0, 0.2);
+
+    --thicker-glass-bg: rgba(0, 0, 0, 0.25);
+    --thicker-glass-hover: rgba(0, 0, 0, 0.35);
+    --thicker-glass-border: rgba(0, 0, 0, 0.45);
   }
 
   .dark {
@@ -74,6 +78,10 @@
     --glass-bg: rgba(255, 255, 255, 0.1);
     --glass-hover: rgba(255, 255, 255, 0.15);
     --glass-border: rgba(255, 255, 255, 0.2);
+
+    --thicker-glass-bg: rgba(255, 255, 255, 0.25);
+    --thicker-glass-hover: rgba(255, 255, 255, 0.35);
+    --thicker-glass-border: rgba(255, 255, 255, 0.45);
   }
 }
 
diff --git a/src/lib/components/app/disclaimer.svelte b/src/lib/components/app/disclaimer.svelte
index 5016bcc..2aa0495 100644
--- a/src/lib/components/app/disclaimer.svelte
+++ b/src/lib/components/app/disclaimer.svelte
@@ -17,7 +17,7 @@
     </p>
     <p>
       I do not have the right to the songs played on this radio station, nor do I have any
-      affiliation with Chillhop Music. <a href="https://github.com/SrIzan10/chillhop" class="underline">This project is open source</a> and not intended for
+      affiliation with Chillhop Music. <a href="https://github.com/SrIzan10/chillhop" class="underline" target="_blank">This project is open source</a> and not intended for
       commercial use.
     </p>
     <p>
diff --git a/src/lib/components/ui/dialog/dialog-content.svelte b/src/lib/components/ui/dialog/dialog-content.svelte
index 5335264..96ddf50 100644
--- a/src/lib/components/ui/dialog/dialog-content.svelte
+++ b/src/lib/components/ui/dialog/dialog-content.svelte
@@ -21,16 +21,17 @@
   <DialogPrimitive.Content
       bind:ref
       class={cn(
-    "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
-    "backdrop-blur-md text-dynamic border drop-shadow-md shadow-lg",
-    "bg-[var(--glass-bg)] transition hover:bg-[var(--glass-hover)] border-[var(--glass-border)]",
-    className
-  )}
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+        "backdrop-blur-md border drop-shadow-md shadow-lg",
+        "bg-black/40 dark:bg-white/30 transition border-white/20 dark:border-black/20",
+        "text-white dark:text-white font-medium",
+        className
+      )}
       {...restProps}
   >
       {@render children?.()}
       <DialogPrimitive.Close
-          class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none text-dynamic backdrop-blur-sm p-1 shadow-sm bg-[var(--glass-bg)] border-[var(--glass-border)] hover:bg-[var(--glass-hover)]"
+        class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none backdrop-blur-sm p-1 shadow-sm bg-black/40 dark:bg-white/20 hover:bg-black/60 dark:hover:bg-white/40 text-white"
       >
           <X class="size-4" />
           <span class="sr-only">Close</span>