Progress

Author: Tamoor Shahid

src/blueapi/BlueapiComponents.tsx

@@ -21,6 +21,9 @@ type RunPlanButtonProps = {
   title?: string;
   btnVariant?: VariantChoice;
   btnSize?: ButtonSize;
+  sx?: object;
+  tooltipSx?: object;
+  typographySx?: object;
 };
 
 // @{todo} Ideally we should be able to set up the stylings for
@@ -47,6 +50,8 @@ export function RunPlanButton(props: RunPlanButtonProps) {
   const params = props.planParams ? props.planParams : {};
   const variant = props.btnVariant ? props.btnVariant : "outlined";
   const size = props.btnSize ? props.btnSize : "medium";
+  const sx = props.sx ? props.sx : {};
+  const tooltipSx = props.tooltipSx ? props.tooltipSx : {};
 
   const handleClick = () => {
     setOpenSnackbar(true);
@@ -85,12 +90,18 @@ export function RunPlanButton(props: RunPlanButtonProps) {
 
   return (
     <div>
-      <Tooltip title={props.title ? props.title : ""} placement="bottom">
+      <Tooltip
+        title={props.title ? props.title : ""}
+        placement="bottom"
+        sx={tooltipSx}
+        arrow
+      >
         <Button
           variant={variant}
           color="custom"
           size={size}
           onClick={handleClick}
+          sx={sx}
         >
           <Typography
             variant="button"

src/screens/OavMover.tsx

@@ -261,13 +261,13 @@ export function CoordinateSystem() {
     setOpen(false);
   };
 
-  // const buttonStyle = {
-  //   color: "white",
-  //   padding: "12px",
-  //   backgroundColor: "#1c2025",
-  //   width: "100%",
-  //   height: "85%",
-  // };
+  const buttonStyle = {
+    color: "white",
+    padding: "12px",
+    backgroundColor: "#1c2025",
+    width: "90%",
+    height: "85%",
+  };
 
   return (
     <>
@@ -287,6 +287,8 @@ export function CoordinateSystem() {
               title="Go to Fiducial 0"
               btnVariant="contained"
               btnSize="large"
+              sx={buttonStyle}
+              tooltipSx={{ color: "green" }}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -297,6 +299,7 @@ export function CoordinateSystem() {
               title="Go to Fiducial 1"
               btnVariant="contained"
               btnSize="large"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -307,6 +310,7 @@ export function CoordinateSystem() {
               title="Go to Fiducial 2"
               btnVariant="contained"
               btnSize="large"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -315,6 +319,7 @@ export function CoordinateSystem() {
               planName="gui_set_fiducial_0"
               title="Set Fiducial 0"
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -324,6 +329,7 @@ export function CoordinateSystem() {
               planParams={{ point: "1" }}
               title="Set Fiducial 1"
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -333,6 +339,7 @@ export function CoordinateSystem() {
               planParams={{ point: "2" }}
               title="Set Fiducial 2"
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={6}>
@@ -341,6 +348,7 @@ export function CoordinateSystem() {
               planName="cs_maker"
               title="Create the coordinate system on the pmac."
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={6}>
@@ -349,6 +357,7 @@ export function CoordinateSystem() {
               planName="block_check"
               title="Check the coordinate system was set up correctly."
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
         </Grid2>