[UI] Stablecoin Box Grid: migrate component to chakra UI #8201

shariqanwar20 · 2022-10-07T14:45:14Z

Description

The component has been migrated to chakra UI
The emotion styled component has been removed from the code

Facing issue in centering Cash Emoji when screen size is decreased
Each emotion component is replaced with inline style attributes using chakra UI
Media queries have been handled using breakpoints in chakra

Before

After

Related Issue

Refs: #6374

gatsby-cloud · 2022-10-07T15:22:07Z

✅ ethereum-org-website-dev deploy preview ready

Deploy preview
Build logs · 20m build time

TylerAPfledderer

Hey @shariqanwar20! Nice work! I had a chance to look through your PR and left some comments. 😃

I think there are many spots where reusable child components should be recreated (Like what was originally labeled Subtitle, Row, Column, etc. to make sure the code is DRY. 😸

TylerAPfledderer · 2022-10-23T03:23:05Z

src/components/StablecoinBoxGrid.tsx

+      gridColumnStart={isOpen ? columnNumber : `auto`}
+      color={isOpen ? "black300" : "text"}
+      cursor={isOpen ? `auto` : `pointer`}
+      background={isOpen ? `${color}` : "background"}


For consistency throughout the file, I suggest removing the interpolation around the color prop :)

TylerAPfledderer · 2022-10-23T03:34:40Z

src/components/StablecoinBoxGrid.tsx

+            <Text
+              fontSize={{ base: "2rem", sm: "2.5rem" }}
+              fontWeight={700}
+              marginTop={0}
+            >
+              {title}
+            </Text>


Also needs to be Heading with an h3 similar to the previous.

TylerAPfledderer · 2022-10-23T03:48:55Z

src/components/StablecoinBoxGrid.tsx

+        background: `${isOpen ? color : "ednBackground"}`,
+        transition: `${isOpen ? "auto" : "transform 0.5s"}`,
+        transform: `${isOpen ? "auto" : "skewX(-5deg)"}`,


Interpolation is not needed here in order for the values to be rendered correctly

TylerAPfledderer · 2022-10-23T03:57:40Z

src/components/StablecoinBoxGrid.tsx

+          <Text
+            fontSize={{ base: "2rem", sm: "2.5rem" }}
+            fontWeight={400}
+            marginTop={0}
+          >
+            {title}
+          </Text>


This should be the Heading component, as it is an h3 (needs as='h3') but is currently being rendered as a p.

Additional props are required in the interim to ensure it still renders as the original.

Correct. Lets fix this

TylerAPfledderer · 2022-10-23T04:02:51Z

src/components/StablecoinBoxGrid.tsx

-                <Column>
-                  <Subtitle>
+                <Box w="100%">
+                  <Text


Also should be a Heading with an h4 similar to previous

TylerAPfledderer · 2022-10-23T04:06:27Z

src/components/StablecoinBoxGrid.tsx

-                <Column>
-                  <Subtitle>
+                <Box w="100%">
+                  <Text


Also should be a Heading with an h4 similar to previous

TylerAPfledderer · 2022-10-23T04:06:46Z

src/components/StablecoinBoxGrid.tsx

+            </Flex>
            <div>
-              <Subtitle>
+              <Text


Also should be a Heading with an h4 similar to previous

TylerAPfledderer · 2022-10-23T04:12:04Z

src/components/StablecoinBoxGrid.tsx

+      gridTemplateColumns={"3fr 1fr"}
+      gridTemplateRows={"3fr 3fr"}
+      borderRadius="2px"
+      margin={0}


Should be margin="4rem 0" to have the vertical spacing around the container.

We could just do my={16} in this case to use the chakra spacing values

pettinarip

Good job @shariqanwar20

pettinarip · 2022-10-24T14:18:21Z

src/components/StablecoinBoxGrid.tsx

+          <Text
+            fontSize={{ base: "2rem", sm: "2.5rem" }}
+            fontWeight={400}
+            marginTop={0}
+          >
+            {title}
+          </Text>


Correct. Lets fix this

pettinarip · 2022-10-24T14:18:44Z

src/components/StablecoinBoxGrid.tsx

+            <Text
+              fontSize={{ base: "2rem", sm: "2.5rem" }}
+              fontWeight={700}
+              marginTop={0}
+            >
+              {title}
+            </Text>


pettinarip · 2022-10-24T14:19:01Z

src/components/StablecoinBoxGrid.tsx

+            </Flex>
            <div>
-              <Subtitle>
+              <Text


pettinarip · 2022-10-24T14:21:45Z

src/components/StablecoinBoxGrid.tsx

+      gridTemplateColumns={"3fr 1fr"}
+      gridTemplateRows={"3fr 3fr"}
+      borderRadius="2px"
+      margin={0}


We could just do my={16} in this case to use the chakra spacing values

pettinarip · 2022-10-24T14:22:21Z

src/components/StablecoinBoxGrid.tsx

+    <Container
+      gridTemplateColumns={"3fr 1fr"}
+      gridTemplateRows={"3fr 3fr"}
+      borderRadius="2px"


Suggested change

borderRadius="2px"

borderRadius="sm"

pettinarip · 2022-10-24T14:22:44Z

src/components/StablecoinBoxGrid.tsx

+              <Text
+                fontSize={{ base: "1.5rem", sm: "2rem" }}
+                fontWeight={600}
+                marginTop="0rem"


Suggested change

marginTop="0rem"

marginTop="0"

pettinarip · 2022-10-24T14:22:58Z

src/components/StablecoinBoxGrid.tsx

+                fontSize={{ base: "1.5rem", sm: "2rem" }}
+                fontWeight={600}
+                marginTop="0rem"
+                padding="0.5rem"


Suggested change

padding="0.5rem"

padding={2}

pettinarip · 2022-10-24T14:23:08Z

src/components/StablecoinBoxGrid.tsx

+                fontWeight={600}
+                marginTop="0rem"
+                padding="0.5rem"
+                paddingBottom="1rem"


Suggested change

paddingBottom="1rem"

paddingBottom={4}

shariqanwar20 · 2022-10-31T07:18:46Z

@pettinarip @TylerAPfledderer Thanks for the feedback. I will start working on the changes right away

…and use chakra standard values

pettinarip

Thanks @shariqanwar20! I've pushed some minor fixes but overall this looks great.

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 🥳!

gitpoap-bot · 2022-10-31T16:36:52Z

Congrats, your important contribution to this open-source project has earned you a GitPOAP!

GitPOAP: 2022 Ethereum.org Contributor:

Head to gitpoap.io & connect your GitHub account to mint!

Learn more about GitPOAPs here.

pettinarip · 2022-10-31T16:37:12Z

@all-contributors please add @shariqanwar20 for code

allcontributors · 2022-10-31T16:37:21Z

@pettinarip

I've put up a pull request to add @shariqanwar20! 🎉

shariqanwar20 added 7 commits October 6, 2022 17:33

Converted the styles in emotion to chakra, except the Box Components

30cfeff

Issue: Cash Emoji not showing on top && Image and Text order swapped.

f78a2a0

Image text order correceted. Cash Emoji placement issue

77c335b

Removed order property from Emoji

b18ddc6

Emoji now left aligned. Unable to center it

614a76a

Container padding value removed

2695824

Unused code for emotion removed

3b301ae

shariqanwar20 requested review from corwintines, jmcook1186, minimalsm, pettinarip, samajammin and wackerow as code owners October 7, 2022 14:45

github-actions bot added the review needed 👀 label Oct 7, 2022

shariqanwar20 changed the title ~~[UI] Stablecoin Box Grid: migrate component to chakra UI (Need help in centering cash emoji)~~ [UI] Stablecoin Box Grid: migrate component to chakra UI Oct 7, 2022

pettinarip added the archived: chakra-migration label Oct 12, 2022

TylerAPfledderer suggested changes Oct 23, 2022

View reviewed changes

pettinarip requested changes Oct 24, 2022

View reviewed changes

shariqanwar20 added 2 commits October 31, 2022 12:43

Implemented changes suggested such as interpolation, Text to Heading …

d5a6608

…and use chakra standard values

Added reusable components where required

a733ed0

shariqanwar20 requested review from TylerAPfledderer and pettinarip and removed request for TylerAPfledderer and pettinarip October 31, 2022 08:12

shariqanwar20 requested review from TylerAPfledderer and pettinarip and removed request for TylerAPfledderer and pettinarip October 31, 2022 08:19

fix small style issues & cleanup code

a55c123

pettinarip approved these changes Oct 31, 2022

View reviewed changes

pettinarip merged commit 01c9d00 into ethereum:dev Oct 31, 2022

allcontributors bot mentioned this pull request Oct 31, 2022

docs: add shariqanwar20 as a contributor for code #8420

Merged

pettinarip mentioned this pull request Oct 31, 2022

Epic: Implement UI library #6374

Closed

80 tasks

corwintines mentioned this pull request Oct 31, 2022

Deploy v6.8.1 #8432

Merged

Uh oh!

[UI] Stablecoin Box Grid: migrate component to chakra UI #8201

[UI] Stablecoin Box Grid: migrate component to chakra UI #8201

Uh oh!

Conversation

shariqanwar20 commented Oct 7, 2022

Description

Before

After

Related Issue

Uh oh!

gatsby-cloud bot commented Oct 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ ethereum-org-website-dev deploy preview ready

Uh oh!

TylerAPfledderer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pettinarip left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

shariqanwar20 commented Oct 31, 2022

Uh oh!

pettinarip left a comment

Choose a reason for hiding this comment

Uh oh!

gitpoap-bot bot commented Oct 31, 2022

Uh oh!

pettinarip commented Oct 31, 2022

Uh oh!

allcontributors bot commented Oct 31, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gatsby-cloud bot commented Oct 7, 2022 •

edited

Loading