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,9 +88,7 @@ const Day = ({
 
   // TODO: When the valid date range is created, disallow pointer cursor outside of the date range.
 
-  return (
-    <Fragment>
-      {isOverflow && (
+  return isOverflow ? (
     <VStack
       bg="transparent"
       color="gray.600"
@@ -125,11 +124,30 @@ const Day = ({
         </Box>
       )}
     </VStack>
-      )}
-      {!isOverflow && (
+  ) : (
     <VStack
-          bg="transparent"
-          border="1px solid #0068ff"
+      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={() => {
@@ -144,7 +162,15 @@ const Day = ({
         cursor: isBefore(currDateObj, endOfDay(currDate))
           ? "pointer"
           : "default",
-            background: "gray.700",
+        bg: tutorial
+          ? tutorial === "add" && isToday
+            ? "gray.600"
+            : tutorial === "edit" &&
+              !isToday &&
+              isBefore(currDateObj, endOfDay(currDate))
+            ? "gray.600"
+            : "transparent"
+          : "transparent",
         border: "1px solid #FFF"
       }}
     >
@@ -174,6 +200,39 @@ const Day = ({
           <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}
+            />
+          )}
+          {tutorial.toLowerCase() === "edit" &&
+            !isToday &&
+            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>
+      ) : (
         <Provider store={store}>
           {isBefore(currDateObj, endOfDay(currDate)) && !isLoading && (
             <AddUpdateSticker
@@ -189,9 +248,8 @@ const Day = ({
             />
           )}
         </Provider>
-        </VStack>
       )}
-    </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,7 +138,6 @@ const Calender = ({
                   date={date}
                   selectedDate={selectedDate.date}
                   currDate={currDateObj}
-                  isToday={isSameDay(currDateObj, toDateObj)}
                   key={
                     id.length
                       ? id

src/components/tutorial/CalenderExample.tsx

@@ -6,12 +6,10 @@ import { updateMonth } from "../../features/calender";
 import Day from "../calender/Day";
 
 interface CalenderExampleProps {
-  type: "add" | "edit"
+  type: "add" | "edit";
 }
 
-const CalenderExample = ({
-  type
-}: CalenderExampleProps): JSX.Element => {
+const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
   // TODO: Check if the current date is the start of the user's preferred start of the week and use the previous week for the edit example.
 
   // TODO: Add highlight to the current date for the add example and highlight other dates when the edit example is used.
@@ -27,7 +25,7 @@ const CalenderExample = ({
   const selectedDate: SelectedDateInfo = useAppSelector(
     (state) => state.calender.selectedDateInfo
   );
-  const { layout } = selectedDate
+  const { layout } = selectedDate;
 
   // * Stickers * //
 
@@ -66,15 +64,15 @@ const CalenderExample = ({
       });
     }
 
-    return foundWeek || [] as MonthDay[];
-  }
+    return foundWeek || ([] as MonthDay[]);
+  };
 
-  const [currWeek, setCurrWeek] = useState<MonthDay[]>(getCurrentWeek());
+  const [currWeek /*, setCurrWeek*/] = useState<MonthDay[]>(getCurrentWeek());
 
   console.info(currWeek);
 
   return (
-    <VStack h="100%" w="100%" spacing={0}>
+    <VStack h="8.5rem" w="100%" spacing={0}>
       <HStack
         px={6}
         spacing={0}
@@ -141,7 +139,7 @@ const CalenderExample = ({
               date={date}
               selectedDate={selectedDate.date}
               currDate={currDateObj}
-              isToday={isSameDay(currDateObj, toDateObj)}
+              tutorial={type}
               key={
                 id.length
                   ? id
@@ -150,8 +148,7 @@ const CalenderExample = ({
               }
             />
           );
-        })
-        }
+        })}
       </SimpleGrid>
     </VStack>
   );

src/components/tutorial/index.tsx

@@ -1,5 +1,14 @@
-import { Box, Button, Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Heading,
+  HStack,
+  Text,
+  VStack
+} from "@chakra-ui/react";
+import React, { useState } from "react";
 import CalenderExample from "./CalenderExample";
 
 interface TutorialProps {
@@ -11,6 +20,26 @@ const Tutorial = ({
   setTutorialComplete,
   setTempTutorialComplete
 }: TutorialProps): JSX.Element => {
+  const [rememberComplete, setRememberComplete] = useState<boolean>(false);
+
+  const handleComplete = (): void => {
+    if (rememberComplete) {
+      setTutorialComplete();
+    }
+
+    if (!rememberComplete) {
+      setTempTutorialComplete();
+    }
+  };
+
+  const handleSkip = (): void => {
+    setTempTutorialComplete();
+  };
+
+  const handleUpdateCheck = (): void => {
+    setRememberComplete(!rememberComplete);
+  };
+
   return (
     <Box>
       <VStack
@@ -42,7 +71,7 @@ const Tutorial = ({
             <Heading as="h3" size="md">
               {"A Lucid Creations Media Project"}
             </Heading>
-            <Divider orientation='horizontal' />
+            <Divider orientation="horizontal" />
           </VStack>
           {/* About the app container */}
           <VStack
@@ -62,14 +91,29 @@ const Tutorial = ({
               alignContent="center"
               spacing={0}
             >
-              <Text>{"An app that mimics a potty/star chart for a potty training toddler or child."}</Text>
-              <Text>{"It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."}</Text>
-              <Text>{"The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."}</Text>
-              <Text>{"This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."}</Text>
-
+              <Text>
+                {
+                  "An app that mimics a potty/star chart for a potty training toddler or child."
+                }
+              </Text>
+              <Text>
+                {
+                  "It can be used to track behavior, habits, diaper training, potty training (good luck), daily chores/tasks, or anything else you might want to track in a fun and visual way."
+                }
+              </Text>
+              <Text>
+                {
+                  "The final app will have settings to disable any mention of ABDL to allow a more general audience to use, such as for a master and pet relationship."
+                }
+              </Text>
+              <Text>
+                {
+                  "This is an alpha build of the app. Some functionality may not work as intended, is fully functional, and may be missing entirely."
+                }
+              </Text>
             </VStack>
           </VStack>
-          <Divider orientation='horizontal' />
+          <Divider orientation="horizontal" />
         </VStack>
         {/* Functionality of the app */}
         <VStack
@@ -89,38 +133,111 @@ const Tutorial = ({
             alignContent="center"
             spacing={2}
           >
-            <Text>{"The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."}</Text>
+            <Text>
+              {
+                "The app will generate stickers to display from the 1st of the month to the day before today. This is to simulate previous and continued use."
+              }
+            </Text>
             <Text>{"Ability to add a sticker to the current date."}</Text>
-            <Text>{"Ability to add edit a sticker from a previous date with a confirmation prompt."}</Text>
+            <Text>
+              {
+                "Ability to add edit a sticker from a previous date with a confirmation prompt."
+              }
+            </Text>
           </VStack>
-          <Divider orientation='horizontal' />
+          <Divider orientation="horizontal" />
         </VStack>
-        {/* Calender Examples Here */}
-        <Heading>{"Calender examples here"}</Heading>
+        {/* Calender Demos */}
+        <VStack
+          h="auto"
+          w="100%"
+          justifyContent="center"
+          alignContent="center"
+          spacing={4}
+        >
+          <Heading as="h3" size="lg">
+            {"How to Use The Calender"}
+          </Heading>
+          <VStack
+            h="auto"
+            w="100%"
+            justifyContent="start"
+            alignContent="center"
+            spacing={4}
+          >
+            <Heading as="h4" size="md">
+              {"Add a Sticker to Today's Date"}
+            </Heading>
+            <HStack
+              w="100%"
+              h="auto"
+              alignContent="center"
+              justifyContent="center"
+              spacing={1}
+            >
+              <Text>{"Select the date with a"}</Text>
+              <Text color="#00ff3c">{" green "}</Text>
+              <Text>{"border."}</Text>
+            </HStack>
             <CalenderExample type={"add"} />
+          </VStack>
+          <VStack
+            h="auto"
+            w="100%"
+            justifyContent="start"
+            alignContent="center"
+            spacing={4}
+          >
+            <Heading as="h4" size="md">
+              {"Add a Sticker to Previous Dates"}
+            </Heading>
+            <HStack
+              w="100%"
+              h="auto"
+              alignContent="center"
+              justifyContent="center"
+              spacing={1}
+            >
+              <Text>{"Select a date with a"}</Text>
+              <Text color="#00ff3c">{" green "}</Text>
+              <Text>{"border."}</Text>
+            </HStack>
             <CalenderExample type={"edit"} />
-        {/* Complete Tutorial buttons */}
+          </VStack>
+          <Divider orientation="horizontal" />
+        </VStack>
+        {/* Complete tutorial */}
         <HStack
           h="auto"
           w="80%"
           justifyContent="space-between"
-          alignContent="center"
+          alignItems="flex-start"
           pt={8}
         >
-          <Button
-            type="button"
-            onClick={() => setTutorialComplete()}
-            variant="secondary"
-          >
-            {"Complete Tutorial (remember)"}
+          <Button type="button" onClick={() => handleSkip()} variant="skip">
+            {"Skip"}
           </Button>
+          <VStack
+            h="auto"
+            w="auto"
+            justifyContent="center"
+            alignItems="center"
+            spacing={2}
+          >
             <Button
               type="button"
-            onClick={() => setTempTutorialComplete()}
+              onClick={() => handleComplete()}
               variant="primary"
             >
               {"Complete Tutorial"}
             </Button>
+            <Checkbox
+              isChecked={rememberComplete}
+              onChange={() => handleUpdateCheck()}
+            >
+              {"Remember completed?"}
+            </Checkbox>
+          </VStack>
         </HStack>
       </VStack>
     </Box>

src/pages/index.tsx

@@ -52,14 +52,7 @@ const IndexPage = (): JSX.Element => {
   }, [completedTutorial, dispatch, tutorialCompletionInfo]);
 
   return (
-    <Box
-      textAlign="center"
-      w="100%"
-      h="auto"
-      pt="50px"
-      // pb="10vh"
-      minWidth="min-content"
-    >
+    <Box textAlign="center" w="100%" h="auto" pt="50px" minWidth="min-content">
       <Provider store={store}>
         {isLoading === true ? (
           <Fragment>

src/theme/components/buttonStyles.ts

@@ -36,6 +36,14 @@ const buttonStyles = {
         )(props)
       }
     }),
+    skip: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "xl",
+      p: "2",
+      _hover: {
+        bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props)
+      }
+    }),
     stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
       bg: "transparent",
       fontSize: "4rem",