Merge pull request #179 from TClark1011:fix/remembered-sheets-mobile-…

…layout

Fix/remembered-sheets-mobile-layout

src/components/domain/PageContentContainer.tsx

@@ -1,12 +1,12 @@
-import { Box } from "@chakra-ui/react";
+import { Container } from "@chakra-ui/react";
 import React, { PropsWithChildren } from "react";
 
 /**
  * Wrap the content of pages like 'info' and 'contact'
  * and apply consistent horizontal padding
  */
 const PageContentContainer: React.FC<PropsWithChildren> = ({ children }) => (
-	<Box paddingX={[0, 16, 32, 64, 96]}>{children}</Box>
+	<Container centerContent>{children}</Container>
 );
 
 export default PageContentContainer;

src/components/templates/View.tsx

@@ -22,7 +22,7 @@ const View: React.FC<ViewProps> = ({
 	showTopNav = true,
 	showHomeLink = true,
 	minFullHeight = true,
-	accountForTopNav = showTopNav,
+	accountForTopNav = showTopNav, // adds padding to top of content to account for top nav
 	children,
 	...metaProps
 }) => {

src/config/index.ts

@@ -1,5 +1,3 @@
-export { default as theme } from "./theme";
-
 export * from "./env";
 export * from "./publicEnv";
 export * from "./options";

src/lib/global-loader.tsx

@@ -0,0 +1,73 @@
+import {
+	Modal,
+	ModalContent,
+	ModalOverlay,
+	Spinner,
+	Text,
+} from "@chakra-ui/react";
+import { atom, useAtomValue, useSetAtom } from "jotai";
+import { FC, useEffect } from "react";
+
+const isGlobalLoadingAtom = atom(false);
+const globalLoadingMessageAtom = atom<string | undefined>(undefined);
+
+/**
+ * To use this, just call `useGlobalLoading` in your component,
+ * passing in a boolean for whether or not the global loader should
+ * be shown and an optional message to display.
+ */
+export const useGlobalLoading = (isLoading: boolean, message?: string) => {
+	const setIsLoading = useSetAtom(isGlobalLoadingAtom);
+	const setMessage = useSetAtom(globalLoadingMessageAtom);
+
+	useEffect(() => {
+		setIsLoading(isLoading);
+		setMessage(message);
+	}, [isLoading, message, setIsLoading, setMessage]);
+
+	useEffect(() => {
+		return () => {
+			setIsLoading(false);
+			setMessage(undefined);
+		};
+	}, [setIsLoading, setMessage]);
+};
+
+/**
+ * Place this in your `_app.tsx` file
+ */
+export const GlobalLoader: FC = () => {
+	const isLoading = useAtomValue(isGlobalLoadingAtom);
+	const message = useAtomValue(globalLoadingMessageAtom);
+
+	return (
+		<Modal
+			isOpen={isLoading}
+			onClose={() => {}}
+			closeOnOverlayClick={false}
+			isCentered
+			autoFocus={false}
+		>
+			<ModalOverlay />
+			<ModalContent
+				bg="transparent"
+				border="none"
+				display="flex"
+				flexDirection="column"
+				alignItems="center"
+			>
+				<Spinner
+					size="xl"
+					emptyColor="gray.200"
+					color="primary.500"
+					thickness="4px"
+				/>
+				{message && (
+					<Text fontWeight="bold" mt="group">
+						{message}
+					</Text>
+				)}
+			</ModalContent>
+		</Modal>
+	);
+};

src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
 import React from "react";
-import { IN_DEV, IN_PREVIEW, theme } from "$root/config";
+import { IN_DEV, IN_PREVIEW } from "$root/config";
 import Head from "next/head";
 import { appName } from "$root/constants";
 import { Meta } from "$root/components";
@@ -17,6 +17,8 @@ import queries from "$root/hooks/queries";
 
 import { Analytics } from "@vercel/analytics/react";
 import { match } from "ts-pattern";
+import { GlobalLoader } from "$global-loader";
+import theme from "$root/theme/theme";
 
 /**
  * Generate a selector to add a background color
@@ -86,6 +88,7 @@ const MyApp = ({ Component, pageProps }: AppProps): React.ReactElement => {
 				`}
 			/>
 			<Component {...pageProps} />
+			<GlobalLoader />
 			<Analytics
 				debug={IN_DEV || IN_PREVIEW}
 				beforeSend={({ url, ...event }) => {