update footer design, add links

notable layout change is that the text content will now try to center itself, and we push the buttons off to the right. we also needed to tweak the layout code a bit to get the buttons to feel centered with the top two lines, bc centering against the full block just feels wrong, they want to be top-y in terms of positioning, but still feel centered-y in terms of visual balance

src/app/GlobalFooter.js

@@ -3,31 +3,51 @@ import {
   Box,
   IconButton,
   HStack,
+  Link as ChakraLink,
   Tooltip,
   useColorMode,
 } from "@chakra-ui/core";
 import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
 import { SiGithub } from "react-icons/si";
+import { useRouteMatch } from "react-router-dom";
 
 function GlobalFooter() {
+  const classicDTIUrl = useClassicDTIUrl();
+
   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 as="footer" display="flex" alignItems="flex-start">
+      <Box
+        // This empty box grows at the same rate as the box on the right, so
+        // the middle box will be centered, if there's space!
+        flex="1 0 0"
+      />
+      <Box textAlign="center" fontSize="xs">
+        <HStack spacing="4" justifyContent="center">
+          <ChakraLink href="https://impress.openneo.net/terms">
+            Terms of Use
+          </ChakraLink>
+          <ChakraLink href={classicDTIUrl}>Classic DTI</ChakraLink>
+        </HStack>
+        <Box as="p" opacity="0.75">
+          Images © 2000–{new Date().getFullYear()} Neopets, Inc. All Rights
+          Reserved. Used With Permission.
+        </Box>
       </Box>
       <HStack
+        flex="1 0 0"
         spacing="2"
         marginLeft="3"
+        justifyContent="flex-end"
         opacity="0.75"
         transition="opacity 0.2s"
         _hover={{ opacity: "1" }}
         _focusWithin={{ opacity: "1" }}
+        // This will center our content against the top two lines of text to
+        // our left, which ends up feeling like the right visual balance, even
+        // when the text wraps to 3 lines on mobile.
+        // 2 lines at 1.5 line height = 3em.
+        fontSize="xs"
+        minHeight="3em"
       >
         <Tooltip label="Email">
           <IconButton
@@ -72,4 +92,26 @@ function ColorModeButton() {
   );
 }
 
+function useClassicDTIUrl() {
+  const itemPageMatch = useRouteMatch("/items/:itemId");
+  const userItemsPageMatch = useRouteMatch("/user/:userId/items");
+  const modelingPageMatch = useRouteMatch("/modeling");
+
+  if (itemPageMatch) {
+    const { itemId } = itemPageMatch.params;
+    return `https://impress.openneo.net/items/${itemId}`;
+  }
+
+  if (userItemsPageMatch) {
+    const { userId } = userItemsPageMatch.params;
+    return `https://impress.openneo.net/user/${userId}/closet`;
+  }
+
+  if (modelingPageMatch) {
+    return "https://impress.openneo.net/modeling";
+  }
+
+  return "https://impress.openneo.net/";
+}
+
 export default GlobalFooter;