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 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

(limited to 'src/lib')

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>
-- 
cgit v1.2.3