From 6855ca3eca8e613cd8d5ca4cf4f461f342ca013a Mon Sep 17 00:00:00 2001
From: Kristie Huang <kristiehuang01@gmail.com>
Date: Tue, 9 Aug 2022 10:51:09 -0700
Subject: [PATCH] fix: make header text clickable (#130)

* fix: make header text clickable

* move hook out of render return
---
 src/components/Dialog.tsx   | 14 +++++++++-----
 src/cosmos/Swap.fixture.tsx |  4 +---
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 514e8341b..b932a7950 100644
--- a/src/components/Dialog.tsx
+++ b/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,6 +59,7 @@ const HeaderRow = styled(Row)`
   padding-top: 0.5em;
   ${largeIconCss}
 `
+
 interface HeaderProps {
   title?: ReactElement
   ruled?: boolean
@@ -66,14 +67,17 @@ interface HeaderProps {
 }
 
 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 />}
diff --git a/src/cosmos/Swap.fixture.tsx b/src/cosmos/Swap.fixture.tsx
index d77b1b426..8f1f8bf6b 100644
--- a/src/cosmos/Swap.fixture.tsx
+++ b/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)}