From cf03b50a5e3a8a4cb5f574b62855aaa0f71435a4 Mon Sep 17 00:00:00 2001
From: Seek4samurai <grvrawat999@gmail.com>
Date: Mon, 29 May 2023 19:14:30 +0530
Subject: [PATCH 1/3] migrated: pages/developers/learning-tools.tsx to Chakra
 UI

---
 src/pages/developers/learning-tools.tsx | 141 ++++++++++++++----------
 1 file changed, 83 insertions(+), 58 deletions(-)

diff --git a/src/pages/developers/learning-tools.tsx b/src/pages/developers/learning-tools.tsx
index 328b65ac382..ca17476f9b4 100644
--- a/src/pages/developers/learning-tools.tsx
+++ b/src/pages/developers/learning-tools.tsx
@@ -1,78 +1,103 @@
 // Library imports
 import React, { useEffect, useState } from "react"
-import styled from "@emotion/styled"
 import { graphql, PageProps } from "gatsby"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 import { shuffle } from "lodash"
 // Component imports
+import { Box, Flex } from "@chakra-ui/react"
 import PageMetadata from "../../components/PageMetadata"
 import Translation from "../../components/Translation"
 import ButtonLink from "../../components/ButtonLink"
 import InfoBanner from "../../components/InfoBanner"
 import CalloutBanner from "../../components/CalloutBanner"
-import { Content, Page } from "../../components/SharedStyledComponents"
 import FeedbackCard from "../../components/FeedbackCard"
 import LearningToolsCardGrid from "../../components/LearningToolsCardGrid"
 // Util imports
 import { getImage } from "../../utils/image"
 // Type imports
-import { Context, LearningTool } from "../../types"
+import { ChildOnlyProp, Context, LearningTool } from "../../types"
 
-// Styled components
-const StyledPage = styled(Page)`
-  margin-top: 4rem;
-`
+const StyledPage = (props: ChildOnlyProp) => (
+  <Flex
+    flexDirection="column"
+    alignItems="center"
+    w="100%"
+    ml="auto"
+    mr="auto"
+    mb={16}
+    mt={16}
+    {...props}
+  ></Flex>
+)
 
-const Header = styled.header`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  max-width: 896px;
-  padding: 0 2rem;
-`
-const H1 = styled.h1`
-  margin: 2rem 0 0;
-  margin-top: 0;
-  color: ${(props) => props.theme.colors.text};
-  font-style: normal;
-  font-family: ${(props) => props.theme.fonts.monospace};
-  text-transform: uppercase;
-  font-weight: 600;
-  font-size: 2rem;
-  line-height: 1.4;
-  text-align: center;
-`
+const Header = (props: ChildOnlyProp) => (
+  <Flex
+    flexDirection="column"
+    alignItems="center"
+    textAlign="center"
+    maxW="896px"
+    p={0}
+    pl={8}
+    pr={8}
+    {...props}
+  />
+)
 
-const Subtitle = styled.h2`
-  font-size: 1.25rem;
-  line-height: 1.4;
-  font-weight: 400;
-  color: ${(props) => props.theme.colors.text300};
-  max-width: 55ch;
-  margin-bottom: 0.5rem;
-  margin-top: 1rem;
-`
+const H1 = (props: ChildOnlyProp) => (
+  <Flex
+    m={"8 0 0"}
+    mt={0}
+    color="text"
+    fontStyle="normal"
+    fontFamily={"mono"}
+    textTransform="uppercase"
+    fontWeight="semibold"
+    fontSize="4xl"
+    lineHeight="1.4"
+    textAlign="center"
+    {...props}
+  />
+)
 
-const SubtitleTwo = styled(Subtitle)`
-  margin-top: 0rem;
-`
+const Subtitle = (props: ChildOnlyProp) => (
+  <Flex
+    fontSize={"xl"}
+    lineHeight={"short"}
+    color="text300"
+    maxW="55ch"
+    mb={2}
+    mt={4}
+    {...props}
+  />
+)
 
-const StackContainer = styled(Content)`
-  border: 1px solid ${(props) => props.theme.colors.border};
-  justify-content: flex-start;
-  border-radius: 4px;
-  padding: 3rem 2rem;
-  margin: 2rem;
-  width: 96%;
-  background: ${(props) => props.theme.colors.ednBackground};
-  @media (max-width: ${(props) => props.theme.breakpoints.s}) {
-    width: 100%;
-    margin-left: 0rem;
-    margin-right: 0rem;
-    border-radius: 0px;
-  }
-`
+const SubtitleTwo = (props: ChildOnlyProp) => (
+  <Subtitle>
+    <Box mt={0} {...props}></Box>
+  </Subtitle>
+)
+
+const ContentBox = (props: ChildOnlyProp) => (
+  <Box pt={4} pb={4} pl={8} pr={8} w={"100%"} {...props}></Box>
+)
+
+const StackContainer = (props: ChildOnlyProp) => (
+  <Box
+    border="1px solid border"
+    justifyContent="flex-start"
+    borderRadius={{ base: "4px", sm: "0" }}
+    w={{ base: "96%", sm: "100%" }}
+    m={8}
+    ml={{ base: 8, sm: 0 }}
+    mr={{ base: 8, sm: 0 }}
+    pt={12}
+    pb={12}
+    pl={8}
+    pr={8}
+    background="ednBackground"
+    {...props}
+  ></Box>
+)
 
 // Page component
 const LearningToolsPage = ({
@@ -303,7 +328,7 @@ const LearningToolsPage = ({
         </p>
         <LearningToolsCardGrid category={bootcamps} />
       </StackContainer>
-      <Content>
+      <ContentBox>
         <CalloutBanner
           mx={4}
           mt={24}
@@ -319,10 +344,10 @@ const LearningToolsPage = ({
             </ButtonLink>
           </div>
         </CalloutBanner>
-      </Content>
-      <Content>
+      </ContentBox>
+      <ContentBox>
         <FeedbackCard />
-      </Content>
+      </ContentBox>
     </StyledPage>
   )
 }

From 2921289ebc236f96509c6eb1beb6865eda1c94c1 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 19 Jun 2023 16:14:31 -0300
Subject: [PATCH 2/3] apply fixes from code review

---
 src/pages/developers/learning-tools.tsx | 98 ++++++++++++-------------
 1 file changed, 46 insertions(+), 52 deletions(-)

diff --git a/src/pages/developers/learning-tools.tsx b/src/pages/developers/learning-tools.tsx
index ca17476f9b4..22f0febbdcc 100644
--- a/src/pages/developers/learning-tools.tsx
+++ b/src/pages/developers/learning-tools.tsx
@@ -3,8 +3,8 @@ import React, { useEffect, useState } from "react"
 import { graphql, PageProps } from "gatsby"
 import { useTranslation } from "gatsby-plugin-react-i18next"
 import { shuffle } from "lodash"
+import { Box, Flex, Heading, HeadingProps, Text } from "@chakra-ui/react"
 // Component imports
-import { Box, Flex } from "@chakra-ui/react"
 import PageMetadata from "../../components/PageMetadata"
 import Translation from "../../components/Translation"
 import ButtonLink from "../../components/ButtonLink"
@@ -15,54 +15,54 @@ import LearningToolsCardGrid from "../../components/LearningToolsCardGrid"
 // Util imports
 import { getImage } from "../../utils/image"
 // Type imports
-import { ChildOnlyProp, Context, LearningTool } from "../../types"
+import type { ChildOnlyProp, Context, LearningTool } from "../../types"
 
-const StyledPage = (props: ChildOnlyProp) => (
+const Page = (props: ChildOnlyProp) => (
   <Flex
-    flexDirection="column"
-    alignItems="center"
-    w="100%"
-    ml="auto"
-    mr="auto"
-    mb={16}
+    direction="column"
+    align="center"
+    w="full"
+    mx="auto"
     mt={16}
+    mb={0}
     {...props}
-  ></Flex>
+  />
 )
 
 const Header = (props: ChildOnlyProp) => (
   <Flex
-    flexDirection="column"
-    alignItems="center"
+    as="header"
+    direction="column"
+    align="center"
     textAlign="center"
     maxW="896px"
-    p={0}
-    pl={8}
-    pr={8}
+    py={0}
+    px={8}
     {...props}
   />
 )
 
 const H1 = (props: ChildOnlyProp) => (
-  <Flex
-    m={"8 0 0"}
-    mt={0}
+  <Heading
+    as="h1"
+    my={0}
     color="text"
     fontStyle="normal"
-    fontFamily={"mono"}
+    fontFamily="monospace"
     textTransform="uppercase"
     fontWeight="semibold"
-    fontSize="4xl"
-    lineHeight="1.4"
+    fontSize="2rem"
+    lineHeight={1.4}
     textAlign="center"
     {...props}
   />
 )
 
-const Subtitle = (props: ChildOnlyProp) => (
-  <Flex
-    fontSize={"xl"}
-    lineHeight={"short"}
+const Subtitle = (props: HeadingProps) => (
+  <Heading
+    fontSize="xl"
+    lineHeight={1.4}
+    fontWeight="normal"
     color="text300"
     maxW="55ch"
     mb={2}
@@ -71,32 +71,26 @@ const Subtitle = (props: ChildOnlyProp) => (
   />
 )
 
-const SubtitleTwo = (props: ChildOnlyProp) => (
-  <Subtitle>
-    <Box mt={0} {...props}></Box>
-  </Subtitle>
-)
+const SubtitleTwo = (props: ChildOnlyProp) => <Subtitle mt={0} {...props} />
 
 const ContentBox = (props: ChildOnlyProp) => (
-  <Box pt={4} pb={4} pl={8} pr={8} w={"100%"} {...props}></Box>
+  <Box py={4} px={8} w="full" {...props} />
 )
 
 const StackContainer = (props: ChildOnlyProp) => (
   <Box
-    border="1px solid border"
+    border="1px"
+    borderColor="border"
     justifyContent="flex-start"
-    borderRadius={{ base: "4px", sm: "0" }}
-    w={{ base: "96%", sm: "100%" }}
-    m={8}
-    ml={{ base: 8, sm: 0 }}
-    mr={{ base: 8, sm: 0 }}
-    pt={12}
-    pb={12}
-    pl={8}
-    pr={8}
+    borderRadius={{ base: 0, sm: "base" }}
+    w={{ base: "full", sm: "96%" }}
+    mx={{ base: 0, sm: 8 }}
+    my={8}
+    px={8}
+    py={12}
     background="ednBackground"
     {...props}
-  ></Box>
+  />
 )
 
 // Page component
@@ -285,7 +279,7 @@ const LearningToolsPage = ({
   ]
 
   return (
-    <StyledPage>
+    <Page>
       <PageMetadata
         title={t("page-learning-tools-meta-title")}
         description={t("page-learning-tools-meta-desc")}
@@ -302,9 +296,9 @@ const LearningToolsPage = ({
         <SubtitleTwo>
           <Translation id="page-learning-tools-sandbox" />
         </SubtitleTwo>
-        <p>
+        <Text>
           <Translation id="page-learning-tools-sandbox-desc" />
-        </p>
+        </Text>
         <LearningToolsCardGrid category={randomizedSandboxes} />
         <InfoBanner emoji=":point_up:" shouldCenter>
           <Translation id="page-learning-tools-remix-description-2" />
@@ -314,18 +308,18 @@ const LearningToolsPage = ({
         <SubtitleTwo>
           <Translation id="page-learning-tools-game-tutorials" />
         </SubtitleTwo>
-        <p>
+        <Text>
           <Translation id="page-learning-tools-game-tutorials-desc" />
-        </p>
+        </Text>
         <LearningToolsCardGrid category={games} />
       </StackContainer>
       <StackContainer>
         <SubtitleTwo>
           <Translation id="page-learning-tools-bootcamps" />
         </SubtitleTwo>
-        <p>
+        <Text>
           <Translation id="page-learning-tools-bootcamps-desc" />
-        </p>
+        </Text>
         <LearningToolsCardGrid category={bootcamps} />
       </StackContainer>
       <ContentBox>
@@ -338,17 +332,17 @@ const LearningToolsPage = ({
           titleKey={"page-learning-tools-documentation"}
           descriptionKey={"page-learning-tools-documentation-desc"}
         >
-          <div>
+          <Box>
             <ButtonLink to="/developers/docs/">
               <Translation id="page-learning-tools-browse-docs" />
             </ButtonLink>
-          </div>
+          </Box>
         </CalloutBanner>
       </ContentBox>
       <ContentBox>
         <FeedbackCard />
       </ContentBox>
-    </StyledPage>
+    </Page>
   )
 }
 

From 751d3143cea97c05cef0445fd5e6d4289d3151fe Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Mon, 19 Jun 2023 16:16:29 -0300
Subject: [PATCH 3/3] Update src/pages/developers/learning-tools.tsx

Co-authored-by: Joshua <62268199+minimalsm@users.noreply.github.com>
---
 src/pages/developers/learning-tools.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/developers/learning-tools.tsx b/src/pages/developers/learning-tools.tsx
index 22f0febbdcc..150a6e578a7 100644
--- a/src/pages/developers/learning-tools.tsx
+++ b/src/pages/developers/learning-tools.tsx
@@ -81,7 +81,6 @@ const StackContainer = (props: ChildOnlyProp) => (
   <Box
     border="1px"
     borderColor="border"
-    justifyContent="flex-start"
     borderRadius={{ base: 0, sm: "base" }}
     w={{ base: "full", sm: "96%" }}
     mx={{ base: 0, sm: 8 }}