src/components/calender/index.tsx

@@ -10,6 +10,9 @@ const Calender = ({
   date: newDate,
   isLoading
 }: UpdateCalendarProps): JSX.Element => {
+
+  const dispatch = useAppDispatch();
+
   // * Month * //
   const currDate: string = useAppSelector((state) => state.calender.currDate);
   const selectedDate: SelectedDateInfo = useAppSelector(
@@ -25,8 +28,6 @@ const Calender = ({
     (state) => state.stickers.stickersMonth
   );
 
-  const dispatch = useAppDispatch();
-
   useEffect(() => {
     if (newDate && newDate.year && newDate.month && newDate.day) {
       const { year, month, day } = newDate;
@@ -143,7 +144,7 @@ const Calender = ({
                     id.length
                       ? id
                       : format(toDateObj, "yyyyddLL") +
-                        `/${sticker === null ? 0 : sticker}`
+                      `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );

src/components/tutorial/CalenderExample.tsx

@@ -0,0 +1,155 @@
+import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
+import { format, isSameDay, isToday } from "date-fns";
+import React, { useEffect, useState } from "react";
+import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { updateMonth } from "../../features/calender";
+import Day from "../calender/Day";
+
+interface CalenderExampleProps {
+  type: "add" | "edit"
+}
+
+const CalenderExample = ({
+  type
+}: CalenderExampleProps): JSX.Element => {
+
+  const currDateObj: Date = new Date();
+  const isLoading = false;
+
+  const dispatch = useAppDispatch();
+
+  // * Current Month * //
+  const selectedDate: SelectedDateInfo = useAppSelector(
+    (state) => state.calender.selectedDateInfo
+  );
+  const { layout } = selectedDate
+
+  // * Stickers * //
+
+  const stickersMonth: StickerDays = useAppSelector(
+    (state) => state.stickers.stickersMonth
+  );
+
+  // Simulated user settings.
+  const userSettings = {
+    theme: "default",
+    startOfWeek: "Sunday"
+  };
+
+  // * Week Names * //
+  const currMonth: WeekLayout =
+    layout[`${userSettings.startOfWeek.toLowerCase()}`];
+  const { month, weekdays } = currMonth;
+
+  useEffect(() => {
+    dispatch(updateMonth(new Date().toJSON()));
+  }, [dispatch]);
+
+  // * The current week * //
+
+  const getCurrentWeek = (): MonthDay[] => {
+    let foundWeek: MonthDay[] | null;
+    for (const week in month) {
+      const currWeek = month[week];
+
+      currWeek.forEach((day: MonthDay) => {
+        const { date } = day;
+
+        if (isToday(new Date(date))) {
+          foundWeek = currWeek;
+        }
+      });
+    }
+
+    return foundWeek || [] as MonthDay[];
+  }
+
+  const [currWeek, setCurrWeek] = useState<MonthDay[]>(getCurrentWeek());
+
+  console.info(currWeek);
+
+  return (
+    <VStack h="100%" w="100%" spacing={0}>
+      <HStack
+        px={6}
+        spacing={0}
+        w="100%"
+        h="auto"
+        alignContent="center"
+        alignItems="center"
+      >
+        {weekdays.map((weekDay) => {
+          return (
+            <Box
+              display="flex"
+              alignContent="center"
+              alignItems="center"
+              bg="transparent"
+              border="1px solid #0068ff"
+              w="100%"
+              h={10}
+              key={weekDay}
+            >
+              <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
+                {weekDay}
+              </Text>
+              <Text
+                display={{ base: "none", sm: "block", md: "none" }}
+                w="100%"
+                h="auto"
+              >
+                {weekDay.substring(0, 3)}
+              </Text>
+              <Text display={{ base: "block", sm: "none" }} w="100%" h="auto">
+                {weekDay.substring(0, 2)}
+              </Text>
+            </Box>
+          );
+        })}
+      </HStack>
+      <SimpleGrid px={6} w="100%" h="100%" columns={7} alignItems="center">
+        {currWeek.map((day: MonthDay) => {
+          const { date, isOverflow, overflowDirection } = day;
+
+          const toDateObj: Date = new Date(date);
+
+          let sticker = null;
+
+          let id = "";
+
+          stickersMonth.map((stickerDay) => {
+            const { date: stickerDate } = stickerDay;
+
+            if (isSameDay(new Date(stickerDate), toDateObj)) {
+              sticker = stickerDay.sticker;
+
+              id = stickerDay.id;
+            }
+          });
+
+          return (
+            <Day
+              isLoading={isLoading}
+              isOverflow={isOverflow}
+              overflowDirection={overflowDirection}
+              currSticker={sticker}
+              date={date}
+              selectedDate={selectedDate.date}
+              currDate={currDateObj}
+              isToday={isSameDay(currDateObj, toDateObj)}
+              key={
+                id.length
+                  ? id
+                  : format(toDateObj, "yyyyddLL") +
+                  `/${sticker === null ? 0 : sticker}`
+              }
+            />
+          );
+        })
+        }
+      </SimpleGrid>
+    </VStack>
+  );
+};
+
+export default CalenderExample;

src/components/tutorial/index.tsx

@@ -1,5 +1,6 @@
-import { Box, Button, Heading, HStack, VStack } from "@chakra-ui/react";
+import { Box, Button, Divider, Heading, HStack, Text, VStack } from "@chakra-ui/react";
 import React from "react";
+import CalenderExample from "./CalenderExample";
 
 interface TutorialProps {
   setTutorialComplete: () => void;
@@ -14,22 +15,110 @@ const Tutorial = ({
     <Box>
       <VStack
         h="auto"
-        w="100%"
+        w="auto"
         justifyContent="center"
         alignContent="center"
-        spacing={6}
+        my={8}
+        mx={4}
+        p={4}
+        bg="gray.700"
       >
-        <Heading>{"Tutorial Component"}</Heading>
+        <VStack
+          h="auto"
+          w="100%"
+          justifyContent="center"
+          alignContent="center"
+          spacing={2}
+        >
+          {/* The Heading Container */}
+          <VStack
+            h="auto"
+            w="100%"
+            justifyContent="center"
+            alignContent="center"
+            spacing={4}
+          >
+            <Heading as="h2">{"Welcome to Code Name: LCM Potty Chart"}</Heading>
+            <Heading as="h3" size="md">
+              {"A Lucid Creations Media Project"}
+            </Heading>
+            <Divider orientation='horizontal' />
+          </VStack>
+          {/* About the app container */}
+          <VStack
+            h="auto"
+            w="100%"
+            justifyContent="center"
+            alignContent="center"
+            spacing={4}
+          >
+            <Heading as="h3" size="lg">
+              {"About the App"}
+            </Heading>
+            <VStack
+              h="auto"
+              w="100%"
+              justifyContent="start"
+              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>
+
+            </VStack>
+          </VStack>
+          <Divider orientation='horizontal' />
+        </VStack>
+        {/* Functionality of the app */}
+        <VStack
+          h="auto"
+          w="100%"
+          justifyContent="center"
+          alignContent="center"
+          spacing={4}
+        >
+          <Heading as="h3" size="lg" >
+            {"Current Functionality"}
+          </Heading>
+          <VStack
+            h="auto"
+            w="100%"
+            justifyContent="start"
+            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>{"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>
+          </VStack>
+          <Divider orientation='horizontal' />
+        </VStack>
+        {/* Calender Examples Here */}
+        <Heading>{"Calender examples here"}</Heading>
+        <CalenderExample type={"add"} />
+        <CalenderExample type={"edit"} />
+        {/* Complete Tutorial buttons */}
         <HStack
           h="auto"
           w="80%"
           justifyContent="space-between"
           alignContent="center"
+          pt={8}
         >
-          <Button type="button" onClick={() => setTutorialComplete()}>
+          <Button
+            type="button"
+            onClick={() => setTutorialComplete()}
+            variant="secondary"
+          >
             {"Complete Tutorial (remember)"}
           </Button>
-          <Button type="button" onClick={() => setTempTutorialComplete()}>
+          <Button
+            type="button"
+            onClick={() => setTempTutorialComplete()}
+            variant="primary"
+          >
             {"Complete Tutorial"}
           </Button>
         </HStack>

src/pages/index.tsx

@@ -57,7 +57,7 @@ const IndexPage = (): JSX.Element => {
       w="100%"
       h="auto"
       pt="50px"
-      pb="10vh"
+      // pb="10vh"
       minWidth="min-content"
     >
       <Provider store={store}>

src/theme/components/buttonStyles.ts

@@ -15,7 +15,7 @@ const buttonStyles = {
   // styles for different visual variants ("outline", "solid")
   variants: {
     primary: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "rgba(255, 255, 255, .15)",
+      bg: "brand.primary",
       fontSize: "xl",
       p: "2",
       _hover: {
@@ -26,13 +26,13 @@ const buttonStyles = {
       }
     }),
     secondary: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "brand.primary",
+      bg: "transparent",
       fontSize: "xl",
       p: "2",
       _hover: {
         bg: mode(
-          whiten("brand.primary", 20),
+          whiten("brand.secondary", 20),
-          darken("brand.primary", 20)
+          darken("brand.secondary", 20)
         )(props)
       }
     }),