From abda9e4687eda872c8dc26dcd302353f0a498f77 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sat, 19 Sep 2020 22:10:52 -0700
Subject: [PATCH] add a footer, move the dark/light toggle to it

---
 package.json            |  1 +
 src/app/GlobalFooter.js | 75 +++++++++++++++++++++++++++++++++++++++++
 src/app/GlobalNavBar.js | 51 +++++++---------------------
 src/app/PageLayout.js   | 16 +++++++--
 yarn.lock               |  7 ++++
 5 files changed, 109 insertions(+), 41 deletions(-)
 create mode 100644 src/app/GlobalFooter.js

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 (
+    <Box
+      as="footer"
+      display="flex"
+      alignItems="center"
+      justifyContent="flex-end"
+    >
+      <Box textAlign="center" fontSize="xs" opacity="0.75">
+        Images © 2000–{new Date().getFullYear()} Neopets, Inc. All Rights
+        Reserved. Used With Permission.
+      </Box>
+      <HStack
+        spacing="2"
+        marginLeft="3"
+        opacity="0.75"
+        transition="opacity 0.2s"
+        _hover={{ opacity: "1" }}
+        _focusWithin={{ opacity: "1" }}
+      >
+        <Tooltip label="Email">
+          <IconButton
+            as="a"
+            href="mailto:matchu@openneo.net"
+            size="sm"
+            variant="outline"
+            aria-label="Email"
+            icon={<EmailIcon />}
+          />
+        </Tooltip>
+        <Tooltip label="GitHub">
+          <IconButton
+            as="a"
+            href="https://github.com/matchu/impress-2020"
+            size="sm"
+            variant="outline"
+            aria-label="GitHub"
+            icon={<SiGithub />}
+          />
+        </Tooltip>
+        <ColorModeButton />
+      </HStack>
+    </Box>
+  );
+}
+
+function ColorModeButton() {
+  const { colorMode, toggleColorMode } = useColorMode();
+  const label = colorMode === "light" ? "Dark mode" : "Light mode";
+
+  return (
+    <Tooltip label={label}>
+      <IconButton
+        size="sm"
+        variant="outline"
+        aria-label={label}
+        icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+        onClick={toggleColorMode}
+      />
+    </Tooltip>
+  );
+}
+
+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 (
     <Menu>
       <MenuButton as={NavButton} icon={<HamburgerIcon />} />
       <MenuList fontSize="sm">
+        <MenuItem as={Link} to="/">
+          Home
+        </MenuItem>
         <MenuItem as={Link} to="/modeling">
           Modeling
         </MenuItem>
-        <MenuItem onClick={toggleColorMode}>
-          {colorMode === "light" ? (
-            <Box display="flex" alignItems="center">
-              <Box>Dark mode</Box>
-              <MoonIcon marginLeft="2" />
-            </Box>
-          ) : (
-            <Box display="flex" alignItems="center">
-              <Box>Light mode</Box>
-              <SunIcon marginLeft="2" />
-            </Box>
-          )}
-        </MenuItem>
       </MenuList>
     </Menu>
   );
 }
 
 function NavButtons() {
-  const { colorMode, toggleColorMode } = useColorMode();
-
   return (
-    <>
-      <NavButton as={Link} to="/modeling">
-        Modeling
-      </NavButton>
-      <NavButton
-        size="sm"
-        variant="outline"
-        aria-label={
-          colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
-        }
-        icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
-        onClick={toggleColorMode}
-      />
-    </>
+    <NavButton as={Link} to="/modeling">
+      Modeling
+    </NavButton>
   );
 }
 
@@ -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 (
-    <Box opacity="0.8" _hover={{ opacity: "1" }} _focus={{ opacity: "1" }}>
+    <Box
+      opacity="0.8"
+      _hover={{ opacity: "1" }}
+      _focusWithin={{ opacity: "1" }}
+    >
       <Component size="sm" variant="outline" icon={icon} ref={ref} {...props} />
     </Box>
   );
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 (
-    <Box padding="6" paddingTop="3" maxWidth="1024px" margin="0 auto">
+    <Box
+      paddingX="6"
+      paddingY="3"
+      maxWidth="1024px"
+      margin="0 auto"
+      minHeight="100vh"
+      display="flex"
+      flexDirection="column"
+    >
       <Box
         width="100%"
         marginBottom="6"
@@ -15,7 +24,10 @@ function PageLayout({ children }) {
       >
         <GlobalNavBar />
       </Box>
-      {children}
+      <Box flex="1 0 0">{children}</Box>
+      <Box width="100%" marginTop="12">
+        <GlobalFooter />
+      </Box>
     </Box>
   );
 }
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"