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 1/3] 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 2/3] 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 3/3] 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();