src/components/calender/Day.tsx

@@ -135,8 +135,8 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-              ? "gray.600"
-              : "transparent"
+            ? "gray.600"
+            : "transparent"
           : "transparent"
       }
       border={
@@ -146,8 +146,8 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-              ? "1px solid #00ff3c"
-              : "1px solid #0068ff"
+            ? "1px solid #00ff3c"
+            : "1px solid #0068ff"
           : "1px solid #0068ff"
       }
       onClick={() => {
@@ -168,8 +168,8 @@ const Day = ({
             : tutorial === "edit" &&
               !isToday &&
               isBefore(currDateObj, endOfDay(currDate))
-              ? "gray.600"
-              : "transparent"
+            ? "gray.600"
+            : "transparent"
           : "transparent",
         border: "1px solid #FFF"
       }}

src/components/calender/index.tsx

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

@@ -175,7 +175,7 @@ const CalenderExample = ({
                     id.length
                       ? id
                       : format(toDateObj, "yyyyddLL") +
-                      `/${sticker === null ? 0 : sticker}`
+                        `/${sticker === null ? 0 : sticker}`
                   }
                 />
               );
@@ -190,12 +190,17 @@ const CalenderExample = ({
           alignItems="center"
           spacing={2}
         >
-          <Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
             {
-              "Not being able to edit within this tutorial when the current date is the start of the month is a known bug."
+              "Not being able to edit within this tutorial when the current date is the start of the week or month is a known bug."
             }
           </Text>
-          <Text>{"This bug will be fixed in beta v2."}</Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {"This bug will be fixed in beta v2."}
+          </Text>
+          <Text fontSize="sm" color="whiteAlpha.800">
+            {"You can skip the tutorial and try again tomorrow."}
+          </Text>
         </VStack>
       )}
     </VStack>

src/components/tutorial/sections/TutorialCalender.tsx

@@ -36,7 +36,7 @@ const TutorialCalender = ({ isLoading }: CalenderExampleProps): JSX.Element => {
           justifyContent="center"
           spacing={1}
         >
-          <Text>{"Select the date with a"}</Text>
+          <Text>{"Select the date with the"}</Text>
           <Text color="#00ff3c">{" green "}</Text>
           <Text>{"border."}</Text>
         </HStack>

src/theme/components/buttonStyles.ts

@@ -45,7 +45,7 @@ const buttonStyles = {
       fontSize: "xl",
       py: 3,
       px: 4,
-      color: "gray.400",
+      color: "whiteAlpha.800",
       _hover: {
         bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props),
         color: "whiteAlpha.900"

src/theme/layout/Header.tsx

@@ -84,8 +84,8 @@ const Header = (): JSX.Element => {
         open
           ? "brand.main"
           : transparentNavbar
-            ? "rgba(49, 56, 220, 0.9)"
-            : "brand.main"
+          ? "rgba(49, 56, 220, 0.9)"
+          : "brand.main"
       }
       transition=".5s ease"
       borderRadius="0px 0px 10px 10px"