fix: Do not hide Preview button & color code it

invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx

@@ -53,88 +53,50 @@ const ProgressImagePreview = () => {
 
   const { t } = useTranslation();
 
-  return showProgressWindow ? (
+  return (
-    <Rnd
+    <>
-      bounds="window"
+      {showProgressWindow && (
-      minHeight={200}
+        <Rnd
-      minWidth={200}
+          bounds="window"
-      size={{
+          minHeight={200}
-        width: floatingProgressImageRect.width,
+          minWidth={200}
-        height: floatingProgressImageRect.height,
+          size={{
-      }}
+            width: floatingProgressImageRect.width,
-      position={{
+            height: floatingProgressImageRect.height,
-        x: floatingProgressImageRect.x,
+          }}
-        y: floatingProgressImageRect.y,
+          position={{
-      }}
+            x: floatingProgressImageRect.x,
-      onDragStop={(e, d) => {
+            y: floatingProgressImageRect.y,
-        dispatch(floatingProgressImageMoved({ x: d.x, y: d.y }));
+          }}
-      }}
+          onDragStop={(e, d) => {
-      onResizeStop={(e, direction, ref, delta, position) => {
+            dispatch(floatingProgressImageMoved({ x: d.x, y: d.y }));
-        const newRect: Partial<Rect> = {};
+          }}
+          onResizeStop={(e, direction, ref, delta, position) => {
+            const newRect: Partial<Rect> = {};
 
-        console.log(ref.style.width, ref.style.height, position.x, position.y);
+            console.log(
+              ref.style.width,
+              ref.style.height,
+              position.x,
+              position.y
+            );
 
-        if (ref.style.width) {
+            if (ref.style.width) {
-          newRect.width = ref.style.width;
+              newRect.width = ref.style.width;
-        }
+            }
-        if (ref.style.height) {
+            if (ref.style.height) {
-          newRect.height = ref.style.height;
+              newRect.height = ref.style.height;
-        }
+            }
-        if (position.x) {
+            if (position.x) {
-          newRect.x = position.x;
+              newRect.x = position.x;
-        }
+            }
-        if (position.x) {
+            if (position.x) {
-          newRect.y = position.y;
+              newRect.y = position.y;
-        }
+            }
 
-        dispatch(floatingProgressImageResized(newRect));
+            dispatch(floatingProgressImageResized(newRect));
-      }}
-    >
-      <Flex
-        sx={{
-          position: 'relative',
-          w: 'full',
-          h: 'full',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexDir: 'column',
-          boxShadow: 'dark-lg',
-          bg: 'base.800',
-          borderRadius: 'base',
-        }}
-      >
-        <Flex
-          sx={{
-            w: 'full',
-            alignItems: 'center',
-            justifyContent: 'center',
-            p: 1.5,
-            pl: 4,
-            pr: 3,
-            bg: 'base.700',
-            borderTopRadius: 'base',
           }}
         >
-          <Flex
-            sx={{
-              flexGrow: 1,
-              userSelect: 'none',
-              cursor: 'move',
-            }}
-          >
-            <Text fontSize="sm" fontWeight={500}>
-              Progress Images
-            </Text>
-          </Flex>
-          <IAIIconButton
-            onClick={() => dispatch(setShouldShowProgressImages(false))}
-            aria-label={t('ui.hideProgressImages')}
-            size="xs"
-            icon={<CloseIcon />}
-            variant="ghost"
-          />
-        </Flex>
-        {progressImage ? (
           <Flex
             sx={{
               position: 'relative',
@@ -142,50 +104,102 @@ const ProgressImagePreview = () => {
               h: 'full',
               alignItems: 'center',
               justifyContent: 'center',
+              flexDir: 'column',
+              boxShadow: 'dark-lg',
+              bg: 'base.800',
+              borderRadius: 'base',
             }}
           >
-            <Image
+            <Flex
-              draggable={false}
-              src={progressImage.dataURL}
-              width={progressImage.width}
-              height={progressImage.height}
               sx={{
-                position: 'absolute',
+                w: 'full',
-                objectFit: 'contain',
+                alignItems: 'center',
-                maxWidth: '100%',
+                justifyContent: 'center',
-                maxHeight: '100%',
+                p: 1.5,
-                height: 'auto',
+                pl: 4,
-                borderRadius: 'base',
+                pr: 3,
-                p: 2,
+                bg: 'base.700',
+                borderTopRadius: 'base',
               }}
-            />
+            >
+              <Flex
+                sx={{
+                  flexGrow: 1,
+                  userSelect: 'none',
+                  cursor: 'move',
+                }}
+              >
+                <Text fontSize="sm" fontWeight={500}>
+                  Progress Images
+                </Text>
+              </Flex>
+              <IAIIconButton
+                onClick={() => dispatch(setShouldShowProgressImages(false))}
+                aria-label={t('ui.hideProgressImages')}
+                size="xs"
+                icon={<CloseIcon />}
+                variant="ghost"
+              />
+            </Flex>
+            {progressImage ? (
+              <Flex
+                sx={{
+                  position: 'relative',
+                  w: 'full',
+                  h: 'full',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Image
+                  draggable={false}
+                  src={progressImage.dataURL}
+                  width={progressImage.width}
+                  height={progressImage.height}
+                  sx={{
+                    position: 'absolute',
+                    objectFit: 'contain',
+                    maxWidth: '100%',
+                    maxHeight: '100%',
+                    height: 'auto',
+                    borderRadius: 'base',
+                    p: 2,
+                  }}
+                />
+              </Flex>
+            ) : (
+              <Flex
+                sx={{
+                  w: 'full',
+                  h: 'full',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
+              </Flex>
+            )}
           </Flex>
-        ) : (
+        </Rnd>
-          <Flex
+      )}
-            sx={{
+      <IAIIconButton
-              w: 'full',
+        onClick={() =>
-              h: 'full',
+          dispatch(setShouldShowProgressImages(!showProgressWindow))
-              alignItems: 'center',
+        }
-              justifyContent: 'center',
+        tooltip={t('ui.showProgressImages')}
-            }}
+        sx={{
-          >
+          position: 'absolute',
-            <Icon color="base.400" boxSize={32} as={FaImage}></Icon>
+          bottom: 4,
-          </Flex>
+          insetInlineStart: 4,
-        )}
+          background: showProgressWindow ? 'accent.600' : 'base.700',
-      </Flex>
+          _hover: {
-    </Rnd>
+            background: showProgressWindow ? 'accent.500' : 'base.600',
-  ) : (
+          },
-    <IAIIconButton
+        }}
-      onClick={() => dispatch(setShouldShowProgressImages(true))}
+        aria-label={t('ui.showProgressImages')}
-      tooltip={t('ui.showProgressImages')}
+        icon={<FaStopwatch />}
-      sx={{
+      />
-        position: 'absolute',
+    </>
-        bottom: 4,
-        insetInlineStart: 4,
-      }}
-      aria-label={t('ui.showProgressImages')}
-      icon={<FaStopwatch />}
-    />
   );
 };