From 70f5666437f87ed723a862924215e057cd0d5678 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sun, 4 Feb 2024 23:30:56 -0800
Subject: feat(message): use fullscreen popup

---
 src/lib/Loading/Message.svelte | 35 ++++++++++++++++++++++-------------
 src/routes/+layout.svelte      |  2 +-
 src/styles/popup.scss          |  4 ++--
 3 files changed, 25 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/lib/Loading/Message.svelte b/src/lib/Loading/Message.svelte
index 82e6d312..8715b922 100644
--- a/src/lib/Loading/Message.svelte
+++ b/src/lib/Loading/Message.svelte
@@ -2,24 +2,33 @@
 	import Ellipsis from './Ellipsis.svelte';
 	import Ripple from './Ripple.svelte';
 	import Grid from './Grid.svelte';
+	import Popup from '$lib/Popup.svelte';
 
 	export let message: string | undefined = undefined;
 	export let loader: 'ellipsis' | 'ripple' | 'grid' = 'ellipsis';
 	export let colour = 'var(--fg)';
 </script>
 
-<div class="card popup">
-	{#if loader === 'ellipsis'}
-		<Ellipsis {colour} />
-	{:else if loader === 'ripple'}
-		<Ripple {colour} />
-	{:else if loader === 'grid'}
-		<Grid {colour} />
-	{/if}
+<Popup fullscreen>
+	<div class="message">
+		{#if loader === 'ellipsis'}
+			<Ellipsis {colour} />
+		{:else if loader === 'ripple'}
+			<Ripple {colour} />
+		{:else if loader === 'grid'}
+			<Grid {colour} />
+		{/if}
 
-	{#if message}
-		<p />
+		{#if message}
+			<p />
 
-		{message}
-	{/if}
-</div>
+			{message}
+		{/if}
+	</div>
+</Popup>
+
+<style>
+	.message {
+		text-align: center;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 087e58d6..43cdf0ee 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -173,7 +173,7 @@
 		font-size: 1.05em;
 		font-weight: 600;
 		padding: 0.8rem 0.4rem;
-		z-index: 2;
+		z-index: 4;
 	}
 
 	#header a {
diff --git a/src/styles/popup.scss b/src/styles/popup.scss
index cbf8f225..441a68a1 100644
--- a/src/styles/popup.scss
+++ b/src/styles/popup.scss
@@ -3,7 +3,7 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
-	z-index: 9999;
+	z-index: 3;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
@@ -14,6 +14,6 @@
 	width: 100%;
 	height: 100%;
 	background-color: rgba(0, 0, 0, 0.5);
-	z-index: 9999;
+	z-index: 3;
 	backdrop-filter: blur(8px);
 }
-- 
cgit v1.2.3