From f884090cf2ee2152780626477bc42b14df0819ea Mon Sep 17 00:00:00 2001
From: olena <154923065+nebby2105@users.noreply.github.com>
Date: Tue, 3 Dec 2024 18:55:47 +0200
Subject: [PATCH] fixed ConfirmDialog styles (#2913)

---
 .../confirm-dialog/ConfirmDialog.styles.ts      | 17 +++++++++++------
 src/components/confirm-dialog/ConfirmDialog.tsx | 11 +++++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/confirm-dialog/ConfirmDialog.styles.ts b/src/components/confirm-dialog/ConfirmDialog.styles.ts
index ae9ef2614..13932be23 100644
--- a/src/components/confirm-dialog/ConfirmDialog.styles.ts
+++ b/src/components/confirm-dialog/ConfirmDialog.styles.ts
@@ -2,19 +2,24 @@ import { TypographyVariantEnum } from '~/types'
 
 export const styles = {
   root: {
-    minWidth: { xs: '280px', sm: '400px' }
+    minWidth: { xs: '280px', sm: '400px' },
+    maxWidth: '600px'
+  },
+  header: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    px: '16px'
   },
   icon: {
-    position: 'absolute',
     color: 'primary.600',
-    right: '32px',
-    top: '32px',
-    p: 0
+    p: 0,
+    mt: '20px',
+    alignSelf: 'start'
   },
   title: {
     color: 'primary.700',
     typography: TypographyVariantEnum.H5,
-    p: '26px 0px 20px 30px'
+    p: '20px 15px 15px 14px'
   },
   content: {
     color: 'primary.600',
diff --git a/src/components/confirm-dialog/ConfirmDialog.tsx b/src/components/confirm-dialog/ConfirmDialog.tsx
index d43841043..7af1cfb87 100644
--- a/src/components/confirm-dialog/ConfirmDialog.tsx
+++ b/src/components/confirm-dialog/ConfirmDialog.tsx
@@ -11,6 +11,7 @@ import AppButton from '~/components/app-button/AppButton'
 import { styles } from '~/components/confirm-dialog/ConfirmDialog.styles'
 
 import { ButtonVariantEnum } from '~/types'
+import { Box } from '@mui/material'
 
 interface ConfirmDialogProps {
   message: string
@@ -42,10 +43,12 @@ const ConfirmDialog: FC<ConfirmDialogProps> = ({
       onClose={onDismiss}
       open={open}
     >
-      <Typography sx={styles.title}>{t(title)}</Typography>
-      <IconButton onClick={onDismiss} sx={styles.icon}>
-        <CloseIcon />
-      </IconButton>
+      <Box sx={styles.header}>
+        <Typography sx={styles.title}>{t(title)}</Typography>
+        <IconButton onClick={onDismiss} sx={styles.icon}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
       <DialogContent sx={styles.content}>
         <Typography>{t(message)}</Typography>
       </DialogContent>