feat(ui): misc cleanups

invokeai/frontend/web/src/features/nodes/components/Invocation/NodeHeader.tsx

@@ -25,7 +25,7 @@ const NodeHeader = ({ nodeId, isOpen }: Props) => {
         justifyContent: 'space-between',
         h: 8,
         textAlign: 'center',
-        fontWeight: 600,
+        fontWeight: 500,
         color: 'base.700',
         _dark: { color: 'base.200' },
       }}

invokeai/frontend/web/src/features/nodes/components/Invocation/NodeTitle.tsx

@@ -79,7 +79,7 @@ const NodeTitle = ({ nodeId, title }: Props) => {
           fontSize="sm"
           sx={{
             p: 0,
-            fontWeight: 'initial',
+            fontWeight: 700,
             _focusVisible: {
               p: 0,
               boxShadow: 'none',

invokeai/frontend/web/src/features/nodes/components/fields/FieldTitle.tsx

@@ -18,10 +18,11 @@ interface Props {
   nodeId: string;
   fieldName: string;
   kind: 'input' | 'output';
+  isMissingInput?: boolean;
 }
 
 const FieldTitle = forwardRef((props: Props, ref) => {
-  const { nodeId, fieldName, kind } = props;
+  const { nodeId, fieldName, kind, isMissingInput = false } = props;
   const label = useFieldLabel(nodeId, fieldName);
   const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, kind);
 
@@ -78,7 +79,11 @@ const FieldTitle = forwardRef((props: Props, ref) => {
         <EditablePreview
           sx={{
             p: 0,
+            fontWeight: isMissingInput ? 600 : 400,
             textAlign: 'left',
+            _hover: {
+              fontWeight: '600 !important',
+            },
           }}
           noOfLines={1}
         />

invokeai/frontend/web/src/features/nodes/components/fields/FieldTooltipContent.tsx

@@ -23,7 +23,6 @@ const FieldTooltipContent = ({ nodeId, fieldName, kind }: Props) => {
   const isInputTemplate = isInputFieldTemplate(fieldTemplate);
   const fieldTitle = useMemo(() => {
     if (isInputFieldValue(field)) {
-      console.log(field, fieldTemplate);
       if (field.label && fieldTemplate?.title) {
         return `${field.label} (${fieldTemplate.title})`;
       }

invokeai/frontend/web/src/features/nodes/components/fields/InputField.tsx

@@ -1,18 +1,19 @@
-import { Flex, FormControl, FormLabel, Tooltip } from '@chakra-ui/react';
+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,
+  useFieldInputKind,
   useFieldTemplate,
   useIsMouseOverField,
 } from 'features/nodes/hooks/useNodeData';
 import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
-import { PropsWithChildren, memo, useMemo } from 'react';
+import { PropsWithChildren, memo, useCallback, useMemo, useState } from 'react';
 import FieldContextMenu from './FieldContextMenu';
 import FieldHandle from './FieldHandle';
 import FieldTitle from './FieldTitle';
 import FieldTooltipContent from './FieldTooltipContent';
 import InputFieldRenderer from './InputFieldRenderer';
-import SelectionOverlay from 'common/components/SelectionOverlay';
 
 interface Props {
   nodeId: string;
@@ -22,6 +23,16 @@ interface Props {
 const InputField = ({ nodeId, fieldName }: Props) => {
   const fieldTemplate = useFieldTemplate(nodeId, fieldName, 'input');
   const doesFieldHaveValue = useDoesInputHaveValue(nodeId, fieldName);
+  const input = useFieldInputKind(nodeId, fieldName);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseOver = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const handleMouseOut = useCallback(() => {
+    setIsHovered(false);
+  }, []);
 
   const {
     isConnected,
@@ -81,6 +92,7 @@ const InputField = ({ nodeId, fieldName }: Props) => {
           ps: 2,
           gap: 2,
           h: 'full',
+          w: 'full',
         }}
       >
         <FieldContextMenu nodeId={nodeId} fieldName={fieldName} kind="input">
@@ -97,18 +109,32 @@ const InputField = ({ nodeId, fieldName }: Props) => {
               placement="top"
               hasArrow
             >
-              <FormLabel sx={{ mb: 0 }}>
+              <FormLabel
+                sx={{
+                  mb: 0,
+                  width: input === 'connection' ? 'auto' : '25%',
+                  flexShrink: 0,
+                  flexGrow: 0,
+                }}
+              >
                 <FieldTitle
                   ref={ref}
                   nodeId={nodeId}
                   fieldName={fieldName}
                   kind="input"
+                  isMissingInput={isMissingInput}
                 />
               </FormLabel>
             </Tooltip>
           )}
         </FieldContextMenu>
+        <Box
+          sx={{
+            width: input === 'connection' ? 'auto' : '75%',
+          }}
+        >
           <InputFieldRenderer nodeId={nodeId} fieldName={fieldName} />
+        </Box>
       </FormControl>
 
       {fieldTemplate.input !== 'direct' && (

invokeai/frontend/web/src/features/nodes/components/fields/fieldTypes/ImageInputField.tsx

@@ -98,13 +98,18 @@ const ImageInputFieldComponent = (
 
 export default memo(ImageInputFieldComponent);
 
-const UploadElement = () => (
+const UploadElement = memo(() => (
   <Text fontSize={16} fontWeight={600}>
     Drop or Upload
   </Text>
-);
+));
-const DropLabel = () => (
+
+UploadElement.displayName = 'UploadElement';
+
+const DropLabel = memo(() => (
   <Text fontSize={16} fontWeight={600}>
     Drop
   </Text>
-);
+));
+
+DropLabel.displayName = 'DropLabel';

invokeai/frontend/web/src/features/nodes/hooks/useNodeData.ts

@@ -115,9 +115,9 @@ export const useFieldInputKind = (nodeId: string, fieldName: string) => {
     [fieldName, nodeId]
   );
 
-  const fieldType = useAppSelector(selector);
+  const inputKind = useAppSelector(selector);
 
-  return fieldType;
+  return inputKind;
 };
 
 export const useFieldType = (