u

src/components/article/ArticleView.jsx

@@ -40,7 +40,7 @@ function ArticlePhoto() {
         height: 200,
         maxWidth: '100%',
         bgcolor: 'action.hover',
-        borderRadius: 1,
+        borderRadius: 2,
       }}
     />
   );

src/components/panels/EditablePanelTile.jsx

@@ -201,7 +201,7 @@ class EditablePanelTileBase extends Component {
 
     return (
       <Paper
-        elevation={0}
+        elevation={4}
         sx={panelTilePaperSx({
           wide,
           sx,

src/components/panels/PanelTile.jsx

@@ -25,7 +25,7 @@ class PanelTileBase extends Component {
 
     return (
       <Paper
-        elevation={0}
+        elevation={4}
         sx={panelTilePaperSx({
           wide,
           sx,

src/components/panels/panelTileLayout.js

@@ -22,6 +22,8 @@ export function panelTileBackground(theme, tileKey) {
   return theme.panelTiles[tileKey];
 }
 
+export const PANEL_TILE_BORDER_RADIUS = 4;
+
 export function panelTilePaperSx({
   wide,
   sx,
@@ -32,6 +34,8 @@ export function panelTilePaperSx({
 }) {
   const tileBg = panelTileBackground(theme, tileKey);
 
+  const elevationShadow = theme?.shadows?.[4];
+
   return {
     gridColumn: responsiveColumnSpan(wide),
     position: 'relative',
@@ -40,11 +44,11 @@ export function panelTilePaperSx({
     display: 'flex',
     flexDirection: 'column',
     border: 'none',
-    boxShadow: 'none',
+    borderRadius: PANEL_TILE_BORDER_RADIUS,
     ...(tileBg ? { bgcolor: tileBg } : {}),
-    ...(pending
+    ...(pending && elevationShadow
       ? {
-          boxShadow: `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${PENDING_EDIT_BORDER}`,
+          boxShadow: `inset 0 0 0 ${PENDING_EDIT_RING_PX}px ${PENDING_EDIT_BORDER}, ${elevationShadow}`,
         }
       : {}),
     ...sx,