refactor: stakinghowsoloworks to chakra

Author: ImMiguelP

src/components/Staking/StakingHowSoloWorks.tsx

@@ -1,23 +1,12 @@
 import React from "react"
-import styled from "@emotion/styled"
 import { graphql, useStaticQuery } from "gatsby"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import OrderedList from "../OrderedList"
 import Translation from "../Translation"
 
 import { getImage } from "../../utils/image"
-
-const Flex = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
-    flex-direction: column;
-  }
-`
-
-const Image = styled(GatsbyImage)``
+import { Center, Image } from "@chakra-ui/react"
 
 export interface IProps {}
 
@@ -56,10 +45,13 @@ const StakingHowSoloWorks: React.FC<IProps> = () => {
   ]
 
   return (
-    <Flex>
+    <Center
+      flexDirection={{ sm: "column", md: "row" }}
+      justifyContent="space-between"
+    >
       <OrderedList listData={items} />
-      <Image image={getImage(image)!} alt="" />
-    </Flex>
+      <Image as={GatsbyImage} image={getImage(image)!} alt="" />
+    </Center>
   )
 }