replaced all instances of the styled toggle with the new buttongroup common component

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