From ba6743cd1bd948f4c8ce0dcdca963b87db3ea994 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:07:02 -0500
Subject: [PATCH 1/7] Added loading overlay colors.

---
 theme/AppTheme.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/theme/AppTheme.ts b/theme/AppTheme.ts
index 6df0795..d84e619 100644
--- a/theme/AppTheme.ts
+++ b/theme/AppTheme.ts
@@ -30,6 +30,11 @@ const AppTheme = extendTheme({
       footerText: "black",
       content: "#2d3748",
       patreon: "#FF424D"
+    },
+    loading: {
+      overlayBg: "#171923cb",
+      spinnerColor: "#0088ff",
+      spinnerEmptySpace: "#2D374860"
     }
   },
   styles: {

From 6b280f448c241c5ead8df87815829f5fca738436 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:07:51 -0500
Subject: [PATCH 2/7] Remove curly braces for consistency.

---
 components/calender/DatePicker.tsx             | 2 +-
 components/calender/modals/StickerSelector.tsx | 4 ++--
 theme/layout/Footer.tsx                        | 3 +--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx
index 0e259c4..e154504 100644
--- a/components/calender/DatePicker.tsx
+++ b/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}>
diff --git a/components/calender/modals/StickerSelector.tsx b/components/calender/modals/StickerSelector.tsx
index 200f9b0..8b9e7bc 100644
--- a/components/calender/modals/StickerSelector.tsx
+++ b/components/calender/modals/StickerSelector.tsx
@@ -28,8 +28,8 @@ const StickerSelector = ({
       <HStack
         w="100%"
         h="auto"
-        justifyContent={"center"}
-        alignContent={"center"}
+        justifyContent="center"
+        alignContent="center"
         spacing={14}
       >
         <Button
diff --git a/theme/layout/Footer.tsx b/theme/layout/Footer.tsx
index b83d3b3..a9d4620 100644
--- a/theme/layout/Footer.tsx
+++ b/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"

From 8803940b192df3d8814b681be112d60bb14ead5e Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:08:47 -0500
Subject: [PATCH 3/7] Updated z index. Was interfereing with loading overlay.

---
 theme/layout/Header.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx
index 2df7632..db50009 100644
--- a/theme/layout/Header.tsx
+++ b/theme/layout/Header.tsx
@@ -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"

From 6b670a92ba15acad5f7e0053eb140dad9ee8d9ff Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:10:09 -0500
Subject: [PATCH 4/7] Added a loading overlay and loading spinner.

---
 components/loading/LoadingOverlay.tsx | 37 +++++++++++++++++++++++++++
 components/loading/LoadingSpinner.tsx | 16 ++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 components/loading/LoadingOverlay.tsx
 create mode 100644 components/loading/LoadingSpinner.tsx

diff --git a/components/loading/LoadingOverlay.tsx b/components/loading/LoadingOverlay.tsx
new file mode 100644
index 0000000..2ff147d
--- /dev/null
+++ b/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;
diff --git a/components/loading/LoadingSpinner.tsx b/components/loading/LoadingSpinner.tsx
new file mode 100644
index 0000000..8f11d4d
--- /dev/null
+++ b/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;

From 29f8e7138c25e465116b915ba319a9e5643658d2 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:13:34 -0500
Subject: [PATCH 5/7] Update version info.

---
 package.json            | 2 +-
 theme/layout/Header.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3f8cb00..ddee62e 100644
--- a/package.json
+++ b/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",
diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx
index db50009..be95f4e 100644
--- a/theme/layout/Header.tsx
+++ b/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);

From ad32dd30a195f8d2b1e89129ecaad2da897ac896 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:42:20 -0500
Subject: [PATCH 6/7] Fixed initial focus when the modal opens to the first
 enabled sticker button.

---
 components/calender/modals/AddUpdateSticker.tsx | 10 ++++++++--
 components/calender/modals/StickerSelector.tsx  |  6 +++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/calender/modals/AddUpdateSticker.tsx b/components/calender/modals/AddUpdateSticker.tsx
index 1e2defb..9bda161 100644
--- a/components/calender/modals/AddUpdateSticker.tsx
+++ b/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"
diff --git a/components/calender/modals/StickerSelector.tsx b/components/calender/modals/StickerSelector.tsx
index 8b9e7bc..e2eba7b 100644
--- a/components/calender/modals/StickerSelector.tsx
+++ b/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,7 +22,8 @@ const StickerSelector = ({
   stickerSet,
   currSticker,
   selectedSticker,
-  updateSelectedSticker
+  updateSelectedSticker,
+  initialSticker
 }: StickerSelectorProps): JSX.Element => {
   const stickers = {
     Demo: (
@@ -34,6 +36,7 @@ const StickerSelector = ({
       >
         <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)}

From 004927adc7de95680368fa7b1de648f7dd5fe563 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Sat, 9 Apr 2022 17:44:35 -0500
Subject: [PATCH 7/7] Locked TS to version 4.6.0 due to eslint compatability.

---
 package.json |  2 +-
 yarn.lock    | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index ddee62e..05f9bd8 100644
--- a/package.json
+++ b/package.json
@@ -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"
 }
diff --git a/yarn.lock b/yarn.lock
index 3b676f9..cec1083 100644
--- a/yarn.lock
+++ b/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