add sign out boi.

svelte-ui/src/App.svelte

@@ -2,6 +2,10 @@
 	import { Router, Link, Route } from "svelte-routing";
 	import { onMount } from "svelte";
 	
+	import authStore from "./stores/auth";
+	import Boi from "./components/Boi.svelte";
+	import { signOut } from "./clients/amplify";
+
 	import FrontPage from "./pages/FrontPage.svelte";
 	import ProjectPage from "./pages/ProjectPage.svelte";
 	import LogsPage from "./pages/LogsPage.svelte";
@@ -21,7 +25,10 @@
 	import FocusHandler from "./components/FocusHandler.svelte";
 	import Menu from "./components/Menu.svelte";
 
-	import authStore from "./stores/auth";
+	async function logout() {
+		await signOut();
+		await authStore.check();
+	}
 
 	onMount(() => {
 		authStore.check()
@@ -40,6 +47,10 @@
 				<Route path="/questlog/" component={QlPage} />
 				<Route path="/logs/" component={LogsPage} />
 				<Route path="/items/" component={GroupPage} />
+
+				<footer>
+					<Boi compact tiny on:click={logout}>Sign out</Boi>
+				</footer>
 			</main>
 		</Router>
 		<ModalRoute name="log.add"> <LogForm creation /></ModalRoute>
@@ -70,7 +81,14 @@
 		text-align: left;
 		max-width: 99.5%;
 		margin: 1em auto;
-		padding-bottom: 4em;
 	}
 
+	footer {
+		text-align: left;
+		width: 920px;
+		max-width: 99.5%;
+		margin: 1em auto;
+		padding-bottom: 4em;
+		text-align: center;
+	}
 </style>

svelte-ui/src/components/Boi.svelte

@@ -6,6 +6,7 @@
   export let open: ModalData = {name: "none"};
   export let disabled: boolean = false;
   export let compact: boolean = false;
+  export let tiny: boolean = false;
 
   const dispatch = createEventDispatcher();
   
@@ -18,7 +19,7 @@
   }
 </script>
 
-<div class="boi" class:disabled class:compact on:click={handleClick}><slot></slot></div>
+<div class="boi" class:disabled class:compact class:tiny on:click={handleClick}><slot></slot></div>
 
 <style>
   div.boi {
@@ -50,4 +51,11 @@
     border-width: 4px;
     padding: 0.25em;
   }
+
+  div.boi.tiny {
+    display: inline-block;
+    margin: auto;
+    font-size: 1em;
+    border-width: 3px;
+  }
 </style>