Started working on adding mobile buzzers, a lot of rewriting

src/lib/components/ConfirmDialog.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
     import * as m from "$lib/paraglide/messages";
+    import { KvButton } from "$lib/components/kuldvillak/ui";
+    import { trapFocus } from "$lib/utils/focusTrap";
 
     interface ConfirmDialogProps {
         open?: boolean;
@@ -54,6 +56,7 @@
                bg-kv-blue border-4 md:border-8 border-kv-black
                p-4 md:p-6 w-[90vw] max-w-[380px]
                flex flex-col gap-4 items-center text-center"
+        use:trapFocus
     >
         <h3
             class="text-xl md:text-2xl text-kv-white uppercase font-kv-body kv-shadow-text"
@@ -66,18 +69,22 @@
             {message}
         </p>
         <div class="flex gap-3 w-full">
-            <button
+            <KvButton
+                variant="primary"
                 onclick={handleCancel}
-                class="flex-1 bg-kv-blue border-4 border-black font-kv-body text-kv-white uppercase px-4 py-3 cursor-pointer hover:opacity-80 kv-shadow-button"
+                size="md"
+                class="flex-1"
             >
-                <span class="kv-shadow-text">{cancelText}</span>
-            </button>
-            <button
+                {cancelText}
+            </KvButton>
+            <KvButton
+                variant="secondary"
                 onclick={handleConfirm}
-                class="flex-1 bg-kv-yellow border-4 border-black font-kv-body text-black uppercase px-4 py-3 cursor-pointer hover:opacity-80 kv-shadow-button"
+                size="md"
+                class="flex-1"
             >
                 {confirmText}
-            </button>
+            </KvButton>
         </div>
     </div>
 {/if}