fix(Dialog): condense the design (#795)

Author: tenphi

.changeset/nine-candles-share.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Condense the UI of Dialog component.

src/components/overlays/Dialog/Dialog.tsx

@@ -23,7 +23,7 @@ import {
   tasty,
 } from '../../../tasty';
 import { mergeProps, SlotProvider } from '../../../utils/react';
-import { Button } from '../../actions';
+import { Button, ItemButton } from '../../actions';
 import { useOpenTransitionContext } from '../Modal/OpenTransition';
 
 import { useDialogContext } from './context';
@@ -73,45 +73,35 @@ const DialogElement = tasty({
       '[data-type="panel"]': 'auto',
     },
     '$dialog-title-padding-v': {
-      '': '2x',
+      '': '1.5x',
       '[data-type="popover"]': '1x',
     },
     '$dialog-content-padding-v': {
-      '': '2x',
-      '[data-type="popover"]': '2x',
+      '': '1.5x',
+      '[data-type="popover"]': '1x',
     },
     '$dialog-padding-h': {
-      '': '2x',
-      '[data-type="popover"]': '2x',
+      '': '1.5x',
+      '[data-type="popover"]': '1x',
     },
     '$dialog-footer-v': {
-      '': '2x',
+      '': '1.5x',
+      '[data-type="popover"]': '1x',
+    },
+    '$dialog-content-gap': {
+      '': '1.5x',
       '[data-type="popover"]': '1x',
     },
-    '$dialog-content-gap': '2x',
   },
 });
 
-const CloseButton = tasty(Button, {
+const CloseButton = tasty(ItemButton, {
   qa: 'ModalCloseButton',
   type: 'neutral',
-  size: 'large',
   styles: {
-    display: 'flex',
     position: 'absolute',
     top: '1x',
     right: '1x',
-    placeContent: 'center',
-    fill: {
-      '': '#dark.0',
-      hovered: '#dark.04',
-      pressed: '#dark.05',
-    },
-    color: {
-      '': '#dark-02',
-      hovered: '#dark-02',
-      pressed: '#purple',
-    },
   },
 });
 
@@ -261,7 +251,7 @@ const DialogContent = forwardRef(function DialogContent(
         display: 'flex',
         flow: 'row',
         gap: '1x',
-        placeItems: 'baseline stretch',
+        placeItems: 'center stretch',
         placeContent: 'space-between',
         padding: `$dialog-title-padding-v ${
           isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'
@@ -300,7 +290,7 @@ const DialogContent = forwardRef(function DialogContent(
       <SlotProvider slots={slots}>
         {isDismissable && (
           <CloseButton
-            icon={closeIcon || <CloseIcon />}
+            icon={closeIcon || <CloseIcon size={20} />}
             label={formatMessage('dismiss')}
             onPress={() => onDismiss && onDismiss()}
           />