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