fix: make header text clickable (#130)

* fix: make header text clickable

* move hook out of render return

src/components/Dialog.tsx

@@ -8,7 +8,7 @@ import styled from 'styled-components/macro'
 import { Color, Layer, ThemedText, ThemeProvider } from 'theme'
 import { delayUnmountForAnimation } from 'utils/animations'
 
-import { IconButton } from './Button'
+import { TextButton } from './Button'
 import Column from './Column'
 import Row from './Row'
 import Rule from './Rule'
@@ -59,21 +59,25 @@ const HeaderRow = styled(Row)`
   padding-top: 0.5em;
   ${largeIconCss}
 `
+
 interface HeaderProps {
   title?: ReactElement
   ruled?: boolean
   children?: ReactNode
 }
 
 export function Header({ title, children, ruled }: HeaderProps) {
+  const onClose = useContext(OnCloseContext)
   return (
     <>
       <Column>
         <HeaderRow iconSize={1.2}>
-          <Row justify="flex-start" gap={0.5}>
-            <IconButton color="primary" onClick={useContext(OnCloseContext)} icon={ChevronLeft} />
-            <Row gap={0.5}>{title && <ThemedText.Subhead1>{title}</ThemedText.Subhead1>}</Row>
-          </Row>
+          <TextButton color="primary" onClick={onClose}>
+            <Row justify="flex-start" gap={0.5}>
+              <ChevronLeft />
+              <Row gap={0.5}>{title && <ThemedText.Subhead1>{title}</ThemedText.Subhead1>}</Row>
+            </Row>
+          </TextButton>
           {children}
         </HeaderRow>
         {ruled && <Rule padded />}

src/cosmos/Swap.fixture.tsx

@@ -91,9 +91,7 @@ function Fixture() {
           resolve(true) // to open our built-in wallet connect flow
         })
       }
-      onReviewSwapClick={() => {
-        return new Promise((resolve) => resolve(true))
-      }}
+      onReviewSwapClick={() => new Promise((resolve) => resolve(true))}
       onTxSubmit={(txHash: string, data: any) => console.log('tx submitted:', txHash, data)}
       onTxSuccess={(txHash: string, data: any) => console.log('tx success:', txHash, data)}
       onTxFail={(error: Error, data: any) => console.log('tx fail:', error, data)}