From 75f6acd86531972b7576758edf798fbde676d566 Mon Sep 17 00:00:00 2001
From: amit-ksh <ksamit1110@gmail.com>
Date: Sat, 18 Feb 2023 17:36:31 +0530
Subject: [PATCH 1/4] refactor: page components from emotion to chakra

---
 src/pages/upgrades/vision.tsx | 168 +++++++++++++++++++++-------------
 1 file changed, 105 insertions(+), 63 deletions(-)

diff --git a/src/pages/upgrades/vision.tsx b/src/pages/upgrades/vision.tsx
index a6e7c569501..95150267008 100644
--- a/src/pages/upgrades/vision.tsx
+++ b/src/pages/upgrades/vision.tsx
@@ -1,7 +1,15 @@
-import React from "react"
-import styled from "@emotion/styled"
+import React, { ComponentPropsWithRef, ReactNode } from "react"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
+import {
+  Box,
+  Divider,
+  Flex,
+  FlexProps,
+  Heading,
+  HeadingProps,
+  useToken,
+} from "@chakra-ui/react"
 
 import Translation from "../../components/Translation"
 import Card from "../../components/Card"
@@ -16,66 +24,100 @@ import Breadcrumbs from "../../components/Breadcrumbs"
 import ButtonLink from "../../components/ButtonLink"
 import PageMetadata from "../../components/PageMetadata"
 import InfoBanner from "../../components/InfoBanner"
-import {
-  CardContainer,
-  Content,
-  Page,
-  Divider,
-} from "../../components/SharedStyledComponents"
 import FeedbackCard from "../../components/FeedbackCard"
 
 import { translateMessageId } from "../../utils/translations"
 import { getImage } from "../../utils/image"
 
-const ProblemCardContainer = styled(CardContainer)`
-  max-width: ${(props) => props.theme.breakpoints.l};
-  margin: 0 auto;
-`
+type ChildOnlyProp = {
+  children: ReactNode
+}
 
-const StyledCardContainer = styled(CardContainer)`
-  margin-top: 2rem;
-  margin-bottom: 3rem;
-`
+const Page = (props: ChildOnlyProp) => (
+  <Flex direction="column" align="center" w="full" {...props} />
+)
 
-const H2 = styled.h2`
-  margin-top: 0;
-`
+const PageDivider = () => (
+  <Divider
+    my={16}
+    w="10%"
+    borderBottomWidth="0.25rem"
+    borderColor="homeDivider"
+  />
+)
 
-const CenterH2 = styled(H2)`
-  text-align: center;
-  margin-bottom: 2rem;
-`
+const PageContent = (props: ChildOnlyProp) => (
+  <Box py={4} px={8} w="full" {...props} />
+)
 
-const CentreCard = styled(Card)`
-  flex: 1 1 30%;
-  min-width: 240px;
-  margin: 1rem;
-  padding: 1.5rem;
-  border: 0px;
-  text-align: center;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    flex: 1 1 30%;
-  }
-`
+const H2 = (props: HeadingProps) => (
+  <Heading
+    as="h2"
+    mt={0}
+    mb={4}
+    fontSize={{ base: "2xl", md: "2rem" }}
+    fontWeight="semibold"
+    lineHeight={1.4}
+    {...props}
+  />
+)
 
-const CentralContent = styled.div`
-  margin: 0rem 12rem;
-  justify-content: center;
-  @media (max-width: ${(props) => props.theme.breakpoints.l}) {
-    margin: 0rem 0rem;
-  }
-`
+const CenterH2 = (props: HeadingProps) => (
+  <H2 textAlign="center" mb={8} {...props} />
+)
 
-const TrilemmaContent = styled.div`
-  width: 100%;
-  margin: 2rem 0;
-  background: ${(props) => props.theme.colors.cardGradient};
-  padding: 2rem;
-`
+const H3 = (props: HeadingProps) => (
+  <Heading
+    as="h3"
+    fontSize={{ base: "xl", md: "2xl" }}
+    fontWeight="semibold"
+    lineHeight={1.4}
+    {...props}
+  />
+)
 
-const StyledBreadcrumbs = styled(Breadcrumbs)`
-  justify-content: center;
-`
+const H6 = (props: HeadingProps) => (
+  <Heading
+    as="h6"
+    fontSize="0.9rem"
+    fontWeight="normal"
+    lineHeight={1.4}
+    {...props}
+  />
+)
+
+const CardContainer = (props: FlexProps) => (
+  <Flex wrap="wrap" mx={-4} {...props} />
+)
+
+const ProblemCardContainer = (props: ChildOnlyProp) => {
+  const containerMaxWidth = useToken("breakpoints", ["lg"])
+
+  return <CardContainer maxW={containerMaxWidth} m="0 auto" {...props} />
+}
+const StyledCardContainer = (props: ChildOnlyProp) => (
+  <CardContainer mt={8} mb={12} {...props} />
+)
+
+const CentreCard = (props: ComponentPropsWithRef<typeof Card>) => (
+  <Card
+    flex="1 1 30%"
+    minW="240px"
+    m={4}
+    p={6}
+    border={0}
+    textAlign="center"
+    {...props}
+  />
+)
+
+const CentralContent = (props: ChildOnlyProp) => (
+  <Box my={0} mx={{ base: 0, lg: 48 }} {...props} />
+)
+
+const TrilemmaContent = (props: ChildOnlyProp) => (
+  <Box w="full" my={8} mx={0} p={8} background="cardGradient" {...props} />
+)
 
 const paths = [
   {
@@ -136,9 +178,9 @@ const VisionPage = ({
         description={translateMessageId("page-upgrades-vision-meta-desc", intl)}
       />
       <PageHero content={heroContent} />
-      <Divider />
-      <Content>
-        <StyledBreadcrumbs slug={location.pathname} startDepth={1} />
+      <PageDivider />
+      <PageContent>
+        <Breadcrumbs slug={location.pathname} startDepth={1} />
         <CentralContent>
           <CenterH2>
             <Translation id="page-upgrades-vision-upgrade-needs" />
@@ -186,9 +228,9 @@ const VisionPage = ({
             <Translation id="page-upgrades-vision-upgrade-needs-desc-6" />
           </p>
         </CentralContent>
-      </Content>
-      <Divider />
-      <Content>
+      </PageContent>
+      <PageDivider />
+      <PageContent>
         <CenterH2>
           <Translation id="page-upgrades-vision-problems" />
         </CenterH2>
@@ -202,12 +244,12 @@ const VisionPage = ({
             />
           ))}
         </ProblemCardContainer>
-      </Content>
+      </PageContent>
       <TrilemmaContent>
         <Trilemma />
       </TrilemmaContent>
-      <Divider />
-      <Content>
+      <PageDivider />
+      <PageContent>
         <CentralContent>
           <CenterH2>
             <Translation id="page-upgrades-vision-understanding" />
@@ -293,9 +335,9 @@ const VisionPage = ({
             </ButtonLink>
           </InfoBanner>
         </CentralContent>
-      </Content>
-      <Divider />
-      <Content>
+      </PageContent>
+      <PageDivider />
+      <PageContent>
         <H2>
           <Translation id="page-upgrades-vision-explore-upgrades" />
         </H2>
@@ -313,7 +355,7 @@ const VisionPage = ({
             </ActionCard>
           ))}
         </StyledCardContainer>
-      </Content>
+      </PageContent>
       <FeedbackCard />
     </Page>
   )

From 9ee84f61848fbe85f445d62b8af9ba596e769818 Mon Sep 17 00:00:00 2001
From: amit-ksh <ksamit1110@gmail.com>
Date: Sat, 18 Feb 2023 17:58:35 +0530
Subject: [PATCH 2/4] refactor: h3, h6, p, ul and li tags to chakra

---
 src/pages/upgrades/vision.tsx | 117 +++++++++++++++++-----------------
 1 file changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/pages/upgrades/vision.tsx b/src/pages/upgrades/vision.tsx
index 95150267008..f7e707840a5 100644
--- a/src/pages/upgrades/vision.tsx
+++ b/src/pages/upgrades/vision.tsx
@@ -8,6 +8,9 @@ import {
   FlexProps,
   Heading,
   HeadingProps,
+  List,
+  ListItem,
+  Text,
   useToken,
 } from "@chakra-ui/react"
 
@@ -185,48 +188,48 @@ const VisionPage = ({
           <CenterH2>
             <Translation id="page-upgrades-vision-upgrade-needs" />
           </CenterH2>
-          <p>
+          <Text>
             <Translation id="page-upgrades-vision-upgrade-needs-desc" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-upgrade-needs-desc-2" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-upgrade-needs-desc-3" />{" "}
-          </p>
-          <ul>
-            <li>
+          </Text>
+          <List listStyleType="disc">
+            <ListItem>
               <Link to="https://members.delphidigital.io/reports/the-hitchhikers-guide-to-ethereum">
                 <Translation id="page-upgrades-vision-2022" />
               </Link>
-            </li>
-            <li>
+            </ListItem>
+            <ListItem>
               <Link to="https://trent.mirror.xyz/82eyq_NXZzzqFmCNXiKJgSdayf6omCW7BgDQIneyPoA">
                 <Translation id="page-upgrades-vision-2021-updates" />
               </Link>
-            </li>
-            <li>
+            </ListItem>
+            <ListItem>
               <Link to="https://tim.mirror.xyz/CHQtTJb1NDxCK41JpULL-zAJe7YOtw-m4UDw6KDju6c">
                 <Translation id="page-upgrades-vision-2021" />
               </Link>
-            </li>
-            <li>
+            </ListItem>
+            <ListItem>
               <Link to="https://blog.ethereum.org/2015/03/03/ethereum-launch-process/">
                 <Translation id="page-upgrades-vision-upgrade-needs-serenity" />
               </Link>
-            </li>
-            <li>
+            </ListItem>
+            <ListItem>
               <Link to="https://blog.ethereum.org/2014/01/15/slasher-a-punitive-proof-of-stake-algorithm/">
                 <Translation id="page-upgrades-vision-2014" />
               </Link>
-            </li>
-          </ul>
-          <p>
+            </ListItem>
+          </List>
+          <Text>
             <Translation id="page-upgrades-vision-upgrade-needs-desc-5" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-upgrade-needs-desc-6" />
-          </p>
+          </Text>
         </CentralContent>
       </PageContent>
       <PageDivider />
@@ -254,82 +257,82 @@ const VisionPage = ({
           <CenterH2>
             <Translation id="page-upgrades-vision-understanding" />
           </CenterH2>
-          <h3>
+          <H3>
             <Translation id="page-upgrades-vision-scalability" />{" "}
             <Emoji text=":rocket:" />
-          </h3>
-          <p>
+          </H3>
+          <Text>
             <Translation id="page-upgrades-vision-scalability-desc" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-scalability-desc-3" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-scalability-desc-4" />{" "}
             <Link to="/upgrades/sharding/">
               <Translation id="page-upgrades-vision-shard-upgrade" />
             </Link>{" "}
-          </p>
-          <h3>
+          </Text>
+          <H3>
             <Translation id="page-upgrades-vision-security" />{" "}
             <Emoji text=":shield:" />
-          </h3>
-          <p>
+          </H3>
+          <Text>
             <Translation id="page-upgrades-vision-security-desc" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-security-desc-3" />{" "}
             <Link to="/developers/docs/consensus-mechanisms/pos/">
               <Translation id="page-upgrades-proof-stake-link" />
             </Link>{" "}
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-security-desc-5" />{" "}
             <Link to="/developers/docs/consensus-mechanisms/pow/">
               <Translation id="page-upgrades-vision-security-desc-5-link" />
             </Link>
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-security-desc-8" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-security-desc-10" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-security-validator" />{" "}
             <Link to="/run-a-node/">
               <Translation id="page-upgrades-vision-ethereum-node" />
             </Link>
-          </p>
+          </Text>
           <ButtonLink to="/staking/">
             <Translation id="page-upgrades-vision-security-staking" />
           </ButtonLink>
-          <h3>
+          <H3>
             <Translation id="page-upgrades-vision-sustainability" />{" "}
             <Emoji text=":evergreen_tree:" />
-          </h3>
-          <p>
+          </H3>
+          <Text>
             <Translation id="page-upgrades-vision-sustainability-subtitle" />
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-sustainability-desc-1" />{" "}
             <Link to="/developers/docs/consensus-mechanisms/pow/mining/">
               <Translation id="page-upgrades-vision-mining" />
             </Link>
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-sustainability-desc-2" />{" "}
             <Link to="/staking/">
               <Translation id="page-upgrades-vision-staking-lower" />
             </Link>
-          </p>
-          <p>
+          </Text>
+          <Text>
             <Translation id="page-upgrades-vision-sustainability-desc-3" />
-          </p>
+          </Text>
           <InfoBanner>
-            <p>
+            <Text>
               <Translation id="page-upgrades-vision-sustainability-desc-8" />
-            </p>
+            </Text>
             <ButtonLink to="/upgrades/merge/">
               <Translation id="page-upgrades-merge-btn" />
             </ButtonLink>
@@ -351,7 +354,7 @@ const VisionPage = ({
               description={upgrade.description}
               to={upgrade.to}
             >
-              <h6>{upgrade.date}</h6>
+              <H6>{upgrade.date}</H6>
             </ActionCard>
           ))}
         </StyledCardContainer>

From 8038472b1d904afd35f0e0ceeeab3f42f8785092 Mon Sep 17 00:00:00 2001
From: amit-ksh <ksamit1110@gmail.com>
Date: Tue, 28 Feb 2023 20:04:39 +0530
Subject: [PATCH 3/4] H2 margin

---
 src/pages/upgrades/vision.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/upgrades/vision.tsx b/src/pages/upgrades/vision.tsx
index f7e707840a5..9b8d27a30ab 100644
--- a/src/pages/upgrades/vision.tsx
+++ b/src/pages/upgrades/vision.tsx
@@ -57,7 +57,7 @@ const H2 = (props: HeadingProps) => (
   <Heading
     as="h2"
     mt={0}
-    mb={4}
+    mb={8}
     fontSize={{ base: "2xl", md: "2rem" }}
     fontWeight="semibold"
     lineHeight={1.4}
@@ -65,9 +65,7 @@ const H2 = (props: HeadingProps) => (
   />
 )
 
-const CenterH2 = (props: HeadingProps) => (
-  <H2 textAlign="center" mb={8} {...props} />
-)
+const CenterH2 = (props: HeadingProps) => <H2 textAlign="center" {...props} />
 
 const H3 = (props: HeadingProps) => (
   <Heading

From e712eb69a25b6522ed879645eaf2272efca7bd8d Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Thu, 2 Mar 2023 10:46:58 -0300
Subject: [PATCH 4/4] reuse type

---
 src/pages/upgrades/vision.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/pages/upgrades/vision.tsx b/src/pages/upgrades/vision.tsx
index 9b8d27a30ab..f3bf4cbf2ed 100644
--- a/src/pages/upgrades/vision.tsx
+++ b/src/pages/upgrades/vision.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithRef, ReactNode } from "react"
+import React, { ComponentPropsWithRef } from "react"
 import { graphql, PageProps } from "gatsby"
 import { useIntl } from "react-intl"
 import {
@@ -32,9 +32,7 @@ import FeedbackCard from "../../components/FeedbackCard"
 import { translateMessageId } from "../../utils/translations"
 import { getImage } from "../../utils/image"
 
-type ChildOnlyProp = {
-  children: ReactNode
-}
+import type { ChildOnlyProp } from "../../types"
 
 const Page = (props: ChildOnlyProp) => (
   <Flex direction="column" align="center" w="full" {...props} />