From de29a3de87de86b884ce82bb3d2e6d96bc12cd8a Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 10:06:16 +0000
Subject: [PATCH 01/26] Replaced default html button with MUI Button

---
 src/ui/widgets/ActionButton/actionButton.tsx | 79 +++++++-------------
 1 file changed, 29 insertions(+), 50 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 7e5dfe7..7648174 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -18,6 +18,9 @@ import { Font } from "../../../types/font";
 import { Border, BorderStyle } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
+import { Button } from "@mui/material";
+import { ThemeProvider } from "@mui/material";
+import { defaultColours } from "../../../colourscheme";
 
 export interface ActionButtonProps {
   text: string;
@@ -32,44 +35,6 @@ export interface ActionButtonProps {
   visible?: boolean;
 }
 
-export const ActionButtonComponent = (
-  props: ActionButtonProps
-): JSX.Element => {
-  const style = commonCss(props);
-  if (props.disabled) {
-    style["cursor"] = "not-allowed";
-  }
-  style["whiteSpace"] = "normal";
-  // Use default button style if no border defined.
-  if (props.border?.style === BorderStyle.None) {
-    style["borderStyle"] = undefined;
-    style["borderWidth"] = undefined;
-    style["borderColor"] = undefined;
-    style["padding"] = "0";
-  }
-  return (
-    <button
-      className={classes.actionbutton}
-      disabled={props.disabled}
-      onClick={props.onClick}
-      style={style}
-    >
-      {props.image !== undefined ? (
-        <figure className={classes.figure}>
-          <img
-            style={{ width: "100%", display: "block" }}
-            src={props.image}
-            alt={props.image}
-          ></img>
-          <figcaption>{props.text}</figcaption>
-        </figure>
-      ) : (
-        <span style={{ whiteSpace: "normal" }}>{props.text || ""}</span>
-      )}
-    </button>
-  );
-};
-
 const ActionButtonPropType = {
   text: StringPropOpt,
   actions: ActionsPropType,
@@ -104,18 +69,32 @@ export const ActionButtonWidget = (
       );
   }
   return (
-    <ActionButtonComponent
-      text={props.text ?? ""}
-      disabled={props.readonly}
-      onClick={onClick}
-      image={props.image}
-      backgroundColor={props.backgroundColor}
-      foregroundColor={props.foregroundColor}
-      font={props.font}
-      border={props.border}
-      actions={props.actions as WidgetActions}
-      visible={props.visible}
-    />
+    <ThemeProvider theme={defaultColours}>
+      <Button
+        variant="contained"
+        sx={{
+            height: "100%",
+            width: "100%",
+            fontFamily: props.font?.css() ?? "",
+            color: props.foregroundColor?.toString() ?? defaultColours.palette.primary.contrastText,
+            backgroundColor: props.backgroundColor?.toString() ?? defaultColours.palette.primary.main,
+            }}
+        onClick={onClick}
+      >
+      {props.image !== undefined ? (
+        <figure className={classes.figure}>
+          <img
+            style={{ width: "100%", display: "block" }}
+            src={props.image}
+            alt={props.image}
+          ></img>
+          <figcaption>{props.text}</figcaption>
+        </figure>
+      ) : (
+        props.text ?? ""
+      )}
+      </Button>
+    </ThemeProvider>
   );
 };
 

From 9cd6af8036fef9006e1286cf7c4e0e51cc6d187c Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 10:54:08 +0000
Subject: [PATCH 02/26] Added border and disabled settings

---
 src/ui/widgets/ActionButton/actionButton.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 7648174..0608ad7 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 import { WidgetActions, executeActions } from "../widgetActions";
-import { commonCss, Widget } from "../widget";
+import { Widget } from "../widget";
 import { PVComponent, PVWidgetPropType } from "../widgetProps";
 import classes from "./actionButton.module.css";
 import { registerWidget } from "../register";
@@ -15,7 +15,7 @@ import {
 } from "../propTypes";
 import { Color } from "../../../types/color";
 import { Font } from "../../../types/font";
-import { Border, BorderStyle } from "../../../types/border";
+import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
 import { Button } from "@mui/material";
@@ -43,7 +43,8 @@ const ActionButtonPropType = {
   foregroundColor: ColorPropOpt,
   font: FontPropOpt,
   border: BorderPropOpt,
-  visible: BoolPropOpt
+  visible: BoolPropOpt,
+  disabled: BoolPropOpt
 };
 
 const ActionButtonWidgetProps = {
@@ -72,12 +73,14 @@ export const ActionButtonWidget = (
     <ThemeProvider theme={defaultColours}>
       <Button
         variant="contained"
+        disabled={props.disabled}
         sx={{
             height: "100%",
             width: "100%",
             fontFamily: props.font?.css() ?? "",
             color: props.foregroundColor?.toString() ?? defaultColours.palette.primary.contrastText,
             backgroundColor: props.backgroundColor?.toString() ?? defaultColours.palette.primary.main,
+            border: props.border?.css() ?? "" 
             }}
         onClick={onClick}
       >
@@ -91,7 +94,7 @@ export const ActionButtonWidget = (
           <figcaption>{props.text}</figcaption>
         </figure>
       ) : (
-        props.text ?? ""
+          props.text ?? ""
       )}
       </Button>
     </ThemeProvider>

From 82addef4c216e4d8ec59852f3a3fc19f974c299b Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 11:04:07 +0000
Subject: [PATCH 03/26] Updated file for prettier

---
 src/ui/widgets/ActionButton/actionButton.tsx | 38 ++++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 0608ad7..484bc28 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -75,27 +75,27 @@ export const ActionButtonWidget = (
         variant="contained"
         disabled={props.disabled}
         sx={{
-            height: "100%",
-            width: "100%",
-            fontFamily: props.font?.css() ?? "",
-            color: props.foregroundColor?.toString() ?? defaultColours.palette.primary.contrastText,
-            backgroundColor: props.backgroundColor?.toString() ?? defaultColours.palette.primary.main,
-            border: props.border?.css() ?? "" 
-            }}
+          height: "100%",
+          width: "100%",
+          fontFamily: props.font?.css() ?? "",
+          color: props.foregroundColor?.toString() ?? defaultColours.palette.primary.contrastText,
+          backgroundColor: props.backgroundColor?.toString() ?? defaultColours.palette.primary.main,
+          border: props.border?.css() ?? "" 
+          }}
         onClick={onClick}
       >
-      {props.image !== undefined ? (
-        <figure className={classes.figure}>
-          <img
-            style={{ width: "100%", display: "block" }}
-            src={props.image}
-            alt={props.image}
-          ></img>
-          <figcaption>{props.text}</figcaption>
-        </figure>
-      ) : (
-          props.text ?? ""
-      )}
+        {props.image !== undefined ? (
+          <figure className={classes.figure}>
+            <img
+              style={{ width: "100%", display: "block" }}
+              src={props.image}
+              alt={props.image}
+            ></img>
+            <figcaption>{props.text}</figcaption>
+          </figure>
+        ) : (
+          (props.text ?? "")
+        )}
       </Button>
     </ThemeProvider>
   );

From d2468d957292dcde3ff43dcc70e24a7a001d957d Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 11:14:04 +0000
Subject: [PATCH 04/26] Prettier again

---
 src/ui/widgets/ActionButton/actionButton.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 484bc28..6442e21 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -18,8 +18,8 @@ import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { Button } from "@mui/material";
-import { ThemeProvider } from "@mui/material";
+import { Button, ThemeProvider} from "@mui/material";
+
 import { defaultColours } from "../../../colourscheme";
 
 export interface ActionButtonProps {
@@ -78,10 +78,12 @@ export const ActionButtonWidget = (
           height: "100%",
           width: "100%",
           fontFamily: props.font?.css() ?? "",
-          color: props.foregroundColor?.toString() ?? defaultColours.palette.primary.contrastText,
-          backgroundColor: props.backgroundColor?.toString() ?? defaultColours.palette.primary.main,
-          border: props.border?.css() ?? "" 
-          }}
+          color: props.foregroundColor?.toString() ??
+                     defaultColours.palette.primary.contrastText,
+          backgroundColor: props.backgroundColor?.toString() ??
+                     defaultColours.palette.primary.main,
+          border: props.border?.css() ?? ""
+        }}
         onClick={onClick}
       >
         {props.image !== undefined ? (

From b855c7498613fa9128eb6f833ed9773901411687 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 11:19:11 +0000
Subject: [PATCH 05/26] Prettier still

---
 src/ui/widgets/ActionButton/actionButton.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 6442e21..aafe169 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -18,7 +18,7 @@ import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { Button, ThemeProvider} from "@mui/material";
+import { Button, ThemeProvider } from "@mui/material";
 
 import { defaultColours } from "../../../colourscheme";
 
@@ -78,10 +78,12 @@ export const ActionButtonWidget = (
           height: "100%",
           width: "100%",
           fontFamily: props.font?.css() ?? "",
-          color: props.foregroundColor?.toString() ??
-                     defaultColours.palette.primary.contrastText,
-          backgroundColor: props.backgroundColor?.toString() ??
-                     defaultColours.palette.primary.main,
+          color: 
+            props.foregroundColor?.toString() ??
+            defaultColours.palette.primary.contrastText,
+          backgroundColor: 
+            props.backgroundColor?.toString() ??
+            defaultColours.palette.primary.main,
           border: props.border?.css() ?? ""
         }}
         onClick={onClick}

From 6f74e874b3a170345c3f2757a9fbdf880b964bae Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 11:22:20 +0000
Subject: [PATCH 06/26] Final time

---
 src/ui/widgets/ActionButton/actionButton.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index aafe169..4319994 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -78,10 +78,10 @@ export const ActionButtonWidget = (
           height: "100%",
           width: "100%",
           fontFamily: props.font?.css() ?? "",
-          color: 
+          color:
             props.foregroundColor?.toString() ??
             defaultColours.palette.primary.contrastText,
-          backgroundColor: 
+          backgroundColor:
             props.backgroundColor?.toString() ??
             defaultColours.palette.primary.main,
           border: props.border?.css() ?? ""

From a99f07f7af381a113a0bd4ec89cbf7be252e4238 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 13:03:42 +0000
Subject: [PATCH 07/26] Refactored code to be compatible with tests

---
 src/ui/widgets/ActionButton/actionButton.tsx | 89 ++++++++++++--------
 1 file changed, 55 insertions(+), 34 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 4319994..a0825a3 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -11,7 +11,8 @@ import {
   ColorPropOpt,
   FontPropOpt,
   BorderPropOpt,
-  BoolPropOpt
+  BoolPropOpt,
+  FuncPropOpt
 } from "../propTypes";
 import { Color } from "../../../types/color";
 import { Font } from "../../../types/font";
@@ -35,6 +36,45 @@ export interface ActionButtonProps {
   visible?: boolean;
 }
 
+export const ActionButtonComponent = (
+  props: ActionButtonProps
+): JSX.Element => {
+  return (
+    <ThemeProvider theme={defaultColours}>
+      <Button
+        variant="contained"
+        disabled={props.disabled}
+        sx={{
+          height: "100%",
+          width: "100%",
+          fontFamily: props.font?.css() ?? "",
+          color:
+            props.foregroundColor?.toString() ??
+            defaultColours.palette.primary.contrastText,
+          backgroundColor:
+            props.backgroundColor?.toString() ??
+            defaultColours.palette.primary.main,
+          border: props.border?.css() ?? ""
+        }}
+        onClick={props.onClick}
+      >
+        {props.image !== undefined ? (
+          <figure className={classes.figure}>
+            <img
+              style={{ width: "100%", display: "block" }}
+              src={props.image}
+              alt={props.image}
+            ></img>
+            <figcaption>{props.text}</figcaption>
+          </figure>
+        ) : (
+          (props.text ?? "")
+        )}
+      </Button>
+    </ThemeProvider>
+  );
+};
+
 const ActionButtonPropType = {
   text: StringPropOpt,
   actions: ActionsPropType,
@@ -44,7 +84,8 @@ const ActionButtonPropType = {
   font: FontPropOpt,
   border: BorderPropOpt,
   visible: BoolPropOpt,
-  disabled: BoolPropOpt
+  disabled: BoolPropOpt,
+  onClick: FuncPropOpt
 };
 
 const ActionButtonWidgetProps = {
@@ -70,38 +111,18 @@ export const ActionButtonWidget = (
       );
   }
   return (
-    <ThemeProvider theme={defaultColours}>
-      <Button
-        variant="contained"
-        disabled={props.disabled}
-        sx={{
-          height: "100%",
-          width: "100%",
-          fontFamily: props.font?.css() ?? "",
-          color:
-            props.foregroundColor?.toString() ??
-            defaultColours.palette.primary.contrastText,
-          backgroundColor:
-            props.backgroundColor?.toString() ??
-            defaultColours.palette.primary.main,
-          border: props.border?.css() ?? ""
-        }}
-        onClick={onClick}
-      >
-        {props.image !== undefined ? (
-          <figure className={classes.figure}>
-            <img
-              style={{ width: "100%", display: "block" }}
-              src={props.image}
-              alt={props.image}
-            ></img>
-            <figcaption>{props.text}</figcaption>
-          </figure>
-        ) : (
-          (props.text ?? "")
-        )}
-      </Button>
-    </ThemeProvider>
+    <ActionButtonComponent
+      text={props.text ?? ""}
+      disabled={props.readonly}
+      onClick={onClick}
+      image={props.image}
+      backgroundColor={props.backgroundColor}
+      foregroundColor={props.foregroundColor}
+      font={props.font}
+      border={props.border}
+      actions={props.actions as WidgetActions}
+      visible={props.visible}
+    />
   );
 };
 

From 8a3a0ee7dd3317b06171df33ce43c3734c013dda Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 13:10:08 +0000
Subject: [PATCH 08/26] Updated test snapshot

---
 .../__snapshots__/actionButton.test.tsx.snap  | 36 +++++++++----------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
index a3ad453..bab6900 100644
--- a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
+++ b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
@@ -2,26 +2,22 @@
 
 exports[`<ActionButton /> > it matches the snapshot 1`] = `
 <button
-  className="_actionbutton_b413d3"
+  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-kpvziq-MuiButtonBase-root-MuiButton-root"
+  disabled={false}
+  onBlur={[Function]}
   onClick={[MockFunction spy]}
-  style={
-    {
-      "backgroundColor": undefined,
-      "color": undefined,
-      "cursor": undefined,
-      "visibility": undefined,
-      "whiteSpace": "normal",
-    }
-  }
->
-  <span
-    style={
-      {
-        "whiteSpace": "normal",
-      }
-    }
-  >
-    hello
-  </span>
+  onContextMenu={[Function]}
+  onDragLeave={[Function]}
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  onKeyUp={[Function]}
+  onMouseDown={[Function]}
+  onMouseLeave={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchMove={[Function]}
+  onTouchStart={[Function]}
+  tabIndex={0}
+  type="button"
 </button>
 `;

From b9e8cd3f25f44ac2571f5fcd997d7e7fa1044128 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 24 Mar 2025 13:13:16 +0000
Subject: [PATCH 09/26] Fixed error in snapshot

---
 .../ActionButton/__snapshots__/actionButton.test.tsx.snap       | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
index bab6900..fda1ae0 100644
--- a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
+++ b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
@@ -19,5 +19,7 @@ exports[`<ActionButton /> > it matches the snapshot 1`] = `
   onTouchStart={[Function]}
   tabIndex={0}
   type="button"
+>
+  hello
 </button>
 `;

From e1ef730658c01bdfa48107cf7773bbd64095dd30 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 31 Mar 2025 08:56:26 +0100
Subject: [PATCH 10/26] Corrected the default grey colour

---
 src/colourscheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/colourscheme.ts b/src/colourscheme.ts
index a9b8332..a50def5 100644
--- a/src/colourscheme.ts
+++ b/src/colourscheme.ts
@@ -3,7 +3,7 @@ import { createTheme } from "@mui/material/styles";
 export const defaultColours = createTheme({
   palette: {
     primary: {
-      main: "#C0C0C0",
+      main: "#D2D2D2",
       // light: currently calculated automatically by MUI
       // dark: currently calculated automatically by MUI
       contrastText: "#FFFFFF"

From e66311671b3bced08dd4e0715c7d4051fd3d1725 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 31 Mar 2025 08:58:37 +0100
Subject: [PATCH 11/26] Corrected the default text colour

---
 src/colourscheme.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/colourscheme.ts b/src/colourscheme.ts
index a50def5..d899df1 100644
--- a/src/colourscheme.ts
+++ b/src/colourscheme.ts
@@ -6,7 +6,7 @@ export const defaultColours = createTheme({
       main: "#D2D2D2",
       // light: currently calculated automatically by MUI
       // dark: currently calculated automatically by MUI
-      contrastText: "#FFFFFF"
+      contrastText: "#000000"
     }
   },
   typography: {

From c098291919c1b91307cb30f9155ddda646d080c0 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 31 Mar 2025 09:18:16 +0100
Subject: [PATCH 12/26] Added settings to change cursor when button is disabled

---
 src/ui/widgets/ActionButton/actionButton.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index a0825a3..6f0133c 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -54,7 +54,11 @@ export const ActionButtonComponent = (
           backgroundColor:
             props.backgroundColor?.toString() ??
             defaultColours.palette.primary.main,
-          border: props.border?.css() ?? ""
+          border: props.border?.css() ?? "",
+          ".Mui-disabled &": {
+            pointerEvents: "unset",
+            cursor: "not-allowed"
+          }
         }}
         onClick={props.onClick}
       >

From 7418adfcda05895ea36f6b177ef8a940ceffaccd Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Mon, 31 Mar 2025 13:42:48 +0100
Subject: [PATCH 13/26] Tidied the colour prop declarations

---
 src/ui/widgets/ActionButton/actionButton.tsx | 28 +++++++++++---------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 6f0133c..1da9f00 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -25,11 +25,11 @@ import { defaultColours } from "../../../colourscheme";
 
 export interface ActionButtonProps {
   text: string;
-  disabled?: boolean;
+  enabled?: boolean;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   image?: string;
-  backgroundColor?: Color;
-  foregroundColor?: Color;
+  backgroundColor?: Color | string;
+  foregroundColor?: Color | string;
   border?: Border;
   font?: Font;
   actions?: WidgetActions;
@@ -39,21 +39,25 @@ export interface ActionButtonProps {
 export const ActionButtonComponent = (
   props: ActionButtonProps
 ): JSX.Element => {
+  const {
+    enabled = true,
+    foregroundColor = defaultColours.palette.primary.contrastText,
+    backgroundColor = defaultColours.palette.primary.main
+  } = props;
   return (
     <ThemeProvider theme={defaultColours}>
       <Button
         variant="contained"
-        disabled={props.disabled}
+        disabled={!enabled}
         sx={{
           height: "100%",
           width: "100%",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textAlign: "left",
           fontFamily: props.font?.css() ?? "",
-          color:
-            props.foregroundColor?.toString() ??
-            defaultColours.palette.primary.contrastText,
-          backgroundColor:
-            props.backgroundColor?.toString() ??
-            defaultColours.palette.primary.main,
+          color: foregroundColor.toString(),
+          backgroundColor: backgroundColor.toString(),
           border: props.border?.css() ?? "",
           ".Mui-disabled &": {
             pointerEvents: "unset",
@@ -88,7 +92,7 @@ const ActionButtonPropType = {
   font: FontPropOpt,
   border: BorderPropOpt,
   visible: BoolPropOpt,
-  disabled: BoolPropOpt,
+  enabled: BoolPropOpt,
   onClick: FuncPropOpt
 };
 
@@ -117,7 +121,7 @@ export const ActionButtonWidget = (
   return (
     <ActionButtonComponent
       text={props.text ?? ""}
-      disabled={props.readonly}
+      enabled={props.enabled}
       onClick={onClick}
       image={props.image}
       backgroundColor={props.backgroundColor}

From 429278ee576e0b0806af025f2aa9172176d4f5fe Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Tue, 1 Apr 2025 10:11:03 +0100
Subject: [PATCH 14/26] Fixed text wrapping

---
 src/ui/widgets/ActionButton/actionButton.tsx | 21 +++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 1da9f00..796b312 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -19,7 +19,7 @@ import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { Button, ThemeProvider } from "@mui/material";
+import { Box, Button, ThemeProvider } from "@mui/material";
 
 import { defaultColours } from "../../../colourscheme";
 
@@ -49,19 +49,26 @@ export const ActionButtonComponent = (
       <Button
         variant="contained"
         disabled={!enabled}
+        fullWidth={true}
         sx={{
           height: "100%",
           width: "100%",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textAlign: "left",
+          minWidth: 0,
+          minHeight: 0,
+          padding: 0,
           fontFamily: props.font?.css() ?? "",
           color: foregroundColor.toString(),
           backgroundColor: backgroundColor.toString(),
           border: props.border?.css() ?? "",
-          ".Mui-disabled &": {
-            pointerEvents: "unset",
-            cursor: "not-allowed"
+          "&.MuiButton-root": {
+            whiteSpace: "nowrap",
+            wordBreak: "normal",
+            overflow: "hidden",
+            display: "block"
+          },
+          "&.Mui-disabled": {
+            cursor: "not-allowed",
+            pointerEvents: "all !important"
           }
         }}
         onClick={props.onClick}

From 1a33e062d0520f3c825ab8b4ca93536e14bd5ec0 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Tue, 1 Apr 2025 16:51:40 +0100
Subject: [PATCH 15/26] Addedd transparent to parser test

---
 src/ui/widgets/EmbeddedDisplay/bobParser.test.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.test.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.test.ts
index 81b5bdc..6e3793b 100644
--- a/src/ui/widgets/EmbeddedDisplay/bobParser.test.ts
+++ b/src/ui/widgets/EmbeddedDisplay/bobParser.test.ts
@@ -37,7 +37,9 @@ describe("opi widget parser", (): void => {
     <x>10</x>
     <y>20</y>
     <not_a_property>hello</not_a_property>
+    <transparent>true</transparent>
     <wrap_words>false</wrap_words>
+    <rotation_step>1</rotation_step>
   </widget>
   </display>`;
 
@@ -58,6 +60,7 @@ describe("opi widget parser", (): void => {
     // Unrecognised property not passed on.
     expect(widget.not_a_property).toEqual(undefined);
     expect(widget.wrapWords).toEqual(false);
+    expect(widget.transparent).toEqual(true);
   });
 
   const readbackString = `

From ac618e284eb3ce03c16c40d8df5912654b09b256 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 09:34:59 +0100
Subject: [PATCH 16/26] Renamed colourscheme file and defaultColours name

---
 src/{colourscheme.ts => diamondTheme.ts} | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)
 rename src/{colourscheme.ts => diamondTheme.ts} (77%)

diff --git a/src/colourscheme.ts b/src/diamondTheme.ts
similarity index 77%
rename from src/colourscheme.ts
rename to src/diamondTheme.ts
index d899df1..b2d1d83 100644
--- a/src/colourscheme.ts
+++ b/src/diamondTheme.ts
@@ -1,6 +1,6 @@
 import { createTheme } from "@mui/material/styles";
 
-export const defaultColours = createTheme({
+export const diamondTheme = createTheme({
   palette: {
     primary: {
       main: "#D2D2D2",
@@ -10,6 +10,8 @@ export const defaultColours = createTheme({
     }
   },
   typography: {
+    fontFamily: "Liberation Sans",
+    fontSize: 14,
     button: {
       textTransform: "none"
     }

From 580f734056a1db171102e94f49792fdfd0ec7d4d Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 09:39:02 +0100
Subject: [PATCH 17/26] Moved decision making out of the Button declaration and
 reorganised styling parameters

---
 src/ui/widgets/ActionButton/actionButton.tsx | 63 ++++++++++++++------
 1 file changed, 44 insertions(+), 19 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 796b312..4914a06 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -12,16 +12,17 @@ import {
   FontPropOpt,
   BorderPropOpt,
   BoolPropOpt,
-  FuncPropOpt
+  FuncPropOpt,
+  FloatPropOpt
 } from "../propTypes";
 import { Color } from "../../../types/color";
 import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { Box, Button, ThemeProvider } from "@mui/material";
+import { Button, ThemeProvider } from "@mui/material";
 
-import { defaultColours } from "../../../colourscheme";
+import { diamondTheme } from "../../../diamondTheme";
 
 export interface ActionButtonProps {
   text: string;
@@ -34,6 +35,8 @@ export interface ActionButtonProps {
   font?: Font;
   actions?: WidgetActions;
   visible?: boolean;
+  rotationStep?: number;
+  transparent?: boolean;
 }
 
 export const ActionButtonComponent = (
@@ -41,30 +44,39 @@ export const ActionButtonComponent = (
 ): JSX.Element => {
   const {
     enabled = true,
-    foregroundColor = defaultColours.palette.primary.contrastText,
-    backgroundColor = defaultColours.palette.primary.main
+    foregroundColor = diamondTheme.palette.primary.contrastText,
+    rotationStep = 0,
+    transparent = false
   } = props;
+
+  const backgroundColor = transparent
+    ? "transparent"
+    : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main);
+  const font = props.font?.css() ?? diamondTheme.typography;
+  const border = props.border?.css() ?? null;
+
   return (
-    <ThemeProvider theme={defaultColours}>
+    <ThemeProvider theme={diamondTheme}>
       <Button
         variant="contained"
         disabled={!enabled}
         fullWidth={true}
         sx={{
-          height: "100%",
-          width: "100%",
-          minWidth: 0,
-          minHeight: 0,
-          padding: 0,
-          fontFamily: props.font?.css() ?? "",
           color: foregroundColor.toString(),
-          backgroundColor: backgroundColor.toString(),
-          border: props.border?.css() ?? "",
+          backgroundColor: backgroundColor,
+          border: border,
           "&.MuiButton-root": {
-            whiteSpace: "nowrap",
-            wordBreak: "normal",
+            display: "block",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+            width: "100%",
+            minWidth: 0,
+            minHeight: 0,
+            padding: 0,
             overflow: "hidden",
-            display: "block"
+            textOverflow: "ellipsis",
+            fontFamily: font
           },
           "&.Mui-disabled": {
             cursor: "not-allowed",
@@ -83,7 +95,16 @@ export const ActionButtonComponent = (
             <figcaption>{props.text}</figcaption>
           </figure>
         ) : (
-          (props.text ?? "")
+          <span
+            style={{
+              display: "block",
+              transform: `rotation(${rotationStep * -90}deg)`.toString(),
+              whiteSpace: "nowrap",
+              textOverflow: "ellipsis"
+            }}
+          >
+            {props.text ?? ""}
+          </span>
         )}
       </Button>
     </ThemeProvider>
@@ -100,7 +121,9 @@ const ActionButtonPropType = {
   border: BorderPropOpt,
   visible: BoolPropOpt,
   enabled: BoolPropOpt,
-  onClick: FuncPropOpt
+  onClick: FuncPropOpt,
+  transparent: BoolPropOpt,
+  rotationStep: FloatPropOpt
 };
 
 const ActionButtonWidgetProps = {
@@ -137,6 +160,8 @@ export const ActionButtonWidget = (
       border={props.border}
       actions={props.actions as WidgetActions}
       visible={props.visible}
+      transparent={props.transparent}
+      rotationStep={props.rotationStep}
     />
   );
 };

From 8e80b07ac78811cfaf176f9b4d4125260eb22f7f Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 09:53:06 +0100
Subject: [PATCH 18/26] Moved ThemeProvider to embeddedDisplay

---
 src/ui/widgets/ActionButton/actionButton.tsx  | 103 +++++++++---------
 .../EmbeddedDisplay/embeddedDisplay.tsx       |   4 +-
 2 files changed, 54 insertions(+), 53 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 4914a06..ab00d53 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -20,7 +20,7 @@ import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { Button, ThemeProvider } from "@mui/material";
+import { Button } from "@mui/material";
 
 import { diamondTheme } from "../../../diamondTheme";
 
@@ -56,58 +56,57 @@ export const ActionButtonComponent = (
   const border = props.border?.css() ?? null;
 
   return (
-    <ThemeProvider theme={diamondTheme}>
-      <Button
-        variant="contained"
-        disabled={!enabled}
-        fullWidth={true}
-        sx={{
-          color: foregroundColor.toString(),
-          backgroundColor: backgroundColor,
-          border: border,
-          "&.MuiButton-root": {
+    <Button
+      variant="contained"
+      disabled={!enabled}
+      fullWidth={true}
+      sx={{
+        color: foregroundColor.toString(),
+        backgroundColor: backgroundColor,
+        border: border,
+        "&.MuiButton-root": {
+          display: "block",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minWidth: 0,
+          minHeight: 0,
+          padding: 0,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          fontFamily: font,
+          textTransform: "none"
+        },
+        "&.Mui-disabled": {
+          cursor: "not-allowed",
+          pointerEvents: "all !important"
+        }
+      }}
+      onClick={props.onClick}
+    >
+      {props.image !== undefined ? (
+        <figure className={classes.figure}>
+          <img
+            style={{ width: "100%", display: "block" }}
+            src={props.image}
+            alt={props.image}
+          ></img>
+          <figcaption>{props.text}</figcaption>
+        </figure>
+      ) : (
+        <span
+          style={{
             display: "block",
-            alignItems: "center",
-            justifyContent: "center",
-            height: "100%",
-            width: "100%",
-            minWidth: 0,
-            minHeight: 0,
-            padding: 0,
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            fontFamily: font
-          },
-          "&.Mui-disabled": {
-            cursor: "not-allowed",
-            pointerEvents: "all !important"
-          }
-        }}
-        onClick={props.onClick}
-      >
-        {props.image !== undefined ? (
-          <figure className={classes.figure}>
-            <img
-              style={{ width: "100%", display: "block" }}
-              src={props.image}
-              alt={props.image}
-            ></img>
-            <figcaption>{props.text}</figcaption>
-          </figure>
-        ) : (
-          <span
-            style={{
-              display: "block",
-              transform: `rotation(${rotationStep * -90}deg)`.toString(),
-              whiteSpace: "nowrap",
-              textOverflow: "ellipsis"
-            }}
-          >
-            {props.text ?? ""}
-          </span>
-        )}
-      </Button>
-    </ThemeProvider>
+            transform: `rotation(${rotationStep * -90}deg)`.toString(),
+            whiteSpace: "nowrap",
+            textOverflow: "ellipsis"
+          }}
+        >
+          {props.text ?? ""}
+        </span>
+      )}
+    </Button>
   );
 };
 
diff --git a/src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx b/src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx
index 66df195..807b1b4 100644
--- a/src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx
+++ b/src/ui/widgets/EmbeddedDisplay/embeddedDisplay.tsx
@@ -24,6 +24,8 @@ import { GroupBoxComponent } from "../GroupBox/groupBox";
 import { useOpiFile } from "./useOpiFile";
 import { useId } from "react-id-generator";
 import { getOptionalValue, trimFromString } from "../utils";
+import { ThemeProvider } from "@mui/material";
+import { diamondTheme } from "../../../diamondTheme";
 
 const RESIZE_STRINGS = [
   "scroll-widget",
@@ -209,7 +211,7 @@ export const EmbeddedDisplay = (
     return (
       <MacroContext.Provider value={embeddedDisplayMacroContext}>
         <GroupBoxComponent name={resolvedName} styleOpt={0}>
-          {component}
+          <ThemeProvider theme={diamondTheme}>{component}</ThemeProvider>
         </GroupBoxComponent>
       </MacroContext.Provider>
     );

From 9705ea95f259cbed46c7349c49dd8d1dbcbe55dd Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 10:29:06 +0100
Subject: [PATCH 19/26] Updated the snapshot

---
 .../__snapshots__/actionButton.test.tsx.snap      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
index fda1ae0..c6599ac 100644
--- a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
+++ b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActionButton /> > it matches the snapshot 1`] = `
 <button
-  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-kpvziq-MuiButtonBase-root-MuiButton-root"
+  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-13zohxw-MuiButtonBase-root-MuiButton-root"
   disabled={false}
   onBlur={[Function]}
   onClick={[MockFunction spy]}
@@ -20,6 +20,17 @@ exports[`<ActionButton /> > it matches the snapshot 1`] = `
   tabIndex={0}
   type="button"
 >
-  hello
+  <span
+    style={
+      {
+        "display": "block",
+        "textOverflow": "ellipsis",
+        "transform": "rotation(0deg)",
+        "whiteSpace": "nowrap",
+      }
+    }
+  >
+    hello
+  </span>
 </button>
 `;

From 1c86e3579ee7837f580004ae6eb50ea468542122 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 15:19:46 +0100
Subject: [PATCH 20/26] Changed it so that button variant is "text" when
 transparent, otherwise it's "contained"

---
 src/ui/widgets/ActionButton/actionButton.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index ab00d53..ad66b8e 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -29,8 +29,8 @@ export interface ActionButtonProps {
   enabled?: boolean;
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
   image?: string;
-  backgroundColor?: Color | string;
-  foregroundColor?: Color | string;
+  backgroundColor?: Color;
+  foregroundColor?: Color;
   border?: Border;
   font?: Font;
   actions?: WidgetActions;
@@ -57,7 +57,7 @@ export const ActionButtonComponent = (
 
   return (
     <Button
-      variant="contained"
+      variant={transparent ? "text" : "contained"}
       disabled={!enabled}
       fullWidth={true}
       sx={{

From 1fdd5ac4f2064c4cb5ed2a37d519deec519dadec Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 15:21:01 +0100
Subject: [PATCH 21/26] Added rotationStep to bobParser

---
 src/ui/widgets/EmbeddedDisplay/bobParser.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/widgets/EmbeddedDisplay/bobParser.ts b/src/ui/widgets/EmbeddedDisplay/bobParser.ts
index 2677c9f..4526beb 100644
--- a/src/ui/widgets/EmbeddedDisplay/bobParser.ts
+++ b/src/ui/widgets/EmbeddedDisplay/bobParser.ts
@@ -379,7 +379,8 @@ export function parseBob(
     fallbackSymbol: ["fallback_symbol", opiParseString],
     rotation: ["rotation", bobParseNumber],
     styleOpt: ["style", bobParseNumber],
-    lineColor: ["line_color", opiParseColor]
+    lineColor: ["line_color", opiParseColor],
+    rotationStep: ["rotation_step", bobParseNumber]
   };
 
   const complexParsers = {

From dbddd4bd585fcc43f7431d96ebca0806255f794b Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 15:32:56 +0100
Subject: [PATCH 22/26] Moved static styling components to use styled API

---
 src/ui/widgets/ActionButton/actionButton.tsx | 46 ++++++++++----------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index ad66b8e..019e3d8 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -20,7 +20,7 @@ import { Font } from "../../../types/font";
 import { Border } from "../../../types/border";
 import { MacroContext } from "../../../types/macros";
 import { ExitFileContext, FileContext } from "../../../misc/fileContext";
-import { Button } from "@mui/material";
+import { styled, Button as MuiButton } from "@mui/material";
 
 import { diamondTheme } from "../../../diamondTheme";
 
@@ -39,6 +39,27 @@ export interface ActionButtonProps {
   transparent?: boolean;
 }
 
+const Button = styled(MuiButton)({
+  "&.MuiButton-root": {
+    display: "block",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    width: "100%",
+    minWidth: 0,
+    minHeight: 0,
+    padding: 0,
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    wordBreak: "break-word",
+    textTransform: "none"
+  },
+  "&.Mui-disabled": {
+    cursor: "not-allowed",
+    pointerEvents: "all !important"
+  }
+});
+
 export const ActionButtonComponent = (
   props: ActionButtonProps
 ): JSX.Element => {
@@ -64,24 +85,7 @@ export const ActionButtonComponent = (
         color: foregroundColor.toString(),
         backgroundColor: backgroundColor,
         border: border,
-        "&.MuiButton-root": {
-          display: "block",
-          alignItems: "center",
-          justifyContent: "center",
-          height: "100%",
-          width: "100%",
-          minWidth: 0,
-          minHeight: 0,
-          padding: 0,
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          fontFamily: font,
-          textTransform: "none"
-        },
-        "&.Mui-disabled": {
-          cursor: "not-allowed",
-          pointerEvents: "all !important"
-        }
+        fontFamily: font
       }}
       onClick={props.onClick}
     >
@@ -98,9 +102,7 @@ export const ActionButtonComponent = (
         <span
           style={{
             display: "block",
-            transform: `rotation(${rotationStep * -90}deg)`.toString(),
-            whiteSpace: "nowrap",
-            textOverflow: "ellipsis"
+            transform: `rotation(${rotationStep * -90}deg)`.toString()
           }}
         >
           {props.text ?? ""}

From 36e5186c9858dba3c0b0da8cd5ad217fe4830f27 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 16:05:56 +0100
Subject: [PATCH 23/26] Set lineHeight to 1

---
 src/ui/widgets/ActionButton/actionButton.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 019e3d8..5ede833 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -102,6 +102,7 @@ export const ActionButtonComponent = (
         <span
           style={{
             display: "block",
+            lineHeight: 1,
             transform: `rotation(${rotationStep * -90}deg)`.toString()
           }}
         >

From 805ebf985537c0cd0aeb160880f373b73346c7eb Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 16:07:42 +0100
Subject: [PATCH 24/26] Updated snapshot

---
 .../ActionButton/__snapshots__/actionButton.test.tsx.snap    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
index c6599ac..4190808 100644
--- a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
+++ b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActionButton /> > it matches the snapshot 1`] = `
 <button
-  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-13zohxw-MuiButtonBase-root-MuiButton-root"
+  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-fullWidth css-q0v14n-MuiButtonBase-root-MuiButton-root"
   disabled={false}
   onBlur={[Function]}
   onClick={[MockFunction spy]}
@@ -24,9 +24,8 @@ exports[`<ActionButton /> > it matches the snapshot 1`] = `
     style={
       {
         "display": "block",
-        "textOverflow": "ellipsis",
+        "lineHeight": 1,
         "transform": "rotation(0deg)",
-        "whiteSpace": "nowrap",
       }
     }
   >

From dc5a219e11269bed8941451dbbbff635ddc7281e Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 3 Apr 2025 09:17:47 +0100
Subject: [PATCH 25/26] Fixed text rotation in Button

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

diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx
index 5ede833..dbf05ce 100644
--- a/src/ui/widgets/ActionButton/actionButton.tsx
+++ b/src/ui/widgets/ActionButton/actionButton.tsx
@@ -103,7 +103,7 @@ export const ActionButtonComponent = (
           style={{
             display: "block",
             lineHeight: 1,
-            transform: `rotation(${rotationStep * -90}deg)`.toString()
+            transform: `rotate(${rotationStep * -90}deg)`
           }}
         >
           {props.text ?? ""}

From 3b30e4d943fa9dabcc7e4f0e1cb88c45a63fc08c Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 3 Apr 2025 09:20:16 +0100
Subject: [PATCH 26/26] Updated snapshot

---
 .../ActionButton/__snapshots__/actionButton.test.tsx.snap       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
index 4190808..07c057d 100644
--- a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
+++ b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<ActionButton /> > it matches the snapshot 1`] = `
       {
         "display": "block",
         "lineHeight": 1,
-        "transform": "rotation(0deg)",
+        "transform": "rotate(0deg)",
       }
     }
   >