refactor(page staking): replace styled components with chakra ui #9398
Conversation
mlCode111
changed the title
mlCode111
changed the title
✅ ethereum-org-website-dev deploy preview ready
|
mlCode111
requested review from
samajammin,
wackerow,
corwintines,
pettinarip,
minimalsm and
jmcook1186
as code owners
There was a problem hiding this comment.
Good start on this one @mlCode111 thanks for the PR!
As part of this migration, we also want to remove the SharedStyledComponents dependency. As you will see, a bunch of components are imported from there (Page, Content, etc). We need to migrate those as well.
src/pages/staking/index.tsx
Outdated
| import { Box, Flex, Grid, Heading } from "@chakra-ui/react" | ||
| import theme from "../../@chakra-ui/gatsby-plugin/theme" |
There was a problem hiding this comment.
import order
3rd party imports need to be at the top of the imports, along with react and react-intl
There was a problem hiding this comment.
Thanks. I updated this in the new commit
src/pages/staking/index.tsx
Outdated
| return ( | ||
| <Flex | ||
| flex="1 1" | ||
| flexBasis={theme.breakpoints.md} |
There was a problem hiding this comment.
Lets use the following form to access the breakpoint value:
import { useToken } from "@chakra-ui/react"
const ContentContainer = props => {
const mdBp = useToken("breakpoints", "md")
...
}There was a problem hiding this comment.
Also updated in the new commit.
|
Just realized there is also merge conflicts. LMK in case you have problems fixing those :) |
mlCode111
force-pushed
the
mlCode111/refactor/page-staking-to-chakra
branch
from
e16f237 to
418a6e3
Compare
There was a problem hiding this comment.
Thanks so much for this PR @mlCode111! 🎉
I've refactored a few things on the button dropdown to simplify it a bit.
Be sure to join the discord if you are interested in contributing further to the project or have any questions for the team. And we've just released our 2022 POAPs so remember to claim yours also 🥳!
|
Congrats, your important contribution to this open-source project has earned you a GitPOAP! Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team. GitPOAP: 2023 Ethereum.org Contributor: Head to gitpoap.io & connect your GitHub account to mint! Learn more about GitPOAPs here. |
|
@all-contributors please add @mlCode111 for code |
|
I've put up a pull request to add @mlCode111! 🎉 |
Description
This PR replaces styled components with Chakra ui components in page/staking/index.tsx
Related Issue
#9353