Place modal and toast at the root of layout.svelte

frontend/src/app.css

@@ -7,7 +7,15 @@ html,
 body {
 	@apply h-full;
 }
-
+p {
+  @apply mb-2;
+}
+.link {
+  @apply text-primary-800 dark:text-primary-500 hover:brightness-110;
+}
+a.external {
+  @apply link after:content-['_↗']
+}
 .dashboard-card {
 	@apply bg-surface-50-900-token rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700;
 }

frontend/src/lib/components/navigation/MainNav.svelte

@@ -61,6 +61,6 @@
 		@apply block rounded bg-primary-500 p-2 text-black;
 	}
 	.nav-link {
-		@apply block rounded hover:bg-secondary-500 md:p-2 hover:text-black;
+		@apply block rounded hover:bg-secondary-500 md:p-2 hover:text-white;
 	}
 </style>

frontend/src/routes/(front)/+layout.svelte

@@ -1,23 +1,10 @@
 <script>
-	// import { writable } from 'svelte/store';
 	import { page } from '$app/stores';
-	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import '../../app.css';
-	import {
-		Toast,
-		Modal,
-		Drawer,
-		initializeStores,
-		storePopup // PopUps
-	} from '@skeletonlabs/skeleton';
+	import { Drawer } from '@skeletonlabs/skeleton';
 	import { MainNav, MobileDrawer } from '$lib/components/navigation';
 	import Footer from '$lib/components/Footer.svelte';
 
-	initializeStores();
-
-	// popups
-	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
 	/* prettier-ignore */
 	const metaDefaults = {
 		title: 'Monero is private, decentralized cryptocurrency that keeps your finances confidential and secure.',
@@ -76,8 +63,6 @@
 	<meta name="twitter:description" content={meta.twitter.description} />
 </svelte:head>
 
-<Modal />
-<Toast />
 <Drawer>
 	<h2 class="p-4">Navigation</h2>
 	<hr />

frontend/src/routes/(loggedin)/+layout.svelte

@@ -1,11 +1,8 @@
 <script>
-	import { Toast, Drawer, Modal } from '@skeletonlabs/skeleton';
+	import { Drawer } from '@skeletonlabs/skeleton';
 	import { AdminNav, AdminSidebar, AdminMobileDrawer } from '$lib/components/navigation';
 </script>
 
-<Toast />
-<Modal />
-
 <Drawer>
 	<h2 class="p-4">Navigation</h2>
 	<hr />

frontend/src/routes/+layout.svelte

@@ -1,29 +1,23 @@
 <script>
-	// import { base } from '$app/paths';
 	import '../app.css';
+	import { Toast, Modal } from '@skeletonlabs/skeleton';
 	import { beforeNavigate, afterNavigate } from '$app/navigation';
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	import {
-		ProgressBar,
-		initializeStores,
-		storePopup // PopUps
-	} from '@skeletonlabs/skeleton';
+	import { ProgressBar, initializeStores, storePopup } from '@skeletonlabs/skeleton';
 
 	initializeStores();
-
-	// popups
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
 	let isLoading = false;
 
-	// progress bar show
 	beforeNavigate(() => (isLoading = true));
-
 	afterNavigate(() => {
 		isLoading = false;
 	});
 </script>
 
+<Modal />
+<Toast />
+
 {#if isLoading}
 	<ProgressBar
 		class="fixed top-0 z-50"