From 9884159812d72cf63e2baa3a944d83ea381c6bb9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 17 Sep 2024 22:44:15 +1000
Subject: [PATCH] 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.
---
 .../web/src/common/components/IAIDndImage.tsx        |  2 +-
 .../web/src/common/components/IAIDropOverlay.tsx     |  5 ++---
 .../web/src/common/components/IAIDroppable.tsx       |  3 +--
 .../components/Boards/BoardsList/GalleryBoard.tsx    |  2 +-
 .../components/Boards/BoardsList/NoBoardBoard.tsx    |  2 +-
 .../fields/inputs/ImageFieldInputComponent.tsx       | 12 ------------
 6 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index bb21d8bd53..f4b85736c5 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/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;
diff --git a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx b/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
index e8dd125e1e..d37d164aad 100644
--- a/invokeai/frontend/web/src/common/components/IAIDropOverlay.tsx
+++ b/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"
diff --git a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx b/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
index d46527e456..790c4200ed 100644
--- a/invokeai/frontend/web/src/common/components/IAIDroppable.tsx
+++ b/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;
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index e19ad7a8f4..2bd07ef39c 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/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>
       )}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
index c4ea63c652..7719c79866 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx
+++ b/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>
       )}
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
index 1ec0b575f6..cd77eace77 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx
+++ b/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';