Adjusting color usage so that they reflect the theme

Author: paazmaya

src/App.tsx

@@ -42,10 +42,10 @@ function App() {
                 <TestRunProvider>
                   <SocketProvider>
                     <HelpProvider>
-                      <Box sx={{ height: "10%" }}>
+                      <Box sx={{ height: "10%", bgcolor: theme.palette.background.paper }}>
                         <Header />
                       </Box>
-                      <Box sx={{ height: "90%" }}>
+                      <Box sx={{ height: "90%", bgcolor: theme.palette.background.default }}>
                         <Router />
                       </Box>
                     </HelpProvider>

src/components/TestDetailsDialog/DrawArea.tsx

@@ -3,22 +3,14 @@ import React, { FunctionComponent, useCallback } from "react";
 import { Stage, Layer, Image } from "react-konva";
 import Rectangle, { MIN_RECT_SIDE_PIXEL } from "../Rectangle";
 import { IgnoreArea } from "../../types/ignoreArea";
-import { Grid, CircularProgress, type Theme } from "@mui/material";
+import { Grid, CircularProgress } from "@mui/material";
 import { NoImagePlaceholder } from "./NoImageAvailable";
 import Konva from "konva";
 import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles(() => ({
   canvasContainer: {
     overflow: "auto",
-    backgroundColor: "white",
-  },
-  imageDetailsContainer: {
-    position: "absolute",
-    backgroundColor: "white",
-    zIndex: 1,
-    padding: theme.spacing(1),
-    height: "48px",
   },
   progressContainer: {
     minHeight: "300px",

src/components/TestDetailsDialog/ImageDetails.tsx

@@ -9,7 +9,6 @@ const useStyles = makeStyles(() => ({
   container: {
     display: "flex",
     alignItems: "center",
-    color: "darkslategrey",
   },
   branchName: {
     cursor: "pointer",
@@ -45,7 +44,7 @@ const ImageDetails: React.FunctionComponent<ImageDetailsProps> = ({
       imageName && (
         <Typography
           variant="caption"
-          style={{ marginRight: 3, fontSize: "0.7rem" }}
+          sx={{mr: 0.5, fontSize: "0.7rem"}}
           data-testid="image-size"
         >
           {image ? `(${image?.width} x ${image?.height})` : "Loading..."}
@@ -55,7 +54,7 @@ const ImageDetails: React.FunctionComponent<ImageDetailsProps> = ({
   };
   return (
     <Grid item className={classes.container}>
-      <Typography variant="overline" style={{ marginRight: 3 }}>
+      <Typography variant="overline" sx={{mr: 0.5}}>
         {type === "Baseline" ? "Baseline" : "Checkpoint"}
       </Typography>
       {imageSize()}

src/components/TestDetailsDialog/TestDetailsModal.tsx

@@ -38,6 +38,7 @@ import {
   NavigateNext,
   NavigateBefore,
 } from "@mui/icons-material";
+import { useTheme } from '@mui/material/styles';
 import { TestRunDetails } from "./TestRunDetails";
 import useImage from "use-image";
 import { routes } from "../../constants";
@@ -53,50 +54,6 @@ import ImageDetails, { ImageDetailsProps } from "./ImageDetails";
 import { calculateScale } from "../../_helpers/scale.helper";
 import TestStatusChip from "../TestStatusChip";
 
-const useStyles = makeStyles(() => ({
-  header: {
-    position: "relative",
-    textAlign: "left",
-    background: "#efefef",
-    paddingLeft: 8,
-    paddingBottom: 8,
-  },
-  footer: {
-    background: "#efefef",
-  },
-  scaleActions: {
-    display: "flex",
-    alignItems: "center",
-  },
-  testRunActions: {
-    display: "flex",
-    alignItems: "center",
-    alignContent: "center",
-  },
-  testRunName: {
-    fontWeight: 300,
-  },
-  closeIcon: {
-    position: "absolute",
-    right: "8px",
-  },
-  testRunDetails: {
-    paddingLeft: 8,
-  },
-  drawAreaContainer: {
-    width: "100%",
-    height: "100%",
-  },
-  drawAreaItem: {
-    padding: "0 4px",
-    height: "100%",
-  },
-  imageToolbar: {
-    paddingLeft: 5,
-    height: 52,
-  },
-}));
-
 const defaultStagePos = {
   x: 0,
   y: 0,
@@ -121,6 +78,51 @@ const TestDetailsModal: React.FunctionComponent<TestDetailsModalProps> = ({
   handleNext,
   handleClose,
 }) => {
+
+  const theme = useTheme();
+  const useStyles = makeStyles(() => ({
+    header: {
+      position: "relative",
+      textAlign: "left",
+      background: theme.palette.divider,
+      paddingLeft: 8,
+      paddingBottom: 8,
+    },
+    footer: {
+      background: theme.palette.divider,
+    },
+    scaleActions: {
+      display: "flex",
+      alignItems: "center",
+    },
+    testRunActions: {
+      display: "flex",
+      alignItems: "center",
+      alignContent: "center",
+    },
+    testRunName: {
+      fontWeight: 300,
+    },
+    closeIcon: {
+      position: "absolute",
+      right: "8px",
+    },
+    testRunDetails: {
+      paddingLeft: 8,
+    },
+    drawAreaContainer: {
+      width: "100%",
+      height: "100%",
+    },
+    drawAreaItem: {
+      padding: "0 4px",
+      height: "100%",
+    },
+    imageToolbar: {
+      paddingLeft: 5,
+      height: 52,
+    },
+  }));
   const classes = useStyles();
   const { enqueueSnackbar } = useSnackbar();
   const testRunDispatch = useTestRunDispatch();