From 738c81b2c651bbce4a2ced7293b8efff9c3e55a9 Mon Sep 17 00:00:00 2001
From: KamyaPA <peteraksel@live.dk>
Date: Thu, 14 Dec 2023 11:10:53 +0100
Subject: [PATCH 1/9] Added modal

---
 src/lib/components/modal/Modal.svelte | 62 +++++++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 src/lib/components/modal/Modal.svelte

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
new file mode 100644
index 00000000..d30c0be5
--- /dev/null
+++ b/src/lib/components/modal/Modal.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	let dialogContainer: HTMLDialogElement;
+	export let ModalCloseOnBackdrop: boolean = false;
+
+	/**
+	 * Function for showing the current modal
+	 */
+	export function showModal() {
+		dialogContainer.showModal();
+	}
+
+	/**
+	 * Function for closing the current modal
+	 */
+	export function closeModal() {
+		dialogContainer.close();
+	}
+
+	/**
+	 * Function for closing the current modal when the backdrop is clicked if
+	 * ModalCloseOnBackdrop is true
+	 */
+	function closeModalOnBackdropClick() {
+		if (ModalCloseOnBackdrop) {
+			dialogContainer.close();
+		}
+	}
+</script>
+
+<!--TODO: Remove this when supported by Svelte-->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialogContainer}
+	on:click|self={() => {
+		closeModalOnBackdropClick();
+	}}
+>
+	<div class="box">
+		<slot />
+	</div>
+</dialog>
+
+<style>
+	.box {
+		max-width: 100vw;
+		display: block;
+		position: fixed;
+		background-color: var(--modal-background-color);
+		z-index: 100;
+		transform: translate(-50%, -50%);
+		top: 50%;
+		left: 50%;
+	}
+
+	dialog {
+		max-width: 100vw;
+		width: 100vw;
+		max-height: 100vh;
+		height: 100vh;
+		background-color: rgba(0, 0, 0, 0.2);
+	}
+</style>

From d507b7ac8881c64601c799e445a4a6be2958df68 Mon Sep 17 00:00:00 2001
From: KamyaPA <peteraksel@live.dk>
Date: Thu, 14 Dec 2023 12:17:35 +0100
Subject: [PATCH 2/9] Implemented modals as stores

---
 src/lib/components/modal/Modal.svelte         | 26 +++++++-----------
 .../modalContainer/ModalContainer.svelte      |  5 ++++
 src/lib/components/modalContainer/state.ts    |  3 +++
 .../components/settings/SettingsView.svelte   | 27 ++++++++++---------
 src/lib/components/topBar/TopBar.svelte       |  6 ++---
 src/routes/+page.svelte                       | 16 +++--------
 6 files changed, 39 insertions(+), 44 deletions(-)
 create mode 100644 src/lib/components/modalContainer/ModalContainer.svelte
 create mode 100644 src/lib/components/modalContainer/state.ts

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index d30c0be5..5c6a36db 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -1,28 +1,22 @@
 <script lang="ts">
-	let dialogContainer: HTMLDialogElement;
-	export let ModalCloseOnBackdrop: boolean = false;
+	import { onMount } from "svelte";
+	import type { Writable } from "svelte/store";
 
-	/**
-	 * Function for showing the current modal
-	 */
-	export function showModal() {
-		dialogContainer.showModal();
-	}
+	let dialogContainer: HTMLDialogElement;
+	export let modalCloseOnBackdrop: boolean = false;
+	export let show: Writable<boolean>;
 
-	/**
-	 * Function for closing the current modal
-	 */
-	export function closeModal() {
-		dialogContainer.close();
-	}
+	onMount(() => {
+		show.subscribe( val => { val ? dialogContainer.showModal() : dialogContainer.close() });
+	});
 
 	/**
 	 * Function for closing the current modal when the backdrop is clicked if
 	 * ModalCloseOnBackdrop is true
 	 */
 	function closeModalOnBackdropClick() {
-		if (ModalCloseOnBackdrop) {
-			dialogContainer.close();
+		if (modalCloseOnBackdrop) {
+			$show = false;
 		}
 	}
 </script>
diff --git a/src/lib/components/modalContainer/ModalContainer.svelte b/src/lib/components/modalContainer/ModalContainer.svelte
new file mode 100644
index 00000000..5ba312ab
--- /dev/null
+++ b/src/lib/components/modalContainer/ModalContainer.svelte
@@ -0,0 +1,5 @@
+<script>
+	import SettingsView from "../settings/SettingsView.svelte";
+</script>
+
+<SettingsView />
diff --git a/src/lib/components/modalContainer/state.ts b/src/lib/components/modalContainer/state.ts
new file mode 100644
index 00000000..4deec4d1
--- /dev/null
+++ b/src/lib/components/modalContainer/state.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const showSettings = writable(false);
diff --git a/src/lib/components/settings/SettingsView.svelte b/src/lib/components/settings/SettingsView.svelte
index f35d4c40..5a6bbcde 100644
--- a/src/lib/components/settings/SettingsView.svelte
+++ b/src/lib/components/settings/SettingsView.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
 	import Tabs from "$lib/components/tabs/Tabs.svelte";
 	import type { Tab } from "$lib/components/tabs/Tab";
 	import ColorSettings from "$lib/components/settings/ColorSettings.svelte";
 	import FontSettings from "$lib/components/settings/FontSettings.svelte";
-
-	const dispatch = createEventDispatcher();
+	import Modal from "../modal/Modal.svelte";
+	import { showSettings } from "../modalContainer/state";
 
 	const settingTabs: Tab[] = [
 		{
@@ -19,17 +18,19 @@
 	];
 </script>
 
-<div id="setting-tabs-container">
-	<Tabs tabs={settingTabs} />
-</div>
+<Modal show={showSettings}>
+	<div id="setting-tabs-container">
+		<Tabs tabs={settingTabs} />
+	</div>
 
-<button
-	on:click={() => {
-		dispatch("toggleSettings");
-	}}
->
-	<p>Close Settings</p>
-</button>
+	<button
+		on:click={() => {
+			$showSettings = false;
+		}}
+	>
+		<p>Close Settings</p>
+	</button>
+</Modal>
 
 <style>
 	button {
diff --git a/src/lib/components/topBar/TopBar.svelte b/src/lib/components/topBar/TopBar.svelte
index 444ada0f..95935708 100644
--- a/src/lib/components/topBar/TopBar.svelte
+++ b/src/lib/components/topBar/TopBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from "svelte";
+	import { onMount } from "svelte";
 	import type { projectHandler as ProjectHandler } from "$lib/classes/projectHandler/ProjectHandler";
 	import TopBarButton from "$lib/components/topBar/TopBarButton.svelte";
 	import DropDownButton from "$lib/components/topBar/DropDownButton.svelte";
@@ -19,8 +19,8 @@
 		Help,
 		Error,
 	} from "svelte-google-materialdesign-icons";
+	import { showSettings } from "../modalContainer/state";
 
-	const dispatch = createEventDispatcher();
 	let projectHandler: typeof ProjectHandler;
 
 	onMount(async () => {
@@ -220,7 +220,7 @@
 			icon={Settings}
 			name="Settings"
 			on:click={() => {
-				dispatch("toggleSettings");
+				$showSettings = true;
 			}}
 		/>
 	</TopBarButton>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7dd704ef..b8f84dfc 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,17 +11,13 @@
 	import Queries from "$lib/components/query/Queries.svelte";
 	import QueryNav from "$lib/components/query/QueryNav.svelte";
 	import ProjectItems from "$lib/components/project/ProjectItems.svelte";
-	import Settings from "$lib/components/settings/SettingsView.svelte";
-
-	let showSettings: boolean = false;
-	function toggleSettings() {
-		showSettings = !showSettings;
-	}
+	import ModalContainer from "$lib/components/modalContainer/ModalContainer.svelte";
 </script>
 
 <!-- Top navigation Panel -->
+<ModalContainer/>
 <nav id="main-nav">
-	<TopBar on:toggleSettings={toggleSettings} />
+	<TopBar />
 </nav>
 <main>
 	{#if $project === undefined}
@@ -39,11 +35,7 @@
 		<div class="canvas">
 			<nav class="inner-nav2">Nav 2</nav>
 			<!-- Replace Settings with a modal or new window instead of replacing the SVG View -->
-			{#if showSettings}
-				<Settings on:toggleSettings={toggleSettings} />
-			{:else}
-				<SvgView />
-			{/if}
+			<SvgView />
 		</div>
 		<!-- Right side -->
 		<SidePanel panelSide={SidePanelEnum.Right}>

From 3a50c8292a9a1caaefc15c838874d4b0bade73a8 Mon Sep 17 00:00:00 2001
From: KamyaPA <peteraksel@live.dk>
Date: Thu, 14 Dec 2023 12:19:20 +0100
Subject: [PATCH 3/9] yarn format

---
 src/lib/components/modal/Modal.svelte | 4 +++-
 src/routes/+page.svelte               | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index 5c6a36db..51dbd6f5 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -7,7 +7,9 @@
 	export let show: Writable<boolean>;
 
 	onMount(() => {
-		show.subscribe( val => { val ? dialogContainer.showModal() : dialogContainer.close() });
+		show.subscribe((val) => {
+			val ? dialogContainer.showModal() : dialogContainer.close();
+		});
 	});
 
 	/**
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b8f84dfc..f7a5d01c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <!-- Top navigation Panel -->
-<ModalContainer/>
+<ModalContainer />
 <nav id="main-nav">
 	<TopBar />
 </nav>

From 9296367895cac486a660c531ecdf4b1c033dfff1 Mon Sep 17 00:00:00 2001
From: KamyaPA <peteraksel@live.dk>
Date: Thu, 14 Dec 2023 13:36:01 +0100
Subject: [PATCH 4/9] Moved showSettings

---
 src/lib/components/settings/SettingsView.svelte                 | 2 +-
 .../{modalContainer/state.ts => settings/showSettings.ts}       | 0
 src/lib/components/topBar/TopBar.svelte                         | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/lib/components/{modalContainer/state.ts => settings/showSettings.ts} (100%)

diff --git a/src/lib/components/settings/SettingsView.svelte b/src/lib/components/settings/SettingsView.svelte
index 5a6bbcde..86239084 100644
--- a/src/lib/components/settings/SettingsView.svelte
+++ b/src/lib/components/settings/SettingsView.svelte
@@ -4,7 +4,7 @@
 	import ColorSettings from "$lib/components/settings/ColorSettings.svelte";
 	import FontSettings from "$lib/components/settings/FontSettings.svelte";
 	import Modal from "../modal/Modal.svelte";
-	import { showSettings } from "../modalContainer/state";
+	import { showSettings } from "../settings/showSettings";
 
 	const settingTabs: Tab[] = [
 		{
diff --git a/src/lib/components/modalContainer/state.ts b/src/lib/components/settings/showSettings.ts
similarity index 100%
rename from src/lib/components/modalContainer/state.ts
rename to src/lib/components/settings/showSettings.ts
diff --git a/src/lib/components/topBar/TopBar.svelte b/src/lib/components/topBar/TopBar.svelte
index 95935708..d126ecf4 100644
--- a/src/lib/components/topBar/TopBar.svelte
+++ b/src/lib/components/topBar/TopBar.svelte
@@ -19,7 +19,7 @@
 		Help,
 		Error,
 	} from "svelte-google-materialdesign-icons";
-	import { showSettings } from "../modalContainer/state";
+	import { showSettings } from "../settings/showSettings";
 
 	let projectHandler: typeof ProjectHandler;
 

From d53bac0421bf1d62aeb0332e27eb949351cada97 Mon Sep 17 00:00:00 2001
From: Anton <dev@atjn.dk>
Date: Thu, 14 Dec 2023 14:51:31 +0100
Subject: [PATCH 5/9] Streamline inheritance

---
 src/lib/components/modal/Modal.svelte         | 25 +++++++++++--------
 .../modalContainer/ModalContainer.svelte      |  5 ----
 .../components/settings/SettingsView.svelte   |  4 +--
 src/lib/components/topBar/TopBar.svelte       |  5 +++-
 src/routes/+page.svelte                       |  2 --
 5 files changed, 20 insertions(+), 21 deletions(-)
 delete mode 100644 src/lib/components/modalContainer/ModalContainer.svelte

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index 51dbd6f5..52cc378a 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import type { Writable } from "svelte/store";
-
-	let dialogContainer: HTMLDialogElement;
+	let dialogContainer: HTMLDialogElement | undefined;
 	export let modalCloseOnBackdrop: boolean = false;
-	export let show: Writable<boolean>;
+	export let show: boolean = false;
 
-	onMount(() => {
-		show.subscribe((val) => {
-			val ? dialogContainer.showModal() : dialogContainer.close();
-		});
-	});
+	/**
+	 * Ensures that the real DOM element is opened or closed when the svelte value changes.
+	 */
+	$: if (dialogContainer && show) {
+		console.log("open");
+		//throw new Error("wut");
+		dialogContainer.showModal();
+	} else {
+		console.log("close");
+		dialogContainer?.close();
+	}
 
 	/**
 	 * Function for closing the current modal when the backdrop is clicked if
@@ -18,7 +21,7 @@
 	 */
 	function closeModalOnBackdropClick() {
 		if (modalCloseOnBackdrop) {
-			$show = false;
+			show = false;
 		}
 	}
 </script>
diff --git a/src/lib/components/modalContainer/ModalContainer.svelte b/src/lib/components/modalContainer/ModalContainer.svelte
deleted file mode 100644
index 5ba312ab..00000000
--- a/src/lib/components/modalContainer/ModalContainer.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import SettingsView from "../settings/SettingsView.svelte";
-</script>
-
-<SettingsView />
diff --git a/src/lib/components/settings/SettingsView.svelte b/src/lib/components/settings/SettingsView.svelte
index 86239084..1e5310db 100644
--- a/src/lib/components/settings/SettingsView.svelte
+++ b/src/lib/components/settings/SettingsView.svelte
@@ -4,7 +4,7 @@
 	import ColorSettings from "$lib/components/settings/ColorSettings.svelte";
 	import FontSettings from "$lib/components/settings/FontSettings.svelte";
 	import Modal from "../modal/Modal.svelte";
-	import { showSettings } from "../settings/showSettings";
+	import { showSettings } from "./showSettings";
 
 	const settingTabs: Tab[] = [
 		{
@@ -18,7 +18,7 @@
 	];
 </script>
 
-<Modal show={showSettings}>
+<Modal show={$showSettings}>
 	<div id="setting-tabs-container">
 		<Tabs tabs={settingTabs} />
 	</div>
diff --git a/src/lib/components/topBar/TopBar.svelte b/src/lib/components/topBar/TopBar.svelte
index d126ecf4..4b035cd2 100644
--- a/src/lib/components/topBar/TopBar.svelte
+++ b/src/lib/components/topBar/TopBar.svelte
@@ -19,7 +19,8 @@
 		Help,
 		Error,
 	} from "svelte-google-materialdesign-icons";
-	import { showSettings } from "../settings/showSettings";
+	import SettingsView from "$lib/components/settings/SettingsView.svelte";
+	import { showSettings } from "$lib/components/settings/showSettings";
 
 	let projectHandler: typeof ProjectHandler;
 
@@ -246,6 +247,8 @@
 	</TopBarButton>
 </div>
 
+<SettingsView />
+
 <style>
 	div {
 		height: 100%;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f7a5d01c..1048c621 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,11 +11,9 @@
 	import Queries from "$lib/components/query/Queries.svelte";
 	import QueryNav from "$lib/components/query/QueryNav.svelte";
 	import ProjectItems from "$lib/components/project/ProjectItems.svelte";
-	import ModalContainer from "$lib/components/modalContainer/ModalContainer.svelte";
 </script>
 
 <!-- Top navigation Panel -->
-<ModalContainer />
 <nav id="main-nav">
 	<TopBar />
 </nav>

From 32aa3197740077532f62d8f8d8e1f3d5e492fcb0 Mon Sep 17 00:00:00 2001
From: Anton <dev@atjn.dk>
Date: Thu, 14 Dec 2023 14:53:11 +0100
Subject: [PATCH 6/9] Remove debug code

---
 src/lib/components/modal/Modal.svelte | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index 52cc378a..b992efc5 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -7,11 +7,8 @@
 	 * Ensures that the real DOM element is opened or closed when the svelte value changes.
 	 */
 	$: if (dialogContainer && show) {
-		console.log("open");
-		//throw new Error("wut");
 		dialogContainer.showModal();
 	} else {
-		console.log("close");
 		dialogContainer?.close();
 	}
 

From 3f5c79822d7ac90904c6c87e2b125e523b4778e6 Mon Sep 17 00:00:00 2001
From: Anton <dev@atjn.dk>
Date: Thu, 14 Dec 2023 15:21:05 +0100
Subject: [PATCH 7/9] Fix dom structure

---
 src/lib/components/modal/Modal.svelte | 69 +++++++++++++++------------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index b992efc5..32929e1f 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -1,23 +1,44 @@
 <script lang="ts">
-	let dialogContainer: HTMLDialogElement | undefined;
-	export let modalCloseOnBackdrop: boolean = false;
+	let dialog: HTMLDialogElement | undefined;
+
+	/**
+	 * Will allows the user to close the modal by clicking outside it.
+	 */
+	export let closeOnBackdrop: boolean = false;
+
+	/**
+	 * Whether or not the modal is open or closed.
+	 */
 	export let show: boolean = false;
 
 	/**
 	 * Ensures that the real DOM element is opened or closed when the svelte value changes.
 	 */
-	$: if (dialogContainer && show) {
-		dialogContainer.showModal();
+	$: if (dialog && show) {
+		dialog.showModal();
 	} else {
-		dialogContainer?.close();
+		dialog?.close();
 	}
 
 	/**
-	 * Function for closing the current modal when the backdrop is clicked if
-	 * ModalCloseOnBackdrop is true
+	 * Closes the modal if the user clicks outside it
+	 * Only works if ModalCloseOnBackdrop is true
 	 */
-	function closeModalOnBackdropClick() {
-		if (modalCloseOnBackdrop) {
+	function closeOnBackdropClick(event: MouseEvent) {
+		if (!closeOnBackdrop) return;
+		if (!dialog) {
+			throw new TypeError("Dialog should always be defined on mount");
+		}
+		/**
+		 * TODO: Is there really no better way to check if the user clicked outside?
+		 */
+		const rect = dialog.getBoundingClientRect();
+		const clickIsOnDialog =
+			rect.top <= event.clientY &&
+			event.clientY <= rect.top + rect.height &&
+			rect.left <= event.clientX &&
+			event.clientX <= rect.left + rect.width;
+		if (!clickIsOnDialog) {
 			show = false;
 		}
 	}
@@ -26,33 +47,19 @@
 <!--TODO: Remove this when supported by Svelte-->
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 <dialog
-	bind:this={dialogContainer}
-	on:click|self={() => {
-		closeModalOnBackdropClick();
+	bind:this={dialog}
+	on:click|self={(event) => {
+		closeOnBackdropClick(event);
 	}}
 >
-	<div class="box">
-		<slot />
-	</div>
+	<slot />
 </dialog>
 
 <style>
-	.box {
-		max-width: 100vw;
-		display: block;
-		position: fixed;
-		background-color: var(--modal-background-color);
-		z-index: 100;
-		transform: translate(-50%, -50%);
-		top: 50%;
-		left: 50%;
-	}
-
 	dialog {
-		max-width: 100vw;
-		width: 100vw;
-		max-height: 100vh;
-		height: 100vh;
-		background-color: rgba(0, 0, 0, 0.2);
+		background-color: var(--background-color);
+	}
+	dialog::backdrop {
+		background-color: var(--modal-background-color);
 	}
 </style>

From 358a5902e834e6a09d9b24b8a9243487fa4346f7 Mon Sep 17 00:00:00 2001
From: Anton <dev@atjn.dk>
Date: Thu, 14 Dec 2023 15:26:18 +0100
Subject: [PATCH 8/9] Remove unnecessary tests

---
 src/lib/components/modal/Modal.svelte         |  4 +-
 .../lib/components/settings/settings.test.ts  | 45 -------------------
 2 files changed, 2 insertions(+), 47 deletions(-)

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index 32929e1f..1c47c633 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -2,7 +2,7 @@
 	let dialog: HTMLDialogElement | undefined;
 
 	/**
-	 * Will allows the user to close the modal by clicking outside it.
+	 * Allows the user to close the modal by clicking outside it.
 	 */
 	export let closeOnBackdrop: boolean = false;
 
@@ -22,7 +22,7 @@
 
 	/**
 	 * Closes the modal if the user clicks outside it
-	 * Only works if ModalCloseOnBackdrop is true
+	 * Only works if closeOnBackdrop is true
 	 */
 	function closeOnBackdropClick(event: MouseEvent) {
 		if (!closeOnBackdrop) return;
diff --git a/tests/lib/components/settings/settings.test.ts b/tests/lib/components/settings/settings.test.ts
index 16f137f9..46dd980f 100644
--- a/tests/lib/components/settings/settings.test.ts
+++ b/tests/lib/components/settings/settings.test.ts
@@ -81,48 +81,3 @@ test("change to color tab", async ({ page }) => {
 	await expect(buttons[0]).toHaveClass(/active/);
 	await expect(buttons[1]).not.toHaveClass(/active/);
 });
-
-test("returns to svg-view when closing through top navbar", async ({
-	page,
-}) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the setting button in the nav-bar again
-	await page
-		.getByRole("button", { name: "settings Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-});
-
-test("returns to svg-view when closing through button", async ({ page }) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the close button in setting view
-	await page
-		.getByRole("button", { name: "Close Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-});
-
-test("can reopen settings after closing", async ({ page }) => {
-	await expect(page.locator(".canvas svg")).not.toBeVisible();
-
-	// Click the close button in setting view
-	await page
-		.getByRole("button", { name: "Close Settings", exact: true })
-		.click();
-
-	await expect(page.locator(".canvas svg")).toBeVisible();
-
-	// Click the open settings button to reopen
-	await page.getByRole("button", { name: "Options", exact: true }).hover();
-	await page
-		.getByRole("button", { name: "settings Settings", exact: true })
-		.click();
-
-	// Check if the tab buttons are visible
-	const buttons = await getTabButtons(page);
-	expect(buttons).toHaveLength(2);
-});

From 9f2db1706b38364f0385906b0a50b63009b33e52 Mon Sep 17 00:00:00 2001
From: Anton <dev@atjn.dk>
Date: Thu, 14 Dec 2023 15:49:05 +0100
Subject: [PATCH 9/9] Add a default text color

---
 src/lib/components/modal/Modal.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/modal/Modal.svelte b/src/lib/components/modal/Modal.svelte
index 1c47c633..c17c7b1d 100644
--- a/src/lib/components/modal/Modal.svelte
+++ b/src/lib/components/modal/Modal.svelte
@@ -57,6 +57,7 @@
 
 <style>
 	dialog {
+		color: var(--text-color);
 		background-color: var(--background-color);
 	}
 	dialog::backdrop {