created new buttonGroup common component to replace the styled toggles since they don't seem to be styling the way we want anymore

src/bin/BinVisualizerV2.tsx

@@ -71,6 +71,7 @@ import { ExtractMoisture } from "grain";
 import SearchSelect, { Option } from "common/SearchSelect";
 import Edit from "@mui/icons-material/Edit";
 import { makeStyles, styled } from "@mui/styles";
+import ButtonGroup from "common/ButtonGroup";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -280,54 +281,54 @@ export default function BinVisualizer(props: Props) {
   const [storageDate, setStorageDate] = useState(moment().format("YYYY-MM-DD"));
   const [storageTime, setStorageTime] = useState(moment().format("HH:mm"));
 
-  const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
+  // const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
-    root: {
+  //   root: {
-      backgroundColor: "transparent",
+  //     backgroundColor: "transparent",
-      overflow: "visible",
+  //     overflow: "visible",
-      content: "content-box",
+  //     content: "content-box",
-      "&$selected": {
+  //     "&$selected": {
-        backgroundColor: "gold",
+  //       backgroundColor: "gold",
-        color: "black",
+  //       color: "black",
-        borderRadius: 24,
+  //       borderRadius: 24,
-        fontWeight: "bold"
+  //       fontWeight: "bold"
-      },
+  //     },
-      "&$selected:hover": {
+  //     "&$selected:hover": {
-        backgroundColor: "rgb(255, 255, 0)",
+  //       backgroundColor: "rgb(255, 255, 0)",
-        color: "black",
+  //       color: "black",
-        borderRadius: 24
+  //       borderRadius: 24
-      }
+  //     }
-    },
+  //   },
-    selected: {}
+  //   selected: {}
-  }));
+  // }));
 
-  const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
+  // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
-    grouped: {
+  //   grouped: {
-      margin: theme.spacing(-0.5),
+  //     margin: theme.spacing(-0.5),
-      border: "none",
+  //     border: "none",
-      padding: theme.spacing(1),
+  //     padding: theme.spacing(1),
-      "&:not(:first-child):not(:last-child)": {
+  //     "&:not(:first-child):not(:last-child)": {
-        borderRadius: 24,
+  //       borderRadius: 24,
-        marginRight: theme.spacing(0.5),
+  //       marginRight: theme.spacing(0.5),
-        marginLeft: theme.spacing(0.5)
+  //       marginLeft: theme.spacing(0.5)
-      },
+  //     },
-      "&:first-child": {
+  //     "&:first-child": {
-        borderRadius: 24,
+  //       borderRadius: 24,
-        marginLeft: theme.spacing(0.25)
+  //       marginLeft: theme.spacing(0.25)
-      },
+  //     },
-      "&:last-child": {
+  //     "&:last-child": {
-        borderRadius: 24,
+  //       borderRadius: 24,
-        marginRight: theme.spacing(0.25)
+  //       marginRight: theme.spacing(0.25)
-      }
+  //     }
-    },
+  //   },
-    root: {
+  //   root: {
-      backgroundColor: darken(
+  //     backgroundColor: darken(
-        theme.palette.background.paper,
+  //       theme.palette.background.paper,
-        getThemeType() === "light" ? 0.05 : 0.25
+  //       getThemeType() === "light" ? 0.05 : 0.25
-      ),
+  //     ),
-      borderRadius: 24,
+  //     borderRadius: 24,
-      content: "border-box"
+  //     content: "border-box"
-    }
+  //   }
-  }));
+  // }));
 
   useEffect(() => {
     setModeTime(moment(bin.status.lastModeChange));
@@ -1705,6 +1706,18 @@ export default function BinVisualizer(props: Props) {
     );
   };
 
+  const determineToggle = (binMode: pond.BinMode) => {
+    switch (binMode) {
+      case pond.BinMode.BIN_MODE_STORAGE:
+        return [0]
+      case pond.BinMode.BIN_MODE_COOLDOWN:
+        return [1]
+      case pond.BinMode.BIN_MODE_DRYING:
+      case pond.BinMode.BIN_MODE_HYDRATING:
+        return [2]
+    }
+  }
+
   const binMode = () => {
     const mode = bin.settings.mode;
     return (
@@ -1720,7 +1733,31 @@ export default function BinVisualizer(props: Props) {
         <Typography variant="subtitle1" style={{ fontWeight: 800 }}>
           Bin Mode
         </Typography>
-        <StyledToggleButtonGroup
+        <ButtonGroup 
+          buttons={[
+            {
+              title: "Storage",
+              function: () => {
+                setModeStorage()
+              }
+            },
+            {
+              title: "Cooldown",
+              function: () => {
+                setModeCooldown()
+              }
+            },
+            {
+              title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
+              function: () => {
+                setShowInputMoisture(true)
+              }
+            }
+          ]}
+          toggledButtons={determineToggle(mode)}
+          toggle
+        />
+        {/* <StyledToggleButtonGroup
           id="tour-bin-mode"
           value={mode}
           exclusive
@@ -1754,7 +1791,7 @@ export default function BinVisualizer(props: Props) {
               Drying
             </StyledToggle>
           )}
-        </StyledToggleButtonGroup>
+        </StyledToggleButtonGroup> */}
       </Box>
     );
   };
@@ -2067,6 +2104,7 @@ export default function BinVisualizer(props: Props) {
         devices={devices}
         refreshCallback={success => {
           setShowInputMoisture(false);
+          setNewPreset(0)
           if (success) updateBin();
         }}
         parentPreset={newPreset}

src/common/ButtonGroup.tsx

@@ -0,0 +1,161 @@
+import { Box, Button, darken, Theme, Typography } from "@mui/material";
+import { makeStyles } from "@mui/styles";
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import { useState } from "react";
+import { getSecondaryColour } from "services/whiteLabel";
+import { getThemeType } from "theme/themeType";
+
+export interface ButtonData {
+  /**
+   * The title and description of the button
+   */
+  title: string
+  /**
+   * An icon that would replace the text of the button
+   */
+  icon?: JSX.Element
+  /**
+   * The function to run when the button is clicked or toggled on when toggle is true
+   */
+  function: () => void
+}
+
+interface Props {
+  /**
+   * The array of button data to be rendered by the group
+   */
+  buttons: ButtonData[]
+  /**
+   * When true will track the toggle state of the buttons, false will just be basic buttons
+   * 
+   * @default false
+   */
+  toggle?: boolean 
+  /**
+   * When true will allow multiple buttons to be toggled, false will untoggle the previous button when another is selected
+   * 
+   * @default false
+   */ 
+  multiToggle?: boolean  
+  /**
+   * Can be used to control which buttons are toggled on from the parent by passing the indexes of the buttons to toggle on.
+   * If not passed in will default to toggle the first button and then be controlled internally
+   * 
+   * @default undefined
+   */
+  toggledButtons?: number[] 
+  /**
+   * Numerical value for the size of the text for buttons that dont use the icon
+   */
+  textSize?: number
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
+    container: {
+      backgroundColor: darken(
+        theme.palette.background.paper,
+        getThemeType() === "light" ? 0.10 : 0.05
+      ),
+      borderRadius: 24,
+      content: "border-box",
+      border: "none",
+      //padding: theme.spacing(1),
+    },
+    button: {
+      backgroundColor: "transparent",
+      color: theme.palette.text.primary,
+      overflow: "visible",
+      content: "content-box",
+      borderRadius: 24,
+      marginLeft: theme.spacing(0.05),
+      marginRight: theme.spacing(0.05),
+      "&:hover": {
+        //backgroundColor: getSecondaryColour(),
+        backgroundColor: "gold",
+        color: "black",
+      }
+    },
+    buttonToggled: {
+      //backgroundColor: getSecondaryColour(),
+      backgroundColor: "gold",
+      color: "black",
+      borderRadius: 24,
+      fontWeight: "bold"
+    } 
+  })
+})
+
+export default function ButtonGroup(props: Props){
+  const { buttons, toggle, toggledButtons, multiToggle, textSize } = props
+  const classes = useStyles()
+  const [currentToggle, setCurrentToggle] = useState<number[]>([])
+
+  useEffect(()=>{
+    //determine the default state of the button toggles if toggle is true
+    if(toggle){
+      let toggled: number [] = [0]
+      if(toggledButtons){
+        toggled = toggledButtons
+      }
+      setCurrentToggle(toggled)
+    }
+  },[toggle, toggledButtons])
+
+  const checkToggled = (index: number) => {
+    return currentToggle.includes(index)
+  }
+
+  const toggleControl = (i: number) => {
+    let toggled = cloneDeep(currentToggle)
+    //is the button currently toggled
+    if(checkToggled(i)){
+      //if the button is toggled
+      if(multiToggle){
+        //un-toggle the button (remove it from the array)
+        console.log(toggled)
+        toggled.splice(currentToggle.indexOf(i), 1)
+      }
+      //and if it is single toggle do nothing
+    } else {
+      //if multiToggle is false
+      if(!multiToggle){
+        //replace the currentToggle array
+        toggled = [i]
+      }else{
+        //add it to the currentToggle array
+        toggled.push(i)
+      }
+    }
+    setCurrentToggle(toggled)
+  }
+
+  return (
+    <Box className={classes.container} display="flex" flexDirection="row">
+      {buttons.map((b, i) => (
+        <Button 
+          key={i}
+          className={checkToggled(i) ? classes.buttonToggled : classes.button}
+          onClick={() => {
+            if(toggle){
+              //control the toggle internally if the array was not passed in
+              if(!toggledButtons){
+                toggleControl(i)
+              }
+            }
+            b.function()
+          }}>
+          {b.icon 
+          ? 
+            b.icon 
+          : 
+            <Typography sx={{fontSize: textSize}}>
+              {b.title}
+            </Typography>
+          }
+        </Button>
+      ))}
+    </Box>
+  )
+}