Validate space connection before joining

src/app/components/LogOut.svelte

@@ -3,6 +3,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
 
   const back = () => history.back()
 
@@ -23,8 +25,10 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={logout}>
-  <h1 class="heading">Are you sure you want to log out?</h1>
-  <div class="flex flex-row items-center justify-between gap-4">
+  <ModalHeader>
+    <div slot="title">Are you sure you want to log out?</div>
+  </ModalHeader>
+  <ModalFooter>
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />
       Go back
@@ -32,5 +36,5 @@
     <Button type="submit" class="btn btn-primary" disabled={loading}>
       <Spinner {loading}>Log Out</Spinner>
     </Button>
-  </div>
+  </ModalFooter>
 </form>