From 7b49f96472a59d00da7004de52fff70d982d6b07 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 30 Aug 2023 13:19:37 +1000
Subject: [PATCH] feat(ui): style input fields

---
 .../flow/nodes/Invocation/fields/InputField.tsx        | 10 +---------
 .../frontend/web/src/features/nodes/types/constants.ts |  2 +-
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
index 3758ae4114..6a931879a0 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputField.tsx
@@ -2,7 +2,6 @@ import { Box, Flex, FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
 import SelectionOverlay from 'common/components/SelectionOverlay';
 import { useConnectionState } from 'features/nodes/hooks/useConnectionState';
 import { useDoesInputHaveValue } from 'features/nodes/hooks/useDoesInputHaveValue';
-import { useFieldInputKind } from 'features/nodes/hooks/useFieldInputKind';
 import { useFieldTemplate } from 'features/nodes/hooks/useFieldTemplate';
 import { useIsMouseOverField } from 'features/nodes/hooks/useIsMouseOverField';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
@@ -21,7 +20,6 @@ interface Props {
 const InputField = ({ nodeId, fieldName }: Props) => {
   const fieldTemplate = useFieldTemplate(nodeId, fieldName, 'input');
   const doesFieldHaveValue = useDoesInputHaveValue(nodeId, fieldName);
-  const input = useFieldInputKind(nodeId, fieldName);
 
   const {
     isConnected,
@@ -72,7 +70,6 @@ const InputField = ({ nodeId, fieldName }: Props) => {
       shouldDim={shouldDim}
     >
       <FormControl
-        as={Flex}
         isInvalid={isMissingInput}
         isDisabled={isConnected}
         sx={{
@@ -101,7 +98,6 @@ const InputField = ({ nodeId, fieldName }: Props) => {
               <FormLabel
                 sx={{
                   mb: 0,
-                  width: input === 'connection' ? 'auto' : '25%',
                   flexShrink: 0,
                   flexGrow: 0,
                 }}
@@ -117,11 +113,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
             </Tooltip>
           )}
         </FieldContextMenu>
-        <Box
-          sx={{
-            width: input === 'connection' ? 'auto' : '75%',
-          }}
-        >
+        <Box>
           <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
         </Box>
       </FormControl>
diff --git a/invokeai/frontend/web/src/features/nodes/types/constants.ts b/invokeai/frontend/web/src/features/nodes/types/constants.ts
index ea0f43bbd0..c611ca9976 100644
--- a/invokeai/frontend/web/src/features/nodes/types/constants.ts
+++ b/invokeai/frontend/web/src/features/nodes/types/constants.ts
@@ -62,7 +62,7 @@ export const FIELDS: Record<FieldType, FieldUIConfig> = {
   DenoiseMaskField: {
     title: 'Denoise Mask',
     description: 'Denoise Mask may be passed between nodes',
-    color: 'red.700',
+    color: 'base.500',
   },
   LatentsField: {
     title: 'Latents',