Temporarily re-add ExerciseImagePlaceholder.tsx

This fixes a problem with the background with exercises that don't have an image

src/components/Exercises/Detail/ExerciseImagePlaceholder.tsx

@@ -0,0 +1,21 @@
+import PhotoIcon from "@mui/icons-material/Photo";
+import { Box } from "@mui/material";
+import React from "react";
+
+export const ExerciseImagePlaceholder = (props: {
+    backgroundColor?: string | undefined,
+    iconColor?: string | undefined,
+    height?: number | undefined,
+}) => {
+
+    const backgroundColor = props.backgroundColor || "lightgray";
+    const iconColor = props.iconColor || "gray";
+    const height = props.height || 200;
+
+    return <Box sx={{ backgroundColor: backgroundColor, height: height }}
+                display="flex"
+                alignItems="center"
+                justifyContent="center">
+        <PhotoIcon sx={{ fontSize: 80, color: iconColor }} />
+    </Box>;
+};

src/components/Exercises/Detail/OverviewCard.tsx

@@ -1,6 +1,6 @@
 import { Card, CardActionArea, CardContent, CardMedia, Chip, Typography, } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
-import { ExerciseImageAvatar } from "components/Exercises/Detail/ExerciseImageAvatar";
+import { ExerciseImagePlaceholder } from "components/Exercises/Detail/ExerciseImagePlaceholder";
 import { Exercise } from "components/Exercises/models/exercise";
 import { Language } from "components/Exercises/models/language";
 import React from "react";
@@ -36,7 +36,7 @@ export const OverviewCard = ({ exercise, language }: OverviewCardProps) => {
                         sx={{ height: 200 }}
                         alt="" />
                     : <CardMedia>
-                        <ExerciseImageAvatar image={exercise.mainImage!} />
+                        <ExerciseImagePlaceholder />
                     </CardMedia>}
                 <CardContent>
                     <Tooltip title={translation.name} placement="top" arrow>

src/services/image.ts

@@ -9,11 +9,12 @@ export const IMAGE_PATH = 'exerciseimage';
 /*
  * Post a new exercise image
  */
-export const postExerciseImage = async (data: {
-    exerciseId: number,
-                                            image: File,
-                                            imageData: ImageFormData
-                                        }
+export const postExerciseImage = async (
+    data: {
+        exerciseId: number,
+        image: File,
+        imageData: ImageFormData
+    },
 ): Promise<ExerciseImage> => {
     const url = makeUrl(IMAGE_PATH);
     const headers = makeHeader();