Update label borders and rotation (#119)

* Fixed widget rotation

* Updated border styling to match phoebus and added rounded corners

* Corrected offsets for 90 and -90 deg rotations

* Generalise use of themes (#117)

* Removed references to diamondTheme and implemented useTheme hook

* Updated snapshots

* Added theme prop to embeddedDisplay widget

* Renamed diamondTheme to phoebusTheme

* Renamed exported theme to phoebusTheme

* Use phoebusTheme as default instead of the MUI default

* Updated snapshots

Author: NatLeung96

src/ui/widgets/Label/__snapshots__/label.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<Label /> > it handles transparent prop`] = `
 exports[`<Label /> > it handles transparent prop 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-qckjhq-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-1y700xl-MuiTypography-root"
   >
     hello
   </p>
@@ -23,7 +23,7 @@ exports[`<Label /> > it handles transparent prop 1`] = `
 exports[`<Label /> > it matches the snapshot 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-qckjhq-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-1y700xl-MuiTypography-root"
   >
     hello
   </p>

src/ui/widgets/Label/label.tsx

@@ -14,6 +14,7 @@ import {
   MacrosPropOpt
 } from "../propTypes";
 import { Typography as MuiTypography, styled, useTheme } from "@mui/material";
+import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser";
 
 const LabelProps = {
   macros: MacrosPropOpt,
@@ -28,7 +29,9 @@ const LabelProps = {
   backgroundColor: ColorPropOpt,
   border: BorderPropOpt,
   rotationStep: FloatPropOpt,
-  wrapWords: BoolPropOpt
+  wrapWords: BoolPropOpt,
+  height: FloatPropOpt,
+  width: FloatPropOpt
 };
 
 const LabelWidgetProps = {
@@ -37,10 +40,11 @@ const LabelWidgetProps = {
 };
 
 const Typography = styled(MuiTypography)({
-  width: "100%",
-  height: "100%",
   display: "flex",
   overflow: "hidden",
+  borderRadius: "4px",
+  borderWidth: "0px",
+  lineHeight: 1,
   padding: 0
 });
 
@@ -56,13 +60,35 @@ export const LabelComponent = (
     textAlignV = "top",
     text = "",
     rotationStep = 0,
-    wrapWords = true
+    wrapWords = true,
+    height = WIDGET_DEFAULT_SIZES["label"][1],
+    width = WIDGET_DEFAULT_SIZES["label"][0]
   } = props;
   const backgroundColor = transparent
     ? "transparent"
     : (props.backgroundColor?.toString() ?? theme.palette.primary.main);
   const font = props.font?.css() ?? theme.typography;
-  const border = props.border?.css() ?? "0px solid #000000";
+  const borderWidth = props.border?.css().borderWidth ?? "0px";
+  const borderColor = props.border?.css().borderColor ?? "#000000";
+  const borderStyle = props.border?.css().borderStyle ?? "solid";
+
+  const inputWidth = rotationStep === 0 || rotationStep === 2 ? width : height;
+  const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width;
+
+  const offset = width / 2 - height / 2;
+  const transform = (function () {
+    switch (rotationStep) {
+      case 0: // 0 degrees
+      case 2: // 180 degrees
+        return `rotate(${rotationStep * -90}deg)`;
+      case 1: // 90 degrees
+        return `rotate(${rotationStep * -90}deg) translateY(${offset}px) translateX(${offset}px)`;
+      case 3: // -90 degrees
+        return `rotate(${rotationStep * -90}deg) translateY(${-offset}px) translateX(${-offset}px)`;
+      default: // Unreachable
+        return "";
+    }
+  })();
 
   // Since display is "flex", use "flex-start" and "flex-end" to align
   // the content.
@@ -87,14 +113,18 @@ export const LabelComponent = (
       sx={{
         justifyContent: alignment,
         alignItems: alignmentV,
+        height: inputHeight,
+        width: inputWidth,
         textAlign: textAlign,
         wordBreak: wrapWords ? "break-word" : null,
         whiteSpace: wrapWords ? "break-spaces" : null,
         color: foregroundColor.toString(),
         backgroundColor: backgroundColor,
         fontFamily: font,
-        transform: `rotate(${rotationStep * -90}deg)`.toString(),
-        border: border
+        transform: transform.toString(),
+        outlineWidth: borderWidth,
+        outlineColor: borderColor,
+        outlineStyle: borderStyle
       }}
     >
       {text}

src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap

@@ -83,7 +83,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
       style="padding: 5%;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-qckjhq-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-1y700xl-MuiTypography-root"
       >
         Fake value
       </p>