From c6b1dd43d25823913dd67e9c051bc425674ab9e7 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sat, 9 Nov 2024 05:48:21 +1000 Subject: [PATCH] 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. --- .../src/features/gallery/components/ImageGrid/GalleryImage.tsx | 2 +- 1 file changed, 1 insertion(+), 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 index b27025de898..8efed872104 100644 --- 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: