Merge branch 'gate_page_fixes' into dev_environment

src/common/ButtonGroup.tsx

@@ -72,14 +72,14 @@ const useStyles = makeStyles((theme: Theme) => {
       marginLeft: theme.spacing(0.05),
       marginRight: theme.spacing(0.05),
       "&:hover": {
-        backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
-        //backgroundColor: "gold",
+        //backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
+        backgroundColor: "gold", //for now Dustin just wants it to be gold
         color: "black",
       }
     },
     buttonToggled: {
-      backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
-      //backgroundColor: "gold",
+      //backgroundColor: getSecondaryColour(), //use the colour of the whitelabel
+      backgroundColor: "gold", //for now Dustin just wants it to be gold
       color: "black",
       borderRadius: 24,
       fontWeight: "bold"
@@ -148,9 +148,9 @@ export default function ButtonGroup(props: Props){
           }}>
           {b.icon 
           ? 
-            b.icon 
+            b.icon
           : 
-            <Typography sx={{fontSize: textSize}}>
+            <Typography sx={{fontSize: textSize ?? 13, fontWeight: checkToggled(i) ? 650 : 500}}>
               {b.title}
             </Typography>
           }

src/gate/GateDevice.tsx

@@ -31,6 +31,8 @@ interface Props {
   drawerView?: boolean;
 }
 
+
+
 export default function GateDevice(props: Props) {
   const { gate, comprehensiveDevice, linkedCompList, drawerView } = props;
   const [{as}] = useGlobalState();
@@ -234,6 +236,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="ambientSelect"
+        variant="standard"
         value={ambientKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -266,6 +269,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="tempSelect"
+        variant="standard"
         value={tempKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -300,6 +304,7 @@ export default function GateDevice(props: Props) {
     return (
       <Select
         id="pressureSelect"
+        variant="standard"
         value={pressureKey}
         style={{ fontSize: 8 }}
         onChange={e => {
@@ -335,9 +340,10 @@ export default function GateDevice(props: Props) {
       container
       direction="row"
       alignContent="center"
+      width="100%"
       //alignItems="center"
       >
-      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 8}} style={{ padding: 10 }}>
+      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
           paddingLeft={1}
           display="flex"

src/gate/GateSVG.tsx

@@ -355,13 +355,13 @@ export default function GateSVG(props: Props) {
             {renderValues()}
           </g>
           <foreignObject height={20} width={120} x={10} y={83}>
-            <Box style={{ position: "fixed" }}>{ambientSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{ambientSelector()}</Box>
           </foreignObject>
           <foreignObject height={20} width={120} x={10} y={118}>
-            <Box style={{ position: "fixed" }}>{tempChainSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{tempChainSelector()}</Box>
           </foreignObject>
           <foreignObject height={20} width={120} x={10} y={153}>
-            <Box style={{ position: "fixed" }}>{pressureChainSelector()}</Box>
+            <Box sx={{ position: "fixed" }}>{pressureChainSelector()}</Box>
           </foreignObject>
           {pcaRed()}
           {pcaGreen()}

src/pages/Gate.tsx

@@ -339,6 +339,7 @@ export default function Gate(props: Props) {
                   }}
                   style={{ height: 150, width: "100%", margin: -15 }}>
                   <Grid
+                    width="100%"
                     container
                     direction="row"
                     spacing={2}

src/theme/theme.ts

@@ -17,6 +17,20 @@ const baseTheme: ThemeOptions = {
       paper: '#f5f5f5',
     },
   },
+  typography: {
+    fontFamily: [
+      "Open Sans",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      '"Segoe UI"',
+      '"Helvetica Neue"',
+      "Arial",
+      "sans-serif",
+      '"Apple Color Emoji"',
+      '"Segoe UI Emoji"',
+      '"Segoe UI Symbol"'
+    ].join(",")
+  }
   // Add other options if needed
 };