diff --git a/web/src/app.css b/web/src/app.css index 9520983..6d7d61c 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -13,7 +13,7 @@ :root { --light-background: #f5f5f5; --light-foreground: #e0e0e0; - --light-accent: #303052; + --light-accent: #2e2e88; --light-text: rgb(34, 40, 49); --light-highlight-text: #c28e4a; --light-error-text: #4b0000; @@ -910,6 +910,14 @@ @apply fixed inset-0 z-40 flex items-center justify-center backdrop-blur-xs; } + .modal-exit-button { + @apply flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--light-accent)] bg-transparent p-0 text-[var(--light-text)] hover:bg-[var(--light-foreground)]/80; + } + + .dark .modal-exit-button { + @apply hover:bg-[var(--dark-foreground)]/80; + } + .modal-content { @apply mx-4 max-h-[90vh] w-full max-w-[90vw] overflow-y-auto rounded-lg border-2 border-[var(--light-accent)]/10 bg-[var(--light-background)] shadow-lg; } diff --git a/web/src/lib/components/AdminModal.svelte b/web/src/lib/components/AdminModal.svelte index b2935f5..2bef727 100644 --- a/web/src/lib/components/AdminModal.svelte +++ b/web/src/lib/components/AdminModal.svelte @@ -4,7 +4,7 @@ import { onMount } from "svelte" import type { User } from "$lib/logic/model" import Delete from "$lib/icons/sidebar/Delete.svelte" - import { formatDateShort } from "$lib/util/contentVisual" + import { clickOutside, formatDateShort } from "$lib/util/contentVisual" // props export let onClose: () => void @@ -46,14 +46,6 @@ } } - const handleClickOutside = (event: MouseEvent) => { - // close the modal if user clicks outside of it - const target = event.target as HTMLElement - if (target.classList.contains("modal-backdrop")) { - onClose() - } - } - const handleModalContentKeydown = (_event: KeyboardEvent) => { // accessibility compliance handler, actual handling is done by the global keydown handler } @@ -71,71 +63,72 @@ diff --git a/web/src/lib/util/contentVisual.ts b/web/src/lib/util/contentVisual.ts index a0b7df2..c6ae4af 100644 --- a/web/src/lib/util/contentVisual.ts +++ b/web/src/lib/util/contentVisual.ts @@ -50,3 +50,25 @@ export const formatTitleWithHighlight = (title: string): string => { return `${expirationPrefix} ${cleanTitle}` } + +export const clickOutside = ( + node: HTMLElement, + callbackFunction: () => void +): { + destroy: () => void +} => { + const handleClick = (event: MouseEvent): void => { + if (node && !node.contains(event.target as Node) && !event.defaultPrevented) { + callbackFunction() + } + } + + // event listener with capture phase to ensure it runs before other click handlers + document.addEventListener("click", handleClick, true) + + return { + destroy: () => { + document.removeEventListener("click", handleClick, true) + } + } +}