@material-ui/core#useTheme TypeScript Examples

function Timer(props: WidgetArgs) {
  const attributes = props.attributes;
  const theme = useTheme();

  return (
    <div
      style={{
        cursor: "default",
        padding: "4px 12px",
        backgroundColor:
          attributes["backgroundColor"] ||
          theme.palette.secondary.main ||
          "rgb(250, 145, 1)",
        color:
          attributes["color"] || theme.palette.secondary.contrastText || "#fff",
        borderRadius: "16px",
        display: "flex",
        justifyContent: "space-between",
        width: "375px",
        maxWidth: "100%",
        boxShadow: "0 1px 3px 1px #aaa",
        marginBottom: props.isPreview ? "16px" : "0",
      }}
    >
      <div className={"widget-timer-date"}>
        {"⌚ " + new Date(attributes["date"]).toLocaleString()}
      </div>
      <div className={"widget-timer-duration"}>
        {attributes["duration"] ? "? " + attributes["duration"] : ""}
      </div>
    </div>
  );
}

AppBar: React.FunctionComponent<IAppBarProps> = () => {
  const classes = useStyles();
  const theme = useTheme();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <MuiAppBar
      position="sticky"
      color="default"
      className={classes.appBar}
      elevation={trigger ? 4 : 0}
    >
      <Toolbar>
        <Grid item xs>
          <FiretableLogo />
        </Grid>

        <Grid item>
          <Button
            component={Link}
            to={routes.signOut}
            color="primary"
            variant="outlined"
          >
            Sign Out
          </Button>
        </Grid>
      </Toolbar>
    </MuiAppBar>
  );
}

DragonAlert: React.FC = () => {
  const { palette } = useTheme();
  const [openAlert, setOpenAlert] = useState(true);
  return (
    <>
      {openAlert && (
        <Box
          mb={3}
          display='flex'
          alignItems='center'
          width='100%'
          bgcolor={palette.secondary.dark}
          padding='16px 24px 16px 12px'
          borderRadius={12}
        >
          <AlertIcon />
          <Box mx={2} width='calc(100% - 96px)'>
            <Typography>
              As of May 2022, you can stake QUICK(NEW) in Syrup Pools. Note that
              there are some Syrup Pools that will still accept QUICK(OLD) for
              staking, until they run out of rewards
            </Typography>
          </Box>
          <CloseIcon
            onClick={() => setOpenAlert(false)}
            style={{ cursor: 'pointer' }}
          />
        </Box>
      )}
    </>
  );
}

FullScreenMessage = ({ message }: FullScreenMessageProps) => {
  const theme = useTheme();
  return (
    <Box
      height="100%"
      textAlign="center"
      display="flex"
      alignItems="center"
      justifyContent="center"
      color={theme.palette.primary.main}
    >
      <Typography variant="h2">{message}</Typography>
    </Box>
  );
}

AsyncApiDefinition = ({ definition }: Props): JSX.Element => {
  const classes = useStyles();
  const theme = useTheme();
  const classNames = `${classes.root} ${
    theme.palette.type === 'dark' ? classes.dark : ''
  }`;

  return (
    <div className={classNames}>
      <AsyncApi schema={definition} config={config} />
    </div>
  );
}

inInfoListItem = (): StoryFnReactReturnType => {
    const direction = getDirection();
    const theme = useTheme();

    return (
        <List style={{ width: '80%', padding: 0 }}>
            <InfoListItem
                icon={<BrightnessMedium />}
                title={'@brightlayer-ui/react-themes'}
                subtitle={'Light and dark themes supported'}
                backgroundColor={useDarkMode() ? Colors.black[900] : 'white'}
                rightComponent={
                    <div style={{ display: 'flex' }}>
                        <ListItemTag
                            label={'Build Passing'}
                            backgroundColor={Colors.green[300]}
                            fontColor={Colors.black[900]}
                            style={{
                                marginRight: direction === 'rtl' ? 0 : theme.spacing(2),
                                marginLeft: direction === 'rtl' ? theme.spacing(2) : 0,
                            }}
                        />
                        <ListItemTag label={'5 Bugs'} backgroundColor={Colors.red[300]} fontColor={Colors.black[900]} />
                    </div>
                }
            />
        </List>
    );
}

export default function MyLoadingBar() {
  const theme = useTheme();
  return (
    <LoadingBar
      style={{
        backgroundColor: theme.palette.primary.light,
      }}
      showFastActions
      maxProgress={90}
    />
  );
}

ChangeNetworkButton = () => {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );
  const [popperOpen, setPopperOpen] = useState(false);
  const { changeNetwork, network } = useTezos();
  const history = useHistory();
  const theme = useTheme();
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));
  const isMobileExtraSmall = useMediaQuery(theme.breakpoints.down("xs"));

  const handleClick = (event: React.MouseEvent<any>) => {
    setAnchorEl(event.currentTarget);
    setPopperOpen(!popperOpen);
  };

  const handleNetworkChange = (network: Network) => {
    changeNetwork(network);
    setPopperOpen(!popperOpen);
    history.push("/explorer/daos");
  };

  return (
    <>
      <Button size={isMobileExtraSmall? "small": undefined} color="secondary" variant="outlined" onClick={handleClick}>
        {isMobileSmall ? "" : "Network: "}
        {network}
      </Button>
      <NetworkMenu
        open={popperOpen}
        anchorEl={anchorEl}
        onClose={() => {
          setPopperOpen(false);
        }}
        handleNetworkChange={handleNetworkChange}
      />
    </>
  );
}

App = (): ReactElement => {
    useEffect(() => {
        const restoreFetch = fakeServer();
        return (): void => {
            restoreFetch();
        };
    }, []);
    const theme = useTheme();
    const { darkTheme, lightTheme } = getThemes(theme);

    return (
        <Admin
            title=""
            dataProvider={enhancedDataProvider}
            customRoutes={customRoutes}
            customReducers={{ tree }}
            authProvider={authProvider}
            dashboard={Dashboard}
            loginPage={Login}
            layout={Layout}
            i18nProvider={i18nProvider}
            // Ra-enterprise configuration
            lightTheme={lightTheme}
            darkTheme={darkTheme}
        >
            <Resource name="customers" {...visitors} />
            <Resource name="commands" {...orders} />
            <Resource name="invoices" {...invoices} />
            <Resource name="products" {...products} />
            <Resource name="categories" {...categories} />
            <Resource name="reviews" {...reviews} />
            <Resource name="stores" {...stores} />
            <Resource name="locks" />
            <Resource name="events" list={EventList} />
        </Admin>
    );
}

export function ArrowButton() {
  const styles = useStyles();
  const theme = useTheme();
  const { swapToFromMints } = useSwapContext();
  return (
    <ImportExportRounded
      className={styles.swapToFromButton}
      fontSize="large"
      htmlColor={theme.palette.primary.main}
      onClick={swapToFromMints}
    />
  );
}

Wrapper: React.FC = ({ children }) => {
  const theme = useTheme();

  return (
    <>
      <Sidebar />
      <Main theme={theme}>
        <Navbar />
        {children}
      </Main>
    </>
  );
}

export default function FiretableLogo() {
  const theme = useTheme();

  const primaryColor = theme.palette.primary.main;
  const strokeColor = "#FFF";

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="140"
      height="32"
      viewBox="0 0 140 32"
    >
      <g fill="none" fillRule="evenodd">
        <rect width="32" height="32" fill={primaryColor} rx="2.667" />
        <g fill={strokeColor}>
          <g fillRule="nonzero">
            <path d="M5.333 18.667V24A2.667 2.667 0 0 0 8 26.667h5.333v-8h-8zM6.667 20H12v5.333H8A1.333 1.333 0 0 1 6.67 24.1l-.003-.1v-4zM18.667 18.667v8H24A2.667 2.667 0 0 0 26.667 24v-5.333h-8zM20 25.333V20h5.333v4c0 .703-.544 1.279-1.233 1.33l-.1.003h-4z" />
            <path d="M12 18.667v8h8v-8h-8zM13.333 20h5.334v5.333h-5.334V20z" />
          </g>
          <path
            fillRule="nonzero"
            d="M18.667 12v8h8v-8h-8zM20 13.333h5.333v5.334H20v-5.334z"
          />
          <path
            fillRule="nonzero"
            d="M12 12v8h8v-8h-8zm1.333 1.333h5.334v5.334h-5.334v-5.334z"
          />
          <path
            stroke={strokeColor}
            strokeWidth="1.333"
            d="M19.333 6v6.667H26V6h-6.667zm2.577.667h1.512L25.672 12h-2.143l-.85-2.075L21.826 12h-2.165l2.248-5.333z"
          />
        </g>
        <path
          fill={primaryColor}
          fillRule="nonzero"
          d="M43.467 26v-9.813h2.586V13.36h-2.586v-2.693c0-1.547 1.093-2.267 2.16-2.267 1.2 0 2.053.693 2.053 1.68v.187c0 .906.693 1.573 1.573 1.573s1.627-.693 1.627-1.573v-.294c0-2.24-1.787-4.453-5.253-4.453-2.987 0-5.36 1.76-5.36 4.88v2.96H37.76v2.827h2.507V26h3.2zm7.413 0V13.36h-3.2V26h3.2zm6.773 0v-8.267s.88-1.706 2.827-1.706c.933 0 1.52.293 1.52.293l1.12-2.88s-1.04-.4-2.187-.4c-2.346 0-3.44 2.16-3.44 2.16v-1.84h-3.04V26h3.2zm13.067.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56zm11.333 7.813c1.84 0 3.04-.827 3.04-.827L86.64 22.88s-.613.453-1.333.453c-.854 0-1.654-.453-1.654-2V16.24h3.814v-2.88h-3.814V9.6h-3.2v3.76h-2.48v2.88h2.48v5.6c0 2.693 1.867 4.48 4.32 4.48zm9.28 0c2.854 0 4.16-1.92 4.16-1.92V26h2.96v-8.24c0-2.88-2.133-4.72-5.76-4.72-2.64 0-4.986 1.147-4.986 1.147l1.04 2.64s1.946-.934 3.786-.934c1.12 0 2.72.534 2.72 2.187v.72s-1.2-.907-3.52-.907c-2.746 0-4.96 1.76-4.96 4.187 0 2.693 2.187 4.24 4.56 4.24zm.987-2.667c-.987 0-2.293-.293-2.293-1.626 0-1.36 1.36-1.787 2.346-1.787 1.734 0 2.88.64 2.88.64v1.307s-1.013 1.466-2.933 1.466zm16.48 2.667c3.28 0 6.16-2.747 6.16-6.64s-2.88-6.64-6.16-6.64c-2.4 0-3.573 1.653-3.573 1.653V5.84h-3.2V26h2.96v-1.653s1.093 1.973 3.813 1.973zm-.56-2.987c-2.107 0-3.013-1.76-3.013-1.76v-3.786s.906-1.76 3.013-1.76c2.16 0 3.467 1.573 3.467 3.653s-1.307 3.653-3.467 3.653zM123.6 26V5.84h-3.2V26h3.2zm9.52.32c3.067 0 5.067-1.813 5.067-1.813l-1.6-2.4-.015.014c-.146.14-1.377 1.266-3.452 1.266-2 0-3.307-1.44-3.547-2.56h9.44c.027-.48.027-.96.027-1.2 0-3.894-2.907-6.587-6.373-6.587-3.654 0-6.347 2.933-6.347 6.64s2.96 6.64 6.8 6.64zm2.72-7.813h-6.267c.107-1.12 1.04-2.56 3.094-2.56 2.106 0 3.12 1.466 3.173 2.56z"
        />
      </g>
    </svg>
  );
}

MetricsTable = ({
  metrics,
  onEditMetric,
}: {
  metrics: Metric[]
  onEditMetric?: (metricId: number) => void
}): JSX.Element => {
  debug('MetricsTable#render')

  const theme = useTheme()
  const tableColumns = [
    {
      title: 'Name',
      field: 'name',
      cellStyle: {
        fontFamily: theme.custom.fonts.monospace,
        fontWeight: theme.custom.fontWeights.monospaceBold,
      },
    },
    {
      title: 'Description',
      field: 'description',
      cellStyle: {
        fontFamily: theme.custom.fonts.monospace,
      },
    },
    {
      title: 'Parameter Type',
      field: 'parameterType',
      cellStyle: {
        fontFamily: theme.custom.fonts.monospace,
      },
    },
  ]

  return (
    <MaterialTable
      actions={
        onEditMetric
          ? [
              {
                icon: 'edit',
                tooltip: 'Edit Metric',
                onClick: (_event, rowData) => {
                  onEditMetric((rowData as Metric).metricId)
                },
              },
            ]
          : undefined
      }
      columns={tableColumns}
      data={metrics}
      onRowClick={(_event, _rowData, togglePanel) => togglePanel && togglePanel()}
      options={{
        ...defaultTableOptions,
        actionsColumnIndex: 3,
      }}
      detailPanel={(rowData) => <MetricDetail metric={rowData} />}
    />
  )
}

MainLayout: React.FC<Props> = ({ children, notificationsService, authService }) => {
  const classes = useStyles();
  const theme = useTheme();
  const [drawerState, sendDrawer] = useMachine(drawerMachine);

  const aboveSmallBreakpoint = useMediaQuery(theme.breakpoints.up("sm"));
  const xsBreakpoint = useMediaQuery(theme.breakpoints.only("xs"));

  const desktopDrawerOpen = drawerState?.matches({ desktop: "open" });
  const mobileDrawerOpen = drawerState?.matches({ mobile: "open" });
  const toggleDesktopDrawer = () => {
    sendDrawer("TOGGLE_DESKTOP");
  };
  const toggleMobileDrawer = () => {
    sendDrawer("TOGGLE_MOBILE");
  };

  const openDesktopDrawer = (payload: any) => sendDrawer("OPEN_DESKTOP", payload);
  const closeMobileDrawer = () => sendDrawer("CLOSE_MOBILE");

  useEffect(() => {
    if (!desktopDrawerOpen && aboveSmallBreakpoint) {
      openDesktopDrawer({ aboveSmallBreakpoint });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [aboveSmallBreakpoint, desktopDrawerOpen]);

  return (
    <>
      <NavBar
        toggleDrawer={xsBreakpoint ? toggleMobileDrawer : toggleDesktopDrawer}
        drawerOpen={xsBreakpoint ? mobileDrawerOpen : desktopDrawerOpen}
        notificationsService={notificationsService}
      />
      <NavDrawer
        toggleDrawer={xsBreakpoint ? toggleMobileDrawer : toggleDesktopDrawer}
        drawerOpen={xsBreakpoint ? mobileDrawerOpen : desktopDrawerOpen}
        closeMobileDrawer={closeMobileDrawer}
        authService={authService}
      />
      <main className={classes.content} data-test="main">
        <div className={classes.appBarSpacer} />
        <Container maxWidth="md" className={classes.container}>
          <Grid container spacing={3}>
            <Grid item xs={12}>
              {children}
            </Grid>
          </Grid>
        </Container>
        <footer>
          <Footer />
        </footer>
      </main>
    </>
  );
}

ErrorPage = () => {
  const theme = useTheme();
  const { pathname } = useLocation();

  return (
    <>
      <NavBar searchLocation={false} />
      <Box
        color={theme.palette.primary.main}
        height="100%"
        display="flex"
        alignItems="center"
        flexDirection="column"
        justifyContent="center"
      >
        <Box mb="1rem" p="1rem">
          <Typography variant="h2" align="center">
            Sorry, something went wrong...
          </Typography>
        </Box>
        <Grid container justify="center">
          <Button
            style={{ margin: "1rem" }}
            color="primary"
            variant="contained"
            onClick={() => window.location.reload()}
          >
            Refresh
          </Button>
          {pathname !== "/map" && (
            <Button
              style={{ margin: "1rem", color: "white" }}
              component={Link}
              to="/map"
              color="primary"
              variant="contained"
            >
              Back to Map
            </Button>
          )}
        </Grid>
      </Box>
      <Footer />
    </>
  );
}

EntityBadgesDialog = ({ open, onClose }: Props) => {
  const theme = useTheme();
  const { entity } = useAsyncEntity();
  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
  const badgesApi = useApi(badgesApiRef);

  const {
    value: badges,
    loading,
    error,
  } = useAsync(async () => {
    if (open && entity) {
      return await badgesApi.getEntityBadgeSpecs(entity);
    }
    return [];
  }, [badgesApi, entity, open]);

  const content = (badges || []).map(
    ({ badge: { description }, id, url, markdown }) => (
      <Box marginTop={4} key={id}>
        <DialogContentText component="div">
          <img alt={description || id} src={url} />
          <CodeSnippet language="markdown" text={markdown} showCopyCodeButton />
        </DialogContentText>
      </Box>
    ),
  );

  return (
    <Dialog fullScreen={fullScreen} open={open} onClose={onClose}>
      <DialogTitle>Entity Badges</DialogTitle>
      <DialogContent>
        <DialogContentText>
          Embed badges in other web sites that link back to this entity. Copy
          the relevant snippet of Markdown code to use the badge.
        </DialogContentText>

        {loading && <Progress />}
        {error && <ResponseErrorPanel error={error} />}

        {content}
      </DialogContent>

      <DialogActions>
        <Button onClick={onClose} color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

PerfMonitorView = ({
  measures,
  startMeasuring,
  stopMeasuring,
  isMeasuring,
}: {
  measures: Measure[];
  startMeasuring: () => void;
  stopMeasuring: () => void;
  isMeasuring: boolean;
}) => {
  const JSThreadMeasures = getThreadMeasures(measures, "JS");
  const UIThreadMeasures = getThreadMeasures(measures, "UI");

  const DEFAULT_TIME_LIMIT = 10000;
  const [timeLimitEnabled, setTimeLimitEnabled] = useState(true);
  const [timeLimit, setTimeLimit] = useState<number | null>(DEFAULT_TIME_LIMIT);

  const { time: JSMeasuresTotalTime } = getTotalTimeAndFrames(JSThreadMeasures);
  const { time: UIMeasuresTotalTime } = getTotalTimeAndFrames(UIThreadMeasures);

  useEffect(() => {
    if (
      timeLimitEnabled &&
      timeLimit &&
      (UIMeasuresTotalTime - UIThreadMeasures[0]?.time >= timeLimit ||
        JSMeasuresTotalTime - JSThreadMeasures[0]?.time >= timeLimit)
    ) {
      stopMeasuring();
    }
  }, [timeLimit, JSMeasuresTotalTime, UIMeasuresTotalTime, timeLimitEnabled]);

  const { palette } = useTheme();

  return (
    <ScrollContainer>
      <Title />
      <Report
        jsMeasures={JSThreadMeasures}
        uiMeasures={UIThreadMeasures}
        isMeasuring={isMeasuring}
      />
      <ControlsContainer>
        <StartButton
          isMeasuring={isMeasuring}
          start={startMeasuring}
          stop={stopMeasuring}
        />
        <TimeLimitControl
          timeLimitEnabled={timeLimitEnabled}
          toggleTimeLimit={setTimeLimitEnabled}
          setTimeLimit={setTimeLimit}
          timeLimit={timeLimit}
        />
      </ControlsContainer>
      <Chart
        data={getFPSGraphData(JSThreadMeasures)}
        height={350}
        title="JS FPS"
        interval={MEASURE_INTERVAL}
        timeLimit={timeLimitEnabled ? timeLimit : null}
        color={palette.primary.light}
      />
      <Chart
        data={getFPSGraphData(UIThreadMeasures)}
        height={350}
        title="UI FPS"
        interval={MEASURE_INTERVAL}
        timeLimit={timeLimitEnabled ? timeLimit : null}
        color={palette.secondary.main}
      />
    </ScrollContainer>
  );
}

withBluiAppBar = (): StoryFnReactReturnType => {
    const classes = useStyles();
    const direction = getDirection();
    const theme = useTheme();
    const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
    const appBarGroupId = 'AppBar';
    const threeLinerGroupId = 'ThreeLiner';
    const toolbarMenuGroupId = 'ToolbarMenu';
    // AppBar props
    const animationDuration = number('animationDuration', 300, {}, appBarGroupId);
    const showBackgroundImage = boolean('show backgroundImage', true, appBarGroupId);
    const collapsedDesktopHeight = number('collapsedDesktopHeight', 64, {}, appBarGroupId);
    const collapsedMobileHeight = number('collapsedMobileHeight', 56, {}, appBarGroupId);
    const expandedHeight = number('expandedHeight', 200, {}, appBarGroupId);
    const scrollThreshold = number('scrollThreshold', 136, {}, appBarGroupId);
    const variant = select('variant', ['snap', 'collapsed', 'expanded'], 'snap', appBarGroupId);
    // ThreeLiner props
    const title = text('title', 'title', threeLinerGroupId);
    const info = text('info', 'info', threeLinerGroupId);
    // ToolbarMenu props
    const toolbarLabel = text('label', 'Subtitle', toolbarMenuGroupId);
    return (
        <>
            <AppBar
                expandedHeight={expandedHeight}
                collapsedHeight={!isMobile ? collapsedDesktopHeight : collapsedMobileHeight}
                scrollThreshold={scrollThreshold}
                animationDuration={animationDuration}
                backgroundImage={showBackgroundImage ? bgImage : undefined}
                variant={variant}
                classes={{ collapsed: classes.collapsed, expanded: classes.expanded }}
            >
                <Toolbar
                    classes={{ gutters: direction === 'rtl' ? classes.toolbarGuttersRTL : classes.toolbarGutters }}
                >
                    <IconButton onClick={action('home icon clicked...')} color={'inherit'} edge={'start'}>
                        <Menu />
                    </IconButton>
                    <Spacer />
                    <ThreeLiner
                        classes={{ title: classes.title, subtitle: classes.subtitle, info: classes.info }}
                        className={clsx([classes.liner, direction === 'rtl' ? classes.linerRTL : ''])}
                        title={title}
                        subtitle={
                            <ToolbarMenu
                                classes={{ root: classes.toolbarMenuRoot }}
                                label={toolbarLabel}
                                menuGroups={menuGroups}
                            ></ToolbarMenu>
                        }
                        info={info}
                        animationDuration={animationDuration}
                    />
                    <div style={{ display: 'flex', flexDirection: 'row' }}>
                        <IconButton onClick={action('home icon clicked...')} color={'inherit'}>
                            <Home />
                        </IconButton>
                        <IconButton onClick={action('work icon clicked...')} color={'inherit'}>
                            <Work />
                        </IconButton>
                        <IconButton onClick={action('settings icon clicked...')} color={'inherit'}>
                            <Settings />
                        </IconButton>
                    </div>
                </Toolbar>
            </AppBar>
            <div>{getBodyFiller()}</div>
        </>
    );
}

AppTabBar: React.FC<{
  value: number;
  setValue: any;
  labels: string[];
  class1?: any;
  centered?: boolean;
}> = ({ value, setValue, labels, class1, centered }) => {
  const a11yProps = (index: any) => {
    return {
      id: `simple-tab-${index}`,
      "aria-controls": `simple-tabpanel-${index}`
    };
  };

  const handleChange = (event: React.ChangeEvent<any>, newValue: number) => {
    setValue(newValue);
  };

  const theme = useTheme();
  const isMobileSmall = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <StyledAppBar
      position="static"
      style={
        centered && !isMobileSmall
          ? { display: "grid", justifyContent: "center" }
          : undefined
      }
    >
      <Tabs
        value={value}
        onChange={handleChange}
        aria-label="simple tabs example"
        style={
          centered && !isMobileSmall
            ? { display: "flex", justifyContent: "center", marginLeft: 12 }
            : undefined
        }
      >
        {labels.map((label, i) => (
          <CustomTab
            label={label}
            {...a11yProps(i)}
            key={i}
            classes={!isMobileSmall ? class1 : undefined}
          />
        ))}
      </Tabs>
    </StyledAppBar>
  );
}

AppNavMac: React.FC<AppNavMacProps> = (props) => {
  const theme = useTheme();
  const styles = useStyles();
  const { title } = props;
  const settings = useTypedSelector(state => state.settings);
  const status = useTypedSelector(state => state.status);

  const [open, setOpen] = React.useState(false);

  const handleDrawerToggle = () => {
    setOpen(!open);
  };

  return (
    <div className={styles.appNavWrapper}>
      <AdaptiveAppBar position="fixed" className={styles.appBar}>
        <Toolbar className={styles.toolBar} variant="dense">
          <div className={styles['disableDrag']}>
            {
              !settings.fixedMenu && (
                <IconButton
                  color="inherit"
                  edge="start"
                  onClick={handleDrawerToggle}
                >
                  <MenuIcon className={styles.menuButton} />
                </IconButton>
              )
            }
              <span className={styles.title}>{title}</span>
          </div>
        </Toolbar>
        <LinearProgress className={clsx(!status.waiting ? styles.visibilityHidden : '')} />
      </AdaptiveAppBar>
      <nav className={styles.drawer}>
          <AdaptiveDrawer
            mode={settings.fixedMenu ? 'absolute' : 'fixed'}
            anchor={theme.direction === "rtl" ? "right" : "left"}
            open={open}
            onClose={handleDrawerToggle}
            ModalProps={{
              keepMounted: true
            }}
          >
            <DrawerMenu hideIcon={settings.fixedMenu} onClick={handleDrawerToggle} />
          </AdaptiveDrawer>
      </nav>
    </div>
  );
}

LabelDialog = () => {
  const theme = useTheme();
  const dispatch = useDispatch();
  const open = useSelector((state: RootState) => state.label.dialogOpen);
  const labels = useSelector(selectAllLabels);
  const [searchValue, setSearchValue] = useState("");
  const [creating, setCreating] = useState(false);
  const xsDown = useMediaQuery(theme.breakpoints.down("xs"));

  const filteredLabels = labels.filter((label) =>
    label.name.toLowerCase().match(searchValue.trim().toLowerCase())
  );

  const handleClose = () => {
    dispatch(setDialogOpen(false));
  };

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      maxWidth="sm"
      fullWidth
      fullScreen={xsDown}
    >
      <Close onClose={handleClose} />
      <DialogTitle id="edit-labels">Edit labels</DialogTitle>
      <Container>
        <Flex
          css={css`
            align-items: flex-end;
            ${creating && "margin-bottom: 1rem;"}
          `}
        >
          <LabelCount>
            {filteredLabels.length} label{filteredLabels.length !== 1 && "s"}
          </LabelCount>
          <div>
            <Hidden xsDown implementation="css">
              <TextField
                value={searchValue}
                onChange={(e) => setSearchValue(e.target.value)}
                placeholder="Search labels"
                InputProps={{
                  startAdornment: (
                    <InputAdornment
                      position="start"
                      css={css`
                        color: #ccc;
                      `}
                    >
                      <FontAwesomeIcon icon={faSearch} />
                    </InputAdornment>
                  ),
                }}
              />
            </Hidden>
          </div>
          <Button
            size="small"
            color="primary"
            variant="contained"
            onClick={() => setCreating(true)}
            css={css`
              margin-right: 1rem;
            `}
          >
            New label
          </Button>
        </Flex>
        {creating && <LabelCreate setCreating={setCreating} />}
        <Table>
          {filteredLabels.map((label) => (
            <LabelRow key={label.id + label.color + label.name} label={label} />
          ))}
        </Table>
      </Container>
    </Dialog>
  );
}

export default function NavDrawer({
  handleCreateTable,
  ...props
}: INavDrawerProps) {
  const classes = useStyles();
  const theme = useTheme();
  const isSm = useMediaQuery(theme.breakpoints.down("sm"));

  const { sections } = useFiretableContext();
  const { location } = useRouter();
  const { hash } = location;

  return (
    <Drawer
      open
      variant={isSm ? "temporary" : "persistent"}
      {...props}
      classes={{ paper: classes.paper }}
    >
      <Grid
        container
        spacing={1}
        wrap="nowrap"
        alignItems="center"
        className={classes.logoRow}
      >
        <Grid item>
          <IconButton
            aria-label="Close navigation drawer"
            onClick={props.onClose as any}
          >
            <CloseIcon />
          </IconButton>
        </Grid>

        <Grid item className={classes.logo}>
          <FiretableLogo />
        </Grid>
      </Grid>

      <nav className={classes.nav}>
        <List className={classes.list}>
          {sections &&
            Object.keys(sections).map((section) => (
              <li key={section}>
                <ListItem
                  button
                  component="a"
                  href={`#${section}`}
                  selected={
                    section === decodeURIComponent(hash.replace("#", ""))
                  }
                  classes={{
                    root: classes.listItem,
                    selected: classes.listItemSelected,
                  }}
                  onClick={isSm ? (props.onClose as any) : undefined}
                >
                  <ListItemText
                    primary={section}
                    classes={{ primary: classes.listItemText }}
                  />
                </ListItem>
              </li>
            ))}

          <li className={classes.createTable}>
            <ListItem
              button
              onClick={handleCreateTable}
              classes={{ root: classes.listItem }}
            >
              <ListItemIcon>
                <AddIcon />
              </ListItemIcon>
              <ListItemText
                primary="Create Table"
                classes={{ primary: classes.listItemText }}
              />
            </ListItem>
          </li>
        </List>
      </nav>
    </Drawer>
  );
}

ExperimentsTable = ({ experiments }: { experiments: ExperimentSummary[] }): JSX.Element => {
  const theme = useTheme()
  const classes = useStyles()

  const gridApiRef = useRef<GridApi | null>(null)
  const gridColumnApiRef = useRef<ColumnApi | null>(null)

  const onGridReady = (event: GridReadyEvent) => {
    gridApiRef.current = event.api
    gridColumnApiRef.current = gridColumnApiRef.current = event.columnApi

    event.api.sizeColumnsToFit()

    searchQuery && setSearchState(searchQuery)
  }

  const onGridResize = () => {
    if (!gridApiRef.current) {
      return
    }

    gridApiRef.current.sizeColumnsToFit()
  }

  const history = useHistory()
  const { pathname, search } = useLocation()
  const searchQuery = Object.fromEntries(new URLSearchParams(search).entries())?.search

  const [searchState, setSearchState] = useState<string>('')
  const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchState(event.target.value)
    event.target.value ? history.replace(`${pathname}?search=${event.target.value}`) : history.replace(pathname)
  }

  useEffect(() => {
    // istanbul ignore next; trivial and shouldn't occur
    if (!gridApiRef.current) {
      return
    }

    gridApiRef.current?.setQuickFilter(searchState)
  }, [searchState])

  const onNewDataRender = () => {
    // istanbul ignore next; trivial and shouldn't occur
    if (!gridApiRef.current || !gridColumnApiRef.current) {
      return
    }

    gridColumnApiRef.current.autoSizeAllColumns()
    gridColumnApiRef.current.resetColumnState()
    gridApiRef.current.setFilterModel(null)
    gridColumnApiRef.current.applyColumnState({
      state: [
        {
          colId: 'status',
          sort: 'asc',
          sortIndex: 0,
        },
        {
          colId: 'startDatetime',
          sort: 'desc',
          sortIndex: 1,
        },
      ],
      defaultState: { sort: null },
    })
  }

  const onReset = () => {
    setSearchState('')
    history.push(pathname)
    onNewDataRender()
  }

  return (
    <div className={clsx('ag-theme-alpine', classes.root)}>
      <div className={classes.toolbar}>
        <Typography variant='h2'>Experiments</Typography>
        <div className={classes.controls}>
          <div className={classes.search}>
            <div className={classes.searchIcon}>
              <SearchIcon />
            </div>
            <InputBase
              placeholder='Search…'
              classes={{
                root: classes.inputRoot,
                input: classes.inputInput,
              }}
              inputProps={{ 'aria-label': 'Search' }}
              value={searchState}
              onChange={onSearchChange}
            />
          </div>
          <Button onClick={onReset}> Reset </Button>
        </div>
      </div>
      <div className={clsx('ag-theme-alpine', classes.gridContainer)}>
        <AgGridReact
          columnDefs={[
            {
              headerName: 'Name',
              field: 'name',
              cellStyle: {
                fontFamily: theme.custom.fonts.monospace,
                fontWeight: 600,
              },
              cellRendererFramework: ({ value: name, data }: { value: Status; data: ExperimentSummary }) => (
                <Link component={RouterLink} to={`/experiments/${createIdSlug(data.experimentId, data.name)}`}>
                  {name}
                </Link>
              ),
              sortable: true,
              filter: true,
              resizable: true,
              width: 520,
            },
            {
              headerName: 'Status',
              field: 'status',
              cellRendererFramework: ({ value: status }: { value: Status }) => <ExperimentStatus status={status} />,
              comparator: statusComparator,
              sortable: true,
              filter: true,
              resizable: true,
            },
            {
              headerName: 'Platform',
              field: 'platform',
              cellStyle: {
                fontFamily: theme.custom.fonts.monospace,
              },
              sortable: true,
              filter: true,
              resizable: true,
            },
            {
              headerName: 'Owner',
              field: 'ownerLogin',
              cellStyle: {
                fontFamily: theme.custom.fonts.monospace,
              },
              sortable: true,
              filter: true,
              resizable: true,
            },
            {
              headerName: 'Start',
              field: 'startDatetime',
              cellRendererFramework: ({ value: startDatetime }: { value: Date }) => {
                return <DatetimeText datetime={startDatetime} excludeTime />
              },
              sortable: true,
              filter: 'agDateColumnFilter',
              resizable: true,
            },
            {
              headerName: 'End',
              field: 'endDatetime',
              cellRendererFramework: ({ value: endDatetime }: { value: Date }) => {
                return <DatetimeText datetime={endDatetime} excludeTime />
              },
              sortable: true,
              filter: 'agDateColumnFilter',
              resizable: true,
            },
            {
              field: 'description',
              hide: true,
            },
            {
              headerName: 'Participants',
              valueGetter: (params: { data: { analyses: Analysis[] } }) =>
                params.data.analyses[0]?.participantStats.total || 0,
              cellRendererFramework: ({ value: participants }: { value: number }) => {
                return <MetricValue value={participants} metricParameterType={MetricParameterType.Count} />
              },
              sortable: true,
              filter: 'agNumberColumnFilter',
              resizable: true,
              type: 'rightAligned',
            },
          ]}
          rowData={experiments}
          containerStyle={{ flex: 1, height: 'auto' }}
          onFirstDataRendered={onNewDataRender}
          onGridReady={onGridReady}
          onGridSizeChanged={onGridResize}
        />
      </div>
    </div>
  )
}

NavDrawer: React.FC<Props> = ({
  toggleDrawer,
  closeMobileDrawer,
  drawerOpen,
  authService,
}) => {
  const classes = useStyles();
  const theme = useTheme();
  const [authState, sendAuth] = useService(authService);
  const showTemporaryDrawer = useMediaQuery(theme.breakpoints.only("xs"));

  const currentUser = authState?.context?.user;
  const signOut = () => sendAuth("LOGOUT");

  return (
    <Drawer
      data-test="sidenav"
      variant={showTemporaryDrawer ? "temporary" : "persistent"}
      classes={{
        paper: clsx(classes.drawerPaper, !drawerOpen && classes.drawerPaperClose),
      }}
      open={drawerOpen}
      ModalProps={{
        onBackdropClick: () => closeMobileDrawer(),
        closeAfterTransition: showTemporaryDrawer,
      }}
    >
      <Grid
        container
        direction="row"
        justify="space-between"
        alignItems="center"
        className={drawerOpen ? classes.userProfile : classes.userProfileHidden}
      >
        <Grid item>
          {currentUser && (
            <Avatar
              className={classes.avatar}
              alt={`${currentUser.firstName} ${currentUser.lastName}`}
              src={currentUser.avatar}
            />
          )}
        </Grid>
        <Grid item>
          {currentUser && (
            <>
              <Typography
                variant="subtitle1"
                color="textPrimary"
                data-test="sidenav-user-full-name"
              >
                {currentUser.firstName} {head(currentUser.lastName)}
              </Typography>
              <Typography
                variant="subtitle2"
                color="inherit"
                gutterBottom
                data-test="sidenav-username"
              >
                @{currentUser.username}
              </Typography>
            </>
          )}
        </Grid>
        <Grid item style={{ width: "30%" }}></Grid>
      </Grid>
      <Grid
        container
        direction="row"
        justify="space-between"
        alignItems="center"
        className={drawerOpen ? classes.userProfile : classes.userProfileHidden}
      >
        <Grid item>
          {currentUser && (
            <>
              <Typography
                variant="h6"
                color="textPrimary"
                className={classes.amount}
                data-test="sidenav-user-balance"
              >
                {formatAmount(currentUser.balance)}
              </Typography>
              <Typography variant="subtitle2" color="inherit" gutterBottom>
                Account Balance
              </Typography>
            </>
          )}
        </Grid>
        <Grid item>
          <Divider />
        </Grid>
        <Grid item>
          <List>{mainListItems(toggleDrawer, showTemporaryDrawer)}</List>
        </Grid>
        <Grid item>
          <Divider />
        </Grid>
        <Grid item>
          <List>{secondaryListItems(signOut)}</List>
        </Grid>
      </Grid>
    </Drawer>
  );
}

ModTableRow: React.FunctionComponent<Props> = ({ mod }) => {
  const styles = useStyles();
  const theme = useTheme();
  const missingDependencyNames = useRecoilValue(missingDependencyIdsState(mod));
  const isModOutdated = isOutdated(mod);
  const isModBroken = isBroken(mod);
  const addonMods = useRecoilValue(addonModList);
  const [isAddonsExpanded, setIsAddonsExpanded] = useState(false);
  const isAddon = mod.parent && !mod.localVersion;
  const enabledMods = useRecoilValue(enabledModList);
  const forceExpandAddons = useRecoilValue(isFiltering);
  const shouldExpandAddons = forceExpandAddons || isAddonsExpanded;
  const rowRef = useRef<HTMLTableRowElement>(null);
  const isLoading = useRecoilValue(modIsLoadingState(mod.uniqueName));

  useEffect(() => {
    if (!isLoading || !rowRef.current) return;

    rowRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'nearest',
    });
  }, [isLoading]);

  const addons = useMemo(
    () => addonMods.filter((addon) => addon.parent === mod.uniqueName),
    [addonMods, mod.uniqueName]
  );

  const conflictingMods = useMemo(
    () =>
      mod.conflicts && mod.conflicts.length > 0
        ? enabledMods
            .filter((enabledMod) =>
              mod.conflicts?.includes(enabledMod.uniqueName)
            )
            .map((enabledMod) => enabledMod.name)
        : [],
    [enabledMods, mod.conflicts]
  );

  const isModConflicting = mod.isEnabled && conflictingMods.length > 0;

  const handleExpandClick = () =>
    setIsAddonsExpanded((isExpanded) => !isExpanded);

  const getVersionColor = () => {
    if (isModBroken) {
      return 'default';
    }
    if (isModOutdated) {
      return 'secondary';
    }
    if (isInstalled(mod)) {
      return 'primary';
    }
    return 'default';
  };

  const getVersion = () => {
    if (isInstalled(mod)) {
      return mod.localVersion;
    }
    if (mod.remoteVersion) {
      return mod.remoteVersion;
    }
    return modsText.versionNotAvailable;
  };

  const getClassName = () => {
    let className = styles.tableRow;
    if (isModBroken || isModConflicting) {
      className += ` ${styles.brokenRow}`;
    } else if (isLoading) {
      className += ` ${styles.loading}`;
    } else if (missingDependencyNames.length > 0) {
      className += ` ${styles.missingDependencyRow}`;
    } else if (isAddon) {
      className += ` ${styles.addonRow}`;
    }
    return className;
  };

  const getModText = () => {
    if (isModBroken) {
      return modsText.modLoadError(mod.errors);
    }
    if (missingDependencyNames.length > 0) {
      return modsText.missingDependencyWarning(
        missingDependencyNames.join(', ')
      );
    }
    if (isModConflicting) {
      return modsText.conflictingModWarning(conflictingMods.join(', '));
    }
    return mod.description;
  };

  return (
    <>
      <TableRow className={getClassName()} key={mod.uniqueName} ref={rowRef}>
        <TableCell className={styles.tableCell}>
          <Box display="flex">
            {isAddon && (
              <Box
                bgcolor={theme.palette.background.paper}
                width="8px"
                minWidth="8px"
                marginRight={2}
                marginLeft={1}
                borderRadius="8px"
              />
            )}
            <Box width="100%">
              <Typography variant="subtitle1">
                <Box display="inline-block" mr={2}>
                  {mod.name}
                </Box>
                <Typography className={styles.modAuthor} variant="caption">
                  {' by '}
                  {mod.author}
                </Typography>
                <Typography variant="caption" />
              </Typography>
              <Box
                color={
                  isModBroken || isModConflicting
                    ? theme.palette.secondary.light
                    : theme.palette.text.secondary
                }
              >
                <Typography className={styles.modText} variant="caption">
                  {getModText()}
                </Typography>
              </Box>
              {addons.length > 0 && !forceExpandAddons && (
                <ButtonBase
                  className={styles.addonExpander}
                  onClick={handleExpandClick}
                >
                  <Box
                    display="flex"
                    alignItems="center"
                    borderRadius={theme.shape.borderRadius}
                    maxWidth="100%"
                  >
                    {shouldExpandAddons ? <ExpandLess /> : <ExpandMore />}

                    <Typography variant="caption" noWrap>
                      {addons.length}
                      {' addons available: '}
                      {addons.map((addon) => addon.name).join(', ')}
                    </Typography>
                  </Box>
                </ButtonBase>
              )}
            </Box>
          </Box>
        </TableCell>
        <TableCell className={styles.tableCell} align="right">
          {mod.downloadCount || '-'}
        </TableCell>
        <TableCell className={styles.tableCell}>
          <Chip
            color={getVersionColor()}
            label={getVersion()}
            className={styles.versionChip}
          />
          {!isModBroken && isModOutdated && (
            <div className={styles.outdatedChip}>{modsText.outdated}</div>
          )}
        </TableCell>
        <TableCell className={styles.tableCell}>
          <ModActions mod={mod} />
        </TableCell>
      </TableRow>
      {shouldExpandAddons &&
        addons.map((addon) => (
          <ModTableRow key={addon.uniqueName} mod={addon} />
        ))}
    </>
  );
}

Chart = ({
  datasets,
  site,
  pointId,
  hideYAxisUnits,
  pickerStartDate,
  pickerEndDate,
  startDate,
  endDate,
  surveysFiltered,
  pickerErrored,
  showDatePickers,
  onStartDateChange,
  onEndDateChange,
  classes,
}: ChartProps) => {
  const theme = useTheme();
  const { hobo: hoboBottomTemperatureRange } =
    useSelector(siteTimeSeriesDataRangeSelector)?.bottomTemperature || {};
  const { minDate, maxDate } = hoboBottomTemperatureRange?.data?.[0] || {};
  const isTimeSeriesDataRangeLoading = useSelector(
    siteTimeSeriesDataRangeLoadingSelector
  );
  const isTimeSeriesDataLoading = useSelector(
    siteTimeSeriesDataLoadingSelector
  );
  const surveys = filterSurveys(
    useSelector(surveyListSelector),
    "any",
    surveysFiltered ? pointId || -1 : -1
  );

  const hasData = datasets.some(({ displayData }) => displayData);

  const loading = isTimeSeriesDataLoading || isTimeSeriesDataRangeLoading;

  const success = !pickerErrored && !loading && hasData;
  const warning = !pickerErrored && !loading && !hasData;

  const minDateLocal = displayTimeInLocalTimezone({
    isoDate: minDate,
    timeZone: site.timezone,
    format: "MM/DD/YYYY",
    displayTimezone: false,
  });
  const maxDateLocal = displayTimeInLocalTimezone({
    isoDate: maxDate,
    timeZone: site.timezone,
    format: "MM/DD/YYYY",
    displayTimezone: false,
  });

  const noDataMessage = () => (
    <Box
      margin="8px 0"
      height="215px"
      display="flex"
      justifyContent="center"
      alignItems="center"
      textAlign="center"
      color={theme.palette.primary.main}
    >
      <Typography variant="h2">No data to display</Typography>
    </Box>
  );

  return (
    <>
      {loading && (
        <Box
          height="275px"
          mt="8px"
          mb="8px"
          display="flex"
          justifyContent="center"
          alignItems="center"
        >
          <CircularProgress size="120px" thickness={1} />
        </Box>
      )}
      {pickerErrored && (
        <>
          <Box mt="8px">
            <Alert severity="error">
              <Typography>Start Date should not be after End Date</Typography>
            </Alert>
          </Box>
          {noDataMessage()}
        </>
      )}
      {warning && (
        <>
          <Box mt="8px">
            <Alert severity="warning">
              <Typography>
                {minDateLocal && maxDateLocal
                  ? `No HOBO data available - data available from ${minDateLocal} to ${maxDateLocal}.`
                  : "No data available in this time range."}
              </Typography>
            </Alert>
          </Box>
          {noDataMessage()}
        </>
      )}
      {success && (
        <ChartWithTooltip
          className={classes.chart}
          datasets={datasets}
          siteId={site.id}
          hideYAxisUnits={hideYAxisUnits}
          surveys={surveys}
          temperatureThreshold={null}
          maxMonthlyMean={null}
          background
          chartPeriod={findChartPeriod(startDate, endDate)}
          timeZone={site.timezone}
          startDate={convertToLocalTime(startDate, site.timezone)}
          endDate={convertToLocalTime(endDate, site.timezone)}
          showYearInTicks={moreThanOneYear(startDate, endDate)}
          fill={false}
        />
      )}
      {!isTimeSeriesDataRangeLoading && showDatePickers && (
        <Grid container justify="center">
          <Grid
            className={classes.datePickersWrapper}
            item
            xs={12}
            container
            justify="space-between"
            spacing={1}
          >
            <Grid item>
              <DatePicker
                value={pickerStartDate}
                dateName="START DATE"
                dateNameTextVariant="subtitle1"
                pickerSize="small"
                autoOk={false}
                onChange={onStartDateChange}
                timeZone={site.timezone}
              />
            </Grid>
            <Grid item>
              <DatePicker
                value={pickerEndDate}
                dateName="END DATE"
                dateNameTextVariant="subtitle1"
                pickerSize="small"
                autoOk={false}
                onChange={onEndDateChange}
                timeZone={site.timezone}
              />
            </Grid>
          </Grid>
        </Grid>
      )}
    </>
  );
}