Moved buttons to it's own component and added the new compoenent to the footer.

src/components/buttons/index.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Box, HStack, VStack } from "@chakra-ui/react";
+import CustomButton from "./Custom";
+import links, { LinkObj } from "./data/links";
+import Patreon from "./Patreon";
+import Twitter from "./Twitter";
+
+const Buttons = (): JSX.Element => {
+  return (
+    <Box h="auto" w="100%">
+      <HStack
+        display={{ base: "none", lg: "flex" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "patreon") {
+            return <Patreon key={type} />;
+          }
+
+          if (type === "twitter") {
+            return <Twitter key={type} />;
+          }
+        })}
+      </HStack>
+      <VStack
+        display={{ base: "flex", lg: "none" }}
+        h="auto"
+        w="100%"
+        justifyContent="center"
+        alignContent="center"
+        spacing={4}
+      >
+        {links.map((link: LinkObj) => {
+          const { href, name, type } = link;
+
+          if (type === "primary" || type === "secondary") {
+            return (
+              <CustomButton
+                key={name.replaceAll(" ", "-")}
+                link={href}
+                text={name}
+                type={type}
+              />
+            );
+          }
+
+          if (type === "patreon") {
+            return <Patreon key={type} />;
+          }
+
+          if (type === "twitter") {
+            return <Twitter key={type} />;
+          }
+        })}
+      </VStack>
+    </Box>
+  );
+};
+
+export default Buttons;

src/components/calender/Day.tsx

@@ -98,13 +98,17 @@ const Day = ({
       border="1px solid #181d8f"
       _hover={{
         cursor: isBefore(currDateObj, endOfDay(currDate))
-          ? "pointer"
+          ? selectedSticker !== null
+            ? "pointer"
+            : "default"
           : "default",
         background: "gray.700",
         border: "1px solid #FFF",
         color: "whiteAlpha.900"
       }}
-      onClick={() => handleNav(overflowDirection)}
+      onClick={() =>
+        selectedSticker !== null ? handleNav(overflowDirection) : ""
+      }
       spacing="0.5rem"
       alignContent="center"
       justifyContent="flex-start"

src/components/tutorial/sections/TutorialLinks.tsx

@@ -1,9 +1,6 @@
 import React from "react";
-import { Divider, Heading, HStack, VStack } from "@chakra-ui/react";
-import CustomButton from "../../buttons/Custom";
-import Patreon from "../../buttons/Patreon";
-import Twitter from "../../buttons/Twitter";
-import links, { LinkObj } from "../data/links";
+import { Divider, Heading, VStack } from "@chakra-ui/react";
+import Buttons from "../../buttons";
 
 const TutorialLinks = (): JSX.Element => {
   return (
@@ -17,68 +14,7 @@ const TutorialLinks = (): JSX.Element => {
       <Heading as="h3" size="lg">
         {"More Info"}
       </Heading>
-      <HStack
-        display={{ base: "none", lg: "flex" }}
-        h="auto"
-        w="100%"
-        justifyContent="center"
-        alignContent="center"
-        spacing={4}
-      >
-        {links.map((link: LinkObj) => {
-          const { href, name, type } = link;
-
-          if (type === "primary" || type === "secondary") {
-            return (
-              <CustomButton
-                key={name.replaceAll(" ", "-")}
-                link={href}
-                text={name}
-                type={type}
-              />
-            );
-          }
-
-          if (type === "patreon") {
-            return <Patreon key={type} />;
-          }
-
-          if (type === "twitter") {
-            return <Twitter key={type} />;
-          }
-        })}
-      </HStack>
-      <VStack
-        display={{ base: "flex", lg: "none" }}
-        h="auto"
-        w="100%"
-        justifyContent="center"
-        alignContent="center"
-        spacing={4}
-      >
-        {links.map((link: LinkObj) => {
-          const { href, name, type } = link;
-
-          if (type === "primary" || type === "secondary") {
-            return (
-              <CustomButton
-                key={name.replaceAll(" ", "-")}
-                link={href}
-                text={name}
-                type={type}
-              />
-            );
-          }
-
-          if (type === "patreon") {
-            return <Patreon key={type} />;
-          }
-
-          if (type === "twitter") {
-            return <Twitter key={type} />;
-          }
-        })}
-      </VStack>
+      <Buttons />
       <Divider orientation="horizontal" />
     </VStack>
   );

src/theme/layout/Footer.tsx

@@ -13,6 +13,7 @@ import { motion } from "framer-motion";
 import Patreon from "../../components/buttons/Patreon";
 import CustomButton from "../../components/buttons/Custom";
 import Twitter from "../../components/buttons/Twitter";
+import Buttons from "../../components/buttons";
 
 const MotionBox = motion<BoxProps>(Box);
 
@@ -69,15 +70,7 @@ const Footer = (): JSX.Element => {
               </Button>
             </Link>
           </MotionBox> */}
-          <CustomButton
-            link={
-              "https://lucidcreations.media/introducing-code-name-potty-chart/"
-            }
-            text="More About This App"
-            type="footer"
-          />
-          <Patreon />
-          <Twitter />
+          <Buttons />
           <Text color="brand.footerText" fontSize="xs">
             &copy;
             {` 2021 - ${new Date().getFullYear()} `}