From 80a7e7b54c85ca956ccf2804e1361ebf0183d19a Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Thu, 6 Aug 2026 10:09:21 +0100
Subject: [PATCH 01/10] groupbox to change colours when in darkmode

---
 src/ui/widgets/GroupBox/groupBox.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index e87c44e6..599ea024 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -17,6 +17,8 @@ import { fontToCss, newFont } from "../../../types/font";
 import { ColorUtils } from "../../../types/color";
 import Box from "@mui/material/Box";
 import { MacroContext, MacroContextType } from "../../../types/macros";
+import { selectCurrentClass } from "../../../redux/slices/styleSlice";
+import { useSelector } from "react-redux";
 
 const INNER_DIV_STYLE: CSSProperties = {
   position: "relative",
@@ -43,7 +45,8 @@ const GroupBoxProps = {
 export const GroupBoxComponent = (
   props: InferWidgetProps<typeof GroupBoxProps>
 ): JSX.Element => {
-  const {
+  const currentClass = useSelector(selectCurrentClass);
+  let {
     backgroundColor = ColorUtils.fromRgba(240, 240, 240),
     foregroundColor = ColorUtils.fromRgba(0, 0, 0),
     lineColor = ColorUtils.fromRgba(0, 0, 0),
@@ -53,6 +56,12 @@ export const GroupBoxComponent = (
     visible = true
   } = props;
 
+  if (currentClass === "DARKMODE") {
+    backgroundColor = ColorUtils.fromRgba(26, 29, 38);
+    foregroundColor = ColorUtils.fromRgba(233, 233, 233);
+    lineColor = ColorUtils.fromRgba(233, 233, 233);
+  }
+
   const outerDivStyle: CSSProperties = {
     width: "100%",
     height: "100%",

From 7290b66dda5972f91780891a7cdb600e9c3975db Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Thu, 6 Aug 2026 10:12:32 +0100
Subject: [PATCH 02/10] Linting fixes

---
 src/ui/widgets/GroupBox/groupBox.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index 599ea024..1ad98d43 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -45,16 +45,19 @@ const GroupBoxProps = {
 export const GroupBoxComponent = (
   props: InferWidgetProps<typeof GroupBoxProps>
 ): JSX.Element => {
-  const currentClass = useSelector(selectCurrentClass);
-  let {
-    backgroundColor = ColorUtils.fromRgba(240, 240, 240),
-    foregroundColor = ColorUtils.fromRgba(0, 0, 0),
-    lineColor = ColorUtils.fromRgba(0, 0, 0),
+  const {
     font = newFont(14),
     styleOpt = 0,
     transparent = false,
     visible = true
   } = props;
+  const currentClass = useSelector(selectCurrentClass);
+
+  let {
+    backgroundColor = ColorUtils.fromRgba(240, 240, 240),
+    foregroundColor = ColorUtils.fromRgba(0, 0, 0),
+    lineColor = ColorUtils.fromRgba(0, 0, 0)
+  } = props;
 
   if (currentClass === "DARKMODE") {
     backgroundColor = ColorUtils.fromRgba(26, 29, 38);

From a3e45304f744645bb395eefbb8671da1eca8cc52 Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Thu, 6 Aug 2026 11:48:46 +0100
Subject: [PATCH 03/10] Wrapped test in provider context

---
 src/ui/widgets/GroupBox/groupBox.test.tsx | 46 +++++++++++++++++------
 1 file changed, 34 insertions(+), 12 deletions(-)

diff --git a/src/ui/widgets/GroupBox/groupBox.test.tsx b/src/ui/widgets/GroupBox/groupBox.test.tsx
index 7e2c2dc8..2cd77a6c 100644
--- a/src/ui/widgets/GroupBox/groupBox.test.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.test.tsx
@@ -2,33 +2,49 @@ import React from "react";
 import { GroupBoxComponent } from "./groupBox";
 import { ColorUtils } from "../../../types/color";
 import { render } from "@testing-library/react";
+import { configureStore } from "@reduxjs/toolkit";
+import { Provider } from "react-redux";
+
+const testStore = configureStore({
+  reducer: {
+    style: (state = { classes: {}, currentClass: "DEFAULT" }) => state
+  }
+});
 
 describe("<GroupBoxComponent /> snapshots", (): void => {
   test("it matches the snapshot for Group Box style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent
-        name={"Test"}
-        backgroundColor={ColorUtils.WHITE}
-        styleOpt={0}
-      />
+      <Provider store={testStore}>
+        <GroupBoxComponent
+          name={"Test"}
+          backgroundColor={ColorUtils.WHITE}
+          styleOpt={0}
+        />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
   test("it matches the snapshot for Title Bar style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent name={"Title"} styleOpt={1} />
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"Title"} styleOpt={1} />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
   test("it matches the snapshot for Line style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent name={"No Title"} styleOpt={2} />
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"No Title"} styleOpt={2} />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
   test("it matches the snapshot for no style", (): void => {
     const { asFragment } = render(
-      <GroupBoxComponent name={"None"} styleOpt={3} />
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"None"} styleOpt={3} />
+      </Provider>
     );
     expect(asFragment()).toMatchSnapshot();
   });
@@ -36,7 +52,11 @@ describe("<GroupBoxComponent /> snapshots", (): void => {
 
 describe("<GroupBoxComponent />", (): void => {
   test("it renders the title", (): void => {
-    const grouping = <GroupBoxComponent name={"Test"} styleOpt={1} />;
+    const grouping = (
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"Test"} styleOpt={1} />
+      </Provider>
+    );
     const { getByText } = render(grouping);
     expect(getByText("Test")).toBeInTheDocument();
   });
@@ -44,9 +64,11 @@ describe("<GroupBoxComponent />", (): void => {
   test("it renders child div with text", (): void => {
     const childText = "Testing Child Component";
     const groupingWithChild = (
-      <GroupBoxComponent name={"Test"}>
-        <div>{childText}</div>
-      </GroupBoxComponent>
+      <Provider store={testStore}>
+        <GroupBoxComponent name={"Test"}>
+          <div>{childText}</div>
+        </GroupBoxComponent>
+      </Provider>
     );
     const { getByText } = render(groupingWithChild);
     expect(getByText("Test")).toBeInTheDocument();

From e656136f4b9f7b0b3828cadaaabc26d5e4a06afc Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Fri, 14 Aug 2026 10:09:13 +0100
Subject: [PATCH 04/10] Changed to utilize usestyles

---
 src/ui/hooks/useStyle.ts                      |  5 ++
 .../__snapshots__/groupBox.test.tsx.snap      | 10 ++--
 src/ui/widgets/GroupBox/groupBox.tsx          | 48 ++++++++++---------
 src/ui/widgets/widgetProps.ts                 |  2 +-
 4 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/ui/hooks/useStyle.ts b/src/ui/hooks/useStyle.ts
index da30e428..2b234c70 100644
--- a/src/ui/hooks/useStyle.ts
+++ b/src/ui/hooks/useStyle.ts
@@ -35,6 +35,7 @@ interface UseStyleProps {
   transparent?: boolean;
   actions?: WidgetActions;
   customColors?: { [key: string]: Color | undefined };
+  styleOpt?: number;
 }
 
 const selectPalette = (theme: Theme, themeName?: string): PaletteColor => {
@@ -80,6 +81,8 @@ const backgroundColorSelector = (
     ? "transparent"
     : (backgroundColor?.colorString ?? themePalette?.main);
 
+const styleOptSelector = (styleOpt?: number): number => styleOpt ?? 0;
+
 const fontSelector = (theme: Theme, font?: Font): CSSProperties =>
   fontToCss(font) ?? (theme.typography as CSSProperties);
 
@@ -167,6 +170,8 @@ export const useStyle = (
 
   const cursor = props.actions?.actions.length ? "pointer" : "auto";
 
+  const styleOpt = styleOptSelector(props.styleOpt);
+
   const other: CSSProperties = {
     cursor,
     visibility: visible ? "visible" : "hidden"
diff --git a/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap b/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
index e11d4bab..d48e0435 100644
--- a/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
+++ b/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Group Box
     style="width: 100%; height: 100%; position: absolute; padding: 0px 10px 0px 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-12fxbv3"
+      class="MuiBox-root css-18o6fw6"
     >
       <legend>
         Test
@@ -25,7 +25,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Line styl
     style="width: 100%; height: 100%; position: absolute; padding: 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-4dydo6"
+      class="MuiBox-root css-1oe59xy"
     >
       <div
         style="position: relative; overflow: visible; color: black;"
@@ -41,10 +41,10 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Title Bar
     style="width: 100%; height: 100%; position: absolute; padding: 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-4dydo6"
+      class="MuiBox-root css-1oe59xy"
     >
       <div
-        style="height: 20px; width: 100%; background-color: rgb(0, 0, 0); font-weight: normal; font-style: normal; font-size: 0.875rem; text-align: left; color: rgb(0, 0, 0);"
+        style="font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; color: rgb(255, 255, 255); background-color: rgb(25, 118, 210); height: 20px; width: 100%;"
       >
         Title
       </div>
@@ -62,7 +62,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for no style
     style="width: 100%; height: 100%; position: absolute; padding: 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-a189jy"
+      class="MuiBox-root css-1rp040x"
     >
       <div
         style="position: relative; overflow: visible; color: black;"
diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index 1ad98d43..7848c333 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -14,11 +14,13 @@ import {
   MacrosPropOpt
 } from "../propTypes";
 import { fontToCss, newFont } from "../../../types/font";
+import { ComponentProps } from "../widgetProps";
 import { ColorUtils } from "../../../types/color";
 import Box from "@mui/material/Box";
 import { MacroContext, MacroContextType } from "../../../types/macros";
-import { selectCurrentClass } from "../../../redux/slices/styleSlice";
-import { useSelector } from "react-redux";
+import { useStyle } from "../../hooks/useStyle";
+
+const widgetName = "groupbox";
 
 const INNER_DIV_STYLE: CSSProperties = {
   position: "relative",
@@ -43,27 +45,29 @@ const GroupBoxProps = {
 // This could be replaced if we can implement this as part of the
 // border prop.
 export const GroupBoxComponent = (
-  props: InferWidgetProps<typeof GroupBoxProps>
+  props: InferWidgetProps<typeof GroupBoxProps> & ComponentProps
 ): JSX.Element => {
+  const [style, newProps] = useStyle(
+    { ...props, customColors: { lineColor: props.lineColor } },
+    widgetName,
+    props.class
+  );
   const {
     font = newFont(14),
     styleOpt = 0,
     transparent = false,
-    visible = true
-  } = props;
-  const currentClass = useSelector(selectCurrentClass);
-
-  let {
+    visible = true,
     backgroundColor = ColorUtils.fromRgba(240, 240, 240),
     foregroundColor = ColorUtils.fromRgba(0, 0, 0),
     lineColor = ColorUtils.fromRgba(0, 0, 0)
-  } = props;
+  } = newProps;
 
-  if (currentClass === "DARKMODE") {
-    backgroundColor = ColorUtils.fromRgba(26, 29, 38);
-    foregroundColor = ColorUtils.fromRgba(233, 233, 233);
-    lineColor = ColorUtils.fromRgba(233, 233, 233);
-  }
+  const effectiveBackground = transparent
+    ? "transparent"
+    : (style.colors.backgroundColor ?? backgroundColor.colorString);
+  const effectiveForeground = style.colors.color ?? foregroundColor.colorString;
+  const effectiveBorderColor =
+    style.customColors?.lineColor ?? lineColor.colorString;
 
   const outerDivStyle: CSSProperties = {
     width: "100%",
@@ -77,11 +81,11 @@ export const GroupBoxComponent = (
     width: "100%",
     height: "100%",
     padding: "0px",
-    border: "1px solid " + lineColor.colorString,
+    border: "1px solid " + effectiveBorderColor,
     whiteSpace: "nowrap",
     overflow: "visible",
-    backgroundColor: transparent ? "transparent" : backgroundColor.colorString,
-    color: foregroundColor.colorString,
+    backgroundColor: transparent ? "transparent" : effectiveBackground,
+    color: effectiveForeground,
     visibility: visible ? "visible" : "hidden",
     ...fontToCss(font)
   };
@@ -117,12 +121,12 @@ export const GroupBoxComponent = (
           {styleOpt === 1 ? (
             <div
               style={{
+                ...style.customColors,
+                ...style.font,
+                color: effectiveForeground,
+                backgroundColor: effectiveBackground,
                 height: "20px",
-                width: "100%",
-                backgroundColor: lineColor.colorString,
-                ...fontToCss(font),
-                textAlign: "left",
-                color: foregroundColor.colorString
+                width: "100%"
               }}
             >
               {name}
diff --git a/src/ui/widgets/widgetProps.ts b/src/ui/widgets/widgetProps.ts
index c28405c0..7b26b6a8 100644
--- a/src/ui/widgets/widgetProps.ts
+++ b/src/ui/widgets/widgetProps.ts
@@ -70,7 +70,7 @@ type BaseWidgetProps = {
   baseWidget: React.FC<any>;
 };
 
-type ComponentProps = {
+export type ComponentProps = {
   style?: Record<string, string>;
   class?: string;
 };

From b76abb2501bc7bbb4fcdb92c9c1d06f626d5abf2 Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Fri, 14 Aug 2026 10:36:48 +0100
Subject: [PATCH 05/10] utilised styleopt

---
 src/ui/hooks/useStyle.ts             | 4 +++-
 src/ui/widgets/GroupBox/groupBox.tsx | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/hooks/useStyle.ts b/src/ui/hooks/useStyle.ts
index 2b234c70..08fa953b 100644
--- a/src/ui/hooks/useStyle.ts
+++ b/src/ui/hooks/useStyle.ts
@@ -24,6 +24,7 @@ export interface UseStyleResult {
   };
   customColors: Record<string, string>;
   other: CSSProperties;
+  styleOpt?: number;
 }
 
 interface UseStyleProps {
@@ -183,7 +184,8 @@ export const useStyle = (
       font,
       colors: colors,
       customColors,
-      other
+      other,
+      styleOpt
     },
     newProps
   ];
diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index 7848c333..9a27e0b5 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -68,6 +68,7 @@ export const GroupBoxComponent = (
   const effectiveForeground = style.colors.color ?? foregroundColor.colorString;
   const effectiveBorderColor =
     style.customColors?.lineColor ?? lineColor.colorString;
+  const effectiveStyleOpt = style.styleOpt ?? styleOpt;
 
   const outerDivStyle: CSSProperties = {
     width: "100%",
@@ -90,7 +91,7 @@ export const GroupBoxComponent = (
     ...fontToCss(font)
   };
 
-  if (styleOpt === 0) {
+  if (effectiveStyleOpt === 0) {
     // Typical group box with label
     outerDivStyle.paddingRight = "10px";
     boxStyle.paddingLeft = "8px";

From 811a76146d2ab6b1dca655905da851eb2612892a Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Fri, 14 Aug 2026 10:39:50 +0100
Subject: [PATCH 06/10] Linting fix

---
 src/ui/widgets/GroupBox/groupBox.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index 9a27e0b5..bddd2b49 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useContext } from "react";
 
 import { Widget } from "../widget";
-import { WidgetPropType } from "../widgetProps";
+import { WidgetPropType , ComponentProps } from "../widgetProps";
 import { registerWidget } from "../register";
 import {
   ChildrenPropOpt,
@@ -14,7 +14,6 @@ import {
   MacrosPropOpt
 } from "../propTypes";
 import { fontToCss, newFont } from "../../../types/font";
-import { ComponentProps } from "../widgetProps";
 import { ColorUtils } from "../../../types/color";
 import Box from "@mui/material/Box";
 import { MacroContext, MacroContextType } from "../../../types/macros";

From 54d4c921897af3bdac72023b3ccc367183249a24 Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Fri, 14 Aug 2026 10:42:53 +0100
Subject: [PATCH 07/10] Linting fix, removed whitespace

---
 src/ui/widgets/GroupBox/groupBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index bddd2b49..00cb1d86 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties, useContext } from "react";
 
 import { Widget } from "../widget";
-import { WidgetPropType , ComponentProps } from "../widgetProps";
+import { WidgetPropType, ComponentProps } from "../widgetProps";
 import { registerWidget } from "../register";
 import {
   ChildrenPropOpt,

From 997186f2efd648a679f31ac705adbc4fc0d6b4f1 Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Mon, 17 Aug 2026 11:11:02 +0100
Subject: [PATCH 08/10] made recommended changes

---
 .../__snapshots__/groupBox.test.tsx.snap      |  6 ++---
 src/ui/widgets/GroupBox/groupBox.tsx          | 24 +++++++------------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap b/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
index d48e0435..3d15cd90 100644
--- a/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
+++ b/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Group Box
     style="width: 100%; height: 100%; position: absolute; padding: 0px 10px 0px 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-18o6fw6"
+      class="MuiBox-root css-1gd7eh8"
     >
       <legend>
         Test
@@ -25,7 +25,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Line styl
     style="width: 100%; height: 100%; position: absolute; padding: 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-1oe59xy"
+      class="MuiBox-root css-17xtuq7"
     >
       <div
         style="position: relative; overflow: visible; color: black;"
@@ -41,7 +41,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Title Bar
     style="width: 100%; height: 100%; position: absolute; padding: 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-1oe59xy"
+      class="MuiBox-root css-17xtuq7"
     >
       <div
         style="font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-size: 14px; color: rgb(255, 255, 255); background-color: rgb(25, 118, 210); height: 20px; width: 100%;"
diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index 00cb1d86..a41538d8 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -61,14 +61,6 @@ export const GroupBoxComponent = (
     lineColor = ColorUtils.fromRgba(0, 0, 0)
   } = newProps;
 
-  const effectiveBackground = transparent
-    ? "transparent"
-    : (style.colors.backgroundColor ?? backgroundColor.colorString);
-  const effectiveForeground = style.colors.color ?? foregroundColor.colorString;
-  const effectiveBorderColor =
-    style.customColors?.lineColor ?? lineColor.colorString;
-  const effectiveStyleOpt = style.styleOpt ?? styleOpt;
-
   const outerDivStyle: CSSProperties = {
     width: "100%",
     height: "100%",
@@ -81,16 +73,16 @@ export const GroupBoxComponent = (
     width: "100%",
     height: "100%",
     padding: "0px",
-    border: "1px solid " + effectiveBorderColor,
+    border: "1px solid " + style.customColors.lineColor,
     whiteSpace: "nowrap",
     overflow: "visible",
-    backgroundColor: transparent ? "transparent" : effectiveBackground,
-    color: effectiveForeground,
+    backgroundColor: transparent ? "transparent" : style.colors.backgroundColor,
+    color: style.colors.color,
     visibility: visible ? "visible" : "hidden",
     ...fontToCss(font)
   };
 
-  if (effectiveStyleOpt === 0) {
+  if (style.styleOpt === 0) {
     // Typical group box with label
     outerDivStyle.paddingRight = "10px";
     boxStyle.paddingLeft = "8px";
@@ -118,13 +110,13 @@ export const GroupBoxComponent = (
     <MacroContext.Provider value={updatedMacroContext}>
       <div style={outerDivStyle}>
         <Box component="fieldset" sx={boxStyle}>
-          {styleOpt === 1 ? (
+          {style.styleOpt === 1 ? (
             <div
               style={{
                 ...style.customColors,
                 ...style.font,
-                color: effectiveForeground,
-                backgroundColor: effectiveBackground,
+                color: style.colors.color,
+                backgroundColor: style.colors.backgroundColor,
                 height: "20px",
                 width: "100%"
               }}
@@ -134,7 +126,7 @@ export const GroupBoxComponent = (
           ) : (
             <></>
           )}
-          {styleOpt === 0 ? <legend>{name}</legend> : <></>}
+          {style.styleOpt === 0 ? <legend>{name}</legend> : <></>}
           <div style={INNER_DIV_STYLE}>
             <>{props.children}</>
           </div>

From db9ce0c4a8bca1eac8bcd75b03e86335cbe56a8d Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Mon, 17 Aug 2026 11:27:33 +0100
Subject: [PATCH 09/10] Just rephrasing some code

---
 .../__snapshots__/groupBox.test.tsx.snap      |  2 +-
 src/ui/widgets/GroupBox/groupBox.tsx          | 24 +++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap b/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
index 3d15cd90..ab3adc1c 100644
--- a/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
+++ b/src/ui/widgets/GroupBox/__snapshots__/groupBox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<GroupBoxComponent /> snapshots > it matches the snapshot for Group Box
     style="width: 100%; height: 100%; position: absolute; padding: 0px 10px 0px 0px; box-sizing: border-box;"
   >
     <fieldset
-      class="MuiBox-root css-1gd7eh8"
+      class="MuiBox-root css-1xb3zl8"
     >
       <legend>
         Test
diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index a41538d8..db5573f0 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -53,12 +53,12 @@ export const GroupBoxComponent = (
   );
   const {
     font = newFont(14),
-    styleOpt = 0,
+    styleOpt = style.styleOpt,
     transparent = false,
     visible = true,
-    backgroundColor = ColorUtils.fromRgba(240, 240, 240),
-    foregroundColor = ColorUtils.fromRgba(0, 0, 0),
-    lineColor = ColorUtils.fromRgba(0, 0, 0)
+    backgroundColor = style.colors.backgroundColor,
+    foregroundColor = style.colors.color,
+    lineColor = style.customColors.lineColor
   } = newProps;
 
   const outerDivStyle: CSSProperties = {
@@ -73,16 +73,16 @@ export const GroupBoxComponent = (
     width: "100%",
     height: "100%",
     padding: "0px",
-    border: "1px solid " + style.customColors.lineColor,
+    border: "1px solid " + lineColor,
     whiteSpace: "nowrap",
     overflow: "visible",
-    backgroundColor: transparent ? "transparent" : style.colors.backgroundColor,
-    color: style.colors.color,
+    backgroundColor: transparent ? "transparent" : backgroundColor,
+    color: foregroundColor,
     visibility: visible ? "visible" : "hidden",
     ...fontToCss(font)
   };
 
-  if (style.styleOpt === 0) {
+  if (styleOpt === 0) {
     // Typical group box with label
     outerDivStyle.paddingRight = "10px";
     boxStyle.paddingLeft = "8px";
@@ -110,13 +110,13 @@ export const GroupBoxComponent = (
     <MacroContext.Provider value={updatedMacroContext}>
       <div style={outerDivStyle}>
         <Box component="fieldset" sx={boxStyle}>
-          {style.styleOpt === 1 ? (
+          {styleOpt === 1 ? (
             <div
               style={{
                 ...style.customColors,
                 ...style.font,
-                color: style.colors.color,
-                backgroundColor: style.colors.backgroundColor,
+                color: foregroundColor,
+                backgroundColor: backgroundColor,
                 height: "20px",
                 width: "100%"
               }}
@@ -126,7 +126,7 @@ export const GroupBoxComponent = (
           ) : (
             <></>
           )}
-          {style.styleOpt === 0 ? <legend>{name}</legend> : <></>}
+          {styleOpt === 0 ? <legend>{name}</legend> : <></>}
           <div style={INNER_DIV_STYLE}>
             <>{props.children}</>
           </div>

From c52305d2924baaea6fff50cd1d0ba324cfe0f46e Mon Sep 17 00:00:00 2001
From: "Sode, Adedamola (DLSLtd,RAL,LSCI)" <adedamola.sode@diamond.ac.uk>
Date: Mon, 17 Aug 2026 11:36:43 +0100
Subject: [PATCH 10/10] Linting: Removed import of colorUtils

---
 src/ui/widgets/GroupBox/groupBox.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/widgets/GroupBox/groupBox.tsx b/src/ui/widgets/GroupBox/groupBox.tsx
index db5573f0..30dfce6e 100644
--- a/src/ui/widgets/GroupBox/groupBox.tsx
+++ b/src/ui/widgets/GroupBox/groupBox.tsx
@@ -14,7 +14,6 @@ import {
   MacrosPropOpt
 } from "../propTypes";
 import { fontToCss, newFont } from "../../../types/font";
-import { ColorUtils } from "../../../types/color";
 import Box from "@mui/material/Box";
 import { MacroContext, MacroContextType } from "../../../types/macros";
 import { useStyle } from "../../hooks/useStyle";