fix: pass className through

Author: wackerow

src/components/Banners/BannerNotification.tsx

@@ -1,16 +1,22 @@
+import { cn } from "@/lib/utils/cn"
+
 export type BannerNotificationProps = React.HTMLAttributes<HTMLDivElement> & {
   shouldShow?: boolean
 }
 
 const BannerNotification = ({
   children,
   shouldShow,
+  className,
   ...props
 }: BannerNotificationProps) => {
   if (!shouldShow) return <></>
   return (
     <aside
-      className="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={cn(
+        "flex items-center justify-center gap-2 bg-primary-action px-8 py-4 text-white ring [&_a]:text-white [&_a]:hover:text-white/80",
+        className
+      )}
       {...props}
     >
       {children}

src/components/Banners/DismissableBanner/index.tsx

@@ -4,16 +4,18 @@ 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"
+
 import BannerNotification from "../BannerNotification"
 
-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,9 +30,14 @@ const DismissableBanner = ({
   }
 
   return (
-    <BannerNotification shouldShow={show} className="gap-8">
+    <BannerNotification shouldShow={show} className={cn("gap-8", className)}>
       <Center className="ms-auto">{children}</Center>
-      <Button className="ms-auto" onClick={onClose} aria-label="Close Banner">
+      <Button
+        className="ms-auto"
+        onClick={onClose}
+        aria-label="Close Banner"
+        variant="ghost"
+      >
         <MdClose />
       </Button>
     </BannerNotification>