Take a swing at putting an invite UI in place.

2 files changed, 8 insertions, 2 deletions

diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index b9a4a97..798dfb7 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -23,8 +23,12 @@
 </script>
 
 {#await data}
-<p>Loading invitation…</p>
+<div class="card m-4 p-4">
+    <p>Loading invitation…</p>
+</div>
 {:then { invite }}
-<p>Hi there! {invite.issuer} invites you to the conversation.</p>
+<div class="card m-4 p-4">
+    <p>Hi there! {invite.issuer} invites you to the conversation.</p>
+</div>
 <LogIn bind:disabled bind:username bind:password on:submit={onSubmit} />
 {/await}
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 7b99d62..fdd3883 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -4,6 +4,7 @@
 
   import { currentUser } from '$lib/store';
   import LogOut from '$lib/components/LogOut.svelte';
+  import Invite from '$lib/components/Invite.svelte';
 </script>
 
 <div id="app">
@@ -12,6 +13,7 @@
             <a href="/">understory</a>
         <svelte:fragment slot="trail">
             {#if $currentUser}
+                <Invite />
                 <LogOut />
             {/if}
         </svelte:fragment>