diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx index 85188b86..a04a5b3f 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 { AlertSVG, CrossCircleSVG, EthSVG } from '@/src' +import { AlertSVG, CrossSVG, EthSVG } from '@/src' import { mq } from '@/src/utils/responsiveHelpers' import { WithAlert } from '@/src/types' @@ -11,9 +11,8 @@ import { Modal, Typography } from '../..' const IconCloseContainer = styled.button( ({ theme }) => css` position: absolute; - top: ${theme.space['1']}; - right: ${theme.space['1']}; - padding: ${theme.space['3']}; + top: ${theme.space['3']}; + right: ${theme.space['3']}; color: ${theme.colors.greyPrimary}; cursor: pointer; transition-property: all; @@ -26,8 +25,9 @@ const IconCloseContainer = styled.button( svg { display: block; - width: ${theme.space['6']}; - height: ${theme.space['6']}; + width: ${theme.space['9']}; + height: ${theme.space['9']}; + padding: ${theme.space['1.5']}; } `, ) @@ -340,7 +340,7 @@ const ModalWithTitle = ({ const CloseButton = ({ onClick }: { onClick: () => void }) => ( - + ) diff --git a/components/src/components/organisms/Toast/Toast.tsx b/components/src/components/organisms/Toast/Toast.tsx index 0b371b19..467e689a 100644 --- a/components/src/components/organisms/Toast/Toast.tsx +++ b/components/src/components/organisms/Toast/Toast.tsx @@ -4,16 +4,17 @@ import styled, { css, useTheme } from 'styled-components' import { Space } from '@/src' -import { Backdrop, ExitSVG, Typography } from '../..' +import { Backdrop, CrossSVG, Typography } from '../..' import { getTestId } from '../../../utils/utils' -const IconCloseContainer = styled.div( +const IconCloseContainer = styled.svg( ({ theme }) => css` position: absolute; top: ${theme.space['2.5']}; right: ${theme.space['2.5']}; - height: ${theme.space['8']}; - width: ${theme.space['8']}; + width: ${theme.space['9']}; + height: ${theme.space['9']}; + padding: ${theme.space['1.5']}; opacity: 0.5; cursor: pointer; transition-property: all; @@ -168,7 +169,7 @@ const DesktopToast = ({ $top={top} > onClose()} /> @@ -330,7 +331,7 @@ export const TouchToast = ({ <> {children && {children}} ) => { e.stopPropagation()