fix(ui): funky drop targets

invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx

@@ -1,80 +1,62 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
-import type { AnimationProps } from 'framer-motion';
-import { motion } from 'framer-motion';
-import { memo, useRef } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { v4 as uuidv4 } from 'uuid';
+
 type Props = {
   isOver: boolean;
   label?: string;
 };
 
-const initial: AnimationProps['initial'] = {
-  opacity: 0,
-};
-const animate: AnimationProps['animate'] = {
-  opacity: 1,
-  transition: { duration: 0.1 },
-};
-const exit: AnimationProps['exit'] = {
-  opacity: 0,
-  transition: { duration: 0.1 },
-};
-
 const IAIDropOverlay = (props: Props) => {
   const { t } = useTranslation();
   const { isOver, label = t('gallery.drop') } = props;
-  const motionId = useRef(uuidv4());
   return (
-    <motion.div key={motionId.current} initial={initial} animate={animate} exit={exit}>
-      <Flex position="absolute" top={0} right={0} bottom={0} left={0}>
-        <Flex
-          position="absolute"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          w="full"
-          h="full"
-          bg="base.900"
-          opacity={0.7}
-          borderRadius="base"
-          alignItems="center"
-          justifyContent="center"
-          transitionProperty="common"
-          transitionDuration="0.1s"
-        />
+    <Flex position="absolute" top={0} right={0} bottom={0} left={0}>
+      <Flex
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        w="full"
+        h="full"
+        bg="base.900"
+        opacity={0.7}
+        borderRadius="base"
+        alignItems="center"
+        justifyContent="center"
+        transitionProperty="common"
+        transitionDuration="0.1s"
+      />
 
-        <Flex
-          position="absolute"
-          top={0.5}
-          right={0.5}
-          bottom={0.5}
-          left={0.5}
-          opacity={1}
-          borderWidth={1.5}
-          borderColor={isOver ? 'invokeYellow.300' : 'base.500'}
-          borderRadius="base"
-          borderStyle="dashed"
+      <Flex
+        position="absolute"
+        top={0.5}
+        right={0.5}
+        bottom={0.5}
+        left={0.5}
+        opacity={1}
+        borderWidth={1.5}
+        borderColor={isOver ? 'invokeYellow.300' : 'base.500'}
+        borderRadius="base"
+        borderStyle="dashed"
+        transitionProperty="common"
+        transitionDuration="0.1s"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Text
+          fontSize="lg"
+          fontWeight="semibold"
+          color={isOver ? 'invokeYellow.300' : 'base.500'}
           transitionProperty="common"
           transitionDuration="0.1s"
-          alignItems="center"
-          justifyContent="center"
-          p={4}
+          textAlign="center"
         >
-          <Text
-            fontSize="lg"
-            fontWeight="semibold"
-            color={isOver ? 'invokeYellow.300' : 'base.500'}
-            transitionProperty="common"
-            transitionDuration="0.1s"
-            textAlign="center"
-          >
-            {label}
-          </Text>
-        </Flex>
+          {label}
+        </Text>
       </Flex>
-    </motion.div>
+    </Flex>
   );
 };
 

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx

@@ -49,7 +49,16 @@ export const IPAdapterImagePreview = memo(({ image, onChangeImage, droppableData
   }, [handleResetControlImage, isConnected, isErrorControlImage]);
 
   return (
-    <Flex position="relative" w="full" h="full" alignItems="center">
+    <Flex
+      position="relative"
+      w="full"
+      h="full"
+      alignItems="center"
+      borderColor="error.500"
+      borderStyle="solid"
+      borderWidth={controlImage ? 0 : 1}
+      borderRadius="base"
+    >
       <IAIDndImage
         draggableData={draggableData}
         droppableData={droppableData}

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx

@@ -17,7 +17,7 @@ import { $isConnected } from 'services/events/stores';
 import type { FieldComponentProps } from './types';
 
 const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInstance, ImageFieldInputTemplate>) => {
-  const { nodeId, field } = props;
+  const { nodeId, field, fieldTemplate } = props;
   const dispatch = useAppDispatch();
   const isConnected = useStore($isConnected);
   const { currentData: imageDTO, isError } = useGetImageDTOQuery(field.value?.image_name ?? skipToken);
@@ -67,7 +67,17 @@ const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInst
   }, [handleReset, isConnected, isError]);
 
   return (
-    <Flex className="nodrag" w="full" h="full" alignItems="center" justifyContent="center">
+    <Flex
+      className="nodrag"
+      w="full"
+      h="full"
+      alignItems="center"
+      justifyContent="center"
+      borderColor="error.500"
+      borderStyle="solid"
+      borderWidth={fieldTemplate.required && !field.value ? 1 : 0}
+      borderRadius="base"
+    >
       <IAIDndImage
         imageDTO={imageDTO}
         droppableData={droppableData}
@@ -92,9 +102,11 @@ export default memo(ImageFieldInputComponent);
 const UploadElement = memo(() => {
   const { t } = useTranslation();
   return (
-    <Text fontSize={16} fontWeight="semibold">
-      {t('gallery.dropOrUpload')}
-    </Text>
+    <Flex h={16} w="full" alignItems="center" justifyContent="center">
+      <Text fontSize={16} fontWeight="semibold">
+        {t('gallery.dropOrUpload')}
+      </Text>
+    </Flex>
   );
 });