From 6004c4be3e7bba065a6e16f82998ff76f53bfc6a Mon Sep 17 00:00:00 2001
From: Justin Domingue <judo@uniswap.org>
Date: Fri, 16 Jul 2021 10:49:27 -0700
Subject: [PATCH] fix: change panning cursor to col-resize (#2071)

* change panning cursor to col-resize

* revert to grabby, and support grabbing
---
 src/components/LiquidityChartRangeInput/Chart.tsx | 4 ++--
 src/components/LiquidityChartRangeInput/Zoom.tsx  | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/LiquidityChartRangeInput/Chart.tsx b/src/components/LiquidityChartRangeInput/Chart.tsx
index 6bfc71a290..4127bbf1b6 100644
--- a/src/components/LiquidityChartRangeInput/Chart.tsx
+++ b/src/components/LiquidityChartRangeInput/Chart.tsx
@@ -5,7 +5,7 @@ import { AxisBottom } from './AxisBottom'
 import { Brush } from './Brush'
 import { Line } from './Line'
 import { ChartEntry, LiquidityChartRangeInputProps } from './types'
-import Zoom from './Zoom'
+import Zoom, { ZoomOverlay } from './Zoom'
 
 export const xAccessor = (d: ChartEntry) => d.price0
 export const yAccessor = (d: ChartEntry) => d.activeLiquidity
@@ -117,7 +117,7 @@ export function Chart({
             <AxisBottom xScale={xScale} innerHeight={innerHeight} />
           </g>
 
-          <rect width={innerWidth} height={height} fill="transparent" ref={zoomRef} cursor="grab" />
+          <ZoomOverlay width={innerWidth} height={height} ref={zoomRef} />
 
           <Brush
             id={id}
diff --git a/src/components/LiquidityChartRangeInput/Zoom.tsx b/src/components/LiquidityChartRangeInput/Zoom.tsx
index 0736b32d98..c8c06cc715 100644
--- a/src/components/LiquidityChartRangeInput/Zoom.tsx
+++ b/src/components/LiquidityChartRangeInput/Zoom.tsx
@@ -26,6 +26,15 @@ const Button = styled(ButtonGray)`
   padding: 4px;
 `
 
+export const ZoomOverlay = styled.rect`
+  fill: transparent;
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+`
+
 export default function Zoom({
   svg,
   xScale,