From 362b4babe2fd7c434375b0f076442d2663a0a5ed Mon Sep 17 00:00:00 2001
From: Lucid Kobold <72232219+LucidKobold@users.noreply.github.com>
Date: Fri, 24 Jun 2022 10:45:19 -0500
Subject: [PATCH] Moved buttons to it's own component and added the new
 compoenent to the footer.

---
 .../{tutorial => buttons}/data/links.ts       |  0
 src/components/buttons/index.tsx              | 77 +++++++++++++++++++
 src/components/calender/Day.tsx               |  8 +-
 .../tutorial/sections/TutorialLinks.tsx       | 70 +----------------
 src/theme/layout/Footer.tsx                   | 11 +--
 5 files changed, 88 insertions(+), 78 deletions(-)
 rename src/components/{tutorial => buttons}/data/links.ts (100%)
 create mode 100644 src/components/buttons/index.tsx

diff --git a/src/components/tutorial/data/links.ts b/src/components/buttons/data/links.ts
similarity index 100%
rename from src/components/tutorial/data/links.ts
rename to src/components/buttons/data/links.ts
diff --git a/src/components/buttons/index.tsx b/src/components/buttons/index.tsx
new file mode 100644
index 0000000..d897253
--- /dev/null
+++ b/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;
diff --git a/src/components/calender/Day.tsx b/src/components/calender/Day.tsx
index 7c2aaf1..fae73c9 100644
--- a/src/components/calender/Day.tsx
+++ b/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"
diff --git a/src/components/tutorial/sections/TutorialLinks.tsx b/src/components/tutorial/sections/TutorialLinks.tsx
index 4595ae4..a0cb1a0 100644
--- a/src/components/tutorial/sections/TutorialLinks.tsx
+++ b/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>
   );
diff --git a/src/theme/layout/Footer.tsx b/src/theme/layout/Footer.tsx
index a59d391..e63dc1a 100644
--- a/src/theme/layout/Footer.tsx
+++ b/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()} `}