From 8bb95714856f2bdf7524f70a6e9aa4a61b4f9ae3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 1 Jun 2024 19:17:18 +1000
Subject: [PATCH] feat(ui): tweak slider divider styling

---
 .../components/ImageViewer/ImageComparisonSlider.tsx       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
index 3ced364b64..f1c2cc6f33 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonSlider.tsx
@@ -11,7 +11,7 @@ import type { ImageDTO } from 'services/api/types';
 
 const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0))';
 const INITIAL_POS = '50%';
-const HANDLE_WIDTH = 1;
+const HANDLE_WIDTH = 2;
 const HANDLE_WIDTH_PX = `${HANDLE_WIDTH}px`;
 const HANDLE_HITBOX = 20;
 const HANDLE_HITBOX_PX = `${HANDLE_HITBOX}px`;
@@ -226,15 +226,16 @@ export const ImageComparisonSlider = memo(({ firstImage, secondImage }: Props) =
             bottom={0}
             left={left}
             w={HANDLE_HITBOX_PX}
-            tabIndex={-1}
             cursor="ew-resize"
             filter={DROP_SHADOW}
+            opacity={0.8}
+            color="base.50"
           >
             <Box
               id="image-comparison-handle-divider"
               w={HANDLE_WIDTH_PX}
               h="full"
-              bg="base.50"
+              bg="currentColor"
               shadow="dark-lg"
               position="absolute"
               top={0}