From f549431603d5894b3eb9ed94ab1b79e8156466e4 Mon Sep 17 00:00:00 2001 From: Tamoor Shahid Date: Thu, 18 Sep 2025 14:07:19 +0100 Subject: [PATCH 1/3] Removed leftover styling from #63 --- src/screens/OavMover.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/screens/OavMover.tsx b/src/screens/OavMover.tsx index 91ced21..9cce0ce 100644 --- a/src/screens/OavMover.tsx +++ b/src/screens/OavMover.tsx @@ -260,14 +260,6 @@ export function CoordinateSystem() { setOpen(false); }; - const buttonStyle = { - color: "white", - padding: "12px", - backgroundColor: "#1c2025", - width: "100%", - height: "85%", - }; - return ( <> @@ -414,9 +406,7 @@ export function OavMover() { } else { submitAndRunPlanImmediately({ planName: "gui_gonio_move_on_click", - planParams: { - position_px: [x_int, y_int], - }, + planParams: { position_px: [x_int, y_int] }, }); } }} From c32dc84faf3206115664ed68b143f380ad9d8a68 Mon Sep 17 00:00:00 2001 From: Tamoor Shahid Date: Thu, 4 Dec 2025 11:59:39 +0000 Subject: [PATCH 2/3] Added sx styling to RunPlanButtons --- src/blueapi/BlueapiComponents.tsx | 31 ++++++++++++++++++++++++------- src/screens/OavMover.tsx | 22 +++++++++++++++------- 2 files changed, 39 insertions(+), 14 deletions(-) diff --git a/src/blueapi/BlueapiComponents.tsx b/src/blueapi/BlueapiComponents.tsx index 0e40b1d..3d67aaf 100644 --- a/src/blueapi/BlueapiComponents.tsx +++ b/src/blueapi/BlueapiComponents.tsx @@ -13,6 +13,7 @@ import { parseInstrumentSession, readVisitFromPv } from "./visit"; type SeverityLevel = "success" | "info" | "warning" | "error"; type VariantChoice = "outlined" | "contained"; type ButtonSize = "small" | "medium" | "large"; +type ButtonColor = "primary" | "secondary" | "custom"; type RunPlanButtonProps = { btnLabel: string; @@ -21,6 +22,11 @@ type RunPlanButtonProps = { title?: string; btnVariant?: VariantChoice; btnSize?: ButtonSize; + btnColor?: ButtonColor; + disabled?: boolean; + sx?: object; + tooltipSx?: object; + typographySx?: object; }; // @{todo} Ideally we should be able to set up the stylings for @@ -47,6 +53,10 @@ 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 color = props.btnColor ? props.btnColor : "primary"; + const disabled = props.disabled ? props.disabled : false; + const sx = props.sx ? props.sx : {}; // Style for the button component which is the most likely to be customised + const tooltipSx = props.tooltipSx ? props.tooltipSx : {}; const handleClick = () => { setOpenSnackbar(true); @@ -85,18 +95,25 @@ export function RunPlanButton(props: RunPlanButtonProps) { return (
- + diff --git a/src/screens/OavMover.tsx b/src/screens/OavMover.tsx index b7bb9cd..91e3c78 100644 --- a/src/screens/OavMover.tsx +++ b/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,7 @@ export function CoordinateSystem() { title="Go to Fiducial 0" btnVariant="contained" btnSize="large" + sx={buttonStyle} /> @@ -297,6 +298,7 @@ export function CoordinateSystem() { title="Go to Fiducial 1" btnVariant="contained" btnSize="large" + sx={buttonStyle} /> @@ -307,6 +309,7 @@ export function CoordinateSystem() { title="Go to Fiducial 2" btnVariant="contained" btnSize="large" + sx={buttonStyle} /> @@ -315,6 +318,7 @@ export function CoordinateSystem() { planName="gui_set_fiducial_0" title="Set Fiducial 0" btnVariant="contained" + sx={buttonStyle} /> @@ -324,6 +328,7 @@ export function CoordinateSystem() { planParams={{ point: "1" }} title="Set Fiducial 1" btnVariant="contained" + sx={buttonStyle} /> @@ -333,6 +338,7 @@ export function CoordinateSystem() { planParams={{ point: "2" }} title="Set Fiducial 2" btnVariant="contained" + sx={buttonStyle} /> @@ -341,6 +347,7 @@ export function CoordinateSystem() { planName="cs_maker" title="Create the coordinate system on the pmac." btnVariant="contained" + sx={buttonStyle} /> @@ -349,6 +356,7 @@ export function CoordinateSystem() { planName="block_check" title="Check the coordinate system was set up correctly." btnVariant="contained" + sx={buttonStyle} /> From 30acd19dbfafd8cdbe05651176f18f93f59cdeb2 Mon Sep 17 00:00:00 2001 From: Tamoor Shahid Date: Thu, 4 Dec 2025 17:28:14 +0000 Subject: [PATCH 3/3] Added default css. --- src/blueapi/BlueapiComponents.tsx | 21 ++++++++------------ src/screens/OavMover.tsx | 33 +++++++++---------------------- 2 files changed, 17 insertions(+), 37 deletions(-) diff --git a/src/blueapi/BlueapiComponents.tsx b/src/blueapi/BlueapiComponents.tsx index 3d67aaf..147e7fc 100644 --- a/src/blueapi/BlueapiComponents.tsx +++ b/src/blueapi/BlueapiComponents.tsx @@ -29,18 +29,13 @@ type RunPlanButtonProps = { typographySx?: object; }; -// @{todo} Ideally we should be able to set up the stylings for -// a custom button in the proper way by doing something like: -// const CustomRunButton = styled(Button)({ -// width: "100%", -// height: "85%", -// color: "var(--color)", -// backgroundColor: "var(--backgroundColor)", -// padding: "var(--padding)", -// margin: "var(--margin)", -// }); -// This will be another PR -// See https://github.com/DiamondLightSource/mx-daq-ui/issues/71 +const buttonStyles = { + color: "white", + padding: "12px", + backgroundColor: "#1c2025", + width: "90%", + height: "85%", +}; export function RunPlanButton(props: RunPlanButtonProps) { const [openSnackbar, setOpenSnackbar] = React.useState(false); @@ -55,7 +50,7 @@ export function RunPlanButton(props: RunPlanButtonProps) { const size = props.btnSize ? props.btnSize : "medium"; const color = props.btnColor ? props.btnColor : "primary"; const disabled = props.disabled ? props.disabled : false; - const sx = props.sx ? props.sx : {}; // Style for the button component which is the most likely to be customised + const sx = props.sx ? { ...buttonStyles, ...props.sx } : buttonStyles; // Style for the button component which is the most likely to be customised const tooltipSx = props.tooltipSx ? props.tooltipSx : {}; const handleClick = () => { diff --git a/src/screens/OavMover.tsx b/src/screens/OavMover.tsx index 91e3c78..1656199 100644 --- a/src/screens/OavMover.tsx +++ b/src/screens/OavMover.tsx @@ -33,13 +33,6 @@ import oxfordChipDiagram from "../assets/Oxford Chip Diagram.excalidraw.svg"; import { RunPlanButton } from "../blueapi/BlueapiComponents"; import { parseInstrumentSession, readVisitFromPv } from "../blueapi/visit"; -const buttonStyle = { - color: "white", - margin: "5px", - padding: "15px", - backgroundColor: "#1c2025", -}; - function BacklightControl(props: PvDescription) { const theme = useTheme(); return ( @@ -241,7 +234,15 @@ export function PresetPositionsSideDrawer() { return ( <> - @@ -261,14 +262,6 @@ export function CoordinateSystem() { setOpen(false); }; - const buttonStyle = { - color: "white", - padding: "12px", - backgroundColor: "#1c2025", - width: "90%", - height: "85%", - }; - return ( <> @@ -287,7 +280,6 @@ export function CoordinateSystem() { title="Go to Fiducial 0" btnVariant="contained" btnSize="large" - sx={buttonStyle} /> @@ -298,7 +290,6 @@ export function CoordinateSystem() { title="Go to Fiducial 1" btnVariant="contained" btnSize="large" - sx={buttonStyle} /> @@ -309,7 +300,6 @@ export function CoordinateSystem() { title="Go to Fiducial 2" btnVariant="contained" btnSize="large" - sx={buttonStyle} /> @@ -318,7 +308,6 @@ export function CoordinateSystem() { planName="gui_set_fiducial_0" title="Set Fiducial 0" btnVariant="contained" - sx={buttonStyle} /> @@ -328,7 +317,6 @@ export function CoordinateSystem() { planParams={{ point: "1" }} title="Set Fiducial 1" btnVariant="contained" - sx={buttonStyle} /> @@ -338,7 +326,6 @@ export function CoordinateSystem() { planParams={{ point: "2" }} title="Set Fiducial 2" btnVariant="contained" - sx={buttonStyle} /> @@ -347,7 +334,6 @@ export function CoordinateSystem() { planName="cs_maker" title="Create the coordinate system on the pmac." btnVariant="contained" - sx={buttonStyle} /> @@ -356,7 +342,6 @@ export function CoordinateSystem() { planName="block_check" title="Check the coordinate system was set up correctly." btnVariant="contained" - sx={buttonStyle} />