Merge pull request #10348 from Seek4samurai/dev

migrated: pages/developers/learning-tools.tsx to Chakra UI

Author: pettinarip

src/pages/developers/learning-tools.tsx

@@ -1,78 +1,96 @@
 // 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"
+import { Box, Flex, Heading, HeadingProps, Text } from "@chakra-ui/react"
 // Component imports
 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 type { ChildOnlyProp, Context, LearningTool } from "../../types"
 
-// Styled components
-const StyledPage = styled(Page)`
-  margin-top: 4rem;
-`
+const Page = (props: ChildOnlyProp) => (
+  <Flex
+    direction="column"
+    align="center"
+    w="full"
+    mx="auto"
+    mt={16}
+    mb={0}
+    {...props}
+  />
+)
 
-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
+    as="header"
+    direction="column"
+    align="center"
+    textAlign="center"
+    maxW="896px"
+    py={0}
+    px={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) => (
+  <Heading
+    as="h1"
+    my={0}
+    color="text"
+    fontStyle="normal"
+    fontFamily="monospace"
+    textTransform="uppercase"
+    fontWeight="semibold"
+    fontSize="2rem"
+    lineHeight={1.4}
+    textAlign="center"
+    {...props}
+  />
+)
 
-const SubtitleTwo = styled(Subtitle)`
-  margin-top: 0rem;
-`
+const Subtitle = (props: HeadingProps) => (
+  <Heading
+    fontSize="xl"
+    lineHeight={1.4}
+    fontWeight="normal"
+    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 mt={0} {...props} />
+
+const ContentBox = (props: ChildOnlyProp) => (
+  <Box py={4} px={8} w="full" {...props} />
+)
+
+const StackContainer = (props: ChildOnlyProp) => (
+  <Box
+    border="1px"
+    borderColor="border"
+    borderRadius={{ base: 0, sm: "base" }}
+    w={{ base: "full", sm: "96%" }}
+    mx={{ base: 0, sm: 8 }}
+    my={8}
+    px={8}
+    py={12}
+    background="ednBackground"
+    {...props}
+  />
+)
 
 // Page component
 const LearningToolsPage = ({
@@ -260,7 +278,7 @@ const LearningToolsPage = ({
   ]
 
   return (
-    <StyledPage>
+    <Page>
       <PageMetadata
         title={t("page-learning-tools-meta-title")}
         description={t("page-learning-tools-meta-desc")}
@@ -277,9 +295,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" />
@@ -289,21 +307,21 @@ 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>
-      <Content>
+      <ContentBox>
         <CalloutBanner
           mx={4}
           mt={24}
@@ -313,17 +331,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>
-      </Content>
-      <Content>
+      </ContentBox>
+      <ContentBox>
         <FeedbackCard />
-      </Content>
-    </StyledPage>
+      </ContentBox>
+    </Page>
   )
 }