fix: ios buttons

src/lib/components/ui/button/button.svelte

@@ -8,7 +8,7 @@
     variants: {
       variant: {
         default:
-          'bg-white/10 backdrop-blur-md hover:bg-white/15 text-foreground border border-white/20 shadow-lg',
+          'bg-neutral-400/10 dark:bg-neutral-600/10 hover:bg-neutral-400/20 dark:hover:bg-neutral-600/20 text-foreground border border-neutral-400/20 dark:border-neutral-600/20 shadow-lg', 
         olddefault: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
         outline:

src/lib/components/ui/dialog/dialog-content.svelte

@@ -1,40 +1,43 @@
 <script lang="ts">
-  import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-  import X from "@lucide/svelte/icons/x";
-  import type { Snippet } from "svelte";
-  import * as Dialog from "./index.js";
-  import { cn } from "$lib/utils.js";
+  import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import X from '@lucide/svelte/icons/x';
+  import type { Snippet } from 'svelte';
+  import * as Dialog from './index.js';
+  import { cn } from '$lib/utils.js';
+  import DialogOverlay from './dialog-overlay.svelte';
 
   let {
-      ref = $bindable(null),
-      class: className,
-      portalProps,
-      children,
-      ...restProps
+    ref = $bindable(null),
+    class: className,
+    portalProps,
+    children,
+    ...restProps
   }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
-      portalProps?: DialogPrimitive.PortalProps;
-      children: Snippet;
+    portalProps?: DialogPrimitive.PortalProps;
+    children: Snippet;
   } = $props();
 </script>
 
 <Dialog.Portal {...portalProps}>
+  <DialogOverlay />
   <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 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}
+    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 border drop-shadow-md shadow-lg',
+      'bg-black/40 dark:bg-white/30 transition border-white/20 dark:border-black/20',
+      className
+    )}
+    {...restProps}
   >
+    <div class="prose prose-invert max-w-none space-y-3 text-dynamic">
       {@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 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>
-      </DialogPrimitive.Close>
+    </div>
+    <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 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>
+    </DialogPrimitive.Close>
   </DialogPrimitive.Content>
 </Dialog.Portal>

src/routes/+layout.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import '../app.css';
   import { ModeWatcher } from "mode-watcher";
+  import { dev } from '$app/environment';
   let { children } = $props();
 </script>
 
 <ModeWatcher />
+{#if !dev}
+  <script defer src="https://analytics.srizan.dev/ua.js" data-website-id="02aba16d-f8eb-4363-973b-dab04db4de10"></script>
+{/if}
 {@render children()}