2022-06-24 15:51:02 -04:00
21 changed files with 1004 additions and 194 deletions
--- a/src/components/buttons/Custom.tsx
+++ b/src/components/buttons/Custom.tsx
@@ -0,0 +1,26 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+interface CustomButtonProps {
+  text: string;
+  link: string;
+  type: "primary" | "secondary" | "footer";
+}
+
+const MotionBox = motion<BoxProps>(Box);
+
+const CustomButton = ({ text, link, type }: CustomButtonProps): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link href={link} target="_blank" rel="noopener">
+        <Button variant={type}>
+          {text}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default CustomButton;
--- a/src/components/buttons/Patreon.tsx
+++ b/src/components/buttons/Patreon.tsx
@@ -0,0 +1,27 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const Patreon = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://www.patreon.com/bePatron?u=15380906"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button
+          variant="patreon"
+          leftIcon={<Icon icon="ri:patreon-fill" />}
+        >
+          {"Fund The App"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default Patreon;
--- a/src/components/buttons/Twitter.tsx
+++ b/src/components/buttons/Twitter.tsx
@@ -0,0 +1,27 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import { Box, Link, Button, BoxProps } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import { motion } from "framer-motion";
+
+const MotionBox = motion<BoxProps>(Box);
+
+const Twitter = (): JSX.Element => {
+  return (
+    <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <Link
+        href="https://www.patreon.com/bePatron?u=15380906"
+        target="_blank"
+        rel="noopener"
+      >
+        <Button
+          variant="twitter"
+          leftIcon={<Icon icon="akar-icons:twitter-fill" />}
+        >
+          {"Dev Updates"}
+        </Button>
+      </Link>
+    </MotionBox>
+  );
+};
+
+export default Twitter;
--- a/src/components/calender/index.tsx
+++ b/src/components/calender/index.tsx
@@ -106,7 +106,13 @@ const Calender = ({
            );
          })}
        </HStack>
-        <SimpleGrid px={{ base: 1, sm: 2, md: 6 }} w="100%" h="100%" columns={7} alignItems="center">
+        <SimpleGrid
+          px={{ base: 1, sm: 2, md: 6 }}
+          w="100%"
+          h="100%"
+          columns={7}
+          alignItems="center"
+        >
          {Object.keys(month).map((week) => {
            const thisWeek = month[week];

--- a/src/components/tutorial/CalenderExample.tsx
+++ b/src/components/tutorial/CalenderExample.tsx
@@ -108,7 +108,13 @@ const CalenderExample = ({ type }: CalenderExampleProps): JSX.Element => {
          );
        })}
      </HStack>
-      <SimpleGrid px={{ base: 1, sm: 2, md: 6 }} w="100%" h="100%" columns={7} alignItems="center">
+      <SimpleGrid
+        px={{ base: 1, sm: 2, md: 6 }}
+        w="100%"
+        h="100%"
+        columns={7}
+        alignItems="center"
+      >
        {currWeek.map((day: MonthDay) => {
          const { date, isOverflow, overflowDirection } = day;

--- a/src/components/tutorial/index.tsx
+++ b/src/components/tutorial/index.tsx
@@ -5,10 +5,14 @@ import {
  Divider,
  Heading,
  HStack,
+  Link,
  Text,
  VStack
 } from "@chakra-ui/react";
 import React, { useState } from "react";
+import CustomButton from "../buttons/Custom";
+import Patreon from "../buttons/Patreon";
+import Twitter from "../buttons/Twitter";
 import CalenderExample from "./CalenderExample";

 interface TutorialProps {
@@ -138,7 +142,8 @@ const Tutorial = ({
          <VStack
            h="auto"
            w="100%"
-            justifyContent="start"
+            justifyContent="center"
+            alignItems="center"
            alignContent="center"
            spacing={1}
          >
@@ -170,7 +175,8 @@ const Tutorial = ({
          <VStack
            h="auto"
            w="100%"
-            justifyContent="start"
+            justifyContent="center"
+            alignItems="center"
            alignContent="center"
            spacing={4}
          >
@@ -193,7 +199,8 @@ const Tutorial = ({
          <VStack
            h="auto"
            w="100%"
-            justifyContent="start"
+            justifyContent="center"
+            alignItems="center"
            alignContent="center"
            spacing={4}
          >
@@ -215,6 +222,43 @@ const Tutorial = ({
          </VStack>
          <Divider orientation="horizontal" />
        </VStack>
+        {/* Links */}
+        <VStack
+          h="auto"
+          w="100%"
+          justifyContent="center"
+          alignContent="center"
+          spacing={4}
+        >
+          <Heading as="h3" size="lg">
+            {"More Info"}
+          </Heading>
+          <HStack
+            h="auto"
+            w="100%"
+            justifyContent="center"
+            alignContent="center"
+            spacing={4}
+          >
+            <CustomButton
+              link={
+                "https://docs.google.com/document/d/1hrerGKHTO3iach8A-CabtfIB4lyZWlgO8EGTyOCrI2Y"
+              }
+              text="Roadmap and Progress"
+              type="secondary"
+            />
+            <CustomButton
+              link={
+                "https://lucidcreations.media/introducing-code-name-potty-chart/"
+              }
+              text="Original Announcement"
+              type="secondary"
+            />
+            <Patreon />
+            <Twitter />
+          </HStack>
+          <Divider orientation="horizontal" />
+        </VStack>
        {/* Complete tutorial */}
        <HStack
          h="auto"
--- a/src/features/tutorial/index.ts
+++ b/src/features/tutorial/index.ts
@@ -1,4 +1,4 @@
-import { createSlice/*, PayloadAction*/ } from "@reduxjs/toolkit";
+import { createSlice /*, PayloadAction*/ } from "@reduxjs/toolkit";
 import { addMonths } from "date-fns";

 interface StorageState {
--- a/src/theme/AppTheme.ts
+++ b/src/theme/AppTheme.ts
@@ -29,7 +29,8 @@ const AppTheme = extendTheme({
      footer: "#0097a7",
      footerText: "black",
      content: "#2d3748",
-      patreon: "#FF424D"
+      patreon: "#FF424D",
+      twitter: "#1da1f2"
    },
    loading: {
      overlayBg: "#171923cb",
--- a/src/theme/components/buttonStyles.ts
+++ b/src/theme/components/buttonStyles.ts
@@ -17,7 +17,9 @@ const buttonStyles = {
    primary: (props: Dict<never> | StyleFunctionProps) => ({
      bg: "brand.primary",
      fontSize: "xl",
-      p: "2",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha",
      _hover: {
        bg: mode(
          whiten("brand.primary", 20),
@@ -26,9 +28,11 @@ const buttonStyles = {
      }
    }),
    secondary: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "transparent",
+      bg: "brand.secondary",
      fontSize: "xl",
-      p: "2",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha",
      _hover: {
        bg: mode(
          whiten("brand.secondary", 20),
@@ -39,9 +43,12 @@ const buttonStyles = {
    skip: (props: Dict<never> | StyleFunctionProps) => ({
      bg: "transparent",
      fontSize: "xl",
-      p: "2",
+      py: 3,
+      px: 4,
+      color: "gray.400",
      _hover: {
-        bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props)
+        bg: mode(whiten("brand.danger", 20), darken("brand.danger", 20))(props),
+        color: "whiteAlpha.900"
      }
    }),
    stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
@@ -56,27 +63,10 @@ const buttonStyles = {
        )(props)
      }
    }),
-    project: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "transparent",
-      fontSize: "md",
-      py: 2,
-      px: 4,
-      boxShadow:
-        "rgba(0, 134, 255, 0.2) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
-      border: "1px solid rgba(0, 134, 255, 0.4)",
-      _hover: {
-        bg: mode(
-          whiten("brand.secondary", 20),
-          darken("brand.secondary", 20)
-        )(props),
-        boxShadow:
-          "rgba(0, 104, 255, 0.5) 0px 0px 15px, rgba(0, 104, 255, 0.3) 0px 0px 3px 1px"
-      }
-    }),
    nav: (props: Dict<never> | StyleFunctionProps) => ({
      bg: "transparent",
      fontSize: "md",
-      px: "2",
+      px: 2,
      _hover: {
        bg: mode(
          whiten("brand.secondary", 20),
@@ -87,15 +77,16 @@ const buttonStyles = {
    stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
      bg: "transparent",
      fontSize: "md",
-      px: "2",
+      px: 2,
      _hover: {
        textDecoration: "underline"
      }
    }),
-    credits: (props: Dict<never> | StyleFunctionProps) => ({
+    footer: (props: Dict<never> | StyleFunctionProps) => ({
      bg: "brand.main",
      fontSize: "lg",
-      p: 3,
+      py: 3,
+      px: 4,
      color: "whiteAlpha",
      _hover: {
        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
@@ -121,22 +112,6 @@ const buttonStyles = {
        border: "1px solid rgba(0, 134, 255, 1)"
      }
    }),
-    collapse: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "transparent",
-      fontSize: "md",
-      p: 2,
-      h: 8,
-      color: "brand.hover",
-      textDecoration: "underline",
-      _hover: {
-        bg: mode(
-          whiten("brand.secondary", 20),
-          darken("brand.secondary", 20)
-        )(props),
-        color: "whiteAlpha.900",
-        textDecoration: "none"
-      }
-    }),
    submit: (props: Dict<never> | StyleFunctionProps) => ({
      fontSize: "lg",
      py: 2,
@@ -159,7 +134,7 @@ const buttonStyles = {
    mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
      // bg: "transparent",
      fontSize: "md",
-      px: "2",
+      px: 2,
      boxShadow:
        "rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
      _hover: {
@@ -188,6 +163,19 @@ const buttonStyles = {
          darken("brand.patreon", 20)
        )(props)
      }
+    }),
+    twitter: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.twitter",
+      fontSize: "lg",
+      py: 3,
+      px: 4,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(
+          whiten("brand.twitter", 20),
+          darken("brand.twitter", 20)
+        )(props)
+      }
    })
  },
  // default values for `size` and `variant`
--- a/src/theme/layout/Footer.tsx
+++ b/src/theme/layout/Footer.tsx
@@ -4,16 +4,17 @@ import {
  Text,
  VStack,
  Link,
-  HStack,
  // Image,
  Button,
  BoxProps
 } from "@chakra-ui/react";
-import { Icon } from "@iconify/react";
 // import BackToTopButton from "./BackToTopButton";
 import { motion } from "framer-motion";
+import Patreon from "../../components/buttons/Patreon";
+import CustomButton from "../../components/buttons/Custom";
+import Twitter from "../../components/buttons/Twitter";

-export const MotionBox = motion<BoxProps>(Box);
+const MotionBox = motion<BoxProps>(Box);

 const Footer = (): JSX.Element => {
  // const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
@@ -68,32 +69,15 @@ const Footer = (): JSX.Element => {
              </Button>
            </Link>
          </MotionBox> */}
-          <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-            <Link
-              href="https://lucidcreations.media/introducing-code-name-potty-chart/"
-              target="_blank"
-              rel="noopener"
-            >
-              <Button color="whiteAlpha" variant="credits">
-                More About This App
-              </Button>
-            </Link>
-          </MotionBox>
-          <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
-            <Link
-              href="https://www.patreon.com/bePatron?u=15380906"
-              target="_blank"
-              rel="noopener"
-            >
-              <Button
-                color="whiteAlpha"
-                variant="patreon"
-                leftIcon={<Icon icon="ri:patreon-fill" />}
-              >
-                Fund This App
-              </Button>
-            </Link>
-          </MotionBox>
+          <CustomButton
+            link={
+              "https://lucidcreations.media/introducing-code-name-potty-chart/"
+            }
+            text="More About This App"
+            type="footer"
+          />
+          <Patreon />
+          <Twitter />
          <Text color="brand.footerText" fontSize="xs">
            &copy;
            {` 2021 - ${new Date().getFullYear()} `}