From a7982b83a53e6170d8c4c27d81edec5a2ee49e2d Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 25 Aug 2022 18:16:33 +0100
Subject: [PATCH 1/2] Improve drop area design

---
 .../AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx | 11 +++++++++--
 packages/toolpad-core/src/runtime.tsx                 |  3 +--
 2 files changed, 10 insertions(+), 4 deletions(-)

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..db68fe9ade6 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 ? (
-        <EmptySlot style={absolutePositionCss(slotRect)}>+</EmptySlot>
+        <EmptySlot style={absolutePositionCss(slotRect)}>
+          <AddCircleOutlineIcon fontSize="inherit" sx={{ marginBottom: 0.2 }} />
+          <Typography variant="caption">Drop component here</Typography>
+        </EmptySlot>
       ) : null}
     </React.Fragment>
   );
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 (
     <div
       style={{
-        display: 'block',
-        minHeight: 40,
+        minHeight: 72,
         minWidth: 200,
       }}
     />

From b2bd2a82a10a899a11ec716b6ba72994911abd89 Mon Sep 17 00:00:00 2001
From: Pedro Ferreira <10789765+apedroferreira@users.noreply.github.com>
Date: Thu, 25 Aug 2022 19:34:48 +0100
Subject: [PATCH 2/2] Shorter prop name

---
 .../toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 db68fe9ade6..d04f261c88b 100644
--- a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx
+++ b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/NodeDropArea.tsx
@@ -361,7 +361,7 @@ export default function NodeDropArea({
       />
       {isEmptySlot && slotRect ? (
         <EmptySlot style={absolutePositionCss(slotRect)}>
-          <AddCircleOutlineIcon fontSize="inherit" sx={{ marginBottom: 0.2 }} />
+          <AddCircleOutlineIcon fontSize="inherit" sx={{ mb: 0.2 }} />
           <Typography variant="caption">Drop component here</Typography>
         </EmptySlot>
       ) : null}