Move title back to ConfirmModal and position modal close with absolute positioning

diff --git a/client/components/ConfirmModal.vue b/client/components/ConfirmModal.vue
index 8b347737ac2ead9c3f5cc5e2da6af00cde025774..8617fb08acb1014ce3bc7aa479e56ef2c7586edb 100644 (file)
--- a/client/components/ConfirmModal.vue
+++ b/client/components/ConfirmModal.vue
@@ -2,9 +2,10 @@
   <Modal
     ref="modal"
     :class="{ 'border border-l-4 border-l-theme-failure': isDanger }"
-    :title="title"
     :closeHandler="cancelHandler"
   >
+    <!-- Title -->
+    <div class="mb-6 text-xl">{{ title }}</div>
     <!-- Message -->
     <div class="mb-6">{{ message }}</div>
     <!-- Buttons -->

diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index 92dd8e69e0eff79c742fc9d8ea1b5cd9761ce78a..d4bd824851b1f8f9c0694ef5077a4fb62565e64c 100644 (file)
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -1,20 +1,19 @@
 <template>
   <!-- Mask -->
   <div
+    v-if="isVisible"
     class="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center bg-theme-background-tint/40 backdrop-blur-sm"
-    :class="{ hidden: !isVisible }"
   >
     <!-- Modal -->
     <div
-      class="max-w-96 grow rounded-lg border border-theme-border bg-theme-background px-6 py-4 shadow-lg"
+      class="relative max-w-96 grow rounded-lg border border-theme-border bg-theme-background px-6 py-4 shadow-lg"
       :class="$attrs.class"
     >
-      <!-- Title -->
-      <div class="mb-6 flex justify-between">
-        <div class="text-xl">{{ title }}</div>
-        <CustomButton :iconPath="mdiWindowClose" @click="close" />
-      </div>
-      <!-- Slot -->
+      <CustomButton
+        :iconPath="mdiWindowClose"
+        @click="close"
+        class="absolute right-1 top-1"
+      />
       <slot></slot>
     </div>
   </div>
@@ -31,7 +30,6 @@ defineOptions({
 const props = defineProps({
   closeHandler: Function,
   modalClasses: String,
-  title: String,
 });
 
 import CustomButton from "./CustomButton.vue";