From c8c0cf7ebbb72320b9f6686a3b22b317cccedc1f Mon Sep 17 00:00:00 2001
From: ditatompel <ditatompel@gmail.com>
Date: Wed, 8 May 2024 02:16:16 +0700
Subject: [PATCH] Place modal and toast at the root of layout.svelte

---
 frontend/src/app.css                            | 10 +++++++++-
 .../lib/components/navigation/MainNav.svelte    |  2 +-
 frontend/src/routes/(front)/+layout.svelte      | 17 +----------------
 frontend/src/routes/(loggedin)/+layout.svelte   |  5 +----
 frontend/src/routes/+layout.svelte              | 16 +++++-----------
 5 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index 2f37859..c441c87 100644
--- a/frontend/src/app.css
+++ b/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;
 }
diff --git a/frontend/src/lib/components/navigation/MainNav.svelte b/frontend/src/lib/components/navigation/MainNav.svelte
index 4570968..1007d96 100644
--- a/frontend/src/lib/components/navigation/MainNav.svelte
+++ b/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>
diff --git a/frontend/src/routes/(front)/+layout.svelte b/frontend/src/routes/(front)/+layout.svelte
index 3e93402..3806cfb 100644
--- a/frontend/src/routes/(front)/+layout.svelte
+++ b/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 />
diff --git a/frontend/src/routes/(loggedin)/+layout.svelte b/frontend/src/routes/(loggedin)/+layout.svelte
index fa504ea..87d7bb4 100644
--- a/frontend/src/routes/(loggedin)/+layout.svelte
+++ b/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 />
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 2befc05..abc5733 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/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"