From c2ae978ec1f299c147e447d416931f9d95c2c127 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Sun, 13 Jul 2025 04:10:49 +0200
Subject: [PATCH] feat: redesign Modal component and add exit button

---
 components/Modal.vue | 51 +++++++++++++++++++++++++++++++++-----------
 1 file changed, 38 insertions(+), 13 deletions(-)

diff --git a/components/Modal.vue b/components/Modal.vue
index ef96311..041dd1a 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -1,25 +1,32 @@
 <template>
-  <dialog ref="dialog" class="modal">
-    <h1 class="modal-title">{{ title }}</h1>
-    <slot />
+  <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
+	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
+		<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
+	</span>
+	<div class="modal-content">
+		<h1 class="modal-title">{{ title }}</h1>
+		<slot />
+	</div>
   </dialog>
 </template>
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-
+import Button from './UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
+console.log("props:", props);
+
 onMounted(() => {
-  if (dialog) {
-    dialog.value?.showModal();
+  if (dialog.value) {
+    dialog.value.showModal();
     if (props.onClose) {
-      dialog.value?.addEventListener("close", props.onClose);
+      dialog.value.addEventListener("close", props.onClose);
     }
     if (props.onCancel) {
-      dialog.value?.addEventListener("cancel", props.onCancel);
+      dialog.value.addEventListener("cancel", props.onCancel);
     }
   }
 });
@@ -33,15 +40,22 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  gap: 1em;
   opacity: 100%;
   padding: 1%;
-  background-color: var(--background-color);
-  color: var(--main-text-color);
+  background-color: var(--sidebar-highlighted-background-color);
+  color: var(--text-color);
+  overflow: hidden;
 }
 
-.modal::backdrop {
-  background-color: rgb(50, 50, 50);
-  opacity: 70%;
+.modal-regular::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 0%;
+}
+
+.modal-obscure::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 80%;
 }
 
 .modal-top-container {
@@ -55,5 +69,16 @@ onMounted(() => {
 
 .modal-title {
   font-size: 1.5rem;
+  padding: 0;
 }
+
+.modal-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1em;
+	margin: 1em;
+	width: 100%;
+}
+
 </style>
\ No newline at end of file