fix(ui): dnd drop label errors w invalid DOM nesting

Make em all strings to prevent nesting `<p>` elements. Slightly changes appearance - font size is a bit smaller.

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

@@ -66,7 +66,7 @@ type IAIDndImageProps = FlexProps & {
   fitContainer?: boolean;
   droppableData?: TypesafeDroppableData;
   draggableData?: TypesafeDraggableData;
-  dropLabel?: ReactNode;
+  dropLabel?: string;
   isSelected?: boolean;
   isSelectedForCompare?: boolean;
   thumbnail?: boolean;

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

@@ -1,13 +1,12 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
 import type { AnimationProps } from 'framer-motion';
 import { motion } from 'framer-motion';
-import type { ReactNode } from 'react';
 import { memo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuidv4 } from 'uuid';
 type Props = {
   isOver: boolean;
-  label?: ReactNode;
+  label?: string;
 };
 
 const initial: AnimationProps['initial'] = {
@@ -64,7 +63,7 @@ const IAIDropOverlay = (props: Props) => {
           p={4}
         >
           <Text
-            fontSize="xl"
+            fontSize="lg"
             fontWeight="semibold"
             color={isOver ? 'invokeYellow.300' : 'base.500'}
             transitionProperty="common"

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

@@ -3,14 +3,13 @@ import { useDroppableTypesafe } from 'features/dnd/hooks/typesafeHooks';
 import type { TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
 import { AnimatePresence } from 'framer-motion';
-import type { ReactNode } from 'react';
 import { memo, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import IAIDropOverlay from './IAIDropOverlay';
 
 type IAIDroppableProps = {
-  dropLabel?: ReactNode;
+  dropLabel?: string;
   disabled?: boolean;
   data?: TypesafeDroppableData;
 };

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -169,7 +169,7 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
             {board.archived && !editingDisclosure.isOpen && <Icon as={PiArchiveBold} fill="base.300" />}
             {!editingDisclosure.isOpen && <Text variant="subtext">{board.image_count}</Text>}
 
-            <IAIDroppable data={droppableData} dropLabel={<Text fontSize="lg">{t('unifiedCanvas.move')}</Text>} />
+            <IAIDroppable data={droppableData} dropLabel={t('unifiedCanvas.move')} />
           </Flex>
         </Tooltip>
       )}

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -92,7 +92,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
             </Text>
             {autoAddBoardId === 'none' && <AutoAddBadge />}
             <Text variant="subtext">{imagesTotal}</Text>
-            <IAIDroppable data={droppableData} dropLabel={<Text fontSize="lg">{t('unifiedCanvas.move')}</Text>} />
+            <IAIDroppable data={droppableData} dropLabel={t('unifiedCanvas.move')} />
           </Flex>
         </Tooltip>
       )}

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

@@ -75,7 +75,6 @@ const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInst
         postUploadAction={postUploadAction}
         useThumbailFallback
         uploadElement={<UploadElement />}
-        dropLabel={<DropLabel />}
         minSize={8}
       >
         <IAIDndImageIcon
@@ -100,14 +99,3 @@ const UploadElement = memo(() => {
 });
 
 UploadElement.displayName = 'UploadElement';
-
-const DropLabel = memo(() => {
-  const { t } = useTranslation();
-  return (
-    <Text fontSize={16} fontWeight="semibold">
-      {t('gallery.drop')}
-    </Text>
-  );
-});
-
-DropLabel.displayName = 'DropLabel';