Merge pull request #101 from ensdomains/fix/close-icons

fix: close icons in dialog and toast
ensdomains · Feb 15, 2023 · e7a7ddd · e7a7ddd
2 parents 17e440f + 566bcfa
commit e7a7ddd
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git 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 }) => (
   <IconCloseContainer data-testid="close-icon" onClick={onClick}>
-    <CrossCircleSVG />
+    <CrossSVG />
   </IconCloseContainer>
 )
 

diff --git 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}
     >
       <IconCloseContainer
-        as={ExitSVG}
+        as={CrossSVG}
         data-testid="toast-close-icon"
         onClick={() => onClose()}
       />
@@ -330,7 +331,7 @@ export const TouchToast = ({
         <>
           {children && <ActionWrapper>{children}</ActionWrapper>}
           <IconCloseContainer
-            as={ExitSVG}
+            as={CrossSVG}
             data-testid="toast-close-icon"
             onClick={(e: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
               e.stopPropagation()