Improve placeholder styling with badge and refined text positioning

Co-authored-by: kent <kent@invoke.ai>

Author: 2 people

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts

@@ -28,6 +28,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     placeholder: {
       group: Konva.Group;
       rect: Konva.Rect;
+      badgeBg: Konva.Rect;
       text: Konva.Text;
     };
   };
@@ -64,21 +65,36 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
         }),
         rect: new Konva.Rect({
           name: `${this.type}:placeholder_rect`,
-          fill: 'hsl(220 12% 10% / 1)', // 'base.900'
+          fill: 'transparent',
           width,
           height,
           listening: false,
           perfectDrawEnabled: false,
         }),
+        badgeBg: new Konva.Rect({
+          name: `${this.type}:placeholder_badge_bg`,
+          fill: 'hsl(220 12% 10% / 0.8)', // 'base.900' with opacity
+          x: 6,
+          y: 6,
+          width: Math.min(204, width - 12),
+          height: 36,
+          cornerRadius: 6,
+          stroke: 'hsl(220 12% 50% / 1)', // 'base.700'
+          strokeWidth: 1,
+          listening: false,
+          perfectDrawEnabled: false,
+        }),
         text: new Konva.Text({
           name: `${this.type}:placeholder_text`,
-          fill: 'hsl(220 12% 80% / 1)', // 'base.900'
-          width,
-          height,
+          fill: 'hsl(220 12% 80% / 1)', // 'base.300'
+          x: 8,
+          y: 8,
+          width: Math.min(200, width - 16),
+          height: 32,
           align: 'center',
           verticalAlign: 'middle',
           fontFamily: '"Inter Variable", sans-serif',
-          fontSize: width / 24,
+          fontSize: 14,
           fontStyle: '600',
           text: 'Waiting for Image',
           listening: false,
@@ -88,6 +104,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     };
 
     this.konva.placeholder.group.add(this.konva.placeholder.rect);
+    this.konva.placeholder.group.add(this.konva.placeholder.badgeBg);
     this.konva.placeholder.group.add(this.konva.placeholder.text);
     this.konva.group.add(this.konva.placeholder.group);
 
@@ -124,9 +141,8 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     const { width, height } = this.manager.stateApi.getBbox().rect;
     this.konva.placeholder.rect.width(width);
     this.konva.placeholder.rect.height(height);
-    this.konva.placeholder.text.width(width);
-    this.konva.placeholder.text.height(height);
-    this.konva.placeholder.text.fontSize(width / 24);
+    this.konva.placeholder.badgeBg.width(Math.min(204, width - 12));
+    this.konva.placeholder.text.width(Math.min(200, width - 16));
   };
 
   initialize = () => {

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ProgressImage.tsx

@@ -1,5 +1,5 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Flex, Heading, Image } from '@invoke-ai/ui-library';
+import { Badge, Flex, Image } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
@@ -37,8 +37,23 @@ export const ProgressImage = memo(() => {
 
   if (!progressImage) {
     return (
-      <Flex width="full" height="full" alignItems="center" justifyContent="center" minW={0} minH={0}>
-        <Heading>Waiting for Image</Heading>
+      <Flex width="full" height="full" position="relative" minW={0} minH={0}>
+        <Badge
+          position="absolute"
+          top={2}
+          left={2}
+          color="base.300"
+          borderColor="base.700"
+          borderWidth={1}
+          bg="base.900"
+          opacity={0.8}
+          fontSize="sm"
+          fontWeight="semibold"
+          zIndex={1}
+          pointerEvents="none"
+        >
+          Waiting for Image
+        </Badge>
       </Flex>
     );
   }