groupbox to change colours when in darkmode

src/ui/hooks/useStyle.ts

@@ -24,6 +24,7 @@ export interface UseStyleResult {
   };
   customColors: Record<string, string>;
   other: CSSProperties;
+  styleOpt?: number;
 }
 
 interface UseStyleProps {
@@ -35,6 +36,7 @@ interface UseStyleProps {
   transparent?: boolean;
   actions?: WidgetActions;
   customColors?: { [key: string]: Color | undefined };
+  styleOpt?: number;
 }
 
 const selectPalette = (theme: Theme, themeName?: string): PaletteColor => {
@@ -80,6 +82,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 +171,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"
@@ -178,7 +184,8 @@ export const useStyle = (
       font,
       colors: colors,
       customColors,
-      other
+      other,
+      styleOpt
     },
     newProps
   ];

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-1xb3zl8"
     >
       <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-17xtuq7"
     >
       <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-17xtuq7"
     >
       <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;"

src/ui/widgets/GroupBox/groupBox.test.tsx

@@ -2,51 +2,73 @@ 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();
   });
 });
 
 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();
   });
 
   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();

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,9 +14,11 @@ 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";
+
+const widgetName = "groupbox";
 
 const INNER_DIV_STYLE: CSSProperties = {
   position: "relative",
@@ -41,17 +43,22 @@ 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 {
-    backgroundColor = ColorUtils.fromRgba(240, 240, 240),
-    foregroundColor = ColorUtils.fromRgba(0, 0, 0),
-    lineColor = ColorUtils.fromRgba(0, 0, 0),
     font = newFont(14),
-    styleOpt = 0,
+    styleOpt = style.styleOpt,
     transparent = false,
-    visible = true
-  } = props;
+    visible = true,
+    backgroundColor = style.colors.backgroundColor,
+    foregroundColor = style.colors.color,
+    lineColor = style.customColors.lineColor
+  } = newProps;
 
   const outerDivStyle: CSSProperties = {
     width: "100%",
@@ -65,11 +72,11 @@ export const GroupBoxComponent = (
     width: "100%",
     height: "100%",
     padding: "0px",
-    border: "1px solid " + lineColor.colorString,
+    border: "1px solid " + lineColor,
     whiteSpace: "nowrap",
     overflow: "visible",
-    backgroundColor: transparent ? "transparent" : backgroundColor.colorString,
-    color: foregroundColor.colorString,
+    backgroundColor: transparent ? "transparent" : backgroundColor,
+    color: foregroundColor,
     visibility: visible ? "visible" : "hidden",
     ...fontToCss(font)
   };
@@ -105,12 +112,12 @@ export const GroupBoxComponent = (
           {styleOpt === 1 ? (
             <div
               style={{
+                ...style.customColors,
+                ...style.font,
+                color: foregroundColor,
+                backgroundColor: backgroundColor,
                 height: "20px",
-                width: "100%",
-                backgroundColor: lineColor.colorString,
-                ...fontToCss(font),
-                textAlign: "left",
-                color: foregroundColor.colorString
+                width: "100%"
               }}
             >
               {name}

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;
 };