Tutorial complete. Need to add more states and functions into redux.

src/components/calender/DatePicker.tsx

@@ -189,7 +189,7 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
               >
                 <VStack
                   alignItems="center"
-                  alignContent="flex=start"
+                  alignContent="flex-start"
                   w="100%"
                   h="auto"
                   spacing={6}

src/components/calender/Day.tsx

@@ -6,10 +6,11 @@ import {
   sub,
   getDate,
   isBefore,
-  endOfDay
+  endOfDay,
+  isToday as isTodayFun
 } from "date-fns";
 import router from "next/router";
-import React, { Fragment, useState } from "react";
+import React, { useState } from "react";
 import AddUpdateSticker from "./modals/AddUpdateSticker";
 import DemoStickers from "./stickers/DemoStickers";
 import { Provider } from "react-redux";
@@ -23,7 +24,7 @@ interface DayProps {
   date: string;
   selectedDate: string;
   currDate: Date;
-  isToday: boolean;
+  tutorial?: "add" | "edit";
 }
 
 /**
@@ -35,7 +36,6 @@ interface DayProps {
  * @param {date} date the date for this day.
  * @param {date} selectedDate the date for the selected month.
  * @param {Date} currDate today's date.
- * @param {boolean} isToday is the current iteration of this component in today's date.
  */
 const Day = ({
   isLoading,
@@ -45,10 +45,11 @@ const Day = ({
   date,
   selectedDate,
   currDate,
-  isToday
+  tutorial
 }: DayProps): JSX.Element => {
   const selectedDateObj = new Date(selectedDate);
   const currDateObj = new Date(date);
+  const isToday = isTodayFun(currDateObj);
 
   const handleNav = (direction: "next" | "prev") => {
     if (direction === "next") {
@@ -87,95 +88,137 @@ const Day = ({
 
   // TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
 
-  return (
-    <Fragment>
-      {isOverflow && (
-        <VStack
-          bg="transparent"
-          color="gray.600"
-          border="1px solid #181d8f"
-          w="100%"
-          h="100%"
-          _hover={{
-            cursor: isBefore(currDateObj, endOfDay(currDate))
-              ? "pointer"
-              : "default",
-            background: "gray.700",
-            border: "1px solid #FFF",
-            color: "whiteAlpha.900"
-          }}
-          onClick={() => handleNav(overflowDirection)}
-          spacing="0.5rem"
-          alignContent="center"
-          justifyContent="flex-start"
-          pt={2}
-        >
-          <Text w="auto" h="auto">
-            {`${getDate(currDateObj)}`}
-          </Text>
-          {isLoading ? (
-            <Skeleton key={currSticker}>
-              <Box fontSize="1.5rem">
-                <DemoStickers stickerVal={0} />
-              </Box>
-            </Skeleton>
-          ) : (
-            <Box key={currSticker} fontSize="1.5rem">
-              <DemoStickers stickerVal={currSticker} />
-            </Box>
-          )}
-        </VStack>
+  return isOverflow ? (
+    <VStack
+      bg="transparent"
+      color="gray.600"
+      border="1px solid #181d8f"
+      w="100%"
+      h="100%"
+      _hover={{
+        cursor: isBefore(currDateObj, endOfDay(currDate))
+          ? "pointer"
+          : "default",
+        background: "gray.700",
+        border: "1px solid #FFF",
+        color: "whiteAlpha.900"
+      }}
+      onClick={() => handleNav(overflowDirection)}
+      spacing="0.5rem"
+      alignContent="center"
+      justifyContent="flex-start"
+      pt={2}
+    >
+      <Text w="auto" h="auto">
+        {`${getDate(currDateObj)}`}
+      </Text>
+      {isLoading ? (
+        <Skeleton key={currSticker}>
+          <Box fontSize="1.5rem">
+            <DemoStickers stickerVal={0} />
+          </Box>
+        </Skeleton>
+      ) : (
+        <Box key={currSticker} fontSize="1.5rem">
+          <DemoStickers stickerVal={currSticker} />
+        </Box>
       )}
-      {!isOverflow && (
-        <VStack
-          bg="transparent"
-          border="1px solid #0068ff"
-          w="100%"
-          h="100%"
-          onClick={() => {
-            setStep(0);
-            setSelectedSticker(null);
-            setIsOpen(true);
-          }}
-          alignContent="center"
-          justifyContent="flex-start"
-          pt={2}
-          _hover={{
-            cursor: isBefore(currDateObj, endOfDay(currDate))
-              ? "pointer"
-              : "default",
-            background: "gray.700",
-            border: "1px solid #FFF"
-          }}
-        >
-          <Text
-            p={
-              isToday
-                ? getDate(currDateObj) > 10
-                  ? "0px 6px 3px 6px"
-                  : "0px 9px 3px 9px"
-                : "auto"
-            }
-            h="auto"
-            w="auto"
-            border={isToday ? "1px solid #0068ff" : "0px"}
-            borderRadius={isToday ? "100px" : "0px"}
-          >
-            {`${getDate(currDateObj)}`}
-          </Text>
-          {isLoading ? (
-            <Skeleton key={currSticker}>
-              <Box fontSize="1.5rem">
-                <DemoStickers stickerVal={0} />
-              </Box>
-            </Skeleton>
-          ) : (
-            <Box key={currSticker} fontSize="1.5rem">
-              <DemoStickers stickerVal={currSticker} />
-            </Box>
+    </VStack>
+  ) : (
+    <VStack
+      bg={
+        tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent"
+      }
+      border={
+        tutorial
+          ? tutorial === "add" && isToday
+            ? "1px solid #00ff3c"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "1px solid #00ff3c"
+            : "1px solid #0068ff"
+          : "1px solid #0068ff"
+      }
+      w="100%"
+      h="100%"
+      onClick={() => {
+        setStep(0);
+        setSelectedSticker(null);
+        setIsOpen(true);
+      }}
+      alignContent="center"
+      justifyContent="flex-start"
+      pt={2}
+      _hover={{
+        cursor: isBefore(currDateObj, endOfDay(currDate))
+          ? "pointer"
+          : "default",
+        bg: tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent",
+        border: "1px solid #FFF"
+      }}
+    >
+      <Text
+        p={
+          isToday
+            ? getDate(currDateObj) > 10
+              ? "0px 6px 3px 6px"
+              : "0px 9px 3px 9px"
+            : "auto"
+        }
+        h="auto"
+        w="auto"
+        border={isToday ? "1px solid #0068ff" : "0px"}
+        borderRadius={isToday ? "100px" : "0px"}
+      >
+        {`${getDate(currDateObj)}`}
+      </Text>
+      {isLoading ? (
+        <Skeleton key={currSticker}>
+          <Box fontSize="1.5rem">
+            <DemoStickers stickerVal={0} />
+          </Box>
+        </Skeleton>
+      ) : (
+        <Box key={currSticker} fontSize="1.5rem">
+          <DemoStickers stickerVal={currSticker} />
+        </Box>
+      )}
+      {tutorial ? (
+        <Provider store={store}>
+          {tutorial.toLowerCase() === "add" && isToday && !isLoading && (
+            <AddUpdateSticker
+              stickerDate={date}
+              isOpen={isOpen}
+              updateIsOpen={setIsOpen}
+              currSticker={currSticker}
+              step={step}
+              updateStep={setStep}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={setSelectedSticker}
+              currDate={currDate}
+            />
           )}
-          <Provider store={store}>
-            {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
+          {tutorial.toLowerCase() === "edit" &&
+            !isToday &&
+            isBefore(currDateObj, endOfDay(currDate)) &&
+            !isLoading && (
               <AddUpdateSticker
                 stickerDate={date}
                 isOpen={isOpen}
@@ -188,10 +231,25 @@ const Day = ({
                 currDate={currDate}
               />
             )}
-          </Provider>
-        </VStack>
+        </Provider>
+      ) : (
+        <Provider store={store}>
+          {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
+            <AddUpdateSticker
+              stickerDate={date}
+              isOpen={isOpen}
+              updateIsOpen={setIsOpen}
+              currSticker={currSticker}
+              step={step}
+              updateStep={setStep}
+              selectedSticker={selectedSticker}
+              updateSelectedSticker={setSelectedSticker}
+              currDate={currDate}
+            />
+          )}
+        </Provider>
       )}
-    </Fragment>
+    </VStack>
   );
 };
 

src/components/calender/index.tsx

@@ -10,7 +10,6 @@ const Calender = ({
   date: newDate,
   isLoading
 }: UpdateCalendarProps): JSX.Element => {
-
   const dispatch = useAppDispatch();
 
   // * Month * //
@@ -67,7 +66,7 @@ const Calender = ({
   // TODO: Move the weekdays into it's own component for responsiveness.
 
   return (
-    <VStack h="91vh" w="100%">
+    <VStack h="92vh" w="100%" mb="5vh">
       <CalenderNav title={title} isLoading={isLoading} />
       <VStack h="100%" w="100%" spacing={0}>
         <HStack
@@ -139,12 +138,11 @@ const Calender = ({
                   date={date}
                   selectedDate={selectedDate.date}
                   currDate={currDateObj}
-                  isToday={isSameDay(currDateObj, toDateObj)}
                   key={
                     id.length
                       ? id
                       : format(toDateObj, "yyyyddLL") +
-                      `/${sticker === null ? 0 : sticker}`
+                        `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );