time bar font colour, moved visual farm in the side navigator to the top

src/common/time/TimeBar.tsx

@@ -2,7 +2,7 @@ import {
   Button,
   DialogActions,
   DialogContent,
-  Grid,
+  Grid2 as Grid,
   TextField,
   Theme,
   Typography
@@ -15,6 +15,7 @@ import { DateRangePreset, GetDefaultDateRange, SetDefaultPreset } from "./DateRa
 import { useThemeType } from "hooks";
 import { makeStyles } from "@mui/styles";
 import { cloneDeep } from "lodash";
+import { color } from "@mui/system";
 
 interface Props {
   startDate: Moment;
@@ -28,10 +29,12 @@ type DateRange<T> = [T | null, T | null];
 const useStyles = makeStyles((_theme: Theme) => {
   return ({
     activeButtonLight: {
-      border: "1px solid black"
+      border: "1px solid black",
+      color: "black"
     },
     acitveButtonDark: {
-      border: "1px solid white"
+      border: "1px solid white",
+      color: "white"
     }
   })
 });
@@ -128,7 +131,7 @@ export default function TimeBar(props: Props) {
     <React.Fragment>
       {datePickerDialog()}
       <Grid container direction="row" spacing={1} wrap="nowrap">
-        <Grid item>
+        <Grid>
           <Button
             style={{ borderRadius: "25px" }}
             className={
@@ -145,7 +148,7 @@ export default function TimeBar(props: Props) {
             <Typography style={{ fontWeight: 650 }}>1H</Typography>
           </Button>
         </Grid>
-        <Grid item>
+        <Grid>
           <Button
             style={{ borderRadius: "25px" }}
             className={
@@ -162,7 +165,7 @@ export default function TimeBar(props: Props) {
             <Typography style={{ fontWeight: 650 }}>1D</Typography>
           </Button>
         </Grid>
-        <Grid item>
+        <Grid>
           <Button
             style={{ borderRadius: "25px" }}
             className={
@@ -179,7 +182,7 @@ export default function TimeBar(props: Props) {
             <Typography style={{ fontWeight: 650 }}>1W</Typography>
           </Button>
         </Grid>
-        <Grid item>
+        <Grid>
           <Button
             style={{ borderRadius: "25px" }}
             className={
@@ -196,7 +199,7 @@ export default function TimeBar(props: Props) {
             <Typography style={{ fontWeight: 650 }}>1M</Typography>
           </Button>
         </Grid>
-        <Grid item>
+        <Grid>
           <Button
             style={{ borderRadius: "25px" }}
             className={

src/navigation/SideNavigator.tsx

@@ -160,6 +160,20 @@ export default function SideNavigator(props: Props) {
     const isAdCon = IsAdCon()
     return (
       <List className={classes.list} component="nav">
+        {(isAg || user.hasFeature("admin")) && (
+        <Tooltip title="Visual Farm" placement="right">
+          <ListItemButton
+            id="tour-visual-farm"
+            onClick={() => goTo("/visualFarm")}
+            classes={getClasses("/visualFarm")}
+            >
+            <ListItemIcon>
+              <FieldsIcon />
+            </ListItemIcon>
+            {open && <ListItemText primary="Visual Farm" />}
+          </ListItemButton>
+        </Tooltip>
+        )}
         {(isAg || user.hasFeature("admin")) && (
         <Tooltip title="Bins" placement="right">
           <ListItemButton
@@ -239,20 +253,6 @@ export default function SideNavigator(props: Props) {
           </ListItemButton>
         </Tooltip>
         {(isAg || user.hasFeature("admin")) && (
-        <Tooltip title="Visual Farm" placement="right">
-          <ListItemButton
-            id="tour-visual-farm"
-            onClick={() => goTo("/visualFarm")}
-            classes={getClasses("/visualFarm")}
-            >
-            <ListItemIcon>
-              <FieldsIcon />
-            </ListItemIcon>
-            {open && <ListItemText primary="Visual Farm" />}
-          </ListItemButton>
-        </Tooltip>
-        )}
-        {(isAg || user.hasFeature("admin")) && (
         <Tooltip title="My Fields" placement="right">
           <ListItemButton
             id="tour-field-list"