From 34e3c2e000d5f5d756fcfb75e7a024d13b78c709 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 4 Sep 2023 15:24:53 +1000
Subject: [PATCH] feat(ui): style handles

---
 .../nodes/Invocation/fields/FieldHandle.tsx   |  4 ++-
 .../web/src/features/nodes/types/constants.ts | 31 +++++++++++++------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
index 02b18e7178..3166590254 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx
@@ -4,6 +4,7 @@ import {
   COLLECTION_TYPES,
   FIELDS,
   HANDLE_TOOLTIP_OPEN_DELAY,
+  MODEL_TYPES,
   POLYMORPHIC_TYPES,
 } from 'features/nodes/types/constants';
 import {
@@ -52,6 +53,7 @@ const FieldHandle = (props: FieldHandleProps) => {
   const styles: CSSProperties = useMemo(() => {
     const isCollectionType = COLLECTION_TYPES.includes(type);
     const isPolymorphicType = POLYMORPHIC_TYPES.includes(type);
+    const isModelType = MODEL_TYPES.includes(type);
     const color = colorTokenToCssVar(typeColor);
     const s: CSSProperties = {
       backgroundColor:
@@ -64,7 +66,7 @@ const FieldHandle = (props: FieldHandleProps) => {
       borderWidth: isCollectionType || isPolymorphicType ? 4 : 0,
       borderStyle: 'solid',
       borderColor: color,
-      borderRadius: isPolymorphicType ? 4 : '100%',
+      borderRadius: isModelType ? 4 : '100%',
       zIndex: 1,
     };
 
diff --git a/invokeai/frontend/web/src/features/nodes/types/constants.ts b/invokeai/frontend/web/src/features/nodes/types/constants.ts
index dcd579d912..a12c1fbddc 100644
--- a/invokeai/frontend/web/src/features/nodes/types/constants.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/constants.ts
@@ -39,6 +39,19 @@ export const POLYMORPHIC_TYPES = [
   'ColorPolymorphic',
 ];
 
+export const MODEL_TYPES = [
+  'ControlNetModelField',
+  'LoRAModelField',
+  'MainModelField',
+  'ONNXModelField',
+  'SDXLMainModelField',
+  'SDXLRefinerModelField',
+  'VaeModelField',
+  'UNetField',
+  'VaeField',
+  'ClipField',
+];
+
 export const COLLECTION_MAP = {
   integer: 'IntegerCollection',
   boolean: 'BooleanCollection',
@@ -103,7 +116,7 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
     title: 'Boolean Polymorphic',
   },
   ClipField: {
-    color: 'green.300',
+    color: 'green.500',
     description: 'Tokenizer and text_encoder submodels.',
     title: 'Clip',
   },
@@ -238,17 +251,17 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
     title: 'Latents Polymorphic',
   },
   LoRAModelField: {
-    color: 'teal.300',
+    color: 'teal.500',
     description: 'TODO',
     title: 'LoRA',
   },
   MainModelField: {
-    color: 'teal.300',
+    color: 'teal.500',
     description: 'TODO',
     title: 'Model',
   },
   ONNXModelField: {
-    color: 'teal.300',
+    color: 'teal.500',
     description: 'ONNX model field.',
     title: 'ONNX Model',
   },
@@ -258,12 +271,12 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
     title: 'Scheduler',
   },
   SDXLMainModelField: {
-    color: 'teal.300',
+    color: 'teal.500',
     description: 'SDXL model field.',
     title: 'SDXL Model',
   },
   SDXLRefinerModelField: {
-    color: 'teal.300',
+    color: 'teal.500',
     description: 'TODO',
     title: 'Refiner Model',
   },
@@ -283,17 +296,17 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
     title: 'String Polymorphic',
   },
   UNetField: {
-    color: 'red.300',
+    color: 'red.500',
     description: 'UNet submodel.',
     title: 'UNet',
   },
   VaeField: {
-    color: 'blue.300',
+    color: 'blue.500',
     description: 'Vae submodel.',
     title: 'Vae',
   },
   VaeModelField: {
-    color: 'teal.300',
+    color: 'teal.500',
     description: 'TODO',
     title: 'VAE',
   },