Merge pull request #106 from LucidKobold/updating-buttons

Updating buttons

.github/workflows/codeql-analysis.yml

@@ -13,12 +13,12 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ main ]
+    branches: [main, stable]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches: [main, stable]
   schedule:
-    - cron: '21 19 * * 4'
+    - cron: "21 19 * * 4"
 
 jobs:
   analyze:
@@ -32,39 +32,39 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: ["javascript"]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://git.io/codeql-language-support
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
+      - name: Checkout repository
+        uses: actions/checkout@v2
 
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+      # Initializes the CodeQL tools for scanning.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+          # If you wish to specify custom queries, you can do so here or in a config file.
+          # By default, queries listed here will override any specified in a config file.
+          # Prefix the list here with "+" to use these queries and those in the config file.
+          # queries: ./path/to/local/query, your-org/your-repo/queries@main
 
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+      # If this step fails, then you should remove it and run the build manually (see below)
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v2
 
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
+      # ℹ️ Command-line programs to run using the OS shell.
+      # 📚 https://git.io/JvXDl
 
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
+      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+      #    and modify them (or add more) to build your code if your project
+      #    uses a compiled language
 
-    #- run: |
-    #   make bootstrap
-    #   make release
+      #- run: |
+      #   make bootstrap
+      #   make release
 
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v2

.github/workflows/main.yml

@@ -6,24 +6,35 @@ name: Node.js CI
 on:
   # Trigger the workflow on push or pull request,
   push:
-    branches:
-      # All branches
-      - 'main'
+    branches: [main, stable]
   pull_request:
     # These types of PRs
     types: [opened, synchronize, reopened]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [14.x, 16.x, 18.x, 20.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
     steps:
       - uses: actions/checkout@v2
+
+      # NPM
+      # - name: Use Node.js ${{ matrix.node-version }}
+      #   uses: actions/setup-node@v2
+      #   with:
+      #     node-version: ${{ matrix.node-version }}
+      #     cache: 'npm'
+      # - run: npm i
+      # - run: npm run lint
+      # - run: npm run build
+      # # - run: npm run start
+      # - run: npm run test
+
+      # YARN
       - uses: borales/actions-yarn@v3.0.0
         with:
           cmd: install # will run `yarn install` command

.github/workflows/njsscan-analysis.yml

@@ -10,26 +10,26 @@ name: njsscan sarif
 
 on:
   push:
-    branches: [ main ]
+    branches: [main, stable]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ main ]
+    branches: [main, stable]
   schedule:
-    - cron: '15 15 * * 5'
+    - cron: "15 15 * * 5"
 
 jobs:
   njsscan:
     runs-on: ubuntu-latest
     name: njsscan code scanning
     steps:
-    - name: Checkout the code
-      uses: actions/checkout@v2
-    - name: nodejsscan scan
-      id: njsscan
-      uses: ajinabraham/njsscan-action@7237412fdd36af517e2745077cedbf9d6900d711
-      with:
-        args: '. --sarif --output results.sarif || true'
-    - name: Upload njsscan report
-      uses: github/codeql-action/upload-sarif@v1
-      with:
-        sarif_file: results.sarif
+      - name: Checkout the code
+        uses: actions/checkout@v2
+      - name: nodejsscan scan
+        id: njsscan
+        uses: ajinabraham/njsscan-action@7237412fdd36af517e2745077cedbf9d6900d711
+        with:
+          args: ". --sarif --output results.sarif || true"
+      - name: Upload njsscan report
+        uses: github/codeql-action/upload-sarif@v2
+        with:
+          sarif_file: results.sarif

.prettierignore

@@ -14,4 +14,5 @@ next-env.d
 package*
 tsconfig.json
 yarn.lock
+package.lock
 next.config.js

.yarnrc.yml

@@ -1,7 +1,7 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "lucid-creations-media-potty-chart",
   "homepage": "https://lucidcreations.media/introducing-code-name-potty-chart/",
-  "version": "0.1.1",
+  "version": "0.1.25",
   "author": {
     "name": "Lucid Creations Media",
     "url": "https://lucidcreations.media",
@@ -16,36 +16,34 @@
     "pretty": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.2.1",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@iconify/react": "^3.2.2",
-    "@reduxjs/toolkit": "^1.8.2",
-    "date-fns": "^2.28.0",
-    "formik": "^2.2.9",
-    "framer-motion": "^6.3.15",
-    "next": "12.1.6",
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@iconify/react": "^4.1.1",
+    "@reduxjs/toolkit": "^2.2.1",
+    "date-fns": "^3.3.1",
+    "formik": "^2.4.5",
+    "framer-motion": "^11.0.6",
+    "next": "14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.2",
-    "sharp": "^0.30.7"
+    "react-redux": "^9.1.0",
+    "sharp": "^0.33.2"
   },
   "devDependencies": {
-    "@types/node": "^18.0.0",
-    "@types/react": "^18.0.14",
-    "@types/react-redux": "^7.1.24",
-    "@typescript-eslint/eslint-plugin": "^5.29.0",
-    "eslint": "^8.18.0",
-    "eslint-config-next": "^12.1.6",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jsx-a11y": "^6.6.0",
-    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "<4.6.0",
-    "prettier": "^2.7.1",
-    "typescript": "^4.7.4"
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
+    "@types/react-redux": "^7.1.33",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "<13.4.9",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.5",
+    "typescript": "^5.3.3"
   },
-  "resolutions": {
-    "@types/react": "^17.0.38"
-  },
-  "packageManager": "yarn@3.2.1"
+  "packageManager": "yarn@4.1.0"
 }

public/robots.txt

@@ -0,0 +1,23 @@
+# Used for many other (non-commercial) purposes as well
+User-agent: CCBot
+Disallow: /
+
+# For new training only
+User-agent: GPTBot
+Disallow: /
+
+# Not for training, only for user requests
+User-agent: ChatGPT-User
+Disallow: /
+
+# Marker for disabling Bard and Vertex AI
+User-agent: Google-Extended
+Disallow: /
+
+# Speech synthesis only?
+User-agent: FacebookBot
+Disallow: /
+
+# Multi-purpose, commercial uses; including LLMs
+User-agent: Omgilibot
+Disallow: /

src/components/buttons/KoFi.tsx

@@ -5,15 +5,15 @@ import { motion } from "framer-motion";
 
 const MotionBox = motion<BoxProps>(Box);
 
-const Patreon = (): JSX.Element => {
+const KoFi = (): JSX.Element => {
   return (
     <MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
       <Link
-        href="https://www.patreon.com/bePatron?u=15380906"
+        href="https://ko-fi.com/lucidcreationsmedia"
         target="_blank"
         rel="noopener"
       >
-        <Button variant="patreon" leftIcon={<Icon icon="ri:patreon-fill" />}>
+        <Button variant="kofi" leftIcon={<Icon icon="cib:ko-fi" />}>
           {"Fund The App"}
         </Button>
       </Link>
@@ -21,4 +21,4 @@ const Patreon = (): JSX.Element => {
   );
 };
 
-export default Patreon;
+export default KoFi;

src/components/buttons/Twitter.tsx

@@ -1,27 +0,0 @@
-import React 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;

src/components/buttons/data/links.ts

@@ -1,7 +1,7 @@
 export interface LinkObj {
   href?: string;
   name?: string;
-  type: "primary" | "secondary" | "twitter" | "patreon";
+  type: "primary" | "secondary" | "updates" | "ko-fi";
 }
 
 type Links = LinkObj[];
@@ -13,15 +13,17 @@ const links: Links = [
     type: "secondary"
   },
   {
-    href: "https://lucidcreations.media/introducing-code-name-potty-chart/",
-    name: "Original Announcement",
+    href: "https://lucidcreations.media/lcm-potty-chart/",
+    name: "Official Announcement",
     type: "secondary"
   },
+  // {
+  //   type: "ko-fi"
+  // },
   {
-    type: "patreon"
-  },
-  {
-    type: "twitter"
+    href: "https://t.me/LucidCreationsMedia",
+    name: "Dev Updates",
+    type: "secondary"
   }
 ];
 

src/components/buttons/index.tsx

@@ -2,8 +2,7 @@ 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";
+import KoFi from "./KoFi";
 
 const Buttons = (): JSX.Element => {
   return (
@@ -30,12 +29,8 @@ const Buttons = (): JSX.Element => {
             );
           }
 
-          if (type === "patreon") {
-            return <Patreon key={type} />;
-          }
-
-          if (type === "twitter") {
-            return <Twitter key={type} />;
+          if (type === "ko-fi") {
+            return <KoFi key={type} />;
           }
         })}
       </HStack>
@@ -61,12 +56,8 @@ const Buttons = (): JSX.Element => {
             );
           }
 
-          if (type === "patreon") {
-            return <Patreon key={type} />;
-          }
-
-          if (type === "twitter") {
-            return <Twitter key={type} />;
+          if (type === "ko-fi") {
+            return <KoFi key={type} />;
           }
         })}
       </VStack>

src/components/calender/CalenderNav.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useAppSelector } from "../../app/hooks";
+import { useAppSelector } from "../../redux/hooks";
 import { useRouter } from "next/router";
 import { HStack, IconButton } from "@chakra-ui/react";
 import { Icon } from "@iconify/react";

src/components/calender/DatePicker.tsx

@@ -256,7 +256,8 @@ const DatePicker = ({ title, isLoading }: DatePickerProps): JSX.Element => {
                             )}
                           </HStack>
                           <FormErrorMessage>
-                            {form.errors.date}
+                            {typeof form.errors.date === "string" &&
+                              form.errors.date}
                           </FormErrorMessage>
                         </VStack>
                       </FormControl>

src/components/calender/Day.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Provider } from "react-redux";
-import { store } from "../../app/store";
+import { store } from "../../redux/store";
 import { Box, Skeleton, VStack } from "@chakra-ui/react";
 import {
   add,
@@ -137,10 +137,10 @@ const Day = ({
           ? tutorial === "add" && isToday
             ? "gray.600"
             : tutorial === "edit" &&
-              !isToday &&
-              isBefore(currDateObj, endOfDay(currDate))
-            ? "gray.600"
-            : "transparent"
+                !isToday &&
+                isBefore(currDateObj, endOfDay(currDate))
+              ? "gray.600"
+              : "transparent"
           : "transparent"
       }
       border={
@@ -148,10 +148,10 @@ const Day = ({
           ? tutorial === "add" && isToday
             ? "1px solid #00ff3c"
             : tutorial === "edit" &&
-              !isToday &&
-              isBefore(currDateObj, endOfDay(currDate))
-            ? "1px solid #00ff3c"
-            : "1px solid #0068ff"
+                !isToday &&
+                isBefore(currDateObj, endOfDay(currDate))
+              ? "1px solid #00ff3c"
+              : "1px solid #0068ff"
           : "1px solid #0068ff"
       }
       onClick={() => {
@@ -170,10 +170,10 @@ const Day = ({
           ? tutorial === "add" && isToday
             ? "gray.600"
             : tutorial === "edit" &&
-              !isToday &&
-              isBefore(currDateObj, endOfDay(currDate))
-            ? "gray.600"
-            : "transparent"
+                !isToday &&
+                isBefore(currDateObj, endOfDay(currDate))
+              ? "gray.600"
+              : "transparent"
           : "transparent",
         border: "1px solid #FFF"
       }}

src/components/calender/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { updateCurrDate, updateMonth } from "../../features/calender";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { isSameDay, format } from "date-fns";

src/components/calender/modals/AddUpdateSticker.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef } from "react";
-import { useAppDispatch } from "../../../app/hooks";
+import { useAppDispatch } from "../../../redux/hooks";
 import { addEditSticker } from "../../../features/calender/stickers";
 import {
   Button,

src/components/tutorial/CalenderExample.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import { updateMonth } from "../../features/calender";
 import { Box, HStack, SimpleGrid, Text, VStack } from "@chakra-ui/react";
 import { format, isSameDay, isToday } from "date-fns";

src/components/tutorial/sections/TutorialSubmitButtons.tsx

@@ -1,6 +1,6 @@
 import { HStack, Button, VStack, Checkbox } from "@chakra-ui/react";
 import React from "react";
-import { useAppDispatch, useAppSelector } from "../../../app/hooks";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
 import {
   setTutorialCompleted,
   setTempTutorialComplete,

src/features/calender/stickers.ts

@@ -35,8 +35,8 @@ const stickersSlice = createSlice({
       const edited = currSticker.edited
         ? true
         : isSameDay(new Date(stickerDate), new Date())
-        ? false
-        : true;
+          ? false
+          : true;
       currSticker.edited = edited;
 
       // TODO: Add manually added here.

src/pages/_app.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { ChakraProvider } from "@chakra-ui/react";
 import AppTheme from "../theme/AppTheme";
 import { Provider } from "react-redux";
-import { store } from "../app/store";
+import { store } from "../redux/store";
 import Layout from "../theme/layout/Layout";
 import Head from "next/head";
 

src/pages/calendar/[...date].tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Provider } from "react-redux";
-import { store } from "../../app/store";
+import { store } from "../../redux/store";
 import { Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import {

src/pages/index.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useRef } from "react";
 import { Provider } from "react-redux";
-import { store } from "../app/store";
-import { useAppDispatch, useAppSelector } from "../app/hooks";
+import { store } from "../redux/store";
+import { useAppDispatch, useAppSelector } from "../redux/hooks";
 import { updateLoading } from "../features/calender";
 import {
   clearTutorialCompleted,

src/theme/AppTheme.ts

@@ -29,7 +29,7 @@ const AppTheme = extendTheme({
       footer: "#0097a7",
       footerText: "black",
       content: "#2d3748",
-      patreon: "#FF424D",
+      kofi: "#FF5E5B",
       twitter: "#1da1f2"
     },
     loading: {

src/theme/components/buttonStyles.ts

@@ -1,10 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import {
-  darken,
-  mode,
-  StyleFunctionProps,
-  whiten
-} from "@chakra-ui/theme-tools";
+import { darken, mode, whiten } from "@chakra-ui/theme-tools";
 import { Dict } from "@chakra-ui/utils";
 
 const buttonStyles = {
@@ -14,7 +9,7 @@ const buttonStyles = {
   sizes: {},
   // styles for different visual variants ("outline", "solid")
   variants: {
-    primary: (props: Dict<never> | StyleFunctionProps) => ({
+    primary: (props: Dict<never>) => ({
       bg: "brand.primary",
       fontSize: "xl",
       py: 3,
@@ -27,7 +22,7 @@ const buttonStyles = {
         )(props)
       }
     }),
-    secondary: (props: Dict<never> | StyleFunctionProps) => ({
+    secondary: (props: Dict<never>) => ({
       bg: "brand.secondary",
       fontSize: "xl",
       py: 3,
@@ -40,7 +35,7 @@ const buttonStyles = {
         )(props)
       }
     }),
-    skip: (props: Dict<never> | StyleFunctionProps) => ({
+    skip: (props: Dict<never>) => ({
       bg: "transparent",
       fontSize: "xl",
       py: 3,
@@ -51,7 +46,7 @@ const buttonStyles = {
         color: "whiteAlpha.900"
       }
     }),
-    stickerButton: (props: Dict<never> | StyleFunctionProps) => ({
+    stickerButton: (props: Dict<never>) => ({
       bg: "transparent",
       fontSize: "4rem",
       px: 2,
@@ -63,7 +58,7 @@ const buttonStyles = {
         )(props)
       }
     }),
-    nav: (props: Dict<never> | StyleFunctionProps) => ({
+    nav: (props: Dict<never>) => ({
       bg: "transparent",
       fontSize: "md",
       px: 2,
@@ -82,7 +77,7 @@ const buttonStyles = {
         textDecoration: "underline"
       }
     }),
-    footer: (props: Dict<never> | StyleFunctionProps) => ({
+    footer: (props: Dict<never>) => ({
       bg: "brand.main",
       fontSize: "lg",
       py: 3,
@@ -92,7 +87,7 @@ const buttonStyles = {
         bg: mode(whiten("brand.main", 20), darken("brand.main", 20))(props)
       }
     }),
-    backToTop: (props: Dict<never> | StyleFunctionProps) => ({
+    backToTop: (props: Dict<never>) => ({
       bg: "rgba(23, 25, 35, 0.5)",
       fontSize: "lg",
       py: 2,
@@ -112,7 +107,7 @@ const buttonStyles = {
         border: "1px solid rgba(0, 134, 255, 1)"
       }
     }),
-    submit: (props: Dict<never> | StyleFunctionProps) => ({
+    submit: (props: Dict<never>) => ({
       fontSize: "lg",
       py: 2,
       px: 4,
@@ -131,7 +126,7 @@ const buttonStyles = {
         }
       }
     }),
-    mobileNav: (props: Dict<never> | StyleFunctionProps) => ({
+    mobileNav: (props: Dict<never>) => ({
       // bg: "transparent",
       fontSize: "md",
       px: 2,
@@ -152,19 +147,16 @@ const buttonStyles = {
         border: "1px solid #0068ff"
       }
     }),
-    patreon: (props: Dict<never> | StyleFunctionProps) => ({
-      bg: "brand.patreon",
+    kofi: (props: Dict<never>) => ({
+      bg: "brand.kofi",
       fontSize: "lg",
       p: 3,
       color: "whiteAlpha",
       _hover: {
-        bg: mode(
-          whiten("brand.patreon", 20),
-          darken("brand.patreon", 20)
-        )(props)
+        bg: mode(whiten("brand.kofi", 20), darken("brand.kofi", 20))(props)
       }
     }),
-    twitter: (props: Dict<never> | StyleFunctionProps) => ({
+    twitter: (props: Dict<never>) => ({
       bg: "brand.twitter",
       fontSize: "lg",
       py: 3,

src/theme/layout/Footer.tsx

@@ -1,48 +1,9 @@
 import React /*, { useEffect, useRef, useState }*/ from "react";
-import {
-  Box,
-  Text,
-  VStack,
-  Link,
-  // Image,
-  Button,
-  BoxProps
-} from "@chakra-ui/react";
+import { Box, Text, VStack, Link } from "@chakra-ui/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";
 import Buttons from "../../components/buttons";
 
-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} /> */}
@@ -55,21 +16,6 @@ const Footer = (): JSX.Element => {
         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> */}
           <Buttons />
           <Text color="brand.footerText" fontSize="xs">
             &copy;

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"
@@ -115,7 +115,7 @@ const Header = (): JSX.Element => {
           cursor: "default"
         }}
       >
-        <Image height="30px" width="30px" src={appLogo} alt="App Logo" />
+        <Image height="30" width="30" src={appLogo} alt="App Logo" />
 
         <Heading as="h1" size="md">
           {appName}
@@ -150,7 +150,7 @@ const Header = (): JSX.Element => {
                 cursor: "default"
               }}
             >
-              <Image height="30px" width="30px" src={appLogo} alt="App Logo" />
+              <Image height="30" width="30" src={appLogo} alt="App Logo" />
               <Heading as="h1" size="md">
                 {appName}
               </Heading>