From 5a3ef1e79922f2819dda82c6a003c92a58a0d219 Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Tue, 25 Jun 2024 15:39:09 -0400
Subject: [PATCH] fix: bug in arrowscroll causing it to sometimes show/hide at
 the wrong times (#615)

---
 src/components/ArrowScroll.tsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/ArrowScroll.tsx b/src/components/ArrowScroll.tsx
index 3bdbe68f..09386044 100644
--- a/src/components/ArrowScroll.tsx
+++ b/src/components/ArrowScroll.tsx
@@ -2,12 +2,12 @@ import {
   Children,
   type ComponentProps,
   cloneElement,
-  useEffect,
   useRef,
   useState,
 } from 'react'
 import styled from 'styled-components'
 
+import useResizeObserver from '../hooks/useResizeObserver'
 import { ArrowLeftIcon, ArrowRightIcon } from '../icons'
 
 const ComponentWrapperSC = styled.div({
@@ -37,7 +37,9 @@ const ArrowWrapperSC = styled.div<{
   transition: 'opacity .2s ease',
   background: `linear-gradient(${
     $direction === 'left' ? 'to left' : 'to right'
-  }, transparent 0%, #303540 70%, #303540 100%)`,
+  }, transparent 0%, ${theme.colors['fill-one-selected']} 70%, ${
+    theme.colors['fill-one-selected']
+  } 100%)`,
   ...($direction === 'left' ? { left: 0 } : { right: 0 }),
   '&.visible': {
     cursor: 'pointer',
@@ -95,12 +97,7 @@ function ArrowScroll({ children, ...props }: { children?: any }) {
     }
   }
 
-  useEffect(() => {
-    checkScroll()
-    window.addEventListener('resize', checkScroll)
-
-    return () => window.removeEventListener('resize', checkScroll)
-  }, [])
+  useResizeObserver(containerRef, checkScroll)
 
   return (
     <ComponentWrapperSC {...props}>