Fix layout.

data/stickerSeeder.ts

@@ -24,6 +24,7 @@ const generateSticker = (): -2 | -1 | 0 | 1 | 2 => {
   }
 };
 
+// TODO: Update so seeder takes in a month or date to then generate the stickers for it.
 /**
  * This seeder is to simulate the date and sticker info from the database.
  * Filling up an array for the current month with sticker from ths first to

src/components/calender/Day.tsx

@@ -90,11 +90,12 @@ const Day = ({
 
   return isOverflow ? (
     <VStack
-      bg="transparent"
-      color="gray.600"
-      border="1px solid #181d8f"
       w="100%"
       h="100%"
+      bg="transparent"
+      pt={2}
+      color="gray.600"
+      border="1px solid #181d8f"
       _hover={{
         cursor: isBefore(currDateObj, endOfDay(currDate))
           ? "pointer"
@@ -107,7 +108,6 @@ const Day = ({
       spacing="0.5rem"
       alignContent="center"
       justifyContent="flex-start"
-      pt={2}
     >
       <Text w="auto" h="auto">
         {`${getDate(currDateObj)}`}
@@ -126,6 +126,8 @@ const Day = ({
     </VStack>
   ) : (
     <VStack
+      w="100%"
+      h="100%"
       bg={
         tutorial
           ? tutorial === "add" && isToday
@@ -133,8 +135,8 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-            ? "gray.600"
+              ? "gray.600"
-            : "transparent"
+              : "transparent"
           : "transparent"
       }
       border={
@@ -144,12 +146,10 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-            ? "1px solid #00ff3c"
+              ? "1px solid #00ff3c"
-            : "1px solid #0068ff"
+              : "1px solid #0068ff"
           : "1px solid #0068ff"
       }
-      w="100%"
-      h="100%"
       onClick={() => {
         setStep(0);
         setSelectedSticker(null);
@@ -168,13 +168,15 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-            ? "gray.600"
+              ? "gray.600"
-            : "transparent"
+              : "transparent"
           : "transparent",
         border: "1px solid #FFF"
       }}
     >
       <Text
+        h="auto"
+        w="auto"
         p={
           isToday
             ? getDate(currDateObj) > 10
@@ -182,8 +184,6 @@ const Day = ({
               : "0px 9px 3px 9px"
             : "auto"
         }
-        h="auto"
-        w="auto"
         border={isToday ? "1px solid #0068ff" : "0px"}
         borderRadius={isToday ? "100px" : "0px"}
       >

src/components/calender/index.tsx

@@ -73,24 +73,24 @@ const Calender = ({
       <CalenderNav title={title} isLoading={isLoading} />
       <VStack h="100%" w="100%" spacing={0}>
         <HStack
-          px={{ base: 1, sm: 2, md: 6 }}
-          spacing={0}
           w="100%"
           h="auto"
+          px={{ base: 1, sm: 2, md: 6 }}
+          spacing={0}
           alignContent="center"
           alignItems="center"
         >
           {weekdays.map((weekDay) => {
             return (
               <Box
+                key={weekDay}
                 display="flex"
-                alignContent="center"
-                alignItems="center"
-                bg="transparent"
-                border="1px solid #0068ff"
                 w="100%"
                 h={10}
-                key={weekDay}
+                bg="transparent"
+                border="1px solid #0068ff"
+                alignContent="center"
+                alignItems="center"
               >
                 <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
                   {weekDay}
@@ -110,9 +110,9 @@ const Calender = ({
           })}
         </HStack>
         <SimpleGrid
-          px={{ base: 1, sm: 2, md: 6 }}
           w="100%"
           h="100%"
+          px={{ base: 1, sm: 2, md: 6 }}
           columns={7}
           alignItems="center"
         >
@@ -151,7 +151,7 @@ const Calender = ({
                     id.length
                       ? id
                       : format(toDateObj, "yyyyddLL") +
-                        `/${sticker === null ? 0 : sticker}`
+                      `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );

src/components/tutorial/CalenderExample.tsx

@@ -60,7 +60,8 @@ const CalenderExample = ({
 
   useEffect(() => {
     const getCurrentWeek = (): MonthDay[] => {
-      let foundWeek: MonthDay[] | null;
+      let foundWeek: MonthDay[];
+
       for (const week in month) {
         const currWeek = month[week];
 
@@ -82,91 +83,121 @@ const CalenderExample = ({
   }, [currWeek, dispatch, month]);
 
   return (
-    <VStack h="8.5rem" w="100%" spacing={0}>
+    <VStack
-      <HStack
+      h="auto"
-        px={{ base: 1, sm: 2, md: 6 }}
+      w="100%"
-        spacing={0}
+      alignContent="center"
+      alignItems="center"
+      spacing={2}
+    >
+      <VStack
+        h="8.5rem"
         w="100%"
-        h="auto"
         alignContent="center"
         alignItems="center"
+        spacing={0}
       >
-        {weekdays.map((weekDay) => {
+        <HStack
-          return (
+          w="100%"
-            <Box
+          h="auto"
-              display="flex"
+          alignContent="center"
-              alignContent="center"
+          alignItems="center"
-              alignItems="center"
+          spacing={0}
-              bg="transparent"
+          px={{ base: 1, sm: 2, md: 6 }}
-              border="1px solid #0068ff"
+        >
-              w="100%"
+          {weekdays.map((weekDay) => {
-              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={{ base: 1, sm: 2, md: 6 }}
-        w="100%"
-        h="100%"
-        columns={7}
-        alignItems="center"
-      >
-        {currWeek &&
-          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
+              <Box
-                isLoading={isLoading}
+                key={weekDay}
-                isOverflow={isOverflow}
+                display="flex"
-                overflowDirection={overflowDirection}
+                w="100%"
-                currSticker={sticker}
+                h={10}
-                date={date}
+                bg="transparent"
-                selectedDate={selectedDate.date}
+                border="1px solid #0068ff"
-                currDate={currDateObj}
+                alignContent="center"
-                tutorial={type}
+                alignItems="center"
-                key={
+              >
-                  id.length
+                <Text display={{ base: "none", md: "block" }} w="100%" h="auto">
-                    ? id
+                  {weekDay}
-                    : format(toDateObj, "yyyyddLL") +
+                </Text>
-                      `/${sticker === null ? 0 : sticker}`
+                <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>
             );
           })}
-      </SimpleGrid>
+        </HStack>
+        <SimpleGrid
+          w="100%"
+          h="100%"
+          columns={7}
+          px={{ base: 1, sm: 2, md: 6 }}
+          alignItems="center"
+        >
+          {currWeek &&
+            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}
+                  tutorial={type}
+                  key={
+                    id.length
+                      ? id
+                      : format(toDateObj, "yyyyddLL") +
+                      `/${sticker === null ? 0 : sticker}`
+                  }
+                />
+              );
+            })}
+        </SimpleGrid>
+      </VStack>
+      {type === "edit" && (
+        <VStack
+          w="100%"
+          h="auto"
+          alignContent="center"
+          alignItems="center"
+          spacing={2}
+        >
+          <Text>
+            {
+              "Not being able to edit within this tutorial when the current date is the start of the month is a known bug."
+            }
+          </Text>
+          <Text>{"This bug will be fixed in beta v2."}</Text>
+        </VStack>
+      )}
     </VStack>
   );
 };

src/components/tutorial/sections/TutorialLinks.tsx

@@ -18,9 +18,9 @@ const TutorialLinks = (): JSX.Element => {
         {"More Info"}
       </Heading>
       <HStack
+        display={{ base: "none", lg: "flex" }}
         h="auto"
         w="100%"
-        display={{ base: "none", lg: "flex" }}
         justifyContent="center"
         alignContent="center"
         spacing={4}
@@ -49,9 +49,9 @@ const TutorialLinks = (): JSX.Element => {
         })}
       </HStack>
       <VStack
+        display={{ base: "flex", lg: "none" }}
         h="auto"
         w="100%"
-        display={{ base: "flex", lg: "none" }}
         justifyContent="center"
         alignContent="center"
         spacing={4}

src/theme/layout/Header.tsx

@@ -84,8 +84,8 @@ const Header = (): JSX.Element => {
         open
           ? "brand.main"
           : transparentNavbar
-          ? "rgba(49, 56, 220, 0.9)"
+            ? "rgba(49, 56, 220, 0.9)"
-          : "brand.main"
+            : "brand.main"
       }
       transition=".5s ease"
       borderRadius="0px 0px 10px 10px"
@@ -99,18 +99,18 @@ const Header = (): JSX.Element => {
     >
       {/* Logo | Site Name */}
       <HStack
+        display={{ base: "flex", lg: "none" }}
+        position="absolute"
         width="100%"
+        height={12}
+        top={0}
+        ml={4}
+        spacing="5px"
         justifyContent={{
           base: "flex-start",
           sm: "center"
         }}
         alignItems="center"
-        height={12}
-        top={0}
-        position="absolute"
-        ml={4}
-        display={{ base: "flex", lg: "none" }}
-        spacing="5px"
         _hover={{
           cursor: "default"
         }}
@@ -163,21 +163,21 @@ const Header = (): JSX.Element => {
         </HStack>
         <Menu isLazy lazyBehavior="unmount" isOpen={open}>
           <MenuButton
+            id="mobile-menu-button"
             as={IconButton}
             aria-label="Mobile Menu"
             icon={menuIcon()}
-            onClick={() => setOpen(!open)}
-            onMouseEnter={() => setHover(true)}
-            onMouseLeave={() => setHover(false)}
             display={{
               base: "inline-flex",
               lg: "none"
             }}
-            variant="mobileNav"
             bg={transparentNavbar ? "transparent" : "rgba(255, 255, 255, .15)"}
-            type="button"
             border={transparentNavbar ? "1px solid #0068ff" : "none"}
-            id="mobile-menu-button"
+            variant="mobileNav"
+            type="button"
+            onClick={() => setOpen(!open)}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
           />
           <MobileNav updateOpen={setOpen} />
         </Menu>

src/theme/layout/MobileNav.tsx

@@ -17,12 +17,12 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
     <MenuList
       as="nav"
       display={{ base: "block", lg: "none" }}
-      bg="brand.main"
       h="auto"
       w="100%"
       p={0}
       border="none"
       boxShadow="none"
+      bg="brand.main"
     >
       {navItems.map((navItem: NavItem, index: number) => {
         return (