Merge pull request #13820 from ethereum/banner-notification

feat: migrate BannerNotification to tw

Author: pettinarip

src/components/Banners/BannerNotification.tsx

@@ -1,40 +1,26 @@
-import React from "react"
-import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
+import { cn } from "@/lib/utils/cn"
 
-import { lightTheme as oldTheme } from "../../theme"
-
-export type BannerNotificationProps = FlexProps & {
+export type BannerNotificationProps = React.HTMLAttributes<HTMLDivElement> & {
   shouldShow?: boolean
 }
 
 const BannerNotification = ({
   children,
-  shouldShow = false,
+  shouldShow,
+  className,
   ...props
 }: BannerNotificationProps) => {
-  const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
+  if (!shouldShow) return <></>
   return (
-    <>
-      {shouldShow && (
-        <Center
-          as="aside"
-          maxW={isLGScreen ? oldTheme.variables.maxPageWidth : "100%"}
-          w="100%"
-          py="4"
-          px="8"
-          bg="primary.base"
-          color="background.base"
-          sx={{
-            a: {
-              color: "background.base",
-            },
-          }}
-          {...props}
-        >
-          {children}
-        </Center>
+    <aside
+      className={cn(
+        "flex items-center justify-center gap-2 bg-primary-action px-8 py-4 text-white [&_a]:text-white [&_a]:hover:text-white/80",
+        className
       )}
-    </>
+      {...props}
+    >
+      {children}
+    </aside>
   )
 }
 

src/components/Banners/DismissableBanner/index.tsx

@@ -1,19 +1,21 @@
-// Libraries
-import React, { useEffect, useState } from "react"
-import { Center, CloseButton } from "@chakra-ui/react"
+import { useEffect, useState } from "react"
+import { MdClose } from "react-icons/md"
+
+import { Button } from "@/components/ui/buttons/Button"
+import { Center } from "@/components/ui/flex"
+
+import { cn } from "@/lib/utils/cn"
 
-// Components
 import BannerNotification from "../BannerNotification"
 
-// Interface
-export type DismissableBannerProps = {
-  children: JSX.Element
+type DismissableBannerProps = React.HTMLAttributes<HTMLDivElement> & {
   storageKey: string
 }
 
 const DismissableBanner = ({
   children,
   storageKey,
+  className,
 }: DismissableBannerProps) => {
   const [show, setShow] = useState<boolean>(false)
 
@@ -28,13 +30,16 @@ const DismissableBanner = ({
   }
 
   return (
-    <BannerNotification shouldShow={show} gap="8">
-      <Center marginInlineStart="auto">{children}</Center>
-      <CloseButton
-        marginInlineStart="auto"
+    <BannerNotification shouldShow={show} className={cn("gap-8", className)}>
+      <Center className="ms-auto">{children}</Center>
+      <Button
+        className="ms-auto"
         onClick={onClose}
         aria-label="Close Banner"
-      />
+        variant="ghost"
+      >
+        <MdClose />
+      </Button>
     </BannerNotification>
   )
 }

src/layouts/UseCases.tsx

@@ -177,7 +177,7 @@ export const UseCasesLayout = ({
       width="full"
       dir={contentNotTranslated ? "ltr" : "unset"}
     >
-      <BannerNotification shouldShow zIndex="sticky" hideBelow={lgBp}>
+      <BannerNotification shouldShow className="z-sticky max-lg:hidden">
         <Emoji text=":pencil:" className="me-4 shrink-0 text-2xl" />
         <Text m={0}>
           {t("template-usecase:template-usecase-banner")}{" "}