got Bin page to render with BinTour not giving errors but the tour doesn't actually happen

src/bin/BinTour.tsx

@@ -1,17 +1,17 @@
-import { Typography } from "@material-ui/core";
+// import { useAuth0 } from "@auth0/auth0-react";
+import { Typography } from "@mui/material";
 import Tour from "common/Tour";
 import { random } from "lodash";
 import moment from "moment";
-import { useAuth, useGlobalState, useSnackbar, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import React, { useEffect, useState } from "react";
-import Emoji from "react-emoji-render";
 import { Step } from "react-joyride";
+// import Emoji from "react-emoji-render";
 
-interface Props {}
-
-export default function BinTour(props: Props) {
-  const { userID } = useAuth();
+export default function BinTour() {
+  // const { userID } = useAuth0();
   const [{ user }, dispatch] = useGlobalState();
+  const userID = user.id()
   const { error } = useSnackbar();
   const [isTourRunning, setIsTourRunning] = useState(true);
   const [joyKey, setJoyKey] = useState(random());
@@ -40,15 +40,15 @@ export default function BinTour(props: Props) {
       {
         title: (
           <React.Fragment>
-            Welcome to Bin Management
-            <Emoji text=" 🎉" />
+            Welcome to Bin Management 🎉
+            {/* <Emoji text=" 🎉" /> */}
           </React.Fragment>
         ),
         content: (
           <React.Fragment>
             <Typography variant="subtitle2" gutterBottom>
-              {"Hello " + user.name()}
-              <Emoji text=" 👋" />
+              {"Hello " + user.name() + " 👋"}
+              {/* <Emoji text=" 👋" /> */}
             </Typography>
             <Typography variant="body2" paragraph>
               Looks like this is your first time using our bin management system! Let me show you
@@ -138,12 +138,12 @@ export default function BinTour(props: Props) {
             <ul>
               <li>Storage mode: default</li>
               <li>
-                Drying mode: use heat to dry grain
-                <Emoji text=" ☀️" />
+                Drying mode: use heat to dry grain ☀️
+                {/* <Emoji text=" ☀️" /> */}
               </li>
               <li>
-                Cooldown mode: use fans to hold bin temperature lower
-                <Emoji text="  ❆❅" />
+                Cooldown mode: use fans to hold bin temperature lower  ❆❅
+                {/* <Emoji text="  ❆❅" /> */}
               </li>
             </ul>
           </React.Fragment>
@@ -156,6 +156,8 @@ export default function BinTour(props: Props) {
     return steps;
   };
 
+  console.log(user.status.finishedBinIntro)
+
   // if this intro has been done, return null
   if (user.status.finishedBinIntro.length > 1) return null;
 

src/common/ResponsiveTable.tsx

@@ -70,7 +70,7 @@ export interface Column<T> {
 interface Props<T> {
   rows: T[],
   columns?: Column<T>[] | (() => Column<T>[]),
-  title?: string | JSX.Element;
+  title?: string | JSX.Element | (() => string | JSX.Element);
   subtitle?: string | JSX.Element | (() => string | JSX.Element);
   total: number,
   pageSize: number,
@@ -97,7 +97,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     pageSize, 
     setPage, 
     handleRowsPerPageChange, 
-    title, 
+    // title, 
     // subtitle,
     renderGutter,
     setSearchText, 
@@ -114,6 +114,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
+  const title = typeof(props.title) === "function" ? props.title() : props.title
 
   const isMobile = useMobile()
 

src/common/Tour.tsx

@@ -1,5 +1,4 @@
-import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
-import React from "react";
+// import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
 import Joyride, { Step, CallBackProps, STATUS, TooltipRenderProps, Locale } from "react-joyride";
 import {
   Button,
@@ -7,17 +6,20 @@ import {
   CardContent,
   CardHeader,
   CardActions,
-  Grid,
+  Grid2 as Grid,
   MobileStepper,
   Tooltip,
-  IconButton
-} from "@material-ui/core";
-import { KeyboardArrowLeft, KeyboardArrowRight, Close as CloseIcon } from "@material-ui/icons";
+  IconButton,
+  Theme,
+  useTheme
+} from "@mui/material";
+import { KeyboardArrowLeft, KeyboardArrowRight, Close as CloseIcon } from "@mui/icons-material";
 import classNames from "classnames";
-import { grey } from "@material-ui/core/colors";
+import { grey } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     stepContainer: {
       width: "60vw",
       [theme.breakpoints.only("sm")]: {
@@ -43,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: "100%"
     }
   })
-);
+});
 
 const StepContainer = (props: TooltipRenderProps, numSteps: number, skip: () => void) => {
   const {
@@ -99,7 +101,7 @@ const StepContainer = (props: TooltipRenderProps, numSteps: number, skip: () =>
         ) : (
           !step.hideCloseButton && (
             <CardActions>
-              <Grid container justify="flex-end">
+              <Grid container justifyContent="flex-end">
                 <Button size="small" {...closeProps}>
                   Close
                 </Button>
@@ -143,7 +145,7 @@ export default function Tour(props: Props) {
       locale={{ back: "Back", close: "Close", last: "Done", next: "Next", skip: "Skip" } as Locale}
       styles={{
         options: {
-          arrowColor: theme.palette.type === "light" ? grey["100"] : grey["800"],
+          arrowColor: theme.palette.mode === "light" ? grey["100"] : grey["800"],
           backgroundColor: theme.palette.background.default,
           overlayColor: "rgba(0, 0, 0, 0.5)",
           primaryColor: theme.palette.primary.main,

src/pages/Bin.tsx

@@ -1160,7 +1160,7 @@ export default function Bin(props: Props) {
       </Box>
       {objectTeams()}
       {deviceMenu()}
-      {/* <BinTour /> */}
+      <BinTour />
     </PageContainer>
   );
 }

src/pages/Users.tsx

@@ -352,7 +352,7 @@ export default function Users() {
       <ResponsiveTable<User> 
         title="Users"
         rows={rows}
-        columns={columns()}
+        columns={columns}
         total={total}
         page={page}
         pageSize={pageSize}