diff --git a/package.json b/package.json
index 473301c..c6d7cff 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
"react": "^16.13.1",
"react-autosuggest": "^10.0.2",
"react-dom": "^16.13.1",
+ "react-icons": "^3.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-transition-group": "^4.3.0"
diff --git a/src/app/GlobalFooter.js b/src/app/GlobalFooter.js
new file mode 100644
index 0000000..7b0ae44
--- /dev/null
+++ b/src/app/GlobalFooter.js
@@ -0,0 +1,75 @@
+import React from "react";
+import {
+ Box,
+ IconButton,
+ HStack,
+ Tooltip,
+ useColorMode,
+} from "@chakra-ui/core";
+import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
+import { SiGithub } from "react-icons/si";
+
+function GlobalFooter() {
+ return (
+
+
+ Images © 2000–{new Date().getFullYear()} Neopets, Inc. All Rights
+ Reserved. Used With Permission.
+
+
+
+ }
+ />
+
+
+ }
+ />
+
+
+
+
+ );
+}
+
+function ColorModeButton() {
+ const { colorMode, toggleColorMode } = useColorMode();
+ const label = colorMode === "light" ? "Dark mode" : "Light mode";
+
+ return (
+
+ : }
+ onClick={toggleColorMode}
+ />
+
+ );
+}
+
+export default GlobalFooter;
diff --git a/src/app/GlobalNavBar.js b/src/app/GlobalNavBar.js
index 7fec604..3948d54 100644
--- a/src/app/GlobalNavBar.js
+++ b/src/app/GlobalNavBar.js
@@ -9,16 +9,10 @@ import {
MenuItem,
MenuList,
useBreakpointValue,
- useColorMode,
} from "@chakra-ui/core";
import { Link, useLocation } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
-import {
- ChevronLeftIcon,
- HamburgerIcon,
- MoonIcon,
- SunIcon,
-} from "@chakra-ui/icons";
+import { ChevronLeftIcon, HamburgerIcon } from "@chakra-ui/icons";
import useCurrentUser from "./components/useCurrentUser";
@@ -130,51 +124,26 @@ function UserNavBarSection() {
}
function NavMenu() {
- const { colorMode, toggleColorMode } = useColorMode();
-
return (
);
}
function NavButtons() {
- const { colorMode, toggleColorMode } = useColorMode();
-
return (
- <>
-
- Modeling
-
- : }
- onClick={toggleColorMode}
- />
- >
+
+ Modeling
+
);
}
@@ -184,7 +153,11 @@ const NavButton = React.forwardRef(({ icon, ...props }, ref) => {
// Opacity is in a separate Box, to avoid overriding the built-in Button
// hover/focus states.
return (
-
+
);
diff --git a/src/app/PageLayout.js b/src/app/PageLayout.js
index 767f05e..2a426aa 100644
--- a/src/app/PageLayout.js
+++ b/src/app/PageLayout.js
@@ -3,10 +3,19 @@ import { Box } from "@chakra-ui/core";
import loadable from "@loadable/component";
const GlobalNavBar = loadable(() => import("./GlobalNavBar"));
+const GlobalFooter = loadable(() => import("./GlobalFooter"));
function PageLayout({ children }) {
return (
-
+
- {children}
+ {children}
+
+
+
);
}
diff --git a/yarn.lock b/yarn.lock
index 83c448a..89af647 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11316,6 +11316,13 @@ react-focus-lock@2.4.1:
use-callback-ref "^1.2.1"
use-sidecar "^1.0.1"
+react-icons@^3.11.0:
+ version "3.11.0"
+ resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
+ integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
+ dependencies:
+ camelcase "^5.0.0"
+
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"