components/calender/DatePicker.tsx

@@ -180,7 +180,7 @@ const DatePicker = (): JSX.Element => {
                   py={4}
                 >
                   <Heading as="h4" size="sm" fontWeight="semibold">
-                    Required fields indicated with{" "}
+                    {"Required fields indicated with"}
                     <FormValidateEmoji type="Required" />
                   </Heading>
                   <Field name="date" validate={validateDate}>

components/calender/modals/AddUpdateSticker.tsx

@@ -13,7 +13,7 @@ import {
   SimpleGrid,
   Box
 } from "@chakra-ui/react";
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useRef } from "react";
 import { format, isSameDay } from "date-fns";
 import { Icon } from "@iconify/react";
 import { StickersContext } from "../../../contexts/StickerContext";
@@ -58,7 +58,7 @@ const AddUpdateSticker = ({
 
   const { addEditSticker } = useContext(StickersContext);
 
-  // ! Update these states to sat "add" and "edit" for easier reading.
+  // ! Update these states to say "add" and "edit" for easier reading.
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
     isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
@@ -75,6 +75,9 @@ const AddUpdateSticker = ({
     handleClose();
   };
 
+  // The first sticker to have focus when the modal opens.
+  const initialRef = useRef();
+
   // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
 
   const variants = {
@@ -97,6 +100,7 @@ const AddUpdateSticker = ({
               currSticker={currSticker}
               selectedSticker={selectedSticker}
               updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
             />
           </VStack>
         ),
@@ -140,6 +144,7 @@ const AddUpdateSticker = ({
               currSticker={currSticker}
               selectedSticker={selectedSticker}
               updateSelectedSticker={updateSelectedSticker}
+              initialSticker={initialRef}
             />
           </VStack>
         ),
@@ -223,6 +228,7 @@ const AddUpdateSticker = ({
   return (
     <Modal
       isCentered
+      initialFocusRef={initialRef}
       isOpen={isOpen}
       onClose={() => handleClose()}
       motionPreset="slideInBottom"

components/calender/modals/StickerSelector.tsx

@@ -7,6 +7,7 @@ interface StickerSelectorProps {
   currSticker: StickerVal;
   selectedSticker: StickerVal;
   updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  initialSticker: React.MutableRefObject<undefined>;
 }
 
 /**
@@ -21,19 +22,21 @@ const StickerSelector = ({
   stickerSet,
   currSticker,
   selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  initialSticker
 }: StickerSelectorProps): JSX.Element => {
   const stickers = {
     Demo: (
       <HStack
         w="100%"
         h="auto"
-        justifyContent={"center"}
-        alignContent={"center"}
+        justifyContent="center"
+        alignContent="center"
         spacing={14}
       >
         <Button
           isDisabled={currSticker >= 1}
+          ref={currSticker <= 1 ? initialSticker : null}
           border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
           bg={selectedSticker === 1 && "gray.800"}
           onClick={() => updateSelectedSticker(1)}
@@ -43,6 +46,7 @@ const StickerSelector = ({
         </Button>
         <Button
           isDisabled={currSticker === 0}
+          ref={currSticker >= 1 ? initialSticker : null}
           border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
           bg={selectedSticker === 0 && "gray.800"}
           onClick={() => updateSelectedSticker(0)}

components/loading/LoadingOverlay.tsx

@@ -0,0 +1,37 @@
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay
+} from "@chakra-ui/react";
+import React from "react";
+import LoadingSpinner from "./LoadingSpinner";
+
+const LoadingOverlay = (): JSX.Element => {
+  return (
+    <Modal
+      isCentered
+      isOpen
+      onClose={() => null}
+      motionPreset="slideInBottom"
+      scrollBehavior="inside"
+      size="xs"
+    >
+      <ModalOverlay bg="loading.overlayBg" />
+      <ModalContent bg="transparent" boxShadow="none">
+        {/* <ModalHeader>
+        </ModalHeader> */}
+        <ModalBody border="0px">
+          <Box h="100%" w="100%" textAlign="center">
+            <LoadingSpinner />
+          </Box>
+        </ModalBody>
+        {/* <ModalFooter>
+        </ModalFooter> */}
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default LoadingOverlay;

components/loading/LoadingSpinner.tsx

@@ -0,0 +1,16 @@
+import { Spinner } from "@chakra-ui/react";
+import React from "react";
+
+const LoadingSpinner = (): JSX.Element => {
+  return (
+    <Spinner
+      thickness="4px"
+      speed="0.50s"
+      emptyColor="loading.spinnerEmptySpace"
+      color="loading.spinnerColor"
+      size="xl"
+    />
+  );
+};
+
+export default LoadingSpinner;

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "v0.0.9.4-alpha",
+  "version": "v0.0.9.5-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
@@ -39,7 +39,7 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "<=4.3.0",
     "prettier": "^2.6.2",
-    "typescript": "^4.6.3"
+    "typescript": "<4.6.0"
   },
   "packageManager": "yarn@3.1.0"
 }

theme/AppTheme.ts

@@ -30,6 +30,11 @@ const AppTheme = extendTheme({
       footerText: "black",
       content: "#2d3748",
       patreon: "#FF424D"
+    },
+    loading: {
+      overlayBg: "#171923cb",
+      spinnerColor: "#0088ff",
+      spinnerEmptySpace: "#2D374860"
     }
   },
   styles: {

theme/layout/Footer.tsx

@@ -96,8 +96,7 @@ const Footer = (): JSX.Element => {
           </MotionBox>
           <Text color="brand.footerText" fontSize="xs">
             &copy;
-            {" 2021 - "}
-            {new Date().getFullYear()}{" "}
+            {` 2021 - ${new Date().getFullYear()} `}
             <Link
               href="https://lucidcreations.media"
               rel="noopener"

theme/layout/Header.tsx

@@ -15,7 +15,7 @@ import appLogo from "../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-  const appVersion = "v0.0.9.4-alpha";
+  const appVersion = "v0.0.9.5-alpha";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
@@ -70,11 +70,11 @@ const Header = (): JSX.Element => {
 
   return (
     <Box
-      zIndex={1000000}
+      zIndex={1}
       w="100%"
       pos="fixed"
-      top="0"
-      alignItems={"center"}
+      top={0}
+      alignItems="center"
       boxShadow={
         open
           ? "none"

yarn.lock

@@ -3652,7 +3652,7 @@ __metadata:
     react: <=17.0.2
     react-dom: <=17.0.2
     sharp: ^0.30.3
-    typescript: ^4.6.3
+    typescript: <4.6.0
   languageName: unknown
   linkType: soft
 
@@ -5160,23 +5160,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.6.3":
-  version: 4.6.3
-  resolution: "typescript@npm:4.6.3"
+"typescript@npm:<4.6.0":
+  version: 4.5.5
+  resolution: "typescript@npm:4.5.5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 255bb26c8cb846ca689dd1c3a56587af4f69055907aa2c154796ea28ee0dea871535b1c78f85a6212c77f2657843a269c3a742d09d81495b97b914bf7920415b
+  checksum: 506f4c919dc8aeaafa92068c997f1d213b9df4d9756d0fae1a1e7ab66b585ab3498050e236113a1c9e57ee08c21ec6814ca7a7f61378c058d79af50a4b1f5a5e
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.6.3#~builtin<compat/typescript>":
-  version: 4.6.3
-  resolution: "typescript@patch:typescript@npm%3A4.6.3#~builtin<compat/typescript>::version=4.6.3&hash=ddd1e8"
+"typescript@patch:typescript@<4.6.0#~builtin<compat/typescript>":
+  version: 4.5.5
+  resolution: "typescript@patch:typescript@npm%3A4.5.5#~builtin<compat/typescript>::version=4.5.5&hash=ddd1e8"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: fe6bdc1afb2f145ddb7b0a3a31f96352209f6a5704d97f038414ea22ff9d8dd42f32cfb6652e30458d7d958d2d4e85de2df11c574899c6f750a6b3c0e90a3a76
+  checksum: 9cdde4aae20b2904431f3f2ca8acaf3b0cc52faddf68aa88b288c9d0520221817da43783a756fce7ab9360033ada0371c3ff93dfc4bdb4b13f6e9bac64e1658d
   languageName: node
   linkType: hard