feat: add black alpha background to handle button and increase line b…

…ox shadow opacity
nerdyman · Oct 21, 2023 · 4d85242 · 4d85242
1 parent 554bb13
commit 4d85242
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/lib/src/ReactCompareSliderHandle.tsx b/lib/src/ReactCompareSliderHandle.tsx
@@ -61,7 +61,7 @@ export const ReactCompareSliderHandle: FC<
     width: portrait ? '100%' : 2,
     backgroundColor: 'currentColor',
     pointerEvents: 'auto',
-    boxShadow: '0 0 7px rgba(0,0,0,.35)',
+    boxShadow: '0 0 7px rgba(0,0,0,.5)',
     ...linesStyle,
   };
 
@@ -79,6 +79,7 @@ export const ReactCompareSliderHandle: FC<
     pointerEvents: 'auto',
     backdropFilter: 'blur(7px)',
     WebkitBackdropFilter: 'blur(7px)', // For Safari.
+    backgroundColor: 'rgba(0, 0, 0, 0.125)',
     boxShadow: '0 0 7px rgba(0,0,0,.35)',
     transform: portrait ? 'rotate(90deg)' : undefined,
     ...buttonStyle,

diff --git a/lib/src/utils.ts b/lib/src/utils.ts
@@ -105,7 +105,7 @@ export const useResizeObserver = (
 
   // Bind/rebind observer when `handler` changes.
   useIsomorphicLayoutEffect(() => {
-    observer.current = new ResizeObserver(([entry]) => handler(entry.contentRect));
+    observer.current = new ResizeObserver(([entry]) => handler(entry!.contentRect));
     observe();
 
     return (): void => {