feat(ui): tweak image selection/hover styling

The styling in gallery for selected vs hovered was very similar, leading users to think that the hovered image was also selected. Reducing the borders for hovered images to a single pixel makes it easier to distinguish between selected and hovered.
invoke-ai · Nov 14, 2024 · c6b1dd4 · c6b1dd4
1 parent 829bc1b
commit c6b1dd4
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -66,7 +66,7 @@ const galleryImageContainerSX = {
     },
     '&:hover::before': {
       boxShadow:
-        'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
+        'inset 0px 0px 0px 1px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-800)',
     },
     '&:hover[data-selected=true]::before': {
       boxShadow: