u

src/components/panels/EditablePanelTile.jsx

@@ -8,6 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
+import { injectMuiTheme } from './injectMuiTheme';
 import { enqueueSnackbar } from 'notistack';
 import { backendErrorFrom } from '../../utils/backendError';
 import { panelTilePaperSx } from './panelTileLayout';
@@ -20,7 +21,7 @@ function valuesEqual(a, b) {
  * Panel tile with centralized inline-edit chrome.
  * Pass `onSave` to enable edit UI; omit it for read-only tiles (no edit icon).
  */
-export class EditablePanelTile extends Component {
+class EditablePanelTileBase extends Component {
   constructor(props) {
     super(props);
     this.inputRef = createRef();
@@ -186,9 +187,11 @@ export class EditablePanelTile extends Component {
 
   render() {
     const {
+      theme,
       wide = 1,
       sx,
       minHeight = 120,
+      tileKey,
       renderDisplay,
       renderEdit,
     } = this.props;
@@ -198,8 +201,15 @@ export class EditablePanelTile extends Component {
 
     return (
       <Paper
-        variant="outlined"
-        sx={panelTilePaperSx({ wide, sx, minHeight, pending })}
+        elevation={0}
+        sx={panelTilePaperSx({
+          wide,
+          sx,
+          minHeight,
+          pending,
+          tileKey,
+          theme,
+        })}
       >
         {this.renderActions()}
         {this.renderTitle()}
@@ -220,3 +230,5 @@ export class EditablePanelTile extends Component {
     );
   }
 }
+
+export const EditablePanelTile = injectMuiTheme(EditablePanelTileBase);