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
@@ -148,8 +150,6 @@ const Day = ({
               : "1px solid #0068ff"
           : "1px solid #0068ff"
       }
-      w="100%"
-      h="100%"
       onClick={() => {
         setStep(0);
         setSelectedSticker(null);
@@ -175,6 +175,8 @@ const Day = ({
       }}
     >
       <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"
         >

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,26 +83,39 @@ 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%"
+      alignContent="center"
+      alignItems="center"
+      spacing={2}
+    >
+      <VStack
+        h="8.5rem"
+        w="100%"
+        alignContent="center"
+        alignItems="center"
         spacing={0}
+      >
+        <HStack
           w="100%"
           h="auto"
           alignContent="center"
           alignItems="center"
+          spacing={0}
+          px={{ base: 1, sm: 2, md: 6 }}
         >
           {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}
@@ -121,10 +135,10 @@ const CalenderExample = ({
           })}
         </HStack>
         <SimpleGrid
-        px={{ base: 1, sm: 2, md: 6 }}
           w="100%"
           h="100%"
           columns={7}
+          px={{ base: 1, sm: 2, md: 6 }}
           alignItems="center"
         >
           {currWeek &&
@@ -168,6 +182,23 @@ const CalenderExample = ({
             })}
         </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

@@ -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 (