Merge pull request #7723 from ethereum/migrateYouTubeToChakra

Refactor YouTube component to use ChakraUI

Author: pettinarip

src/components/YouTube.tsx

@@ -1,10 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
-
-const Figure = styled.figure`
-  display: block;
-  margin: 1rem 0;
-`
+import { Box } from "@chakra-ui/react"
 
 /**
  * @param {id} ID of the YouTube video
@@ -27,7 +22,7 @@ const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
   const baseUrl = "https://www.youtube.com/embed/"
   const src = baseUrl + id + startQuery
   return (
-    <Figure>
+    <Box as="figure" display="block" my={4}>
       <iframe
         width="100%"
         height="315"
@@ -43,7 +38,7 @@ const YouTube: React.FC<IProps> = ({ id, start = "0", title = "YouTube" }) => {
       picture-in-picture"
         allowFullScreen
       ></iframe>
-    </Figure>
+    </Box>
   )
 }