Merge pull request #7778 from Mousticke/ui-banner-notification

[UI] Banner Notification: migrate component to chakra ui

Author: pettinarip

src/components/BannerNotification.tsx

@@ -1,41 +1,43 @@
 import React from "react"
-import styled from "@emotion/styled"
-
-export interface IStyledBanner {
-  shouldShow: boolean
-}
+import { Flex, useMediaQuery } from "@chakra-ui/react"
+import { lightTheme as oldTheme } from "../theme"
 
 export interface IProps {
   children?: React.ReactNode
   shouldShow?: boolean
   className?: string
 }
 
-const Banner = styled.div<IStyledBanner>`
-  display: ${(props) => (props.shouldShow ? `flex` : `none`)};
-  width: 100%;
-  background-color: ${(props) => props.theme.colors.primary};
-  color: ${(props) => props.theme.colors.background};
-  padding: 1rem 2rem;
-  border-bottom: 1px solid ${(props) => props.theme.colors.primary};
-
-  a {
-    color: ${(props) => props.theme.colors.background} !important;
-  }
-
-  @media (min-width: ${(props) => props.theme.breakpoints.l}) {
-    max-width: ${(props) => props.theme.variables.maxPageWidth};
-  }
-`
-
 const BannerNotification: React.FC<IProps> = ({
   children,
   className,
   shouldShow = false,
-}) => (
-  <Banner shouldShow={shouldShow} className={className}>
-    {children}
-  </Banner>
-)
+}) => {
+  const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
+
+  return (
+    <>
+      {shouldShow && (
+        <Flex
+          className={className}
+          maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
+          w="100%"
+          py="4"
+          px="8"
+          bg="primary"
+          color="background"
+          borderBottom="1px solid primary"
+          sx={{
+            a: {
+              color: "background",
+            },
+          }}
+        >
+          {children}
+        </Flex>
+      )}
+    </>
+  )
+}
 
 export default BannerNotification