Improve drop area design (#854)

* Improve drop area design * Shorter prop name
mui · Aug 26, 2022 · 50ce528 · 50ce528
1 parent 9927cf1
commit 50ce528
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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={{ mb: 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
@@ -54,8 +54,7 @@ function PlaceholderWrapper(props: PlaceholderWrapperProps) {
   return (
     <div
       style={{
-        display: 'block',
-        minHeight: 40,
+        minHeight: 72,
         minWidth: 200,
       }}
     />