Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

src/bin/BinSVGV2.tsx

@@ -1,5 +1,6 @@
 import { Box, Theme, ToggleButton, ToggleButtonGroup, darken } from "@mui/material";
 import { makeStyles, withStyles } from "@mui/styles";
+import ButtonGroup from "common/ButtonGroup";
 import { ExtractMoisture } from "grain";
 import { GrainCable } from "models/GrainCable";
 import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
@@ -212,54 +213,54 @@ export default function BinSVGV2(props: Props) {
   const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps");
   const [nodeWarning, setNodeWarning] = useState(false);
 
-  const StyledToggleButtonGroup = withStyles(theme => ({
+  // const StyledToggleButtonGroup = withStyles(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"
-    }
+  //   }
-  }))(ToggleButtonGroup);
+  // }))(ToggleButtonGroup);
 
-  const StyledToggle = withStyles({
+  // const StyledToggle = withStyles({
-    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: {}
-  })(ToggleButton);
+  // })(ToggleButton);
 
   const gradients = () => {
     const burning = "#8a1f0d";
@@ -1047,10 +1048,26 @@ export default function BinSVGV2(props: Props) {
     <React.Fragment>
       {showTempHum && (
         <Box
+          display="flex"
+          alignContent="center"
+          justifyContent="center"
           textAlign="center"
           //visibility={showTempHum ? "visible" : "hidden"}
           className={!isFullScreen ? classes.smallToggle : classes.fullToggle}>
-          <StyledToggleButtonGroup
+          <ButtonGroup 
+            buttons={[
+              {
+                title: isFullScreen ? "Temperature" : "Temp",
+                function: () => setExtraDetails("temps")
+              },
+              {
+                title: grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum",
+                function: () => setExtraDetails("hums")
+              }
+            ]}
+            toggle
+          />
+          {/* <StyledToggleButtonGroup
             value={extraDetails}
             exclusive
             size="small"
@@ -1067,7 +1084,7 @@ export default function BinSVGV2(props: Props) {
               aria-label="Node Humidity">
               {grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum"}
             </StyledToggle>
-          </StyledToggleButtonGroup>
+          </StyledToggleButtonGroup> */}
         </Box>
       )}
       <Box

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(), //use the colour of the whitelabel
+        //backgroundColor: "gold",
+        color: "black",
+      }
+    },
+    buttonToggled: {
+      backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
+      //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>
+  )
+}

src/component/ComponentActions.tsx

@@ -114,7 +114,10 @@ export default function ComponentActions(props: Props) {
         onClose={closeMoreMenu}
         disableAutoFocusItem>
         {canAddInteraction && (
-          <MenuItem dense onClick={() => setIsAddInteractionOpen(true)} divider>
+          <MenuItem dense onClick={() => {
+              setIsAddInteractionOpen(true)
+              closeMoreMenu()
+            }} divider>
             <ListItemIcon>
               <AddCircle className={classes.addIcon} />
             </ListItemIcon>
@@ -126,6 +129,7 @@ export default function ComponentActions(props: Props) {
           onClick={() => {
             setIsJSON(false);
             setIsExportDataOpen(true);
+            closeMoreMenu()
           }}>
           <ListItemIcon>
             <SaveAlt  className={classes.exportDataIcon} />
@@ -134,7 +138,10 @@ export default function ComponentActions(props: Props) {
         </MenuItem>
         {canEdit && <Divider />}
         {canEdit && (
-          <MenuItem dense onClick={() => openComponentSettingsDialog("remove")}>
+          <MenuItem dense onClick={() => {
+              openComponentSettingsDialog("remove")
+              closeMoreMenu()
+            }}>
             <ListItemIcon>
               <DeleteOutline  className={classes.red} />
             </ListItemIcon>

src/gate/GateDevice.tsx

@@ -22,6 +22,7 @@ import GateSVG from "./GateSVG";
 import GateGraphs from "./GateGraphs";
 //import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import { getThemeType } from "theme";
+import ButtonGroup from "common/ButtonGroup";
 
 interface Props {
   gate: Gate;
@@ -344,7 +345,20 @@ export default function GateDevice(props: Props) {
           alignItems="center"
           marginBottom={2}>
           <Typography style={{ fontWeight: 650, fontSize: 20 }}>{device.name()}</Typography>
-          <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
+          <ButtonGroup 
+            toggle
+            buttons={[
+              {
+                title: "Analysis",
+                function: () => setDetail("analytics")
+              },
+              {
+                title: "Sensors",
+                function: () => setDetail("sensors")
+              }
+            ]}
+          />
+          {/* <ToggleButtonGroup value={detail} exclusive size="small" aria-label="detail">
             <ToggleButton
               onClick={() => setDetail("analytics")}
               value={"analytics"}
@@ -357,7 +371,7 @@ export default function GateDevice(props: Props) {
               aria-label="Sensor Graphs">
               Sensors
             </ToggleButton>
-          </ToggleButtonGroup>
+          </ToggleButtonGroup> */}
         </Box>
         <Card raised>
           <GateSVG

src/pages/Bin.tsx

@@ -66,6 +66,7 @@ import { makeStyles, styled } from "@mui/styles";
 import { useNavigate, useParams } from "react-router-dom";
 import { Controller } from "models/Controller";
 import TaskViewer from "tasks/TaskViewer";
+import ButtonGroup from "common/ButtonGroup";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -214,54 +215,54 @@ export default function Bin(props: Props) {
     setValue(newValue);
   };
 
-  const StyledToggle = styled(ToggleButton)(() => ({
+  // const StyledToggle = styled(ToggleButton)(() => ({
-    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"
-    }
+  //   }
-  }))
+  // }))
 
   const load = useCallback(() => {
     if (loadRef.current || user.id() === "") return;
@@ -862,8 +863,33 @@ export default function Bin(props: Props) {
             </Box>
           </Grid>
           <Grid id="tour-graphs" size={{ xs: 12, sm: 12, md: 12, lg: 5.3 }}>
-            <Box paddingBottom={2}>
+            <Box paddingBottom={2} display="flex">
-              <StyledToggleButtonGroup
+              <ButtonGroup 
+                toggle
+                buttons={[
+                  {
+                    title: "Inventory",
+                    function: () => setDetail("inventory")
+                  },
+                  {
+                    title: "Sensors",
+                    function: () => setDetail("sensors")
+                  },
+                  {
+                    title: "Analysis",
+                    function: () => setDetail("analytics")
+                  },
+                  {
+                    title: "Alerts",
+                    function: () => setDetail("alerts")
+                  },
+                  {
+                    title: "Presets",
+                    function: () => setDetail("presets")
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="tour-graph-tabs"
                 value={detail}
                 exclusive
@@ -899,7 +925,7 @@ export default function Bin(props: Props) {
                   aria-label="Bin Mode Presets">
                   Presets
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
             </Box>
             {detail === "alerts" && (
               <Box>

src/pages/Bins.tsx

@@ -81,6 +81,7 @@ import { getThemeType } from "theme/themeType";
 import GrainBagSettings from "grainBag/grainBagSettings";
 import GrainBagList from "grainBag/grainBagList";
 import BinYards from "bin/BinYards";
+import ButtonGroup from "common/ButtonGroup";
 // import { useHistory } from "react-router";
 
 const useStyles = makeStyles((theme: Theme) => {
@@ -200,56 +201,56 @@ export default function Bins(props: Props) {
   //   fertilizer: 0
   // });
 
-  const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
+  // const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
-    '& .MuiToggleButtonGroup-grouped': {
+  //   '& .MuiToggleButtonGroup-grouped': {
-      // border: 'none' replaces the old 'grouped' border: "none"
+  //     // border: 'none' replaces the old 'grouped' border: "none"
-      border: 'none',
+  //     border: 'none',
-      padding: theme.spacing(1),
+  //     padding: theme.spacing(1),
-      // Middle buttons
+  //     // Middle buttons
-      '&: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 button
+  //     // First button
-      '&:first-child': {
+  //     '&:first-child': {
-        borderRadius: 24,
+  //       borderRadius: 24,
-        marginLeft: theme.spacing(0.25),
+  //       marginLeft: theme.spacing(0.25),
-      },
+  //     },
-      // Last button
+  //     // Last button
-      '&:last-child': {
+  //     '&:last-child': {
-        borderRadius: 24,
+  //       borderRadius: 24,
-        marginRight: theme.spacing(0.25),
+  //       marginRight: theme.spacing(0.25),
-      },
+  //     },
-    },
+  //   },
-    // Root styles
+  //   // Root styles
-    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,
-    boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
+  //   boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
-  }));
+  // }));
 
-  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: {}
-  }));
+  // }));
 
   useEffect(() => {
     let ebt = sessionStorage.getItem("expandBinTotal");
@@ -502,6 +503,17 @@ export default function Bins(props: Props) {
     }
   }, [loadBins, props.insert, contentFilter]);
 
+  const determineNodeToggle = () => {
+    switch(cardValDisplay) {
+      case "low":
+        return [0]
+      case "high":
+        return [2]
+      default:
+        return [1]
+    }
+  }
+
   const duplicateBin = (bin: Bin) => {
     binAPI.addBin(bin.settings, as).then(resp => {
       loadBins();
@@ -1154,7 +1166,25 @@ export default function Bins(props: Props) {
                     Load All
                   </Button>
                 )}
-              <StyledToggleButtonGroup
+              <ButtonGroup 
+                toggle
+                toggledButtons={determineNodeToggle()}
+                buttons={[
+                  {
+                    title: "Low",
+                    function: () => {setCardValDisplay("low")}
+                  },
+                  {
+                    title: "Average",
+                    function: () => {setCardValDisplay("average")}
+                  },
+                  {
+                    title: "High",
+                    function: () => {setCardValDisplay("high")}
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="cardValueDisplay"
                 value={cardValDisplay}
                 exclusive
@@ -1184,12 +1214,33 @@ export default function Bins(props: Props) {
                   }}>
                   High
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
             </Box>
           </Grid>
           <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
-              <StyledToggleButtonGroup
+              <ButtonGroup 
+                toggle
+                buttons={[
+                  {
+                    title: "Grid",
+                    icon: <ViewComfy />,
+                    function: () => {
+                      setBinView("grid");
+                      sessionStorage.setItem("binsView", "grid");
+                    }
+                  },
+                  {
+                    title: "List",
+                    icon: <ViewList />,
+                    function: () => {
+                      setBinView("list");
+                      sessionStorage.setItem("binsView", "list");
+                    }
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="tour-graph-tabs"
                 value={binView}
                 exclusive
@@ -1203,7 +1254,7 @@ export default function Bins(props: Props) {
                     sessionStorage.setItem("binsView", "grid");
                   }}>
                   <ViewComfy />
-                </StyledToggle>
+                </StyledToggle> */}
                 {/* hidden at dustins request so that grid view and list are the only two */}
                 {/* <StyledToggle
                   value={"scroll"}
@@ -1214,7 +1265,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewColumn />
                 </StyledToggle> */}
-                <StyledToggle
+                {/* <StyledToggle
                   value={"list"}
                   aria-label="list view"
                   onClick={() => {
@@ -1223,7 +1274,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewList />
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
               <MoreVert
                 className={classes.icon}
                 onClick={event => {
@@ -1261,7 +1312,28 @@ export default function Bins(props: Props) {
           </Grid>
           <Grid >
             <Box display="flex" paddingY={1} alignContent="center" alignItems="center">
-              <StyledToggleButtonGroup
+            <ButtonGroup 
+                toggle
+                buttons={[
+                  {
+                    title: "Grid",
+                    icon: <ViewComfy />,
+                    function: () => {
+                      setBagView("grid");
+                      sessionStorage.setItem("bagsView", "grid");
+                    }
+                  },
+                  {
+                    title: "List",
+                    icon: <ViewList />,
+                    function: () => {
+                      setBagView("list");
+                      sessionStorage.setItem("bagsView", "list");
+                    }
+                  }
+                ]}
+              />
+              {/* <StyledToggleButtonGroup
                 id="tour-graph-tabs"
                 value={bagView}
                 exclusive
@@ -1275,7 +1347,7 @@ export default function Bins(props: Props) {
                     sessionStorage.setItem("bagsView", "grid");
                   }}>
                   <ViewComfy />
-                </StyledToggle>
+                </StyledToggle> */}
                 {/* hidden at dustins request so that grid view and list are the only two */}
                 {/* <StyledToggle
                   value={"scroll"}
@@ -1286,7 +1358,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewColumn />
                 </StyledToggle> */}
-                <StyledToggle
+                {/* <StyledToggle
                   value={"list"}
                   aria-label="list view"
                   onClick={() => {
@@ -1295,7 +1367,7 @@ export default function Bins(props: Props) {
                   }}>
                   <ViewList />
                 </StyledToggle>
-              </StyledToggleButtonGroup>
+              </StyledToggleButtonGroup> */}
               <IconButton
                 className={classes.icon}
                 onClick={() => {

src/tasks/TaskList.tsx

@@ -8,6 +8,7 @@ import { Task } from "models";
 //import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab";
 import TasksIcon from "products/Construction/TasksIcon";
 import moment from "moment";
+import ButtonGroup from "common/ButtonGroup";
 
 interface Props {
   tasks: Task[];
@@ -147,8 +148,21 @@ export default function TaskList(props: Props) {
   return (
     <Box padding="5px" textAlign="center">
       <Typography variant="h5">{label ? label : ""}</Typography>
-      <Box textAlign="center">
+      <Box textAlign="center" display="flex" justifyContent="center">
-        <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
+        <ButtonGroup 
+          toggle
+          buttons={[
+            {
+              title: "Upcoming",
+              function: () => setViewing("upcoming")
+            },
+            {
+              title: "Complete",
+              function: () => setViewing("complete")
+            }
+          ]}
+        />
+        {/* <ToggleButtonGroup value={viewing} exclusive size="small" aria-label="Bin Mode">
           <ToggleButton
             value={"upcoming"}
             aria-label="upcoming"
@@ -161,7 +175,7 @@ export default function TaskList(props: Props) {
             aria-label="complete">
             Complete
           </ToggleButton>
-        </ToggleButtonGroup>
+        </ToggleButtonGroup> */}
         {location !== "/tasks" && (
           <IconButton id="tasks" component={Link} to="/tasks">
             <TasksIcon />