Merge pull request #63 from ensdomains/export-dialog-close-button

Export dialog CloseButton component and helper tweaks
ensdomains · Aug 22, 2022 · f9e328d · f9e328d
2 parents 30eb8f3 + 5181891
commit f9e328d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git 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
@@ -1,18 +1,18 @@
 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 '../..'
 
 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 }) => (
+  <IconCloseContainer
+    as={CancelCircleSVG}
+    data-testid="close-icon"
+    onClick={onClick}
+  />
+)
+
 export const Dialog = ({
   children,
   onDismiss,
@@ -286,13 +294,7 @@ export const Dialog = ({
         onDismiss={onDismiss}
       >
         {children}
-        {onDismiss && (
-          <IconCloseContainer
-            as={ExitSVG}
-            data-testid="close-icon"
-            onClick={onDismiss}
-          />
-        )}
+        {onDismiss && <CloseButton onClick={onDismiss} />}
       </ModalWithTitle>
     )
   }
@@ -309,3 +311,4 @@ export const Dialog = ({
 Dialog.displayName = 'Dialog'
 Dialog.Footer = Footer
 Dialog.Heading = Heading
+Dialog.CloseButton = CloseButton