Added files and folders into /src directory.

src/theme/AppTheme.ts

@@ -0,0 +1,53 @@
+import { extendTheme, ThemeConfig } from "@chakra-ui/react";
+// import { createBreakpoints } from "@chakra-ui/theme-tools";
+import buttons from "./components/buttonStyles";
+
+const config: ThemeConfig = {
+  initialColorMode: "dark",
+  useSystemColorMode: false
+};
+
+// const breakpoints = createBreakpoints({
+//   sm: "30em",
+//   md: "48em",
+//   lg: "75em",
+//   xl: "85em",
+//   "2xl": "100em",
+// });
+
+const AppTheme = extendTheme({
+  config,
+  colors: {
+    brand: {
+      main: "#3138dc",
+      primary: "#0068ff",
+      secondary: "#0086ff",
+      hover: "#00aec1",
+      warning: "#ffbd48",
+      danger: "#FC8181",
+      valid: "#00c17c",
+      footer: "#0097a7",
+      footerText: "black",
+      content: "#2d3748",
+      patreon: "#FF424D"
+    },
+    loading: {
+      overlayBg: "#171923cb",
+      spinnerColor: "#0088ff",
+      spinnerEmptySpace: "#2D374860"
+    }
+  },
+  styles: {
+    global: {
+      body: {
+        bg: "gray.900"
+      }
+    }
+  },
+  components: {
+    Button: buttons
+  }
+  // breakpoints,
+});
+
+export default AppTheme;

src/theme/components/buttonStyles.ts

@@ -0,0 +1,189 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import {
+  darken,
+  mode,
+  StyleFunctionProps,
+  whiten
+} from "@chakra-ui/theme-tools";
+import { Dict } from "@chakra-ui/utils";
+
+const buttonStyles = {
+  // style object for base or default style
+  baseStyle: {},
+  // styles for different sizes ("sm", "md", "lg")
+  sizes: {},
+  // styles for different visual variants ("outline", "solid")
+  variants: {
+    primary: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "rgba(255, 255, 255, .15)",
+      fontSize: "xl",
+      p: "2",
+      _hover: {
+        bg: mode(
+          whiten("brand.primary", 20),
+          darken("brand.primary", 20)
+        )(props)
+      }
+    }),
+    secondary: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.primary",
+      fontSize: "xl",
+      p: "2",
+      _hover: {
+        bg: mode(
+          whiten("brand.primary", 20),
+          darken("brand.primary", 20)
+        )(props)
+      }
+    }),
+    stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "transparent",
+      fontSize: "4rem",
+      px: 2,
+      py: 14,
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(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",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props)
+      }
+    }),
+    stickyNav: (/* props: Dict<never> | StyleFunctionProps */) => ({
+      bg: "transparent",
+      fontSize: "md",
+      px: "2",
+      _hover: {
+        textDecoration: "underline"
+      }
+    }),
+    credits: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.main",
+      fontSize: "lg",
+      p: 3,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
+      }
+    }),
+    backToTop: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "rgba(23, 25, 35, 0.5)",
+      fontSize: "lg",
+      py: 2,
+      px: 4,
+      color: "rgba(0, 134, 255, 0.6)",
+      boxShadow:
+        "rgba(0, 134, 255, 0.05) 0px 0px 15px, rgba(0, 134, 255, 0.1) 0px 0px 3px 1px",
+      border: "1px solid rgba(0, 134, 255, 0.15)",
+      _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",
+        color: "whiteAlpha.900",
+        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,
+      px: 4,
+      type: "submit",
+      _hover: {
+        color: "whiteAlpha.900",
+        bg: mode(whiten("brand.valid", 20), darken("brand.valid", 20))(props),
+        _disabled: {
+          color: mode(
+            whiten("brand.danger", 20),
+            darken("brand.danger", 20)
+          )(props),
+          boxShadow:
+            "rgba(252, 129, 129, .95) 0px 0px 15px, rgba(252, 129, 129, 0.75) 0px 0px 3px 1px",
+          border: "1px solid #FC8181"
+        }
+      }
+    }),
+    mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
+      // bg: "transparent",
+      fontSize: "md",
+      px: "2",
+      boxShadow:
+        "rgba(0, 134, 255, 0.30) 0px 0px 15px, rgba(0, 134, 255, 0.15) 0px 0px 3px 1px",
+      _hover: {
+        bg: mode(
+          whiten("brand.secondary", 20),
+          darken("brand.secondary", 20)
+        )(props),
+        boxShadow:
+          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px"
+      },
+      _expanded: {
+        bg: "brand.primary",
+        boxShadow:
+          "rgba(0, 134, 255, 0.5) 0px 0px 15px, rgba(0, 134, 255, 0.3) 0px 0px 3px 1px",
+        border: "1px solid #0068ff"
+      }
+    }),
+    patreon: (props: Dict<never> | StyleFunctionProps) => ({
+      bg: "brand.patreon",
+      fontSize: "lg",
+      p: 3,
+      color: "whiteAlpha",
+      _hover: {
+        bg: mode(
+          whiten("brand.patreon", 20),
+          darken("brand.patreon", 20)
+        )(props)
+      }
+    })
+  },
+  // default values for `size` and `variant`
+  defaultProps: {}
+};
+
+export default buttonStyles;

src/theme/layout/BackToTopButton.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from "react";
+import { Button, Flex, Link } from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+
+interface BackToTopButtonProps {
+  show: boolean;
+}
+
+const BackToTopButton: FC<BackToTopButtonProps> = ({
+  show
+}: BackToTopButtonProps) => {
+  return (
+    <Flex
+      d={show ? "flex" : "none"}
+      pos="fixed"
+      top="85vh"
+      right={{
+        base: "1.25rem",
+        sm: "2rem",
+        md: "3rem"
+      }}
+    >
+      <Link href="/#top">
+        <Button variant="backToTop">
+          <Icon icon="akar-icons:chevron-up" />
+        </Button>
+      </Link>
+    </Flex>
+  );
+};
+
+export default BackToTopButton;

src/theme/layout/DesktopNav.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Button, HStack, Link } from "@chakra-ui/react";
+import navItems, { NavItem } from "./navItems";
+
+const DesktopNav = (): JSX.Element => {
+  return (
+    <HStack
+      as="nav"
+      d={{ base: "none", lg: "flex" }}
+      h="auto"
+      w="auto"
+      spacing={4}
+      // m="auto"
+      justifyContent="center"
+      alignContent="center"
+      alignItems="center"
+    >
+      {navItems.map((navItem: NavItem) => {
+        return (
+          <Link id={"dekstop-" + navItem[0]} key={navItem[0]} href={navItem[1]}>
+            <Button variant="nav">{navItem[0]}</Button>
+          </Link>
+        );
+      })}
+    </HStack>
+  );
+};
+
+export default DesktopNav;

src/theme/layout/Footer.tsx

@@ -0,0 +1,114 @@
+import React /*, { useEffect, useRef, useState }*/ from "react";
+import {
+  Box,
+  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";
+
+export const MotionBox = motion<BoxProps>(Box);
+
+const Footer = (): JSX.Element => {
+  // const [showBackToTop, setShowBackToTop] = useState<boolean>(false);
+  // const lastScroll = useRef<number>(0);
+
+  // const handleScroll = (): void => {
+  //   if (window.scrollY >= 500) {
+  //     setShowBackToTop(true);
+  //   } else {
+  //     setShowBackToTop(false);
+  //   }
+
+  //   const currentScroll =
+  //     window.pageYOffset || document.documentElement.scrollTop;
+
+  //   lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
+  // };
+
+  // useEffect(() => {
+  //   if (!window) {
+  //     console.log("waiting for mount");
+  //   } else if (window) {
+  //     window.addEventListener("scroll", handleScroll);
+  //   }
+
+  //   return () => window.removeEventListener("scroll", handleScroll);
+  // }, []);
+  return (
+    <Box bg="brand.footer" as="footer" w="100%" h="auto">
+      {/* <BackToTopButton show={showBackToTop} /> */}
+      <VStack
+        h="auto"
+        w="auto"
+        py={12}
+        spacing={5}
+        justifyItems="center"
+        justifyContent="center"
+      >
+        <VStack spacing={4}>
+          {/* <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+            <Link
+              href="https://github.com/LucidCreationsMedia"
+              target="_blank"
+              rel="noopener"
+            >
+              <Button
+                color="whiteAlpha"
+                variant="credits"
+                leftIcon={<Icon icon="akar-icons:github-fill" />}
+              >
+                View Codebase
+              </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>
+          <Text color="brand.footerText" fontSize="xs">
+            &copy;
+            {` 2021 - ${new Date().getFullYear()} `}
+            <Link
+              href="https://lucidcreations.media"
+              rel="noopener"
+              target="_blank"
+            >
+              {"Lucid Creations Media"}
+            </Link>
+          </Text>
+        </VStack>
+      </VStack>
+    </Box>
+  );
+};
+
+export default Footer;

src/theme/layout/Header.tsx

@@ -0,0 +1,189 @@
+import React, { useEffect, useRef, useState } from "react";
+import Image from "next/image";
+import {
+  Heading,
+  HStack,
+  Box,
+  IconButton,
+  Menu,
+  MenuButton
+} from "@chakra-ui/react";
+import { Icon } from "@iconify/react";
+import DesktopNav from "./DesktopNav";
+import MobileNav from "./MobileNav";
+import appLogo from "../../../public/images/logo.svg";
+
+const Header = (): JSX.Element => {
+  const appName = "LCM Potty Chart";
+  const appVersion = "v0.0.9.6-alpha";
+
+  // Add transparency while not at the top of the page.
+  const [transparentNavbar, setTransparentNavbar] = useState<boolean>(false);
+  const lastScroll = useRef<number>(0);
+
+  const handleScroll = (): void => {
+    // Sticky Nav
+    if (window.scrollY >= 20) {
+      setTransparentNavbar(true);
+    } else {
+      setTransparentNavbar(false);
+    }
+
+    // Scroll Position.
+    const currentScroll =
+      window.scrollY || window.pageYOffset || document.body.scrollTop;
+
+    // Update Scroll Position Reference
+    lastScroll.current = currentScroll <= 0 ? 0 : currentScroll;
+    // setScroll(lastScroll.current = currentScroll <= 0 ? 0 : currentScroll)
+  };
+
+  useEffect(() => {
+    if (!window) {
+      console.log("waiting for mount");
+    } else if (window) {
+      window.addEventListener("scroll", handleScroll);
+    }
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  // Mobile Menu Icon && Open/Close
+  const [open, setOpen] = useState<boolean>(false);
+  const [hover, setHover] = useState<boolean>(false);
+
+  const menuIcon = (): JSX.Element => {
+    const iconType = {
+      default: <Icon icon="bx:bx-menu-alt-right" />,
+      hover: <Icon icon="bx:bx-menu" />,
+      open: <Icon icon="bx:bx-x" />
+    };
+
+    if (open) {
+      return iconType.open;
+    } else if (hover) {
+      return iconType.hover;
+    } else {
+      return iconType.default;
+    }
+  };
+
+  return (
+    <Box
+      zIndex={1}
+      w="100%"
+      pos="fixed"
+      top={0}
+      alignItems="center"
+      boxShadow={
+        open
+          ? "none"
+          : "rgba(0, 134, 255, 0.75) 0px 0px 15px, rgba(0, 134, 255, 0.5) 0px 0px 3px 1px"
+      }
+      bg={
+        open
+          ? "brand.main"
+          : transparentNavbar
+          ? "rgba(49, 56, 220, 0.9)"
+          : "brand.main"
+      }
+      transition=".5s ease"
+      borderRadius="0px 0px 10px 10px"
+      _hover={{
+        bg: "brand.main",
+        boxShadow: open
+          ? "none"
+          : "rgba(0, 134, 255, 0.9) 0px 0px 15px, rgba(0, 134, 255, 0.7) 0px 0px 3px 1px"
+      }}
+      h={open ? "125px" : "auto"}
+    >
+      {/* Logo | Site Name */}
+      <HStack
+        width="100%"
+        justifyContent={{
+          base: "flex-start",
+          sm: "center"
+        }}
+        alignItems="center"
+        height={12}
+        top={0}
+        position="absolute"
+        ml={4}
+        d={{ base: "flex", lg: "none" }}
+        spacing="5px"
+        _hover={{
+          cursor: "default"
+        }}
+      >
+        <Image height="30px" width="30px" src={appLogo} alt="App Logo" />
+
+        <Heading as="h1" size="md">
+          {appName}
+        </Heading>
+        <Heading color="whiteAlpha.500" as="h2" size="sm">
+          {appVersion}
+        </Heading>
+      </HStack>
+
+      {/* Desktop Nav Items and Mobile Menu Button */}
+      <HStack
+        w="100%"
+        px={4}
+        h={12}
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <HStack
+          w="100%"
+          h="auto"
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Box w="auto" d={{ base: "flex", lg: "none " }}></Box>
+          <Box w="100%" d={{ base: "none", lg: "flex" }} m="auto">
+            <HStack
+              width="100%"
+              alignItems="center"
+              height="auto"
+              spacing="5px"
+              _hover={{
+                cursor: "default"
+              }}
+            >
+              <Image height="30px" width="30px" src={appLogo} alt="App Logo" />
+              <Heading as="h1" size="md">
+                {appName}
+              </Heading>
+              <Heading color="whiteAlpha.500" as="h2" size="sm">
+                {appVersion}
+              </Heading>
+            </HStack>
+          </Box>
+          <DesktopNav />
+        </HStack>
+        <Menu isLazy lazyBehavior="unmount" isOpen={open}>
+          <MenuButton
+            as={IconButton}
+            aria-label="Mobile Menu"
+            icon={menuIcon()}
+            onClick={() => setOpen(!open)}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+            d={{
+              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"
+          />
+          <MobileNav updateOpen={setOpen} />
+        </Menu>
+      </HStack>
+    </Box>
+  );
+};
+
+export default Header;

src/theme/layout/Layout.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from "react";
+
+import type { AppProps } from "next/app";
+import Header from "../layout/Header";
+import { Box } from "@chakra-ui/layout";
+import Footer from "./Footer";
+
+interface LayoutProps {
+  children: ReactNode;
+  elementType?: string;
+}
+
+const Layout: FC<LayoutProps> = (
+  { children }: LayoutProps,
+  { pageProps }: AppProps
+) => {
+  return (
+    <Box w="100%">
+      <Header {...pageProps} />
+      <main>{children}</main>
+      <Footer />
+    </Box>
+  );
+};
+export default Layout;

src/theme/layout/MobileNav.tsx

@@ -0,0 +1,56 @@
+import React, { FC, Fragment } from "react";
+import {
+  Button,
+  Link,
+  MenuDivider,
+  MenuItem,
+  MenuList
+} from "@chakra-ui/react";
+import navItems, { NavItem } from "./navItems";
+
+interface MobileNavProps {
+  updateOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
+  return (
+    <MenuList
+      as="nav"
+      d={{ base: "block", lg: "none" }}
+      bg="brand.main"
+      h="auto"
+      w="100%"
+      p={0}
+      border="none"
+      boxShadow="none"
+    >
+      {navItems.map((navItem: NavItem, index: number) => {
+        return (
+          <MenuItem
+            id={"mobile-" + navItem[0]}
+            key={navItem[0]}
+            w="auto"
+            h="auto"
+            p={0}
+            _hover={{
+              backgroundColor: "none"
+            }}
+            _focus={{
+              backgroundColor: "none"
+            }}
+          >
+            <Link onClick={() => updateOpen(false)} href={navItem[1]}>
+              {index === 0 ? <MenuDivider /> : <Fragment></Fragment>}
+              <Button w="100vw" variant={"nav"} p={0} m="auto">
+                {navItem[0]}
+              </Button>
+              <MenuDivider />
+            </Link>
+          </MenuItem>
+        );
+      })}
+    </MenuList>
+  );
+};
+
+export default MobileNav;

src/theme/layout/navItems.ts

@@ -0,0 +1,6 @@
+export type NavItem = [string, string];
+export type NavItems = NavItem[];
+
+const navItems: NavItems = [["Home", "/"]];
+
+export default navItems;