From 42e5ec3916e4dda5339854ed9febe558668ab7b7 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 5 Oct 2024 08:59:33 +1000
Subject: [PATCH] fix(ui): fix wonky drop target layouts

---
 .../src/common/components/IAIDropOverlay.tsx  | 104 ++++++++----------
 1 file changed, 43 insertions(+), 61 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
index d37d164aad..0b9486e64d 100644
--- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
+++ b/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>
   );
 };