Merge pull request #8720 from soheil555/feat/beacon-chain-actions-to-chakra

Migrate `BeaconChainActions` to Chakra

Author: pettinarip

src/components/BeaconChainActions.tsx

@@ -1,6 +1,8 @@
 import React from "react"
+import { Box, Flex, Heading } from "@chakra-ui/react"
+
 import { useStaticQuery, graphql } from "gatsby"
-import styled from "@emotion/styled"
+
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"
@@ -13,50 +15,17 @@ import Translation from "./Translation"
 
 import type { CardListItem } from "./CardList"
 
-const Container = styled.div`
-  margin-bottom: 4rem;
-`
-
-const StyledCardContainer = styled.div`
-  display: flex;
-  padding-top: 1rem;
-  @media (max-width: ${(props) => props.theme.breakpoints.m}) {
-    flex-direction: column;
-  }
-`
-
-const StyledCardLeft = styled(Card)`
-  margin-left: 0rem;
-  margin-right: 1rem;
-  width: 100%;
-  @media (max-width: ${(props) => props.theme.breakpoints.m}) {
-    margin-right: 0rem;
-    margin-bottom: 2rem;
-  }
-`
-
-const StyledCardRight = styled(Card)`
-  margin-left: 0rem;
-  margin-left: 1rem;
-  width: 100%;
-  @media (max-width: ${(props) => props.theme.breakpoints.m}) {
-    margin-left: 0rem;
-  }
-`
-
-const H3 = styled.h3`
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 2rem;
-
-  a {
-    display: none;
-  }
-`
-
-const StyledButtonLink = styled(ButtonLink)`
-  margin-bottom: 0.75rem;
-`
+const H3: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <Heading
+    as="h3"
+    fontSize="2xl"
+    fontWeight="bold"
+    mb={8}
+    sx={{ a: { display: "none" } }}
+  >
+    {children}
+  </Heading>
+)
 
 export const DataLogo = graphql`
   fragment DataLogo on File {
@@ -140,21 +109,28 @@ const BeaconChainActions: React.FC = () => {
   ]
 
   return (
-    <Container>
-      <StyledCardContainer>
-        <StyledCardLeft
+    <Box mb={16}>
+      <Flex flexDir={{ base: "column", md: "row" }} pt={4}>
+        <Card
+          w="full"
+          ml={0}
+          mr={{ base: 0, md: 4 }}
+          mb={{ base: 8, md: 0 }}
           emoji=":money_with_wings:"
           title={translateMessageId("consensus-become-staker", intl)}
           description={translateMessageId("consensus-become-staker-desc", intl)}
         >
-          <StyledButtonLink to="https://launchpad.ethereum.org">
+          <ButtonLink mb={3} to="https://launchpad.ethereum.org">
             <Translation id="get-started" />
-          </StyledButtonLink>
+          </ButtonLink>
           <ButtonLink variant="outline" to="/staking/">
             <Translation id="page-upgrades-index-staking-learn" />
           </ButtonLink>
-        </StyledCardLeft>
-        <StyledCardRight
+        </Card>
+        <Card
+          w="full"
+          mr={0}
+          ml={{ base: 0, md: 4 }}
           emoji=":computer:"
           title={translateMessageId("consensus-run-beacon-chain", intl)}
           description={translateMessageId(
@@ -165,8 +141,8 @@ const BeaconChainActions: React.FC = () => {
           <ButtonLink variant="outline" to="/upgrades/get-involved/">
             <Translation id="consensus-run-beacon-chain" />
           </ButtonLink>
-        </StyledCardRight>
-      </StyledCardContainer>
+        </Card>
+      </Flex>
       <H3>
         <Translation id="consensus-explore" />
       </H3>
@@ -176,7 +152,7 @@ const BeaconChainActions: React.FC = () => {
         <Translation id="read-more" />
       </H3>
       <CardList content={reads} />
-    </Container>
+    </Box>
   )
 }
 

src/components/Card.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react"
-import { Flex, Heading, Text } from "@chakra-ui/react"
+import { ChakraProps, Flex, Heading, Text } from "@chakra-ui/react"
 import Emoji from "./Emoji"
 
-export interface IProps {
+export interface IProps extends ChakraProps {
   children?: React.ReactNode
   emoji?: string
   title?: ReactNode
@@ -16,6 +16,7 @@ const Card: React.FC<IProps> = ({
   description,
   children,
   className,
+  ...props
 }) => (
   <Flex
     direction="column"
@@ -28,6 +29,7 @@ const Card: React.FC<IProps> = ({
     borderColor="lightBorder"
     p={6}
     className={className}
+    {...props}
   >
     <div>
       {emoji && <Emoji fontSize="5xl" text={emoji} mb={4} />}