refactor(footer): migrate component to Chakra #8506
Conversation
TylerAPfledderer
requested review from
corwintines,
jmcook1186,
minimalsm,
pettinarip,
samajammin and
wackerow
as code owners
src/components/Footer.tsx
Outdated
|
|
||
| const isPageRightToLeft = isLangRightToLeft(intl.locale as Lang) | ||
|
|
||
| const [smallBp] = useToken("breakpoints", ["sm"]) |
There was a problem hiding this comment.
See comment below at line 328
| sx={{ | ||
| "@media (max-width: 1300px)": { | ||
| gridTemplateColumns: "repeat(3, auto)", | ||
| }, | ||
| [`@media (max-width: ${smallBp})`]: { | ||
| gridTemplateColumns: "repeat(2, auto)", | ||
| }, | ||
| "@media (max-width: 500px)": { | ||
| gridTemplateColumns: "auto", | ||
| }, | ||
| }} |
There was a problem hiding this comment.
Because some of the breakpoints used are not part of the theme config, there is not a concise way in handling the change of value in Chakra.
useToken at line 60 is used to retrieve the correct breakpoint value for sm so it can be interpolated here.
| const SocialIcons = styled.div` | ||
| margin: 1rem 0; | ||
| ` | ||
| const SocialIcon = styled(Icon)` |
There was a problem hiding this comment.
SocialIcon was unused and therefore not kept in the migration
✅ ethereum-org-website-dev deploy preview ready
|
|
Thanks for the PR @TylerAPfledderer :-) we'll try to get to reviewing this soon. |
There was a problem hiding this comment.
Nice job @TylerAPfledderer.
For some reason, I don't see the little arrows on the external links. I couldn't realize yet why it is happening. Could take a closer look later if you can't figure it out.
src/components/Footer.tsx
Outdated
|
|
||
| const isPageRightToLeft = isLangRightToLeft(intl.locale as Lang) | ||
|
|
||
| const [smallBp] = useToken("breakpoints", ["sm"]) |
There was a problem hiding this comment.
I agree with this but I think this should be md instead of sm
| const [smallBp] = useToken("breakpoints", ["sm"]) | |
| const [mediumBp] = useToken("breakpoints", ["md"]) |
@pettinarip I did notice that and wonder if it's something that only appears during build. I never checked that out but will take a look asap! 😄 |
| &:after { | ||
| color: ${(props) => props.theme.colors.text200}; | ||
| } |
There was a problem hiding this comment.
@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.
There was a problem hiding this comment.
That's awesome @TylerAPfledderer thanks for looking into that problem with the arrow as well :)
3 participants
Description
Migrate
Footercomponent to ChakraRelated Issue
#6374