diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx index b086afc76d7..d04f261c88b 100644 --- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx +++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import clsx from 'clsx'; import { styled } from '@mui/material'; +import Typography from '@mui/material/Typography'; +import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; import { FlowDirection } from '../../../../types'; import * as appDom from '../../../../appDom'; @@ -102,10 +104,12 @@ const EmptySlot = styled('div')({ border: '1px dashed green', color: 'green', display: 'flex', - fontSize: 20, + flexDirection: 'column', justifyContent: 'center', position: 'absolute', opacity: 0.75, + textAlign: 'center', + fontSize: 30, }); function getChildNodeHighlightedZone(parentFlowDirection: FlowDirection): DropZone | null { @@ -356,7 +360,10 @@ export default function NodeDropArea({ }} /> {isEmptySlot && slotRect ? ( - + + + + Drop component here + ) : null} ); diff --git a/packages/toolpad-core/src/runtime.tsx b/packages/toolpad-core/src/runtime.tsx index 8b7fbfd754e..10fc4b7cea7 100644 --- a/packages/toolpad-core/src/runtime.tsx +++ b/packages/toolpad-core/src/runtime.tsx @@ -54,8 +54,7 @@ function PlaceholderWrapper(props: PlaceholderWrapperProps) { return (