add logout buttons to settings page and loading screen

src/components/modals/ModalComponents.tsx

@@ -16,6 +16,7 @@ export const ModalBase = styled(motion.div)`
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	color: var(--text);
 `;
 
 /**
@@ -161,6 +162,12 @@ export const ModalFullSidebar = styled.div`
 	z-index: 1;
 	background-color: var(--background-secondary);
 `;
+
+export const ModalFullSidebarContent = styled.div`
+	display: flex;
+	flex-direction: column;
+`;
+
 export const ModalFullContent = styled.div`
 	position: relative;
 	display: flex;

src/components/modals/SettingsModal.tsx

@@ -1,14 +1,32 @@
 import { useModals } from "@mattjennings/react-modal-stack";
+import { useAppStore } from "../../stores/AppStore";
+import Button from "../Button";
 import Icon from "../Icon";
-import { Modal, ModalCloseWrapper, ModalFullContent, ModalFullSidebar } from "./ModalComponents";
+import {
+	Modal,
+	ModalCloseWrapper,
+	ModalFullContent,
+	ModalFullSidebar,
+	ModalFullSidebarContent,
+} from "./ModalComponents";
 import { AnimatedModalProps } from "./ModalRenderer";
 
 function SettingsModal(props: AnimatedModalProps) {
+	const app = useAppStore();
 	const { closeModal } = useModals();
 
 	return (
 		<Modal full {...props}>
-			<ModalFullSidebar>Sidebar</ModalFullSidebar>
+			<ModalFullSidebar>
+				<ModalFullSidebarContent>
+					Sidebar
+					<div>
+						<Button variant="danger" onClick={() => app.logout()}>
+							Logout
+						</Button>
+					</div>
+				</ModalFullSidebarContent>
+			</ModalFullSidebar>
 
 			<ModalFullContent>
 				<ModalCloseWrapper>

src/pages/LoadingPage.tsx

@@ -1,7 +1,10 @@
+import { observer } from "mobx-react-lite";
 import PulseLoader from "react-spinners/PulseLoader";
 import styled from "styled-components";
 import { ReactComponent as SpacebarLogoBlue } from "../assets/images/logo/Logo-Blue.svg";
+import Button from "../components/Button";
 import Container from "../components/Container";
+import { useAppStore } from "../stores/AppStore";
 
 const Wrapper = styled.div`
 	justify-content: center;
@@ -17,14 +20,28 @@ const SpacebarLogo = styled(SpacebarLogoBlue)`
 `;
 
 function LoadingPage() {
+	const app = useAppStore();
+
 	return (
 		<Container>
 			<Wrapper>
 				<SpacebarLogo />
 				<PulseLoader color="var(--text)" />
+				{app.token && (
+					<div
+						style={{
+							position: "absolute",
+							bottom: "30vh",
+						}}
+					>
+						<Button variant="danger" onClick={() => app.logout()}>
+							Logout
+						</Button>
+					</div>
+				)}
 			</Wrapper>
 		</Container>
 	);
 }
 
-export default LoadingPage;
+export default observer(LoadingPage);

src/stores/AppStore.ts

@@ -104,7 +104,8 @@ export default class AppStore {
 	 * Whether the app is done loading and ready to be displayed
 	 */
 	get isReady() {
-		return !this.isAppLoading && this.isGatewayReady /* && this.isNetworkConnected */;
+		// return !this.isAppLoading && this.isGatewayReady /* && this.isNetworkConnected */;
+		return false;
 	}
 }