From e7b69d706554535f68aa84f02e6c1379ba1760da Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:24:58 +0200
Subject: [PATCH 1/4] feat: simplify base modal and close it by clicking
 outside of it

---
 components/Modal/Base.vue | 86 ++++++++++++---------------------------
 1 file changed, 25 insertions(+), 61 deletions(-)

diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index a5d8ebd..42be98a 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -1,18 +1,11 @@
 <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="✕" variant="stealth" :callback="onCloseButton" />
-	</span>
-	<div class="modal-content">
-		<h1 class="modal-title">{{ title }}</h1>
-		<slot />
-	</div>
+    <slot />
   </dialog>
 </template>
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-import Button from '~/components/UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
@@ -20,75 +13,46 @@ const dialog = ref<HTMLDialogElement>();
 onMounted(() => {
   if (dialog.value) {
     dialog.value.showModal();
-    if (props.onClose) {
-      dialog.value.addEventListener("close", props.onClose);
-    }
-    if (props.onCancel) {
-      dialog.value.addEventListener("cancel", props.onCancel);
-    }
+
+    // close the modal if you click outside of it
+    dialog.value.addEventListener('click', (event) => {
+      if (event.target === dialog.value) {
+        dialog.value.close();
+      }
+    });
+
+    if (props.onClose) dialog.value.addEventListener("close", props.onClose);
+    if (props.onCancel) dialog.value.addEventListener("cancel", props.onCancel);
   }
 });
-
-function onCloseButton () {
-  if (dialog.value) {
-    if (props.onCloseButton) {
-      props.onCloseButton()
-    }
-    
-    dialog.value.remove
-  }
-}
-
 </script>
 
-<style>
+<style scoped>
 .modal {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  gap: 1em;
-  opacity: 100%;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  /* preferably set these to 70dvh and 70dvw in your components, this is a failsafe if you forget */
+  max-height: 90dvh;
+	max-width: 90dvw;
 
-  padding: var(--standard-radius); 
 	border-radius: var(--standard-radius);
-	background-color: var(--chat-highlighted-background-color);
-  color: var(--text-color);
+  border-width: 0;
+  padding: 0;
 
-  overflow: hidden;
+  /* completely transparent colour, fixes weird border radius stuff */
+  background-color: #b00b1e00; 
 }
 
 .modal-regular::backdrop {
 	background-color: var(--chat-background-color);
-	opacity: 0%;
+	opacity: 10%;
 }
 
 .modal-obscure::backdrop {
 	background-color: var(--chat-background-color);
 	opacity: 80%;
 }
-
-.modal-top-container {
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-
-.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
-- 
2.47.3


From 05c351feee4a9cd20cc1cd7c519402c1e3e0f148 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:25:20 +0200
Subject: [PATCH 2/4] chore: update profile modal to fit new baes modal

---
 components/Modal/ProfilePopup.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index b99a9ea..d04587e 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -114,16 +114,16 @@ function buttonEditProfile() {
 	text-align: left;
 
 	position: relative;
-	max-height: 60dvh;
-	max-width: 60dvw;
+	max-height: 70dvh;
+	max-width: 70dvw;
 	height: 30em;
 	width: 40em;
 
 	display: flex;
 	flex-direction: column;
 
+	color: var(--text-color);
 	background-color: var(--chat-background-color);
-	border-radius: var(--standard-radius);
 
 	overflow-y: scroll;
 }
@@ -142,7 +142,6 @@ function buttonEditProfile() {
 	z-index: 0;
 
 	background-color: var(--primary-color);
-	border-radius: var(--standard-radius) var(--standard-radius) 0 0; /* top left and top right */
 }
 
 #avatar {
-- 
2.47.3


From 783eda56b14f661df2360b493b867857f38687d5 Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:36:57 +0200
Subject: [PATCH 3/4] style: add modal background colour to themes

---
 components/Modal/Base.vue                  | 3 ++-
 components/Modal/ProfilePopup.vue          | 2 +-
 public/themes/style/ash.css                | 1 +
 public/themes/style/dark.css               | 1 +
 public/themes/style/description.css        | 1 +
 public/themes/style/light.css              | 1 +
 public/themes/style/rainbow-capitalism.css | 1 +
 7 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/Modal/Base.vue b/components/Modal/Base.vue
index 42be98a..f2360bc 100644
--- a/components/Modal/Base.vue
+++ b/components/Modal/Base.vue
@@ -38,7 +38,8 @@ onMounted(() => {
   max-height: 90dvh;
 	max-width: 90dvw;
 
-	border-radius: var(--standard-radius);
+	background-color: var(--modal-background-color);
+  border-radius: var(--standard-radius);
   border-width: 0;
   padding: 0;
 
diff --git a/components/Modal/ProfilePopup.vue b/components/Modal/ProfilePopup.vue
index d04587e..8eeee6c 100644
--- a/components/Modal/ProfilePopup.vue
+++ b/components/Modal/ProfilePopup.vue
@@ -123,7 +123,7 @@ function buttonEditProfile() {
 	flex-direction: column;
 
 	color: var(--text-color);
-	background-color: var(--chat-background-color);
+	background-color: var(--modal-background-color);
 
 	overflow-y: scroll;
 }
diff --git a/public/themes/style/ash.css b/public/themes/style/ash.css
index 495fa15..d4ed893 100644
--- a/public/themes/style/ash.css
+++ b/public/themes/style/ash.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f3f2f60;
 	--popup-background-color: #2f2828;
 	--popup-highlighted-background-color: #382f2f;
+	--modal-background-color: #3a352f;
 
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
diff --git a/public/themes/style/dark.css b/public/themes/style/dark.css
index d23ed76..4fddaf8 100644
--- a/public/themes/style/dark.css
+++ b/public/themes/style/dark.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
+	--modal-background-color: #28241f;
 
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
diff --git a/public/themes/style/description.css b/public/themes/style/description.css
index 972821c..45829e0 100644
--- a/public/themes/style/description.css
+++ b/public/themes/style/description.css
@@ -18,6 +18,7 @@ complementaryColor = black
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
+	--modal-background-color: #181f1f;
 
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
diff --git a/public/themes/style/light.css b/public/themes/style/light.css
index 78bf2f9..6cfecf6 100644
--- a/public/themes/style/light.css
+++ b/public/themes/style/light.css
@@ -17,6 +17,7 @@ complementaryColor = black
     --chat-featured-message-color: #e8ac841f;
     --popup-background-color: #e8e4e0;
     --popup-highlighted-background-color: #dfdbd6;
+	--modal-background-color: #e8e4e0;
 
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
diff --git a/public/themes/style/rainbow-capitalism.css b/public/themes/style/rainbow-capitalism.css
index 8ca3ed7..df01d39 100644
--- a/public/themes/style/rainbow-capitalism.css
+++ b/public/themes/style/rainbow-capitalism.css
@@ -17,6 +17,7 @@ complementaryColor = white
 	--chat-featured-message-color: #4f8f4f80;
 	--popup-background-color: #80808080;
 	--popup-highlighted-background-color: #9f9f9f9f;
+	--modal-background-color: #7fa87fff;
 
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
-- 
2.47.3


From 002b6982a64d691ecccc7c874159ae9eab690e1a Mon Sep 17 00:00:00 2001
From: Temmie <git@beaver.mom>
Date: Mon, 11 Aug 2025 02:46:49 +0200
Subject: [PATCH 4/4] feat: add embed radius

---
 components/MessageMedia.vue   | 1 +
 public/themes/layout/gorb.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue
index ab62387..48a076b 100644
--- a/components/MessageMedia.vue
+++ b/components/MessageMedia.vue
@@ -42,6 +42,7 @@ function createModal(link: string) {
 .media-item {
 	cursor: pointer;
 	max-width: 15dvw;
+	border-radius: var(--embed-radius);
 }
 
 </style>
\ No newline at end of file
diff --git a/public/themes/layout/gorb.css b/public/themes/layout/gorb.css
index 7b8e88b..86ea465 100644
--- a/public/themes/layout/gorb.css
+++ b/public/themes/layout/gorb.css
@@ -10,6 +10,7 @@ complementaryColor = white
 	--sidebar-margin: .5em;
 	
 	--standard-radius: .5em;
+	--embed-radius: .3em;
 	--button-radius: .6em;
 	--guild-icon-radius: 15%;
 	--pfp-radius: 50%;
-- 
2.47.3