From d2ff4ac87c33d016c0eefdbe0cb91d93272cfbc8 Mon Sep 17 00:00:00 2001
From: JustTemmie <47639983+JustTemmie@users.noreply.github.com>
Date: Thu, 17 Jul 2025 16:09:10 +0200
Subject: [PATCH] style: improve base modal close button

---
 components/Modal/Base.vue           |  9 ++++++---
 components/UserInterface/Button.vue | 14 +++++++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index 1f57901..b3d5ee3 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,7 +1,7 @@
 <template>
   <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()" />
+		<Button text="✕" variant="stealth" :callback="() => dialog?.remove()" />
 	</span>
 	<div class="modal-content">
 		<h1 class="modal-title">{{ title }}</h1>
@@ -42,9 +42,12 @@ onMounted(() => {
   flex-direction: column;
   gap: 1em;
   opacity: 100%;
-  padding: 1%;
-  background-color: var(--sidebar-highlighted-background-color);
+
+  padding: var(--standard-radius); 
+	border-radius: var(--standard-radius);
+	background-color: var(--chat-highlighted-background-color);
   color: var(--text-color);
+
   overflow: hidden;
 }
 
diff --git a/components/UserInterface/Button.vue b/components/UserInterface/Button.vue
index 467b65e..90d5d2b 100644
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@@ -1,6 +1,7 @@
 <template>
-	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
-		{{ props.text }}
+	<button class="button" :class="props.variant + '-button'"
+	@click="props.callback ? props.callback() : null">
+			{{ props.text }}
 	</button>
 </template>
 
@@ -9,7 +10,7 @@
 const props = defineProps<{
 	text: string,
 	callback?: CallableFunction,
-	variant?: "normal" | "scary" | "neutral",
+	variant?: "normal" | "scary" | "neutral" | "stealth",
 }>();
 
 </script>
@@ -50,4 +51,11 @@ const props = defineProps<{
 	background-color: var(--accent-highlighted-color);
 }
 
+.stealth-button {
+	background-color: unset;
+}
+.stealth-button:hover {
+	background-color: unset;
+}
+
 </style>
\ No newline at end of file