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
This commit is contained in:
Emi Matchu 2020-09-20 20:10:26 -07:00
parent 34112b30df
commit c52b5f0039

View file

@ -3,31 +3,51 @@ import {
Box, Box,
IconButton, IconButton,
HStack, HStack,
Link as ChakraLink,
Tooltip, Tooltip,
useColorMode, useColorMode,
} from "@chakra-ui/core"; } from "@chakra-ui/core";
import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons"; import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
import { SiGithub } from "react-icons/si"; import { SiGithub } from "react-icons/si";
import { useRouteMatch } from "react-router-dom";
function GlobalFooter() { function GlobalFooter() {
const classicDTIUrl = useClassicDTIUrl();
return ( return (
<Box as="footer" display="flex" alignItems="flex-start">
<Box <Box
as="footer" // This empty box grows at the same rate as the box on the right, so
display="flex" // the middle box will be centered, if there's space!
alignItems="center" flex="1 0 0"
justifyContent="flex-end" />
> <Box textAlign="center" fontSize="xs">
<Box textAlign="center" fontSize="xs" opacity="0.75"> <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 Images © 2000{new Date().getFullYear()} Neopets, Inc. All Rights
Reserved. Used With Permission. Reserved. Used With Permission.
</Box> </Box>
</Box>
<HStack <HStack
flex="1 0 0"
spacing="2" spacing="2"
marginLeft="3" marginLeft="3"
justifyContent="flex-end"
opacity="0.75" opacity="0.75"
transition="opacity 0.2s" transition="opacity 0.2s"
_hover={{ opacity: "1" }} _hover={{ opacity: "1" }}
_focusWithin={{ 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"> <Tooltip label="Email">
<IconButton <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; export default GlobalFooter;