From 4975b1a704ff00163e53a2f2dc4091cce9c6f101 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Tue, 18 Jul 2023 20:35:20 +1200
Subject: [PATCH] style: Minor updates to the visual look of the nodes

---
 .../src/features/nodes/components/IAINode/IAINodeHeader.tsx | 6 +++---
 .../src/features/nodes/components/InvocationComponent.tsx   | 2 +-
 .../web/src/features/nodes/components/NodeEditor.tsx        | 4 ++--
 .../web/src/features/nodes/components/NodeWrapper.tsx       | 2 +-
 invokeai/frontend/web/src/theme/theme.ts                    | 4 ++--
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
index 226aaed7be..7b56bc95b4 100644
--- a/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/IAINode/IAINodeHeader.tsx
@@ -20,8 +20,8 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
         justifyContent: 'space-between',
         px: 2,
         py: 1,
-        bg: 'base.300',
-        _dark: { bg: 'base.700' },
+        bg: 'base.100',
+        _dark: { bg: 'base.900' },
       }}
     >
       <Tooltip label={nodeId}>
@@ -30,7 +30,7 @@ const IAINodeHeader = (props: IAINodeHeaderProps) => {
           sx={{
             fontWeight: 600,
             color: 'base.900',
-            _dark: { color: 'base.100' },
+            _dark: { color: 'base.200' },
           }}
         >
           {title}
diff --git a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
index 608f98d6d2..4c031afaff 100644
--- a/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/InvocationComponent.tsx
@@ -59,7 +59,7 @@ export const InvocationComponent = memo((props: NodeProps<InvocationValue>) => {
           flexDirection: 'column',
           borderBottomRadius: 'md',
           py: 2,
-          bg: 'base.200',
+          bg: 'base.150',
           _dark: { bg: 'base.800' },
         }}
       >
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index 2be98b1cb9..8c0480774c 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -1,9 +1,9 @@
-import 'reactflow/dist/style.css';
 import { Box } from '@chakra-ui/react';
 import { ReactFlowProvider } from 'reactflow';
+import 'reactflow/dist/style.css';
 
-import { Flow } from './Flow';
 import { memo } from 'react';
+import { Flow } from './Flow';
 
 const NodeEditor = () => {
   return (
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx
index dc5a94c267..882c6efd69 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeWrapper.tsx
@@ -1,9 +1,9 @@
 import { Box, useToken } from '@chakra-ui/react';
 import { NODE_MIN_WIDTH } from 'app/constants';
 
+import { useAppSelector } from 'app/store/storeHooks';
 import { PropsWithChildren } from 'react';
 import { DRAG_HANDLE_CLASSNAME } from '../hooks/useBuildInvocation';
-import { useAppSelector } from 'app/store/storeHooks';
 
 type NodeWrapperProps = PropsWithChildren & {
   selected: boolean;
diff --git a/invokeai/frontend/web/src/theme/theme.ts b/invokeai/frontend/web/src/theme/theme.ts
index 03d1f640ac..42a5a12c3f 100644
--- a/invokeai/frontend/web/src/theme/theme.ts
+++ b/invokeai/frontend/web/src/theme/theme.ts
@@ -13,13 +13,13 @@ import { popoverTheme } from './components/popover';
 import { progressTheme } from './components/progress';
 import { no_scrollbar } from './components/scrollbar';
 import { selectTheme } from './components/select';
+import { skeletonTheme } from './components/skeleton';
 import { sliderTheme } from './components/slider';
 import { switchTheme } from './components/switch';
 import { tabsTheme } from './components/tabs';
 import { textTheme } from './components/text';
 import { textareaTheme } from './components/textarea';
 import { tooltipTheme } from './components/tooltip';
-import { skeletonTheme } from './components/skeleton';
 
 export const theme: ThemeOverride = {
   config: {
@@ -74,7 +74,7 @@ export const theme: ThemeOverride = {
         '0px 0px 0px 1px var(--invokeai-colors-base-150), 0px 0px 0px 4px var(--invokeai-colors-accent-400)',
       dark: '0px 0px 0px 1px var(--invokeai-colors-base-900), 0px 0px 0px 4px var(--invokeai-colors-accent-400)',
     },
-    nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-base-500)`,
+    nodeSelectedOutline: `0 0 0 2px var(--invokeai-colors-accent-450)`,
   },
   colors: InvokeAIColors,
   components: {