From fb531874383ae31f5c18f4deee76146967ef2b26 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 27 Mar 2022 01:32:15 -0500
Subject: [PATCH 01/12] Expanded the add stickers modal to include a
 confirmation screen when updating a sticker on a past day. Step state is not
 resetting on close.

---
 components/calender/DatePicker.tsx        |  14 +-
 components/calender/Day.tsx               |   1 +
 components/calender/modals/AddSticker.tsx | 259 ++++++++++++++++------
 pages/calendar/index.tsx                  |   4 +-
 4 files changed, 201 insertions(+), 77 deletions(-)

diff --git a/components/calender/DatePicker.tsx b/components/calender/DatePicker.tsx
index 2a346f5..0e259c4 100644
--- a/components/calender/DatePicker.tsx
+++ b/components/calender/DatePicker.tsx
@@ -24,8 +24,8 @@ import {
   Field,
   FieldProps
 } from "formik";
-import { format } from "date-fns"
-import findValidDateRange from "../../lib/findValidDateRange"
+import { format } from "date-fns";
+import findValidDateRange from "../../lib/findValidDateRange";
 import FormValidateEmoji from "./FormValidateEmoji";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
@@ -220,13 +220,13 @@ const DatePicker = (): JSX.Element => {
                               max={format(validDateRange.end, "yyyy-MM-dd")}
                               {...(!form.errors.date && form.touched.date
                                 ? {
-                                  borderColor: "brand.valid",
-                                  boxShadow: "0 0 0 1px #00c17c",
-                                  _hover: {
                                     borderColor: "brand.valid",
-                                    boxShadow: "0 0 0 1px #00c17c"
+                                    boxShadow: "0 0 0 1px #00c17c",
+                                    _hover: {
+                                      borderColor: "brand.valid",
+                                      boxShadow: "0 0 0 1px #00c17c"
+                                    }
                                   }
-                                }
                                 : "")}
                             />
                             {!form.touched.date && (
diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index 8a71e32..c36d5e4 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -156,6 +156,7 @@ const Day = ({
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
                 updateSticker={setStickerState}
+                currSticker={stickerState}
               />
             )}
           </StickersContextProvider>
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index b835278..bdfb8e2 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -4,15 +4,14 @@ import {
   ModalOverlay,
   ModalContent,
   ModalHeader,
-  ModalCloseButton,
   ModalBody,
   ModalFooter,
   Heading,
   HStack,
-  VStack
+  Text
 } from "@chakra-ui/react";
-import React, { Fragment, useState, useContext } from "react";
-import { format } from "date-fns";
+import React, { Fragment, useState, useContext, useEffect } from "react";
+import { format, isSameDay } from "date-fns";
 import DemoStickers from "../stickers/DemoStickers";
 import { StickersContext } from "../../../contexts/StickerContext";
 
@@ -21,6 +20,7 @@ interface AddStickerProps {
   updateIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   date: Date;
   updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+  currSticker: StickerVal;
 }
 
 /**
@@ -35,7 +35,8 @@ const AddSticker = ({
   isOpen,
   updateIsOpen,
   date,
-  updateSticker
+  updateSticker,
+  currSticker
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -49,95 +50,217 @@ const AddSticker = ({
 
   const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
 
+  const [step, setStep] = useState<number | null>(null);
+
   const { addEditSticker } = useContext(StickersContext);
 
+  const [modalVariant] = useState<"currDate" | "notCurrDate">(
+    isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
+  );
+
   const handleClose = () => {
     setSelectedSticker(null);
+    setStep(null);
     updateIsOpen(false);
   };
 
+  useEffect(() => {
+    if (step === null) {
+      setStep(0);
+    }
+  }, [step]);
+
+  // TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
   const handleSubmit = (sticker) => {
     const newSticker: Sticker = addEditSticker(date, sticker);
     updateSticker(newSticker.sticker);
     handleClose();
   };
 
-  // TODO: Invalidate submit button if the selected sticker is the same as the current sticker.
+  // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
 
   // TODO: Display the current sticker above the selection screen if a current sticker exists.
 
-  // TODO: Invalidate the button for the current sticker and gray it out.
-
   // TODO: Trigger a warning if the date is in the past showing the sticker change.
   // ! DO NOT update the sticker state or trigger the edd/edit function until that new warning is accepted.
 
+  const variants = {
+    currDate: [
+      {
+        header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
+        body: (
+          <HStack
+            w="100%"
+            h="auto"
+            justifyContent={"center"}
+            alignContent={"center"}
+            spacing={14}
+          >
+            <Button
+              isDisabled={currSticker >= 1}
+              border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
+              bg={selectedSticker === 1 && "gray.800"}
+              onClick={() => setSelectedSticker(1)}
+              variant="stickerButton"
+            >
+              <DemoStickers stickerVal={1} />
+            </Button>
+            <Button
+              isDisabled={currSticker === 0}
+              border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
+              bg={selectedSticker === 0 && "gray.800"}
+              onClick={() => setSelectedSticker(0)}
+              variant="stickerButton"
+            >
+              <DemoStickers stickerVal={0} />
+            </Button>
+            <Button
+              isDisabled={currSticker <= -1}
+              border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
+              bg={selectedSticker === -1 && "gray.800"}
+              onClick={() => setSelectedSticker(-1)}
+              variant="stickerButton"
+            >
+              <DemoStickers stickerVal={-1} />
+            </Button>
+          </HStack>
+        ),
+        footer: (
+          <Button
+            variant="submit"
+            isDisabled={
+              selectedSticker === null || selectedSticker === currSticker
+            }
+            onClick={() => handleSubmit(selectedSticker)}
+          >
+            {"Submit"}
+          </Button>
+        )
+      }
+    ],
+    notCurrDate: [
+      {
+        header: `Which sticker did you want to update for ${format(
+          date,
+          "LLL d, y"
+        )}?`,
+        body: (
+          <Text
+            w="100%"
+            h="auto "
+            fontSize={"3xl"}
+            textAlign={"center"}
+            fontWeight={"bold"}
+          >
+            {"Filler"}
+          </Text>
+        ),
+        footer: (
+          <Button
+            variant="primary"
+            // isDisabled={
+            //   selectedSticker === null || selectedSticker === currSticker
+            // }
+            onClick={() => setStep(step + 1)}
+          >
+            {"Next"}
+          </Button>
+        )
+      },
+      {
+        header: `Are you sure you want to change the sticker for ${format(
+          date,
+          "M/d/y"
+        )}?`,
+        body: (
+          <Text
+            w="100%"
+            h="auto "
+            fontSize={"3xl"}
+            textAlign={"center"}
+            fontWeight={"bold"}
+          >
+            {"Filler"}
+          </Text>
+        ),
+        footer: (
+          <HStack
+            w="100%"
+            h="auto"
+            justifyContent={"space-between"}
+            alignContent={"center"}
+          >
+            <Button variant="primary" onClick={() => setStep(step - 1)}>
+              {"Previous"}
+            </Button>
+            <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
+              <Button
+                variant="submit"
+                // isDisabled={
+                //   selectedSticker === null || selectedSticker === currSticker
+                // }
+                // onClick={() => handleSubmit(selectedSticker)}
+              >
+                {"Confirm"}
+              </Button>
+              <Button
+                backgroundColor="transparent"
+                _hover={{ backgroundColor: "brand.danger" }}
+                onClick={() => updateIsOpen(!isOpen)}
+              >
+                {"Cancel"}
+              </Button>
+            </HStack>
+          </HStack>
+        )
+      }
+    ]
+  };
+
+  // const JSX = <></>;
+  // const example = {
+  //   currDate: [{ header: JSX, body: JSX, footer: JSX }],
+  //   notCurrDate: [
+  //     { header: JSX, body: JSX, footer: JSX },
+  //     { header: JSX, body: JSX, footer: JSX }
+  //   ]
+  // };
+
   return (
     <Fragment>
-      <Modal
-        isCentered
-        isOpen={isOpen}
-        onClose={() => handleClose()}
-        motionPreset="slideInBottom"
-        scrollBehavior="inside"
-        size="lg"
-      >
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>
-            <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
-              {`Which sticker did you earn for ${format(date, "LLL d, y")}?`}
-            </Heading>
-          </ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <VStack>
+      {step !== null && (
+        <Modal
+          isCentered
+          isOpen={isOpen}
+          onClose={() => handleClose()}
+          motionPreset="slideInBottom"
+          scrollBehavior="inside"
+          size={modalVariant === "currDate" ? "xl" : "2xl"}
+        >
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>
               <HStack
                 w="100%"
                 h="auto"
-                justifyContent="center"
-                alignContent="center"
-                spacing={6}
+                justifyContent={"space-between"}
+                alignContent={"center"}
               >
-                <Button
-                  border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
-                  bg={selectedSticker === 1 && "gray.800"}
-                  onClick={() => setSelectedSticker(1)}
-                  variant="stickerButton"
-                >
-                  <DemoStickers stickerVal={1} />
-                </Button>
-                <Button
-                  border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
-                  bg={selectedSticker === 0 && "gray.800"}
-                  onClick={() => setSelectedSticker(0)}
-                  variant="stickerButton"
-                >
-                  <DemoStickers stickerVal={0} />
-                </Button>
-                <Button
-                  border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
-                  bg={selectedSticker === -1 && "gray.800"}
-                  onClick={() => setSelectedSticker(-1)}
-                  variant="stickerButton"
-                >
-                  <DemoStickers stickerVal={-1} />
-                </Button>
+                <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
+                  {modalVariant && variants[modalVariant][step].header}
+                </Heading>
+                <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
               </HStack>
-            </VStack>
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              variant="primary"
-              isDisabled={selectedSticker === null}
-              // mr={3}
-              onClick={() => handleSubmit(selectedSticker)}
-            >
-              {"Submit"}
-            </Button>
-            {/* <Button variant="ghost">Secondary Action</Button> */}
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
+            </ModalHeader>
+            <ModalBody>
+              {modalVariant && variants[modalVariant][step].body}
+            </ModalBody>
+            <ModalFooter>
+              {modalVariant && variants[modalVariant][step].footer}
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      )}
     </Fragment>
   );
 };
diff --git a/pages/calendar/index.tsx b/pages/calendar/index.tsx
index 7db5a70..ad0dc52 100644
--- a/pages/calendar/index.tsx
+++ b/pages/calendar/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 import { Box, Heading } from "@chakra-ui/react";
 
-const DateRoute = () => {
+const DateIndex = () => {
   const router = useRouter();
 
   useEffect(() => {
@@ -20,4 +20,4 @@ const DateRoute = () => {
   );
 };
 
-export default DateRoute;
+export default DateIndex;
-- 
2.49.1


From c191c6037b3e9525d2de8b85c74345b2afce0ae1 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 27 Mar 2022 01:34:43 -0500
Subject: [PATCH 02/12] Added documentation

---
 components/calender/modals/AddSticker.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index bdfb8e2..9587577 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -30,6 +30,7 @@ interface AddStickerProps {
  * @param {React.Dispatch<React.SetStateAction<boolean>>} props.updateIsOpen used to close the modal.
  * @param {date} props.date the date for which the sticker will be added or modified.
  * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker the react state function to update the sticker.
+ * @param {StickerVal}currSticker the current sticker for the date.
  */
 const AddSticker = ({
   isOpen,
-- 
2.49.1


From 501e6a44bede63fb9623d777a657fc5bcf0a3b04 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 27 Mar 2022 01:50:33 -0500
Subject: [PATCH 03/12] 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 7e808bb..fbbd707 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.8.0-alpha",
+  "version": "v0.0.9.0-alpha",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx
index 7a17399..c280d51 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.8.0-alpha";
+  const appVersion = "v0.0.9.0-alpha";
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
-- 
2.49.1


From 93de5cd16d7e49fb25cca61c1e3c51723ee5ef42 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 27 Mar 2022 01:53:54 -0500
Subject: [PATCH 04/12] Added documentation.

---
 components/calender/modals/AddSticker.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index 9587577..c8b64b4 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -59,6 +59,8 @@ const AddSticker = ({
     isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
   );
 
+  // ! Step is not setting back to 0 when modal is closet. Try to move out of this component and take it in as an arg.
+
   const handleClose = () => {
     setSelectedSticker(null);
     setStep(null);
-- 
2.49.1


From 5abad3a40a403dea0b5145c04e939ec2d043f89f Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Mon, 28 Mar 2022 13:56:43 -0500
Subject: [PATCH 05/12] Modal step/page resets to 0 when re-opened.

---
 components/calender/Day.tsx               | 12 ++-
 components/calender/modals/AddSticker.tsx | 98 +++++++++++------------
 2 files changed, 55 insertions(+), 55 deletions(-)

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index c36d5e4..79b91fd 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -58,11 +58,14 @@ const Day = ({
     }
   };
 
-  // This handles the modal for this date.
+  // This handles the modal for the day.
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
   const [stickerState, setStickerState] = useState<StickerVal>(sticker);
 
+  // The step the modal is at.
+  const [step, setStep] = useState<number>(0);
+
   /**
    * TODO: Add logic to remove the onClick within overflow dates.
    * Do not give dates for the next month an onClick.
@@ -114,7 +117,10 @@ const Day = ({
           border="1px solid #0068ff"
           w="100%"
           h="100%"
-          onClick={() => setIsOpen(true)}
+          onClick={() => {
+            setStep(0);
+            setIsOpen(true);
+          }}
           alignContent="center"
           justifyContent="flex-start"
           pt={2}
@@ -157,6 +163,8 @@ const Day = ({
                 updateIsOpen={setIsOpen}
                 updateSticker={setStickerState}
                 currSticker={stickerState}
+                step={step}
+                updateStep={setStep}
               />
             )}
           </StickersContextProvider>
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index c8b64b4..807ad37 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -10,7 +10,7 @@ import {
   HStack,
   Text
 } from "@chakra-ui/react";
-import React, { Fragment, useState, useContext, useEffect } from "react";
+import React, { useState, useContext } from "react";
 import { format, isSameDay } from "date-fns";
 import DemoStickers from "../stickers/DemoStickers";
 import { StickersContext } from "../../../contexts/StickerContext";
@@ -21,23 +21,28 @@ interface AddStickerProps {
   date: Date;
   updateSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
   currSticker: StickerVal;
+  step: number;
+  updateStep: React.Dispatch<React.SetStateAction<number>>;
 }
 
 /**
  * Handles adding and modifying the stickers for the given month.
- * @param props the props for this component.
- * @param {boolean} props.isOpen tells the component when the modal should be open.
- * @param {React.Dispatch<React.SetStateAction<boolean>>} props.updateIsOpen used to close the modal.
- * @param {date} props.date the date for which the sticker will be added or modified.
+ * @param {boolean} isOpen tells the component when the modal should be open.
+ * @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen used to close the modal.
+ * @param {date} date the date for which the sticker will be added or modified.
  * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker the react state function to update the sticker.
- * @param {StickerVal}currSticker the current sticker for the date.
+ * @param {StickerVal} currSticker the current sticker for the date.
+ * @param {number} step a numerical variable that represents the page the modal should be at.
+ * @param {React.Dispatch<React.SetStateAction<number>>} updateStep used to navigate the pages of the modal by updating the step the modal is on.
  */
 const AddSticker = ({
   isOpen,
   updateIsOpen,
   date,
   updateSticker,
-  currSticker
+  currSticker,
+  step,
+  updateStep
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -51,8 +56,6 @@ const AddSticker = ({
 
   const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
 
-  const [step, setStep] = useState<number | null>(null);
-
   const { addEditSticker } = useContext(StickersContext);
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
@@ -63,16 +66,9 @@ const AddSticker = ({
 
   const handleClose = () => {
     setSelectedSticker(null);
-    setStep(null);
     updateIsOpen(false);
   };
 
-  useEffect(() => {
-    if (step === null) {
-      setStep(0);
-    }
-  }, [step]);
-
   // TODO: Validate that the provided sticker is not the current sticker. Throw an error if the same sticker is attempted.
   const handleSubmit = (sticker) => {
     const newSticker: Sticker = addEditSticker(date, sticker);
@@ -164,7 +160,7 @@ const AddSticker = ({
             // isDisabled={
             //   selectedSticker === null || selectedSticker === currSticker
             // }
-            onClick={() => setStep(step + 1)}
+            onClick={() => updateStep(step + 1)}
           >
             {"Next"}
           </Button>
@@ -193,7 +189,7 @@ const AddSticker = ({
             justifyContent={"space-between"}
             alignContent={"center"}
           >
-            <Button variant="primary" onClick={() => setStep(step - 1)}>
+            <Button variant="primary" onClick={() => updateStep(step - 1)}>
               {"Previous"}
             </Button>
             <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
@@ -230,41 +226,37 @@ const AddSticker = ({
   // };
 
   return (
-    <Fragment>
-      {step !== null && (
-        <Modal
-          isCentered
-          isOpen={isOpen}
-          onClose={() => handleClose()}
-          motionPreset="slideInBottom"
-          scrollBehavior="inside"
-          size={modalVariant === "currDate" ? "xl" : "2xl"}
-        >
-          <ModalOverlay />
-          <ModalContent>
-            <ModalHeader>
-              <HStack
-                w="100%"
-                h="auto"
-                justifyContent={"space-between"}
-                alignContent={"center"}
-              >
-                <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
-                  {modalVariant && variants[modalVariant][step].header}
-                </Heading>
-                <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
-              </HStack>
-            </ModalHeader>
-            <ModalBody>
-              {modalVariant && variants[modalVariant][step].body}
-            </ModalBody>
-            <ModalFooter>
-              {modalVariant && variants[modalVariant][step].footer}
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      )}
-    </Fragment>
+    <Modal
+      isCentered
+      isOpen={isOpen}
+      onClose={() => handleClose()}
+      motionPreset="slideInBottom"
+      scrollBehavior="inside"
+      size={modalVariant === "currDate" ? "xl" : "2xl"}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>
+          <HStack
+            w="100%"
+            h="auto"
+            justifyContent={"space-between"}
+            alignContent={"center"}
+          >
+            <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
+              {modalVariant && variants[modalVariant][step].header}
+            </Heading>
+            <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
+          </HStack>
+        </ModalHeader>
+        <ModalBody>
+          {modalVariant && variants[modalVariant][step].body}
+        </ModalBody>
+        <ModalFooter>
+          {modalVariant && variants[modalVariant][step].footer}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
   );
 };
 
-- 
2.49.1


From cf86326f7f6171cd6ff870eb41ec39e1c30b4e51 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <lucid@lucidcreations.media>
Date: Fri, 1 Apr 2022 17:14:17 -0500
Subject: [PATCH 06/12] Merging main

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

diff --git a/package.json b/package.json
index 4cfbefb..8d9bdf9 100644
--- a/package.json
+++ b/package.json
@@ -2,11 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-<<<<<<< HEAD
   "version": "v0.0.9.0-alpha",
-=======
-  "version": "v0.0.8.1-alpha",
->>>>>>> main
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
diff --git a/theme/layout/Header.tsx b/theme/layout/Header.tsx
index 044d92b..c280d51 100644
--- a/theme/layout/Header.tsx
+++ b/theme/layout/Header.tsx
@@ -15,11 +15,7 @@ import appLogo from "../../public/images/logo.svg";
 
 const Header = (): JSX.Element => {
   const appName = "LCM Potty Chart";
-<<<<<<< HEAD
   const appVersion = "v0.0.9.0-alpha";
-=======
-  const appVersion = "v0.0.8.1-alpha";
->>>>>>> main
 
   // Add transparency while not at the top of the page.
   const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
-- 
2.49.1


From 59509c51e29e2d98e36623e67a893a8f5fb81eb6 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sat, 2 Apr 2022 23:51:13 -0500
Subject: [PATCH 07/12] Locked React to version 17 due to errors.

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

diff --git a/package.json b/package.json
index 8d9bdf9..3766517 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,8 @@
     "formik": "^2.2.9",
     "framer-motion": "^6.2.8",
     "next": "12.1.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "<=17.0.2",
+    "react-dom": "<=17.0.2",
     "sharp": "^0.30.3"
   },
   "devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index c4d8fdd..dfffb45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3644,8 +3644,8 @@ __metadata:
     framer-motion: ^6.2.8
     next: 12.1.4
     prettier: ^2.6.1
-    react: 18.0.0
-    react-dom: 18.0.0
+    react: <=17.0.2
+    react-dom: <=17.0.2
     sharp: ^0.30.3
     typescript: <4.6.0
   languageName: unknown
@@ -4365,15 +4365,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:18.0.0":
-  version: 18.0.0
-  resolution: "react-dom@npm:18.0.0"
+"react-dom@npm:<=17.0.2":
+  version: 17.0.2
+  resolution: "react-dom@npm:17.0.2"
   dependencies:
     loose-envify: ^1.1.0
-    scheduler: ^0.21.0
+    object-assign: ^4.1.1
+    scheduler: ^0.20.2
   peerDependencies:
-    react: ^18.0.0
-  checksum: dd0ba9f2f31dd728076c892a95b2f5a8dfe79136431b0289afb46eec39d0ca6b6f0f40a60fd8aa6ef702c98ce7c26100d3d4dbc35c7c9e87429cd04f84cb58bd
+    react: 17.0.2
+  checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
   languageName: node
   linkType: hard
 
@@ -4466,12 +4467,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:18.0.0":
-  version: 18.0.0
-  resolution: "react@npm:18.0.0"
+"react@npm:<=17.0.2":
+  version: 17.0.2
+  resolution: "react@npm:17.0.2"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 293020b96536b3c7113ee57ca5c990a3f25649d1751b1c7a3aabd16dff0691fe9f1eed1206616d0906d05933536052037340a0c8d0941ff870b0eb469a2f975b
+    object-assign: ^4.1.1
+  checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
   languageName: node
   linkType: hard
 
@@ -4653,12 +4655,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.21.0":
-  version: 0.21.0
-  resolution: "scheduler@npm:0.21.0"
+"scheduler@npm:^0.20.2":
+  version: 0.20.2
+  resolution: "scheduler@npm:0.20.2"
   dependencies:
     loose-envify: ^1.1.0
-  checksum: 4f8285076041ed2c81acdd1faa987f1655fdbd30554bc667c1ea64743fc74fb3a04ca7d27454b3d678735df5a230137a3b84756061b43dc5796e80701b66d124
+    object-assign: ^4.1.1
+  checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
   languageName: node
   linkType: hard
 
-- 
2.49.1


From 8a7adba7f263b6645d46b9853d4108a48e283e6c Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sat, 2 Apr 2022 23:51:31 -0500
Subject: [PATCH 08/12] Added a sticker selector componenet.

---
 components/calender/Day.tsx                   |  6 ++
 components/calender/modals/AddSticker.tsx     | 76 +++++--------------
 .../calender/modals/StickerSelector.tsx       | 61 +++++++++++++++
 3 files changed, 85 insertions(+), 58 deletions(-)
 create mode 100644 components/calender/modals/StickerSelector.tsx

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index 79b91fd..7fcc09f 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -66,6 +66,9 @@ const Day = ({
   // The step the modal is at.
   const [step, setStep] = useState<number>(0);
 
+  // The current selected sticker.
+  const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
+
   /**
    * TODO: Add logic to remove the onClick within overflow dates.
    * Do not give dates for the next month an onClick.
@@ -119,6 +122,7 @@ const Day = ({
           h="100%"
           onClick={() => {
             setStep(0);
+            setSelectedSticker(null);
             setIsOpen(true);
           }}
           alignContent="center"
@@ -165,6 +169,8 @@ const Day = ({
                 currSticker={stickerState}
                 step={step}
                 updateStep={setStep}
+                selectedSticker={selectedSticker}
+                updateSelectedSticker={setSelectedSticker}
               />
             )}
           </StickersContextProvider>
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index 807ad37..43214a7 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -12,8 +12,8 @@ import {
 } from "@chakra-ui/react";
 import React, { useState, useContext } from "react";
 import { format, isSameDay } from "date-fns";
-import DemoStickers from "../stickers/DemoStickers";
 import { StickersContext } from "../../../contexts/StickerContext";
+import StickerSelector from "./StickerSelector";
 
 interface AddStickerProps {
   isOpen: boolean;
@@ -23,6 +23,8 @@ interface AddStickerProps {
   currSticker: StickerVal;
   step: number;
   updateStep: React.Dispatch<React.SetStateAction<number>>;
+  selectedSticker: StickerVal;
+  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
 }
 
 /**
@@ -42,7 +44,9 @@ const AddSticker = ({
   updateSticker,
   currSticker,
   step,
-  updateStep
+  updateStep,
+  selectedSticker,
+  updateSelectedSticker
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
@@ -54,8 +58,6 @@ const AddSticker = ({
    * Show a message when a date before the current date is selected.
    */
 
-  const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
-
   const { addEditSticker } = useContext(StickersContext);
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
@@ -65,7 +67,6 @@ const AddSticker = ({
   // ! Step is not setting back to 0 when modal is closet. Try to move out of this component and take it in as an arg.
 
   const handleClose = () => {
-    setSelectedSticker(null);
     updateIsOpen(false);
   };
 
@@ -88,41 +89,12 @@ const AddSticker = ({
       {
         header: `Which sticker did you earn for ${format(date, "LLL d, y")}?`,
         body: (
-          <HStack
-            w="100%"
-            h="auto"
-            justifyContent={"center"}
-            alignContent={"center"}
-            spacing={14}
-          >
-            <Button
-              isDisabled={currSticker >= 1}
-              border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
-              bg={selectedSticker === 1 && "gray.800"}
-              onClick={() => setSelectedSticker(1)}
-              variant="stickerButton"
-            >
-              <DemoStickers stickerVal={1} />
-            </Button>
-            <Button
-              isDisabled={currSticker === 0}
-              border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
-              bg={selectedSticker === 0 && "gray.800"}
-              onClick={() => setSelectedSticker(0)}
-              variant="stickerButton"
-            >
-              <DemoStickers stickerVal={0} />
-            </Button>
-            <Button
-              isDisabled={currSticker <= -1}
-              border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
-              bg={selectedSticker === -1 && "gray.800"}
-              onClick={() => setSelectedSticker(-1)}
-              variant="stickerButton"
-            >
-              <DemoStickers stickerVal={-1} />
-            </Button>
-          </HStack>
+          <StickerSelector
+            stickerSet="Demo"
+            currSticker={currSticker}
+            selectedSticker={selectedSticker}
+            updateSelectedSticker={updateSelectedSticker}
+          />
         ),
         footer: (
           <Button
@@ -144,15 +116,12 @@ const AddSticker = ({
           "LLL d, y"
         )}?`,
         body: (
-          <Text
-            w="100%"
-            h="auto "
-            fontSize={"3xl"}
-            textAlign={"center"}
-            fontWeight={"bold"}
-          >
-            {"Filler"}
-          </Text>
+          <StickerSelector
+            stickerSet="Demo"
+            currSticker={currSticker}
+            selectedSticker={selectedSticker}
+            updateSelectedSticker={updateSelectedSticker}
+          />
         ),
         footer: (
           <Button
@@ -216,15 +185,6 @@ const AddSticker = ({
     ]
   };
 
-  // const JSX = <></>;
-  // const example = {
-  //   currDate: [{ header: JSX, body: JSX, footer: JSX }],
-  //   notCurrDate: [
-  //     { header: JSX, body: JSX, footer: JSX },
-  //     { header: JSX, body: JSX, footer: JSX }
-  //   ]
-  // };
-
   return (
     <Modal
       isCentered
diff --git a/components/calender/modals/StickerSelector.tsx b/components/calender/modals/StickerSelector.tsx
new file mode 100644
index 0000000..0373835
--- /dev/null
+++ b/components/calender/modals/StickerSelector.tsx
@@ -0,0 +1,61 @@
+import { HStack, Button } from "@chakra-ui/react";
+import React from "react";
+import DemoStickers from "../stickers/DemoStickers";
+
+interface StickerSelectorProps {
+  stickerSet: "Demo";
+  currSticker: StickerVal;
+  selectedSticker: StickerVal;
+  updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
+}
+
+const StickerSelector = ({
+  stickerSet,
+  currSticker,
+  selectedSticker,
+  updateSelectedSticker
+}: StickerSelectorProps): JSX.Element => {
+  const stickers = {
+    Demo: (
+      <HStack
+        w="100%"
+        h="auto"
+        justifyContent={"center"}
+        alignContent={"center"}
+        spacing={14}
+      >
+        <Button
+          isDisabled={currSticker >= 1}
+          border={selectedSticker === 1 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === 1 && "gray.800"}
+          onClick={() => updateSelectedSticker(1)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={1} />
+        </Button>
+        <Button
+          isDisabled={currSticker === 0}
+          border={selectedSticker === 0 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === 0 && "gray.800"}
+          onClick={() => updateSelectedSticker(0)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={0} />
+        </Button>
+        <Button
+          isDisabled={currSticker <= -1}
+          border={selectedSticker === -1 ? "1px solid #FFF" : "opx"}
+          bg={selectedSticker === -1 && "gray.800"}
+          onClick={() => updateSelectedSticker(-1)}
+          variant="stickerButton"
+        >
+          <DemoStickers stickerVal={-1} />
+        </Button>
+      </HStack>
+    )
+  };
+
+  return stickers[stickerSet];
+};
+
+export default StickerSelector;
-- 
2.49.1


From 3c6099908930fa222444e360550a86c035cc6f27 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 3 Apr 2022 00:48:31 -0500
Subject: [PATCH 09/12] Completed the edit confirmation modal

---
 components/calender/modals/AddSticker.tsx | 72 ++++++++++++++++-------
 1 file changed, 51 insertions(+), 21 deletions(-)

diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index 43214a7..22b4f79 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -8,12 +8,17 @@ import {
   ModalFooter,
   Heading,
   HStack,
-  Text
+  Text,
+  VStack,
+  SimpleGrid,
+  Box
 } from "@chakra-ui/react";
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, Fragment } from "react";
 import { format, isSameDay } from "date-fns";
+import { Icon } from "@iconify/react";
 import { StickersContext } from "../../../contexts/StickerContext";
 import StickerSelector from "./StickerSelector";
+import DemoStickers from "../stickers/DemoStickers";
 
 interface AddStickerProps {
   isOpen: boolean;
@@ -116,12 +121,28 @@ const AddSticker = ({
           "LLL d, y"
         )}?`,
         body: (
-          <StickerSelector
-            stickerSet="Demo"
-            currSticker={currSticker}
-            selectedSticker={selectedSticker}
-            updateSelectedSticker={updateSelectedSticker}
-          />
+          <VStack
+            w="100%"
+            h="auto"
+            justifyContent="space-between"
+            alignContent="center"
+          >
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Current Sticker"}
+            </Heading>
+            <Text fontSize="4rem">
+              <DemoStickers stickerVal={currSticker} />
+            </Text>
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Select your new sticker"}
+            </Heading>
+            <StickerSelector
+              stickerSet="Demo"
+              currSticker={currSticker}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={updateSelectedSticker}
+            />
+          </VStack>
         ),
         footer: (
           <Button
@@ -141,15 +162,24 @@ const AddSticker = ({
           "M/d/y"
         )}?`,
         body: (
-          <Text
-            w="100%"
-            h="auto "
-            fontSize={"3xl"}
-            textAlign={"center"}
-            fontWeight={"bold"}
-          >
-            {"Filler"}
-          </Text>
+          <SimpleGrid my="1.5rem" mx="5rem" w="auto" h="100%" columns={3}>
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"Previous Sticker"}
+            </Heading>
+            <Box></Box>
+            <Heading textAlign="center" as="h3" size="md" w="100%" h="auto">
+              {"New Sticker"}
+            </Heading>
+            <Text textAlign="center" w="100%" fontSize="4rem">
+              <DemoStickers stickerVal={currSticker} />
+            </Text>
+            <Box fontSize="4rem" m="auto">
+              <Icon fontSize="4rem" icon="bi:arrow-right" />
+            </Box>
+            <Text textAlign="center" w="100%" fontSize="4rem">
+              <DemoStickers stickerVal={selectedSticker} />
+            </Text>
+          </SimpleGrid>
         ),
         footer: (
           <HStack
@@ -164,10 +194,10 @@ const AddSticker = ({
             <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
               <Button
                 variant="submit"
-                // isDisabled={
-                //   selectedSticker === null || selectedSticker === currSticker
-                // }
-                // onClick={() => handleSubmit(selectedSticker)}
+              isDisabled={
+                selectedSticker === null || selectedSticker === currSticker
+              }
+              onClick={() => handleSubmit(selectedSticker)}
               >
                 {"Confirm"}
               </Button>
-- 
2.49.1


From c0a69c0eb30f1c0f53977f7c506679236a3f0430 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 3 Apr 2022 01:10:31 -0500
Subject: [PATCH 10/12] Updated documentation

---
 components/calender/Day.tsx                   |  4 ++-
 components/calender/modals/AddSticker.tsx     | 32 ++++++-------------
 .../calender/modals/StickerSelector.tsx       |  8 +++++
 3 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index 7fcc09f..8b7ba03 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -61,12 +61,14 @@ const Day = ({
   // This handles the modal for the day.
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  // The current sticker to be displayed on the current date.
+  // * This is temporary. There should be no need for this once persistent storage is used. This is being used as a workaround to a bug.
   const [stickerState, setStickerState] = useState<StickerVal>(sticker);
 
   // The step the modal is at.
   const [step, setStep] = useState<number>(0);
 
-  // The current selected sticker.
+  // The current selected sticker. (To be added or updated)
   const [selectedSticker, setSelectedSticker] = useState<StickerVal>(null);
 
   /**
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddSticker.tsx
index 22b4f79..b8ba82a 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddSticker.tsx
@@ -13,7 +13,7 @@ import {
   SimpleGrid,
   Box
 } from "@chakra-ui/react";
-import React, { useState, useContext, Fragment } from "react";
+import React, { useState, useContext } from "react";
 import { format, isSameDay } from "date-fns";
 import { Icon } from "@iconify/react";
 import { StickersContext } from "../../../contexts/StickerContext";
@@ -34,13 +34,14 @@ interface AddStickerProps {
 
 /**
  * Handles adding and modifying the stickers for the given month.
- * @param {boolean} isOpen tells the component when the modal should be open.
- * @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen used to close the modal.
- * @param {date} date the date for which the sticker will be added or modified.
- * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker the react state function to update the sticker.
- * @param {StickerVal} currSticker the current sticker for the date.
- * @param {number} step a numerical variable that represents the page the modal should be at.
- * @param {React.Dispatch<React.SetStateAction<number>>} updateStep used to navigate the pages of the modal by updating the step the modal is on.
+ * @param {boolean} isOpen Tells the component when the modal should be open.
+ * @param {React.Dispatch<React.SetStateAction<boolean>>} updateIsOpen Used to close the modal.
+ * @param {date} date The date for which the sticker will be added or modified.
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the sticker.
+ * @param {StickerVal} currSticker The current sticker for the date.
+ * @param {number} step A numerical variable that represents the page the modal should be at.
+ * @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the selected sticker that will be added or updated.
  */
 const AddSticker = ({
   isOpen,
@@ -55,22 +56,12 @@ const AddSticker = ({
 }: AddStickerProps): JSX.Element => {
   // TODO: Import the stickers array from the calender context.
 
-  // TODO: Add a function that will add or update the sticker for the current date.
-
-  /**
-   * TODO: Add logic into the contents of the modal to show messages if the selected date is out of range.
-   * Show a message when a date in the future is selected.
-   * Show a message when a date before the current date is selected.
-   */
-
   const { addEditSticker } = useContext(StickersContext);
 
   const [modalVariant] = useState<"currDate" | "notCurrDate">(
     isSameDay(date, new Date()) ? "currDate" : "notCurrDate"
   );
 
-  // ! Step is not setting back to 0 when modal is closet. Try to move out of this component and take it in as an arg.
-
   const handleClose = () => {
     updateIsOpen(false);
   };
@@ -84,11 +75,6 @@ const AddSticker = ({
 
   // * Double check that the submit button is disabled if the selected sticker is the same as the current sticker.
 
-  // TODO: Display the current sticker above the selection screen if a current sticker exists.
-
-  // TODO: Trigger a warning if the date is in the past showing the sticker change.
-  // ! DO NOT update the sticker state or trigger the edd/edit function until that new warning is accepted.
-
   const variants = {
     currDate: [
       {
diff --git a/components/calender/modals/StickerSelector.tsx b/components/calender/modals/StickerSelector.tsx
index 0373835..200f9b0 100644
--- a/components/calender/modals/StickerSelector.tsx
+++ b/components/calender/modals/StickerSelector.tsx
@@ -9,6 +9,14 @@ interface StickerSelectorProps {
   updateSelectedSticker: React.Dispatch<React.SetStateAction<StickerVal>>;
 }
 
+/**
+ * Handles displaying a list of dynamic stickers to be selected.
+ * @param {string} stickerSet The name of the stickers that should be displayed.
+ * @param {StickerVal} currSticker The current sticker for the date.
+ * @param {StickerVal} selectedSticker The selected sticker for the current. date
+ * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSelectedSticker TThe react state function to update the selected sticker that will be added or updated.
+ */
+
 const StickerSelector = ({
   stickerSet,
   currSticker,
-- 
2.49.1


From 619a839eaaf91fd0d27c3d78ac4fb15f7140c986 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 3 Apr 2022 01:19:37 -0500
Subject: [PATCH 11/12] Styling

---
 components/calender/Day.tsx                   |  4 +--
 .../{AddSticker.tsx => AddUpdateSticker.tsx}  | 30 +++++++++++--------
 2 files changed, 20 insertions(+), 14 deletions(-)
 rename components/calender/modals/{AddSticker.tsx => AddUpdateSticker.tsx} (91%)

diff --git a/components/calender/Day.tsx b/components/calender/Day.tsx
index 8b7ba03..ca19e4f 100644
--- a/components/calender/Day.tsx
+++ b/components/calender/Day.tsx
@@ -12,7 +12,7 @@ import {
 import router from "next/router";
 import React, { Fragment, useState } from "react";
 import { StickersContextProvider } from "../../contexts/StickerContext";
-import AddSticker from "./modals/AddSticker";
+import AddUpdateSticker from "./modals/AddUpdateSticker";
 import DemoStickers from "./stickers/DemoStickers";
 
 interface DayProps {
@@ -163,7 +163,7 @@ const Day = ({
           </Box>
           <StickersContextProvider>
             {isBefore(date, endOfDay(new Date())) && (
-              <AddSticker
+              <AddUpdateSticker
                 date={date}
                 isOpen={isOpen}
                 updateIsOpen={setIsOpen}
diff --git a/components/calender/modals/AddSticker.tsx b/components/calender/modals/AddUpdateSticker.tsx
similarity index 91%
rename from components/calender/modals/AddSticker.tsx
rename to components/calender/modals/AddUpdateSticker.tsx
index b8ba82a..9816fa6 100644
--- a/components/calender/modals/AddSticker.tsx
+++ b/components/calender/modals/AddUpdateSticker.tsx
@@ -43,7 +43,7 @@ interface AddStickerProps {
  * @param {React.Dispatch<React.SetStateAction<number>>} updateStep Used to navigate the pages of the modal by updating the step the modal is on.
  * @param {React.Dispatch<React.SetStateAction<StickerVal>>} updateSticker The react state function to update the selected sticker that will be added or updated.
  */
-const AddSticker = ({
+const AddUpdateSticker = ({
   isOpen,
   updateIsOpen,
   date,
@@ -171,19 +171,19 @@ const AddSticker = ({
           <HStack
             w="100%"
             h="auto"
-            justifyContent={"space-between"}
-            alignContent={"center"}
+            justifyContent="space-between"
+            alignContent="center"
           >
             <Button variant="primary" onClick={() => updateStep(step - 1)}>
               {"Previous"}
             </Button>
-            <HStack w="auto" h="auto" alignContent={"center"} spacing={6}>
+            <HStack w="auto" h="auto" alignContent="center" spacing={6}>
               <Button
                 variant="submit"
-              isDisabled={
-                selectedSticker === null || selectedSticker === currSticker
-              }
-              onClick={() => handleSubmit(selectedSticker)}
+                isDisabled={
+                  selectedSticker === null || selectedSticker === currSticker
+                }
+                onClick={() => handleSubmit(selectedSticker)}
               >
                 {"Confirm"}
               </Button>
@@ -216,13 +216,19 @@ const AddSticker = ({
           <HStack
             w="100%"
             h="auto"
-            justifyContent={"space-between"}
-            alignContent={"center"}
+            justifyContent="space-between"
+            alignContent="center"
           >
             <Heading textAlign="center" as="h2" size="md" w="100%" h="auto">
               {modalVariant && variants[modalVariant][step].header}
             </Heading>
-            <Button onClick={() => updateIsOpen(!isOpen)}>{"X"}</Button>
+            <Button
+              fontSize="2rem"
+              px="1"
+              onClick={() => updateIsOpen(!isOpen)}
+            >
+              <Icon icon="bi:x" />
+            </Button>
           </HStack>
         </ModalHeader>
         <ModalBody>
@@ -236,4 +242,4 @@ const AddSticker = ({
   );
 };
 
-export default AddSticker;
+export default AddUpdateSticker;
-- 
2.49.1


From 7ddc48280cf5a23c2277a9665a21043ccc2bd630 Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Sun, 3 Apr 2022 01:41:17 -0500
Subject: [PATCH 12/12] Moved the submit and cancel buttons.

---
 components/calender/modals/AddUpdateSticker.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/calender/modals/AddUpdateSticker.tsx b/components/calender/modals/AddUpdateSticker.tsx
index 9816fa6..5691816 100644
--- a/components/calender/modals/AddUpdateSticker.tsx
+++ b/components/calender/modals/AddUpdateSticker.tsx
@@ -178,6 +178,13 @@ const AddUpdateSticker = ({
               {"Previous"}
             </Button>
             <HStack w="auto" h="auto" alignContent="center" spacing={6}>
+              <Button
+                backgroundColor="transparent"
+                _hover={{ backgroundColor: "brand.danger" }}
+                onClick={() => updateIsOpen(!isOpen)}
+              >
+                {"Cancel"}
+              </Button>
               <Button
                 variant="submit"
                 isDisabled={
@@ -187,13 +194,6 @@ const AddUpdateSticker = ({
               >
                 {"Confirm"}
               </Button>
-              <Button
-                backgroundColor="transparent"
-                _hover={{ backgroundColor: "brand.danger" }}
-                onClick={() => updateIsOpen(!isOpen)}
-              >
-                {"Cancel"}
-              </Button>
             </HStack>
           </HStack>
         )
-- 
2.49.1