feat: align Report Designer dialogs with theme and add devlog entry for theme alignment

src/frontend/src/components/reportEditor/ImageUploadDialog.tsx

@@ -17,6 +17,7 @@ import {
   useTheme,
   AppBar,
   Toolbar,
+  alpha,
 } from "@mui/material";
 import {
   CloudUpload as UploadIcon,
@@ -324,7 +325,9 @@ export default function ImageUploadDialog({
               borderRadius: 2,
               p: isMobile ? 3 : 4,
               textAlign: "center",
-              bgcolor: isDragging ? "primary.50" : "grey.50",
+              bgcolor: isDragging
+                ? (theme) => alpha(theme.palette.primary.main, 0.08)
+                : "background.default",
               cursor: "pointer",
               transition: "all 0.2s",
               minHeight: isMobile ? 150 : "auto",
@@ -425,7 +428,7 @@ export default function ImageUploadDialog({
               border: 1,
               borderColor: "divider",
               borderRadius: 2,
-              bgcolor: "grey.50",
+              bgcolor: "background.default",
             }}
           >
             <Typography variant="subtitle2" color="primary" gutterBottom>
@@ -436,7 +439,7 @@ export default function ImageUploadDialog({
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center",
-                bgcolor: "white",
+                bgcolor: "background.paper",
                 borderRadius: 1,
                 p: 1,
                 mb: 1,

src/frontend/src/components/reportEditor/PreviewDialog.tsx

@@ -240,8 +240,8 @@ export default function PreviewDialog({
         const query = entityQueries[index];
         const selectedEntity = isSelected
           ? ((query.data as EntityListItemDto[]) || []).find(
-              (e) => e.id === selections[dataset.id],
-            )
+            (e) => e.id === selections[dataset.id],
+          )
           : null;
 
         return (
@@ -319,7 +319,7 @@ export default function PreviewDialog({
             p: 2,
             borderBottom: 1,
             borderColor: "divider",
-            bgcolor: "grey.50",
+            bgcolor: "background.default",
           }}
         >
           {isMobile && (
@@ -478,7 +478,7 @@ export default function PreviewDialog({
             p: 1,
             borderTop: 1,
             borderColor: "divider",
-            bgcolor: "grey.50",
+            bgcolor: "background.default",
           }}
         >
           <Typography variant="caption" color="text.secondary">
@@ -571,7 +571,7 @@ export default function PreviewDialog({
                 <Box
                   sx={{
                     p: 2,
-                    bgcolor: "grey.50",
+                    bgcolor: "background.default",
                     borderBottom: 1,
                     borderColor: "divider",
                   }}