fix(banner-notification): default content alignment to center

Author: TylerAPfledderer

src/components/BannerNotification.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Flex, FlexProps, useMediaQuery } from "@chakra-ui/react"
+import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
 import { lightTheme as oldTheme } from "../theme"
 
 export interface IProps extends FlexProps {
@@ -15,7 +15,7 @@ const BannerNotification: React.FC<IProps> = ({
   return (
     <>
       {shouldShow && (
-        <Flex
+        <Center
           maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
           w="100%"
           py="4"
@@ -30,7 +30,7 @@ const BannerNotification: React.FC<IProps> = ({
           {...props}
         >
           {children}
-        </Flex>
+        </Center>
       )}
     </>
   )

src/components/Banners/PostMergeBanner.tsx

@@ -3,15 +3,14 @@ import BannerNotification from "../BannerNotification"
 import Translation from "../Translation"
 
 import { TranslationKey } from "../../utils/translations"
-import { Center, Text } from "@chakra-ui/react"
+import { Text } from "@chakra-ui/react"
 
 export interface IProps {
   translationString: TranslationKey
 }
 
 const PostMergeBanner: React.FC<IProps> = ({ translationString }) => (
-  <Center
-    as={BannerNotification}
+  <BannerNotification
     shouldShow={true}
     zIndex={1}
     textAlign="center"
@@ -24,7 +23,7 @@ const PostMergeBanner: React.FC<IProps> = ({ translationString }) => (
     <Text maxW="100ch" m={0} p={0}>
       <Translation id={translationString} />
     </Text>
-  </Center>
+  </BannerNotification>
 )
 
 export default PostMergeBanner

src/components/UpgradeBannerNotification.tsx

@@ -5,14 +5,8 @@ import Emoji from "./Emoji"
 import Link from "./Link"
 
 const UpgradeBannerNotification: React.FC = () => (
-  <BannerNotification justifyContent="center" shouldShow>
-    <Emoji
-      text=":megaphone:"
-      alignSelf="center"
-      mr={4}
-      fontSize="2xl"
-      flexShrink="0"
-    />
+  <BannerNotification shouldShow>
+    <Emoji text=":megaphone:" mr={4} fontSize="2xl" flexShrink="0" />
     <Box>
       <b>We've deprecated our use of 'Eth1' and 'Eth2' terms.</b>{" "}
       <Link to="https://blog.ethereum.org/2022/01/24/the-great-eth2-renaming/">