From 7005ae7e151a706e7fa794b2c969699435705ad2 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 8 Jun 2024 18:02:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A9=20Elevates=20ui=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/components/TopBar.svelte       | 2 +-
 app/src/lib/components/toasts/Toast.svelte | 2 +-
 app/src/routes/controller/+layout.svelte   | 9 ++++-----
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/src/lib/components/TopBar.svelte b/app/src/lib/components/TopBar.svelte
index 016a20a..cd393b6 100644
--- a/app/src/lib/components/TopBar.svelte
+++ b/app/src/lib/components/TopBar.svelte
@@ -2,7 +2,7 @@
     import MdiHamburgerMenu from '~icons/mdi/hamburger-menu';
 </script>
 
-<div class="topbar absolute left-0 top-0 w-full z-10 flex justify-between bg-zinc-800">
+<div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
 	<div class="flex gap-2 p-2">
         <a href="/">
             <svelte:component this={MdiHamburgerMenu} class="h-8 w-8"/>
diff --git a/app/src/lib/components/toasts/Toast.svelte b/app/src/lib/components/toasts/Toast.svelte
index 13b1ee9..ff5151e 100644
--- a/app/src/lib/components/toasts/Toast.svelte
+++ b/app/src/lib/components/toasts/Toast.svelte
@@ -22,7 +22,7 @@
 	};
 </script>
 
-<div class="toast toast-end mr-4">
+<div class="toast toast-end mr-4 z-20">
 	{#each $notifications as notification (notification.id)}
 		<div
 			animate:flip={{ duration: 400 }}
diff --git a/app/src/routes/controller/+layout.svelte b/app/src/routes/controller/+layout.svelte
index 6e10505..8e65b97 100644
--- a/app/src/routes/controller/+layout.svelte
+++ b/app/src/routes/controller/+layout.svelte
@@ -5,12 +5,11 @@
 </script>
 <div>
     {#if !$socket}
-    <div class="flex flex-col h-full justify-center items-center">
-        <Spinner/>
+        <div class="absolute left-0 flex flex-col w-screen h-screen justify-center items-center backdrop-blur-sm z-10">
+            <Spinner/>
             <h2>Waiting for connection</h2>
         </div>
-    {:else}
-        <Controls />
-        <slot/>
     {/if}
+    <Controls />
+    <slot/>
 </div>