migrate assets to chakra UI #9406
Conversation
MrJithil
requested review from
corwintines,
jmcook1186,
minimalsm,
pettinarip,
samajammin and
wackerow
as code owners
github-actions
bot
added
content 🖋️
MrJithil
force-pushed
the
migrate-to-chakraui-assets
branch
3 times, most recently
from
41df937 to
3644517
Compare
✅ ethereum-org-website-dev deploy preview ready
|
There was a problem hiding this comment.
Thanks for the PR @MrJithil 💪🏼
There are some margin difference of Hero Container. I am not sure, whether we need to customise it each page, or we are following the new Chakra design. Please comment after checking the PR website deployment.
What we try to achieve at this stage is to just migrate the existing emotion components to Chakra components, keeping the same styles we had. So, in theory, we should see the exact same page we currently have in production (same styles).
Later, when we implement our new Design System, our plan is to consolidate a lot of these repeated components that we have across different layouts/pages.
src/pages/assets.tsx
Outdated
| // Libraries | ||
| import React from "react" | ||
| import { useIntl } from "react-intl" | ||
| import { useTheme } from "@emotion/react" |
There was a problem hiding this comment.
We should use this anymore. Use the chakra one pls.
src/pages/assets.tsx
Outdated
| margin: 2rem; | ||
| } | ||
| ` | ||
| import { Box, Center, Flex, Heading, Img, VStack } from "@chakra-ui/react" |
There was a problem hiding this comment.
Import order. Lets put 3rd party imports at the top.
| /> | ||
| <Content> | ||
| <HeroContainer> | ||
| <Header> |
There was a problem hiding this comment.
We are missing this Header styles.
src/pages/assets.tsx
Outdated
| : data.ethDiamondBlackHero | ||
| return ( | ||
| <Page> | ||
| <Flex direction={"column"} width="full"> |
There was a problem hiding this comment.
To follow conventions, lets not wrap the value if it is a string literal (this applies also to the rest of the changes).
| <Flex direction={"column"} width="full"> | |
| <Flex direction="column" width="full"> |
src/pages/assets.tsx
Outdated
| <HeroContainer> | ||
| <Header> | ||
| <Image | ||
| <Box padding={"1rem 2rem"}> |
There was a problem hiding this comment.
To follow conventions, lets use as much as we can, chakra values. You can see them here.
| <Box padding={"1rem 2rem"}> | |
| <Box py={4} px={8}> |
src/pages/assets.tsx
Outdated
| <Header> | ||
| <Image | ||
| <Box padding={"1rem 2rem"}> | ||
| <Flex direction={"column"} margin="2rem 0rem"> |
There was a problem hiding this comment.
| <Flex direction={"column"} margin="2rem 0rem"> | |
| <Flex direction="column" my={8}> |
| image={getImage(assetPageHeroImage)!} | ||
| as={GatsbyImage} |
There was a problem hiding this comment.
| image={getImage(assetPageHeroImage)!} | |
| as={GatsbyImage} | |
| as={GatsbyImage} | |
| image={getImage(assetPageHeroImage)!} |
src/pages/assets.tsx
Outdated
| artistUrl="https://cargocollective.com/willtempest" | ||
| /> | ||
| </Row> | ||
| <Flex> |
There was a problem hiding this comment.
Row has more styles that are missing here for mobile responsiveness.
MrJithil
force-pushed
the
migrate-to-chakraui-assets
branch
from
3644517 to
d0bf693
Compare
There was a problem hiding this comment.
Thanks @MrJithil
I've unified the Row components and add some missing styles on the headings.
|
Thank You. |
3 participants
Migrating the assets to Chakra UI
Description
There are some margin difference of Hero Container. I am not sure, whether we need to customise it each page, or we are following the new Chakra design. Please comment after checking the PR website deployment.
Related Issue
#9353