From cc03fcbcb6777d25b4b31f2ff92b875e260e2d92 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 12 Mar 2024 18:42:19 +1100
Subject: [PATCH] style(ui): tweak image dimension badge overlay styles

---
 .../components/ImageGrid/GalleryImage.tsx     | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

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 21ba6b735e..1a7375766d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -158,16 +158,20 @@ const GalleryImage = (props: HoverableImageProps) => {
             {isHovered && (
               <Text
                 position="absolute"
-                background="base.950"
-                color="accent.50"
-                fontSize="base.50"
-                bottom={1.5}
-                left={1}
-                px={2}
+                background="base.900"
+                color="base.50"
+                fontSize="sm"
+                fontWeight="semibold"
+                bottom={0}
+                left={0}
                 opacity={0.7}
-                borderRadius="base"
+                px={2}
+                lineHeight={1.25}
+                borderTopEndRadius="base"
+                borderBottomStartRadius="base"
                 sx={badgeSx}
-              >{`${imageDTO.width}x${imageDTO.height}`}</Text>)}
+              >{`${imageDTO.width}x${imageDTO.height}`}</Text>
+            )}
             <IAIDndImageIcon onClick={toggleStarredState} icon={starIcon} tooltip={starTooltip} />
 
             {isHovered && shift && (