diff --git a/components/src/components/molecules/Helper/Helper.tsx b/components/src/components/molecules/Helper/Helper.tsx
index cb30f96f..80ce927e 100644
--- a/components/src/components/molecules/Helper/Helper.tsx
+++ b/components/src/components/molecules/Helper/Helper.tsx
@@ -26,24 +26,30 @@ const Container = styled.div<{ $type: HelperType; $alignment: Alignment }>(
gap: ${theme.space['2']};
border-radius: ${theme.radii.large};
+ text-align: center;
+
${$alignment === 'horizontal' &&
css`
flex-direction: row;
justify-content: flex-start;
gap: ${theme.space['4']};
padding: ${theme.space['4']};
+ text-align: left;
`}
background-color: ${theme.colors.lightBlue};
+ border: ${theme.borderWidths.px} solid ${theme.colors.blue};
${$type === 'warning' &&
css`
background-color: ${theme.colors.lightYellow};
+ border-color: ${theme.colors.yellow};
`}
${$type === 'error' &&
css`
background-color: ${theme.colors.lightRed};
+ border-color: ${theme.colors.red};
`}
`,
)
diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
index 7ccd4417..2d4d2ded 100644
--- a/components/src/components/organisms/Dialog/Dialog.tsx
+++ b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import styled, { css } from 'styled-components'
-import { ExitSVG } from '@/src'
+import { CancelCircleSVG } from '@/src'
import { mq } from '@/src/utils/responsiveHelpers'
import { Modal, Typography } from '../..'
@@ -9,10 +9,10 @@ import { Modal, Typography } from '../..'
const IconCloseContainer = styled.div(
({ theme }) => css`
position: absolute;
- top: ${theme.space['2.5']};
- right: ${theme.space['2.5']};
- height: ${theme.space['8']};
- width: ${theme.space['8']};
+ top: ${theme.space['4']};
+ right: ${theme.space['4']};
+ height: ${theme.space['6']};
+ width: ${theme.space['6']};
opacity: ${theme.opacity['50']};
cursor: pointer;
transition-property: all;
@@ -251,6 +251,14 @@ const ModalWithTitle = ({
)
}
+const CloseButton = ({ onClick }: { onClick: () => void }) => (
+
+)
+
export const Dialog = ({
children,
onDismiss,
@@ -286,13 +294,7 @@ export const Dialog = ({
onDismiss={onDismiss}
>
{children}
- {onDismiss && (
-
- )}
+ {onDismiss && }
)
}
@@ -309,3 +311,4 @@ export const Dialog = ({
Dialog.displayName = 'Dialog'
Dialog.Footer = Footer
Dialog.Heading = Heading
+Dialog.CloseButton = CloseButton