Use typography for workerStatus

Author: noemifrisina

src/blueapi/BlueapiComponents.tsx

@@ -8,6 +8,8 @@ import {
   Tooltip,
 } from "@mui/material";
 
+export function RunPlanButton() {}
+
 export function AbortButton() {
   const [openMsg, setOpenMsg] = React.useState<boolean>(false);
 

src/components/WorkerStatus.tsx

@@ -1,23 +1,28 @@
-import { Box, Grid2, Stack } from "@mui/material";
+import { Grid2, Stack, Typography } from "@mui/material";
 
 import { processUseBlueApiCall, useBlueApiCall } from "../blueapi/blueapi";
 import { useState } from "react";
 
 export function WorkerStatus() {
   const [currentState, setCurrentState] = useState<string>("UNKNOWN");
   const workerStateInfo = useBlueApiCall("/worker/state");
+
+  const readCurrentState = () => {
+    return processUseBlueApiCall(workerStateInfo, (res) => {
+      if (!res.bodyUsed) {
+        res.json().then((text) => setCurrentState(text));
+      }
+      return currentState;
+    });
+  };
+
   return (
     <Grid2 size={12}>
       <Stack direction={"row"} spacing={1} justifyContent={"center"}>
-        <b>BlueAPI worker status: </b>
-        <Box>
-          {processUseBlueApiCall(workerStateInfo, (res) => {
-            if (!res.bodyUsed) {
-              res.json().then((text) => setCurrentState(text));
-            }
-            return currentState;
-          })}
-        </Box>
+        <Typography variant="body1" fontWeight={"bold"}>
+          BlueAPI worker status:
+        </Typography>
+        <Typography variant="body1">{readCurrentState()}</Typography>
       </Stack>
     </Grid2>
   );