refactor(pages): migrate home page to Chakra #9364

TylerAPfledderer · 2023-01-31T21:39:38Z

Description

Migrate the Home page to use Chakra UI

Related Issue

#9353

gatsby-cloud · 2023-01-31T22:23:03Z

✅ ethereum-org-website-dev deploy preview ready

Deploy preview
Build logs · 21m build time

pettinarip

Nicely done @TylerAPfledderer! overall this looks great

pettinarip · 2023-02-14T15:37:00Z

src/pages/index.tsx

-    padding: 2rem;
-  }
-`
+type ChildOnlyProp = { children: ReactNode }


This type looks like a good one to move to src/types.ts as I image we are going to start using it more often now.

@pettinarip Would you like to go ahead and move it in this PR?

Yea, that would be great

pettinarip · 2023-02-14T22:04:00Z

src/pages/index.tsx

+              p={{ sm: 8, lg: 24 }}
+              boxSize="full"
+            >
+              <SectionHeading fontFamily="inherit" mb={6}>


I think that all of our section headers should not have the margin top in order to have the content correctly centered. Perhaps we can add it directly on the SectionHeading component as its default.

Suggested change

<SectionHeading fontFamily="inherit" mb={6}>

<SectionHeading fontFamily="inherit" mb={6} mt={0}>

Applied directly to the component

pettinarip · 2023-02-14T22:17:01Z

src/pages/index.tsx

+      </MainSectionContainer>
+      {/* Eth Today Section */}
+      <GrayContainer>
+        <ContentBox>
          <h2>


Lets use Headings for these h2s

pettinarip · 2023-02-14T22:17:14Z

src/pages/index.tsx

-      <StyledContent>
+      </GrayContainer>
+      {/* Explore Section */}
+      <ContentBox>
        <h2>


Here as well. Heading

pettinarip · 2023-02-14T22:19:33Z

src/pages/index.tsx

-      <StyledContent>
+      </GrayContainer>
+      {/* Explore Section */}
+      <ContentBox>
        <h2>
          <Translation id="page-index-touts-header" />
        </h2>


I think this entire h2 should be inside the below ContentBox section. If not this gets center aligned (and it should be left aligned).

pettinarip · 2023-02-14T22:43:49Z

src/pages/index.tsx

-                <ButtonLink to="/dapps/?category=technology">
-                  <Translation id="page-index-internet-button" />
-                </ButtonLink>
-                <StyledButtonLink variant="outline" to="/wallets/">


We missed this button

TylerAPfledderer · 2023-02-15T17:35:30Z

src/pages/index.tsx

+      {/* Eth Today Section */}
+      <GrayContainer>
+        <ContentBox>
+          <SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>


Leveraging the SectionHeading component in replacing the h2 tag that was here and in the next section.

Since mt, mb, and fontFamily are defined in the component and overriding other styles specific to the h2 that are more preferable here, setting the values to undefined essentially cancels the overrides while still gaining the reuseability of the component.

Is this OK?

Don't like it tbh 😄

Lets do this for now. heading is the old theme font family.

Suggested change

<SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>

<SectionHeading mt={12} mb={8} fontFamily="heading">

pettinarip · 2023-02-20T13:17:30Z

src/pages/index.tsx

-    padding: 2rem;
-  }
-`
+type ChildOnlyProp = { children: ReactNode }


Yea, that would be great

pettinarip · 2023-02-20T13:39:27Z

src/pages/index.tsx

+      {/* Eth Today Section */}
+      <GrayContainer>
+        <ContentBox>
+          <SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>


Don't like it tbh 😄

Lets do this for now. heading is the old theme font family.

Suggested change

<SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>

<SectionHeading mt={12} mb={8} fontFamily="heading">

pettinarip · 2023-02-20T13:39:48Z

src/pages/index.tsx

+      {/* Explore Section */}
+      <ContentBox>
+        <Box pb={4}>
+          <SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>


Same here.

Suggested change

<SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>

<SectionHeading mt={12} mb={8} fontFamily="heading">

TylerAPfledderer · 2023-02-20T15:17:07Z

@pettinarip we should be good to go!

pettinarip

Thanks @TylerAPfledderer

github-actions bot added content 🖋️ This involves copy additions or edits review needed 👀 labels Jan 31, 2023

refactor(pages): migrate home page to chakra ui

92c0e7f

TylerAPfledderer force-pushed the refactor/home-page-to-chakra branch from a9abf69 to 92c0e7f Compare February 1, 2023 02:12

chore(pages/index): update imports

b403e68

TylerAPfledderer marked this pull request as ready for review February 2, 2023 01:16

TylerAPfledderer requested review from samajammin, wackerow, corwintines, pettinarip, minimalsm and jmcook1186 as code owners February 2, 2023 01:16

TylerAPfledderer changed the title ~~[WIP] refactor(pages): migrate home page to Chakra~~ refactor(pages): migrate home page to Chakra Feb 2, 2023

refactor(pages/index): implement chakra factory for styling

ed334f5

pettinarip added the archived: chakra-migration label Feb 6, 2023

pettinarip reviewed Feb 14, 2023

View reviewed changes

TylerAPfledderer added 2 commits February 15, 2023 12:23

style(pages/index): remove top margin from SectionHeading

3abaa2c

refactor(pages/index): replace h2 with SectionHeading

5fca1bd

TylerAPfledderer commented Feb 15, 2023

View reviewed changes

TylerAPfledderer added 3 commits February 15, 2023 12:42

refactor(pages/index): add missing padding in internet section

616933e

revert(pages/index): add missing button in internet section

c376f64

refactor(pages/index): remove padding from internet section image

1bb595e

pettinarip requested changes Feb 20, 2023

View reviewed changes

TylerAPfledderer added 2 commits February 20, 2023 10:13

refactor(pages/index): update h2 SectionHeadings

714c804

refactor(pages/index): move ChildOnlyProp to types.ts

e5b4323

pettinarip approved these changes Feb 20, 2023

View reviewed changes

pettinarip merged commit cd1e432 into ethereum:dev Feb 20, 2023

TylerAPfledderer deleted the refactor/home-page-to-chakra branch February 20, 2023 19:15

pettinarip mentioned this pull request Feb 20, 2023

Implement UI library - Migrate pages & templates #9353

Closed

38 tasks

corwintines mentioned this pull request Feb 24, 2023

Deploy v7.4.0 #9571

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(pages): migrate home page to Chakra #9364

refactor(pages): migrate home page to Chakra #9364

TylerAPfledderer commented Jan 31, 2023 •

edited

Loading

gatsby-cloud bot commented Jan 31, 2023 •

edited

Loading

pettinarip left a comment

pettinarip Feb 14, 2023

TylerAPfledderer Feb 15, 2023

pettinarip Feb 20, 2023

pettinarip Feb 14, 2023

TylerAPfledderer Feb 20, 2023

pettinarip Feb 14, 2023

pettinarip Feb 14, 2023

pettinarip Feb 14, 2023

pettinarip Feb 14, 2023

TylerAPfledderer Feb 15, 2023

pettinarip Feb 20, 2023

pettinarip Feb 20, 2023

pettinarip Feb 20, 2023

pettinarip Feb 20, 2023

TylerAPfledderer commented Feb 20, 2023

pettinarip left a comment

	<SectionHeading fontFamily="inherit" mb={6}>
	<SectionHeading fontFamily="inherit" mb={6} mt={0}>

	<SectionHeading mt={undefined} mb={undefined} fontFamily={undefined}>
	<SectionHeading mt={12} mb={8} fontFamily="heading">

refactor(pages): migrate home page to Chakra #9364

refactor(pages): migrate home page to Chakra #9364

Conversation

TylerAPfledderer commented Jan 31, 2023 • edited Loading

Description

Related Issue

gatsby-cloud bot commented Jan 31, 2023 • edited Loading

✅ ethereum-org-website-dev deploy preview ready

pettinarip left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TylerAPfledderer commented Feb 20, 2023

pettinarip left a comment

Choose a reason for hiding this comment

TylerAPfledderer commented Jan 31, 2023 •

edited

Loading

gatsby-cloud bot commented Jan 31, 2023 •

edited

Loading