From 8efef8da419ae49c3f3e96b0a846ee00c0a18b5f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 27 Jun 2025 19:05:27 +1000
Subject: [PATCH] feat(ui): workflows styling tweaks

---
 .../src/features/nodes/components/NodeEditor.tsx    |  1 +
 .../components/flow/nodes/common/NodeWrapper.tsx    | 13 +++++--------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 96a4c5cd0b..6ad4f7015d 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -17,6 +17,7 @@ import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
 import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
 
 const FOCUS_REGION_STYLES: SystemStyleObject = {
+  bg: 'base.900',
   display: 'flex',
   position: 'relative',
   width: 'full',
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
index ab9743c155..0431485d99 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/common/NodeWrapper.tsx
@@ -28,7 +28,7 @@ const containerSx: SystemStyleObject = {
   cursor: 'grab',
   // The action buttons are hidden by default and shown on hover
   '& .node-selection-overlay': {
-    display: 'none',
+    display: 'block',
     position: 'absolute',
     top: 0,
     insetInlineEnd: 0,
@@ -37,31 +37,28 @@ const containerSx: SystemStyleObject = {
     borderRadius: 'base',
     transitionProperty: 'none',
     pointerEvents: 'none',
-    opacity: 0.5,
+    shadow: '0 0 0 1px var(--invoke-colors-base-500)',
   },
   '&[data-is-mouse-over-node="true"] .node-selection-overlay': {
-    opacity: 1,
     display: 'block',
   },
   '&[data-is-mouse-over-form-field="true"] .node-selection-overlay': {
-    opacity: 1,
     display: 'block',
     bg: 'invokeBlueAlpha.100',
   },
   _hover: {
     '& .node-selection-overlay': {
       display: 'block',
-      shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
+      shadow: '0 0 0 1px var(--invoke-colors-blue-300)',
     },
     '&[data-is-selected="true"] .node-selection-overlay': {
       display: 'block',
-      opacity: 1,
-      shadow: '0 0 0 3px var(--invoke-colors-blue-300)',
+      shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
     },
   },
   '&[data-is-selected="true"] .node-selection-overlay': {
     display: 'block',
-    shadow: '0 0 0 3px var(--invoke-colors-blue-300)',
+    shadow: '0 0 0 2px var(--invoke-colors-blue-300)',
   },
   '&[data-is-editor-locked="true"]': {
     '& *': {