made adjustments to the button for add task in the viewer

src/maps/mapDrawers/FieldDrawer.tsx

@@ -273,7 +273,7 @@ export default function FieldDrawer(props: Props) {
           <Weather longitude={field.center().longitude} latitude={field.center().latitude} />
         </TabPanelMine>
         <TabPanelMine value={value} index={2}>
-          <TaskViewer drawerView objectKey={field.key()} loadKeys={taskLoadKeys} />
+          <TaskViewer drawerView objectKey={field.key()} loadKeys={taskLoadKeys} overlayButton />
         </TabPanelMine>
       </React.Fragment>
     );

src/pages/Tasks.tsx

@@ -6,7 +6,7 @@ export default function Tasks() {
   return (
     <PageContainer>
       <Box padding={2}>
-        <TaskViewer />
+        <TaskViewer overlayButton/>
       </Box>
     </PageContainer>
   );

src/tasks/TaskViewer.tsx

@@ -30,6 +30,7 @@ interface ViewProps {
   label?: string;
   drawerView?: boolean;
   loadKeys?: string[]; //if you want to load tasks for a specific object(s)
+  overlayButton?: boolean;
 }
 
 interface TabPanelProps {
@@ -51,6 +52,22 @@ const useStyles = makeStyles((theme: Theme) => {
       }
     },
     fab: {
+      zIndex: 20,
+      background: theme.palette.primary.main,
+      "&:hover": {
+        background: theme.palette.primary.main
+      },
+      "&:focus": {
+        background: theme.palette.primary.main
+      },
+      position: "absolute",
+      bottom: theme.spacing(8), //for mobile navigator
+      right: theme.spacing(2),
+      [theme.breakpoints.up("sm")]: {
+        bottom: theme.spacing(2)
+      }
+    },
+    overlayFab: {
       zIndex: 20,
       background: theme.palette.primary.main,
       "&:hover": {
@@ -70,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 export default function TaskViewer(props: ViewProps) {
-  const { objectKey, label, drawerView, loadKeys } = props;
+  const { objectKey, label, drawerView, loadKeys, overlayButton } = props;
   const [{ user, as }] = useGlobalState();
   //const [{ as }] = useGlobalState();
   const taskAPI = useTaskAPI();
@@ -133,11 +150,13 @@ export default function TaskViewer(props: ViewProps) {
       taskAPI
         .getMultiTasks(loadKeys, as)
         .then(resp => {
+          if(resp.data.tasks){
             resp.data.tasks.forEach(task => {
               if (task.settings) {
                 temp.set(task.key, Task.any(task));
               }
             });
+          }
           setTasks(temp);
           setLoaded(true);
         })
@@ -229,14 +248,7 @@ export default function TaskViewer(props: ViewProps) {
     return (
       <React.Fragment>
         {isMobile || drawerView ? (
-          <Box>
+          <Box height={"100%"} position={"relative"}>
-            <Fab
-              onClick={openDialog}
-              aria-label="Create Task"
-              className={classes.fab}
-              size={isMobile ? "medium" : "large"}>
-              <AddIcon />
-            </Fab>
             <TabPanelMine value={value} index={0}>
               <Box paddingBottom={2}>
                 <TaskCalendar
@@ -309,6 +321,13 @@ export default function TaskViewer(props: ViewProps) {
                 openTask={(taskId: string) => openSelectedTask(taskId)}
               />
             </TabPanelMine>
+            <Fab
+              onClick={openDialog}
+              aria-label="Create Task"
+              className={overlayButton ? classes.overlayFab : classes.fab}
+              size={isMobile ? "medium" : "large"}>
+              <AddIcon />
+            </Fab>
           </Box>
         ) : (
           <Grid container direction="row" alignContent="center" alignItems="center">
@@ -398,7 +417,7 @@ export default function TaskViewer(props: ViewProps) {
   };
 
   return (
-    <Box>
+    <Box height={"100%"}>
       {!loaded ? <LinearProgress style={{ marginTop: 20 }} /> : viewer()}
       <TaskSettings
         open={newTaskDialog}