feat(ui): tweak drop overlay styles

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

@@ -1,4 +1,4 @@
-import { Box, Flex } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
@@ -28,11 +28,13 @@ const IAIDropOverlay = (props: Props) => {
   const motionId = useRef(uuidv4());
   return (
     <motion.div key={motionId.current} initial={initial} animate={animate} exit={exit}>
-      <Flex position="absolute" top={0} insetInlineStart={0} w="full" h="full">
+      <Flex position="absolute" top={0} right={0} bottom={0} left={0}>
         <Flex
           position="absolute"
           top={0}
-          insetInlineStart={0}
+          right={0}
+          bottom={0}
+          left={0}
           w="full"
           h="full"
           bg="base.900"
@@ -47,29 +49,30 @@ const IAIDropOverlay = (props: Props) => {
         <Flex
           position="absolute"
           top={0.5}
-          insetInlineStart={0.5}
-          insetInlineEnd={0.5}
+          right={0.5}
           bottom={0.5}
+          left={0.5}
           opacity={1}
-          borderWidth={2}
-          borderColor={isOver ? 'base.300' : 'base.500'}
+          borderWidth={1.5}
+          borderColor={isOver ? 'invokeYellow.300' : 'base.500'}
           borderRadius="base"
           borderStyle="dashed"
           transitionProperty="common"
           transitionDuration="0.1s"
           alignItems="center"
           justifyContent="center"
+          p={4}
         >
-          <Box
-            fontSize="2xl"
+          <Text
+            fontSize="xl"
             fontWeight="semibold"
-            transform={isOver ? 'scale(1.1)' : 'scale(1)'}
-            color={isOver ? 'base.50' : 'base.300'}
+            color={isOver ? 'invokeYellow.300' : 'base.500'}
             transitionProperty="common"
             transitionDuration="0.1s"
+            textAlign="center"
           >
             {label}
-          </Box>
+          </Text>
         </Flex>
       </Flex>
     </motion.div>

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

@@ -30,7 +30,9 @@ const IAIDroppable = (props: IAIDroppableProps) => {
       ref={setNodeRef}
       position="absolute"
       top={0}
-      insetInlineStart={0}
+      right={0}
+      bottom={0}
+      left={0}
       w="full"
       h="full"
       pointerEvents={active ? 'auto' : 'none'}