Skip to content

refactor(footer): migrate component to Chakra #8506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 18, 2022
Merged

refactor(footer): migrate component to Chakra #8506

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2a32b66
refactor(footer): migrate component to Chakra
TylerAPfledderer Nov 5, 2022
b261382
fix(footer): switch `useToken` value to "md"
TylerAPfledderer Nov 10, 2022
353a6ce
fix(footer): remove unneeded `:after` pseudo style
TylerAPfledderer Nov 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 76 additions & 120 deletions src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,22 @@
import {
Box,
Flex,
Heading,
Icon,
List,
ListItem,
SimpleGrid,
useToken,
} from "@chakra-ui/react"
import { graphql, StaticQuery } from "gatsby"
import React from "react"
import styled from "@emotion/styled"
import { FaGithub, FaTwitter, FaYoutube, FaDiscord } from "react-icons/fa"
import { useIntl } from "react-intl"
import { StaticQuery, graphql } from "gatsby"
import { Icon } from "@chakra-ui/react"
import { FaDiscord, FaGithub, FaTwitter, FaYoutube } from "react-icons/fa"

import { Lang } from "../utils/languages"
import { getLocaleTimestamp } from "../utils/time"
import Translation from "./Translation"
import Link from "./Link"
import { isLangRightToLeft, TranslationKey } from "../utils/translations"
import { Lang } from "../utils/languages"

const StyledFooter = styled.footer`
padding-top: 3rem;
padding-bottom: 4rem;
padding: 1rem 2rem;
`

const FooterTop = styled.div`
font-size: ${(props) => props.theme.fontSizes.s};
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
`

const LastUpdated = styled.div`
color: ${(props) => props.theme.colors.text200};
`

const LinkGrid = styled.div`
display: grid;
grid-template-columns: repeat(6, auto);
grid-gap: 1rem;
justify-content: space-between;
@media (max-width: 1300px) {
grid-template-columns: repeat(3, auto);
}
@media (max-width: ${(props) => props.theme.breakpoints.m}) {
grid-template-columns: repeat(2, auto);
}
@media (max-width: 500px) {
grid-template-columns: auto;
}
`

const LinkSection = styled.div``

const SectionHeader = styled.h3`
font-size: 0.875rem;
line-height: 1.6;
margin: 1.14em 0;
font-weight: bold;
`

const List = styled.ul`
font-size: 0.875rem;
line-height: 1.6;
font-weight: 400;
margin: 0;
list-style-type: none;
list-style-image: none;
`

const ListItem = styled.li`
margin-bottom: 1rem;
`

const FooterLink = styled(Link)`
text-decoration: none;
color: ${(props) => props.theme.colors.text200};
svg {
fill: ${(props) => props.theme.colors.text200};
}
&:after {
color: ${(props) => props.theme.colors.text200};
}
Comment on lines -76 to -78
Copy link
Contributor Author

@TylerAPfledderer TylerAPfledderer Nov 10, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pettinarip This was the culprit to the missing external icons when applied with Chakra. The object created with the __after prop on the Link component was overriding the styling applied within the component

This wasn't needed anyway because the pseudo inherits color from the parent element.

&:hover {
text-decoration: none;
color: ${(props) => props.theme.colors.primary};
&:after {
color: ${(props) => props.theme.colors.primary};
}
svg {
fill: ${(props) => props.theme.colors.primary};
}
}
`

const SocialIcons = styled.div`
margin: 1rem 0;
`
const SocialIcon = styled(Icon)`
Copy link
Contributor Author

@TylerAPfledderer TylerAPfledderer Nov 5, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SocialIcon was unused and therefore not kept in the migration

margin-left: 1rem;
width: 2rem;

@media (max-width: ${(props) => props.theme.breakpoints.s}) {
margin-left: 0;
margin-right: 0.5rem;
}
`
import Link from "./Link"
import Translation from "./Translation"

const socialLinks = [
{
Expand Down Expand Up @@ -140,6 +57,8 @@ const Footer: React.FC<IProps> = () => {

const isPageRightToLeft = isLangRightToLeft(intl.locale as Lang)

const [medBp] = useToken("breakpoints", ["md"])

const linkSections: Array<LinkSection> = [
{
title: "use-ethereum",
Expand Down Expand Up @@ -372,54 +291,91 @@ const Footer: React.FC<IProps> = () => {
}
`}
render={(data) => (
<StyledFooter>
<FooterTop>
<LastUpdated>
<Box as="footer" p="1rem 2rem">
<Flex
fontSize="sm"
justify="space-between"
alignItems="center"
flexWrap="wrap"
>
<Box color="text200">
<Translation id="website-last-updated" />:{" "}
{getLocaleTimestamp(
intl.locale as Lang,
data.allSiteBuildMetadata.edges[0].node.buildTime
)}
</LastUpdated>
<SocialIcons>
{socialLinks.map((link, idx) => {
</Box>
<Box my={4}>
{socialLinks.map((link, idk) => {
return (
<Link
key={idx}
key={idk}
to={link.to}
hideArrow={true}
hideArrow
color="secondary"
aria-label={link.ariaLabel}
>
<Icon as={link.icon} fontSize="4xl" ml={4} />
</Link>
)
})}
</SocialIcons>
</FooterTop>
<LinkGrid>
</Box>
</Flex>
<SimpleGrid
gap={4}
justifyContent="space-between"
gridTemplateColumns="repeat(6, auto)"
sx={{
"@media (max-width: 1300px)": {
gridTemplateColumns: "repeat(3, auto)",
},
[`@media (max-width: ${medBp})`]: {
gridTemplateColumns: "repeat(2, auto)",
},
"@media (max-width: 500px)": {
gridTemplateColumns: "auto",
},
}}
>
{linkSections.map((section: LinkSection, idx) => (
<LinkSection key={idx}>
<SectionHeader>
<Box key={idx}>
<Heading as="h3" fontSize="sm" lineHeight="1.6" my="1.14em">
<Translation id={section.title} />
</SectionHeader>
<List>
</Heading>
<List fontSize="sm" lineHeight="1.6" fontWeight="400" m={0}>
{section.links.map((link, linkIdx) => (
<ListItem key={linkIdx}>
<FooterLink
dir={isPageRightToLeft ? "auto" : "ltr"}
<ListItem key={linkIdx} mb={4}>
<Link
to={link.to}
isPartiallyActive={false}
dir={isPageRightToLeft ? "auto" : "ltr"}
textDecor="none"
color="text200"
_hover={{
textDecor: "none",
color: "primary",
_after: {
color: "primary",
},
"& svg": {
fill: "primary",
},
}}
sx={{
"& svg": {
fill: "text200",
},
}}
>
<Translation id={link.text} />
</FooterLink>
</Link>
</ListItem>
))}
</List>
</LinkSection>
</Box>
))}
</LinkGrid>
</StyledFooter>
</SimpleGrid>
</Box>
)}
/>
)
Expand Down