Merge pull request #10463 from ethereum/migrate-staking-comm-callout

Migrate `StakingCommunityCallout` component

Author: wackerow

src/components/Staking/StakingCommunityCallout.tsx

@@ -1,8 +1,7 @@
 import React from "react"
 import { useTranslation } from "gatsby-plugin-react-i18next"
-import styled from "@emotion/styled"
 import { graphql, useStaticQuery } from "gatsby"
-import { FlexProps } from "@chakra-ui/react"
+import { Flex, FlexProps } from "@chakra-ui/react"
 
 import ButtonLink from "../ButtonLink"
 import CalloutBanner from "../CalloutBanner"
@@ -11,20 +10,6 @@ import Translation from "../Translation"
 import { trackCustomEvent } from "../../utils/matomo"
 import { getImage } from "../../utils/image"
 
-const ButtonContainer = styled.div`
-  display: flex;
-  gap: 1rem;
-  @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
-    flex-direction: column;
-  }
-`
-
-const StyledButtonLink = styled(ButtonLink)`
-  @media (max-width: ${({ theme }) => theme.breakpoints.s}) {
-    width: 100%;
-  }
-`
-
 export interface IProps extends FlexProps {
   id?: string
 }
@@ -54,8 +39,8 @@ const StakingCommunityCallout: React.FC<IProps> = (props) => {
       titleKey={"page-staking-join-community"}
       descriptionKey={"page-staking-join-community-desc"}
     >
-      <ButtonContainer>
-        <StyledButtonLink
+      <Flex gap={4} direction={{ base: "column", md: "row" }}>
+        <ButtonLink
           onClick={() => {
             trackCustomEvent({
               eventCategory: `StakingCommunityCallout`,
@@ -64,10 +49,11 @@ const StakingCommunityCallout: React.FC<IProps> = (props) => {
             })
           }}
           to="https://discord.io/ethstaker"
+          w={{ base: "full", md: "auto" }}
         >
           Discord
-        </StyledButtonLink>
-        <StyledButtonLink
+        </ButtonLink>
+        <ButtonLink
           onClick={() => {
             trackCustomEvent({
               eventCategory: `StakingCommunityCallout`,
@@ -76,10 +62,11 @@ const StakingCommunityCallout: React.FC<IProps> = (props) => {
             })
           }}
           to="https://reddit.com/r/ethstaker"
+          w={{ base: "full", md: "auto" }}
         >
           Reddit
-        </StyledButtonLink>
-        <StyledButtonLink
+        </ButtonLink>
+        <ButtonLink
           onClick={() => {
             trackCustomEvent({
               eventCategory: `StakingCommunityCallout`,
@@ -88,10 +75,11 @@ const StakingCommunityCallout: React.FC<IProps> = (props) => {
             })
           }}
           to="https://ethstaker.cc"
+          w={{ base: "full", md: "auto" }}
         >
           <Translation id="rollup-component-website" />
-        </StyledButtonLink>
-      </ButtonContainer>
+        </ButtonLink>
+      </Flex>
     </CalloutBanner>
   )
 }