Fix Flyout close

ClickHouse · Oct 20, 2023 · 55a8b3f · 55a8b3f
1 parent b8adb51
commit 55a8b3f
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/src/components/Flyout/Flyout.tsx b/src/components/Flyout/Flyout.tsx
@@ -12,8 +12,9 @@ import {
   DialogTriggerProps,
   DialogContentProps as RadixDialogContentProps,
 } from "@radix-ui/react-dialog";
-import { Button, IconButton, Separator } from "..";
+import { Button, Icon, Separator } from "..";
 import styled from "styled-components";
+import { CrossButton } from "../commonElement";
 
 export type FlyoutProps = DialogProps;
 
@@ -198,12 +199,12 @@ const Header = ({ title, description, children, ...props }: FlyoutHeaderProps) =
         <FlyoutHeaderContainer {...props}>
           <FlexGrow>{children}</FlexGrow>
           <DialogClose asChild>
-            <IconButton
-              data-testid="flyout-header-close-btn"
-              icon="cross"
-              type="ghost"
-              size="xs"
-            />
+            <CrossButton data-testid="flyout-header-close-btn">
+              <Icon
+                name="cross"
+                size="lg"
+              />
+            </CrossButton>
           </DialogClose>
         </FlyoutHeaderContainer>
         <Separator size="lg" />
@@ -219,12 +220,12 @@ const Header = ({ title, description, children, ...props }: FlyoutHeaderProps) =
           {description && <FlyoutDescription>{description}</FlyoutDescription>}
         </FlexGrow>
         <DialogClose asChild>
-          <IconButton
-            data-testid="flyout-header-close-btn"
-            icon="cross"
-            type="ghost"
-            size="xs"
-          />
+          <CrossButton data-testid="flyout-header-close-btn">
+            <Icon
+              name="cross"
+              size="lg"
+            />
+          </CrossButton>
         </DialogClose>
       </FlyoutHeaderContainer>
       <Separator size="lg" />

diff --git a/src/components/commonElement.tsx b/src/components/commonElement.tsx
@@ -64,6 +64,18 @@ export const EmptyButton = styled.button`
   }
 `;
 
+export const CrossButton = styled(EmptyButton)`
+  padding: ${({ theme }) => theme.click.button.iconButton.sm.space.y}
+    ${({ theme }) => theme.click.button.iconButton.sm.space.x};
+  background: ${({ theme }) =>
+    theme.click.button.iconButton.color.primary.background.default};
+  border-radius: ${({ theme }) => theme.click.button.iconButton.radii.all};
+
+  &:hover {
+    background: ${({ theme }) =>
+      theme.click.button.iconButton.color.primary.background.hover};
+  }
+`;
 export const GridCenter = styled.div`
   display: grid;
   place-items: center;