added back the task viewer on the bin page, fixed up some more styling

src/maps/mapDrawers/FieldDrawer.tsx

@@ -230,12 +230,12 @@ export default function FieldDrawer(props: Props) {
                 {field.fieldName()} Details
               </Typography>
             </Box>
-            <Grid container direction="column" alignItems="center">
-              <Grid container direction="row" className={classes.dark}>
+            <Grid container direction="column" alignItems="center" width="100%">
+              <Grid container direction="row" justifyContent="space-between" width="100%" className={classes.dark}>
                 <Grid>Approximate Area:</Grid>
                 <Grid>{field.acres()}ac</Grid>
               </Grid>
-              <Grid container direction="row" className={classes.light}>
+              <Grid container direction="row" justifyContent="space-between" width="100%" className={classes.light}>
                 <Grid>Grain:</Grid>
                 <Grid>
                   {field.grain() === pond.Grain.GRAIN_CUSTOM
@@ -243,11 +243,11 @@ export default function FieldDrawer(props: Props) {
                     : GrainDescriber(field.crop()).name}
                 </Grid>
               </Grid>
-              <Grid container direction="row" className={classes.dark}>
+              <Grid container direction="row" justifyContent="space-between" width="100%" className={classes.dark}>
                 <Grid>Grain Variant:</Grid>
                 <Grid>{field.settings.grainSubtype}</Grid>
               </Grid>
-              <Grid container direction="row" className={classes.light}>
+              <Grid container direction="row" justifyContent="space-between" width="100%" className={classes.light}>
                 <Grid>Land Location:</Grid>
                 <Grid>{field.landLoc()}</Grid>
               </Grid>

src/pages/Bin.tsx

@@ -43,7 +43,6 @@ import BindaptIcon from "products/Bindapt/BindaptIcon";
 import Close from "@mui/icons-material/Close";
 import Chat from "chat/Chat";
 import TasksIcon from "products/Construction/TasksIcon";
-// import TaskViewer from "tasks/TaskViewer";
 import FieldsIcon from "products/AgIcons/FieldsIcon";
 import BinComponentTypes from "bin/BinComponentTypes";
 import { Plenum } from "models/Plenum";
@@ -66,6 +65,7 @@ import BinConditioningCard from "bin/BinConditioningCard";
 import { makeStyles, styled } from "@mui/styles";
 import { useNavigate, useParams } from "react-router-dom";
 import { Controller } from "models/Controller";
+import TaskViewer from "tasks/TaskViewer";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -547,10 +547,11 @@ export default function Bin(props: Props) {
   };
 
   const tasks = () => {
+    console.log(showTasks())
     if (showTasks()) {
       return (
         <React.Fragment>
-          {/* <TaskViewer drawerView objectKey={binID} loadKeys={[binID]} /> */}
+          <TaskViewer drawerView objectKey={binID} loadKeys={[binID]} />
         </React.Fragment>
       );
     }
@@ -1144,11 +1145,11 @@ export default function Bin(props: Props) {
               anchor="right"
               classes={{ paper: classes.drawerPaper }}
               onClose={() => setTaskDrawer(false)}>
-              <Box paddingTop={10}>
+              <Box>
                 <IconButton style={{ width: 50 }} onClick={() => setTaskDrawer(false)}>
                   <Close />
                 </IconButton>
-                {/* <TaskViewer drawerView objectKey={binID} loadKeys={[binID]} /> */}
+                <TaskViewer drawerView objectKey={binID} loadKeys={[binID]} />
               </Box>
             </Drawer>
           )}

src/pages/Gate.tsx

@@ -87,7 +87,7 @@ export default function Gate(props: Props) {
   //const match = useRouteMatch<MatchParams>();
   //const gateID = props.gateID ?? match.params.gateID;
   const { gateKey } = props
-  const gateID = gateKey ?? useParams<{ gateID: string }>()?.gateID ?? "";
+  const gateID = gateKey ?? useParams<{ gateKey: string }>()?.gateKey ?? "";
   const classes = useStyles();
   const gateAPI = useGateAPI();
   const userAPI = useUserAPI();
@@ -115,13 +115,17 @@ export default function Gate(props: Props) {
   };
 
   useEffect(() => {
+    console.log(gateID)
     let key = gateID;
     let kind = "gate";
     if (as) {
       key = as;
       kind = "team";
     }
+    console.log(key)
+    console.log(kind)
     userAPI.getUser(user.id(), { key: key, kind: kind } as Scope).then(resp => {
+      console.log(resp)
       setPermissions(resp.permissions);
     });
   }, [as, gateID, userAPI, user]);

src/tasks/TaskSettings.tsx

@@ -19,6 +19,7 @@ import { useSnackbar, useUserAPI } from "hooks";
 import { useEffect } from "react";
 import { Task, teamScope, User } from "models";
 import ColourPicker from "common/ColourPicker";
+import ResponsiveDialog from "common/ResponsiveDialog";
 
 interface Props {
   open: boolean;
@@ -159,7 +160,7 @@ export default function TaskSettings(props: Props) {
   };
 
   return (
-    <Dialog open={props.open} onClose={closeDialog}>
+    <ResponsiveDialog open={props.open} onClose={closeDialog}>
       <DialogTitle id="form-dialog-title">New Task</DialogTitle>
       <DialogContent>
         <TextField
@@ -346,6 +347,6 @@ export default function TaskSettings(props: Props) {
           </Button>
         )}
       </DialogActions>
-    </Dialog>
+    </ResponsiveDialog>
   );
 }