feat: add close button to error dialog (#507)

* feat: add close button to error dialog

* fix: DRY for x button

src/components/BottomSheetModal.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import { X } from 'icons'
+import { StyledXButton } from 'icons'
 import { forwardRef, PropsWithChildren, useState } from 'react'
 import { createPortal } from 'react-dom'
 import styled, { keyframes } from 'styled-components/macro'
@@ -74,13 +74,6 @@ const Wrapper = styled.div<{ open: boolean }>`
   }
 `
 
-const StyledXButton = styled(X)`
-  :hover {
-    cursor: pointer;
-    opacity: 0.6;
-  }
-`
-
 type BottomSheetModalProps = PropsWithChildren<{
   onClose: () => void
   open: boolean

src/components/Dialog.tsx

@@ -2,7 +2,7 @@ import 'wicg-inert'
 
 import { globalFontStyles } from 'css/font'
 import { useOnEscapeHandler } from 'hooks/useOnEscapeHandler'
-import { largeIconCss, X } from 'icons'
+import { largeIconCss, StyledXButton } from 'icons'
 import { ArrowLeft } from 'icons'
 import ms from 'ms.macro'
 import { createContext, ReactElement, ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
@@ -114,13 +114,6 @@ const StyledBackButton = styled(ArrowLeft)`
   }
 `
 
-const StyledXButton = styled(X)`
-  :hover {
-    cursor: pointer;
-    opacity: 0.6;
-  }
-`
-
 const Title = styled.div`
   left: 50%;
   position: absolute;

src/components/Error/ErrorDialog.tsx

@@ -2,7 +2,8 @@ import { Trans } from '@lingui/macro'
 import ActionButton from 'components/ActionButton'
 import Column from 'components/Column'
 import Expando from 'components/Expando'
-import { AlertTriangle, Icon, LargeIcon } from 'icons'
+import Row from 'components/Row'
+import { AlertTriangle, Icon, LargeIcon, StyledXButton } from 'icons'
 import { Info as InfoIcon } from 'icons'
 import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
@@ -65,6 +66,9 @@ export default function ErrorDialog({ header, message, error, action, onClick }:
 
   return (
     <Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
+      <Row flex flow="row-reverse">
+        <LargeIcon icon={StyledXButton} onClick={onClick} />
+      </Row>
       <StatusHeader icon={AlertTriangle} iconColor="critical" iconSize={open ? 3 : 4}>
         <ErrorHeader gap={open ? 0 : 0.75} open={open}>
           <ThemedText.Subhead1>{header || <Trans>Something went wrong.</Trans>}</ThemedText.Subhead1>

src/css/hover.ts

@@ -0,0 +1,8 @@
+import { css } from 'styled-components/macro'
+
+export const iconHoverCss = css`
+  :hover {
+    cursor: pointer;
+    opacity: 0.6;
+  }
+`

src/icons/index.tsx

@@ -9,6 +9,7 @@ import { ReactComponent as ReverseIcon } from 'assets/svg/reverse.svg'
 import { ReactComponent as SpinnerIcon } from 'assets/svg/spinner.svg'
 import { ReactComponent as WalletIcon } from 'assets/svg/wallet.svg'
 import { ReactComponent as WalletDisconnectIcon } from 'assets/svg/wallet_disconnect.svg'
+import { iconHoverCss } from 'css/hover'
 import { FunctionComponent, SVGProps } from 'react'
 // This file wraps react-feather, so its import is intentional.
 /* eslint-disable no-restricted-imports */
@@ -169,3 +170,7 @@ export const Gas = styled(icon(GasIcon))<{ color?: Color }>`
   fill: ${({ color = 'active', theme }) => theme[color]};
   stroke: ${({ color = 'active', theme }) => theme[color]};
 `
+
+export const StyledXButton = styled(X)`
+  ${iconHoverCss}
+`