Banner: update close trigger styles for closable variant (#220)

* style: update default button style * chore: add changeset * chore: extract on click handler
animareflection · Feb 2, 2024 · 8eea622 · 8eea622
1 parent 37eb1b3
commit 8eea622
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/unlucky-fans-crash.md b/.changeset/unlucky-fans-crash.md
@@ -0,0 +1,5 @@
+---
+"@animareflection/ui": patch
+---
+
+Update `Banner` close trigger styles
diff --git a/src/components/core/Banner/Banner.tsx b/src/components/core/Banner/Banner.tsx
@@ -20,6 +20,8 @@ const PandaBanner = panda("div", banner);
 const Banner = ({ children, closable, ...rest }: Props) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
 
+  const handleClose = () => setIsOpen(false);
+
   if (!isOpen) return null;
 
   return (
@@ -29,10 +31,13 @@ const Banner = ({ children, closable, ...rest }: Props) => {
       </panda.div>
       {closable && (
         <Button
-          onClick={() => setIsOpen(false)}
+          size="xs"
           p={1}
-          opacity={{ _hover: 0.8 }}
+          display="flex"
+          bgColor="transparent"
           aria-label="Close Banner"
+          _hover={{ opacity: 0.8 }}
+          onClick={handleClose}
         >
           <Icon color="inherit">
             <CloseIcon />