@mui/material#Theme TypeScript Examples

// ================== CSS AND MUI FUNCTIONS =================== //

/**
 * Sets a style depending on whether or not the theme is light/dark
 *
 * @param theme The Mui theme object
 * @param lightStyle Light theme style
 * @param darkStyle Dark theme style
 * @returns Either the dark or light theme style, depending on the current mode
 */
export function darkSwitch(theme: Theme, lightStyle: string, darkStyle: string): string {
    return theme.palette.mode === 'light' ? lightStyle : darkStyle;
}

useStyles = makeStyles((theme: Theme) =>
    createStyles({
        main: {
            display: "flex",
            flexDirection: "column",
            width: "100vw",
            height: "100vh"
        },
        content: {
            flexGrow: 1,
            width: "100%",
            height: "100%",
            overflow: "auto"
        },
        drawerPaper: {
            width: 280
        }
    })
)

listTextFormat = {
    marginTop: 3,
    marginBottom: 8,
    textAlign: 'center',
    color: (theme) => darkSwitchGrey(theme),
} as SxProps<Theme>

useStyles = makeStyles((theme: Theme) => ({
    shareValue: {
        marginTop: 8,
        marginBottom: 9,
    },
    checkboxLabel: {
        marginTop: 7,
        marginBottom: 7,
    },
    listItem: {
        paddingLeft: 0,
    },
    divider: {
        marginLeft: 0,
    },
    tableLink: {
        color: theme.palette.text.primary,
        textDecoration: "none",
        display: "block",
        height: "100%",
        width: "100%",
        padding: "16px 0",
    },
    tableLinkCell: {
        padding: "0 16px",
    },
}))

useStyles = makeStyles((theme: Theme) =>
  createStyles({
    sideWrapper: {
      [theme.breakpoints.down('md')]: {
        maxWidth: 'max-content',
        flexBasis: 'fit-content',
      },
    },
  }),
)

StyledMenu = styled(Menu)(({ theme }: { theme: Theme }) => ({
    '& .MuiList-root': {
        padding: 0,
    },
    '& .MuiListItemIcon-root': {
        marginRight: theme.spacing(),
        minWidth: 'unset',
        '& .MuiSvgIcon-root': {
            width: 20,
            height: 20,
        },
    },
}))

function getPageHeight(theme: Theme) {
  const topSpacing = Number(theme.mixins.toolbar.minHeight) + parseInt(theme.spacing(1));

  return `calc(100vh - ${topSpacing}px)`;
}

useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            width: '100%',
            padding: theme.spacing(2),
            textAlign: 'center',
        },
    })
)

useStyles = makeStyles<Theme, { customColor: string }>(() => ({
    root: ({ customColor }) => ({
        backgroundColor: customColor
    })
}))

IOSSliderStyles: any = withStyles((theme: Theme) => ({
    root: {
        color: theme?.palette?.primary?.main ?? '#222',
        height: 2,
        padding: '15px 0',
    },
    thumb: {
        height: 28,
        width: 28,
        backgroundColor: '#fff',
        color: '#222',
        boxShadow: iOSBoxShadow,
        '&:focus, &:hover, &$active': {
            boxShadow: '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.3),0 0 0 1px rgba(0,0,0,0.02)',
            // Reset on touch devices, it doesn't add specificity
            '@media (hover: none)': {
                boxShadow: iOSBoxShadow,
            },
        },
    },
    active: {},
    valueLabel: {
        // left: 'calc(-50% + 12px)',
        // top: -22
        // marginLeft: '50%'
    },
    track: {
        height: 2,
    },
    rail: {
        height: 2,
        opacity: 0.5,
        backgroundColor: '#bfbfbf',
    },
    mark: {
        backgroundColor: '#bfbfbf',
        height: 8,
        width: 1,
        marginTop: -3,
    },
    markActive: {
        opacity: 1,
        backgroundColor: 'currentColor',
    },
}))

defaultTheme: Theme = createTheme()

theme: Theme = defaultTheme

emptyTextStyle: object = {
    textAlign: 'center',
    marginBottom: 12,
    color: (theme: Theme) => darkSwitchGrey(theme),
}

DisabledTextField = styled(TextField)(({ theme }: { theme: Theme }) => ({
    "& .Mui-disabled": {
        color: theme.palette.text.primary,
        WebkitTextFillColor: theme.palette.text.primary,
    },
}))

makeTheme = (mode: 'dark'|'light') : Partial<Theme> => {
  console.log(mode);
  return createTheme({
    palette: {
      mode,
    },
  });
}

function MyApp({ Component, pageProps }: AppProps) {
  const [darkMode, setDarkMode] = useState<boolean>(false);

  useEffect(() => {
    const _item = localStorage.getItem("darkMode") ?? "false";
    setDarkMode(JSON.parse(_item));

    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement?.removeChild(jssStyles);
    }
  }, []);

  const theme: Theme = useMemo(
    () =>
      createTheme({
        palette: {
          mode: darkMode ? "dark" : "light",
          primary: {
            main: darkMode ? "#222432" : "#ffffff",
          },
          secondary: {
            main: darkMode ? "#0468d7" : "#0468d7",
          },
          background: {
            default: darkMode ? "#222432" : "#ffffff",
            paper: darkMode ? "#22293d" : "#f1f3f4",
          },
        },
      }),
    [darkMode]
  );

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline enableColorScheme />

      <Header
        isDarkMode={darkMode}
        onThemeChange={() => {
          localStorage.setItem("darkMode", (!darkMode).toString());
          setDarkMode(!darkMode);
        }}
      />
      <div
        style={{
          minHeight: "80vh",
        }}
      >
        <Component {...pageProps} />
      </div>

      <SubmitProposalSection />

      <Footer />
    </ThemeProvider>
  );
}

makeTheme = (variant: ThemeOptions): Theme => {
  const common: ThemeOptions = {
    palette: {
      error: {
        main: red.A400,
      },
      dracula,
      gradient: {
        primary:
          'linear-gradient(140deg, rgb(57, 45, 209) 0%, rgb(142, 41, 149) 100%);',
      },
    },
    shape: {
      borderRadius: 8,
    },
    typography: {
      fontFamily: [
        'Fira Sans Regular',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
    },

    components: {
      MuiCssBaseline: {
        styleOverrides: `
          @font-face {
            font-family: Fira Sans Regular;
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url(${FiraRegular}) format(truetype);
          }
          @font-face {
            font-family: Fira Code;
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url(${FiraCode}) format('woOpenTypeff2')
            local('Open Sans Regular'),
            local('OpenSans-Regular');
          }
        `,
      },
      MuiLink: {
        defaultProps: {
          underline: 'hover',
        },
      },
    },
  }

  const theme = createTheme(deepMerge(common, variant))
  return responsiveFontSizes(theme)
}

export function createToolpadTheme(themeNode?: appDom.ThemeNode | null): Theme {
  const options = themeNode ? createThemeOptions(appDom.fromConstPropValues(themeNode.theme)) : {};
  return createTheme(options);
}

containerStyles: SxProps<Theme> = {
  position: 'absolute' as const,
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
  p: 4,
}

RootDialog = styled(Dialog)(({ theme }: { theme: Theme }) => ({
    '& .MuiDialog-paper': {
        width: theme.spacing(40),
        margin: 0,
    },
    '& .MuiDialogTitle-root': {
        backgroundColor: theme.palette.primary.main,
        display: 'flex',
        justifyContent: 'space-between',
        lineHeight: theme.spacing(5),
        '& .MuiIconButton-root': {
            flexShrink: 1,
            padding: theme.spacing(),
            marginRight: theme.spacing(-1),
            color: theme.palette.grey[500],
        },
    },
    '& .MuiDialogContent-root': {
        padding: 0,
        '& .MuiCollapse-root': {
            '& .MuiList-root': {
                background: theme.palette.grey[900],
            },
        },
        '& .MuiList-root': {
            background: theme.palette.grey[900],
            padding: 0,
        },
        '& .MuiListItem-root': {
            boxShadow: 'inset 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.1)',
            '&:hover': {
                boxShadow:
                    'inset 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.1)' + ', 0 1px 0 0 ' + 'rgba(255, 255, 255, 0.05)',
            },
            padding: 0,
            '& .MuiButton-endIcon': {
                margin: 0,
            },
            '& .MuiButton-root': {
                color: theme.palette.text.primary,
                flexGrow: 1,
                justifyContent: 'space-between',
                padding: theme.spacing(1, 3),
                borderRadius: undefined,
                fontSize: '1rem',
                fontWeight: 400,
            },
            '& .MuiSvgIcon-root': {
                color: theme.palette.grey[500],
            },
        },
    },
}))

useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            width: '100%',
            borderRadius: '5px',
        },
        link: {
            color: '#fff',
            textDecoration: 'none',
            '&:hover': {
                textDecoration: 'underline',
            },
        },
        textVault: {
            fontFamily: 'Open Sans',
            lineHeight: '27px',
            fontSize: '18px',
            '&:hover': {
                fontSize: 19,
            },
        },
        warningIcon: {
            borderRadius: 3,
            padding: 1,
            boxShadow: '0px 0px 0px 0 rgba(0,0,0,0.2)',
        },
        list: {
            padding: 0,
        },
        alert: {
            background: 'transparent',
            color: 'red',
            fontWeight: 400,
        },

        divider: {
            background: '#1d265f',
            opacity: '0.3',
            marginLeft: '10px',
            marginRight: '10px',
        },
        accordion: {
            background: '#0a1d3f', // : '#006ae3',
            borderRadius: '8px',
            color: '#ffffff',
            marginTop: 10,
        },
        heading: {
            fontSize: theme.typography.pxToRem(15),
            fontWeight: 'lighter',
            // TODO: DEv Note: commenting type error, research why
            // fontWeight: theme.typography.fontWeightRegular,
        },
        deleteIcon: {
            color: '#ffffff',
            verticalAlign: 'middle',
        },
        resultText: {
            width: '90%',
            padding: '10px',
            color: 'white',
            textAlign: 'center',
        },
    })
)

useCellStyles = makeStyles<Theme, CellStyleProps & { disabled: boolean, removePadding?: boolean }>(theme => createStyles({
        tableCell: {
            position: "relative",
            height: "100%",
            width: "100%",
            border: "2px solid transparent",
            borderRadius: 4,
            overflow: "hidden",
            contain: "strict",
            display: "flex",
            padding: ({ size, removePadding }) => {
                if (removePadding) return 0;
                switch (size) {
                    case "l":
                    case "xl":
                        return theme.spacing(2);
                    case "m":
                        return theme.spacing(1);
                    case "s":
                        return theme.spacing(0.5);
                    default:
                        return theme.spacing(0.25);
                }
            },
            "&:hover": {
                backgroundColor: ({ disabled }: any) => disabled ? undefined : (theme.palette.mode === "dark" ? theme.palette.background.paper : theme.palette.background.default)
            },
            justifyContent: ({ align }) => {
                switch (align) {
                    case "right":
                        return "flex-end";
                    case "center":
                        return "center";
                    case "left":
                    default:
                        return "flex-start";
                }
            }
        },
        fullWidth: {
            width: "100%"
        },
        fullHeight: {
            height: "100%"
        },
        error: {
            border: `2px solid ${theme.palette.error.light} !important`
        },
        selected: {
            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : theme.palette.background.default,
            border: "2px solid #5E9ED6",
            transition: "border-color 300ms ease-in-out"
        },
        saved: {
            border: `2px solid ${theme.palette.success.light}`
        },
        disabled: {
            alpha: 0.8
        },
        iconsTop: {
            position: "absolute",
            top: 2,
            right: 2
        },
        arrow: {
            color: theme.palette.error.light
        },
        tooltip: {
            margin: "0 8px",
            backgroundColor: theme.palette.error.light
        },
        centered: {
            alignItems: "center"
        },
        faded: {
            "-webkit-mask-image": "linear-gradient(to bottom, black 60%, transparent 100%)",
            maskImage: "linear-gradient(to bottom, black 60%, transparent 100%)",
            alignItems: "start"
        },
        scrollable: {
            overflow: "auto",
            alignItems: "start"
        }
    })
)

useStyles = makeStyles((theme: Theme | undefined) =>
    createStyles({
        root: {
            maxWidth: 345,
        },
        media: {
            height: 0,
            paddingTop: '56.25%', // 16:9
        },
        expand: {
            transform: 'rotate(0deg)',
            marginLeft: 'auto',
            transition: theme?.transitions && theme.transitions.create('transform', {
                duration: theme.transitions.duration.shortest,
            }),
        },
        expandOpen: {
            transform: 'rotate(180deg)',
        },
        mainMenu: {
            width: '100%',
            maxWidth: '900px',
            margin: '0 auto',
        },
        itemList: {
            width: '100%',
            padding: '0 10px',
        },
        card: {
            margin: '15px 0'
        },
        cardActions: {
            padding: '0 8px'
        },
        cardHeader: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        cardTitle: {
            margin: '0 15px',
            fontSize: '16px',
            fontWeight: 400
        },
        cardContent: {
            padding: '15px',
            display: 'flex',
            flexDirection: 'column',
            width: '100%'
        },
        field: {
            width: '100%',
            margin: '10px 0'
        },
        sublinksList: {
            margin: '10px 0',
            padding: '10px',
            border: '1px solid #eee',
            borderRadius: '5px'
        },
        sublinkItem: {
            margin: '15px 0',
            padding: '15px 10px',
            display: 'flex',
            justifyContent: 'space-between'
        },
        sublinksTitle: {
            fontSize: '15px',
            fontWeight: 400
        },
        subField: {
            width: '40%',
            margin: '0 10px'
        },
        addBtn: {
            padding: '10px',
            display: 'flex',
            justifyContent: 'center'
        },
        saveBtn: {
            margin: '20px 0 0 auto'
        },
        "@global": {
            '.PluginMainMenu-paper': {
                boxShadow: '0 3px 6px 0 rgba(0, 0, 0, 0.04), 0 0 10px 3px rgba(0, 0, 0, 0.05)',
                backgroundColor: '#fff',
                borderRadius: '5px',
            },
            '.modeDark .PluginMainMenu-paper': {
                boxShadow: '0 3px 6px 0 rgba(0, 0, 0, 0.04), 0 0 10px 3px rgba(0, 0, 0, 0.05)',
                backgroundColor: '#222',
                borderRadius: '5px',
            },
        }
    }),
)

ClubDisplay = ({ club, error }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
    const router = useRouter();
    const [links, setLinks] = useState(null);
    const [tabValue, setTabValue] = useState(0);

    // When the club data is loaded, create the list of links
    useEffect(() => {
        // If the club is not loaded, do nothing.
        if (club === null) return;

        // Map the links in a club to a link object.
        setLinks(
            club.links.map((link) => (
                <Link
                    href={link}
                    variant="body1"
                    key={link}
                    target="_blank"
                    sx={{
                        display: 'block',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                    }}
                >
                    {link}
                </Link>
            ))
        );
    }, [club]);

    // If the user changes to the committees or execs tab,
    // update the state value to match.
    const handleTabChange = (event: React.SyntheticEvent<Element, Event>, newValue: number) => {
        setTabValue(newValue);
    };

    // Return to the previous page, but preserve the view
    // that was paassed in the URL (ie. keep table view)
    const back = () => {
        const prevView = getParams('view');
        router.push(`/clubs${prevView ? `?view=${prevView}` : ''}`);
    };

    // Show error message if errored
    if (error) {
        return (
            <PageWrapper>
                <TitleMeta title="Clubs" path={'/clubs'} />
                <RobotBlockMeta />
                <Loading error sx={{ marginBottom: 4 }}>
                    Could not get club data. Please reload the page or contact the site manager to fix this issue.
                </Loading>
            </PageWrapper>
        );
    }

    return (
        <PageWrapper>
            <ResourceMeta
                resource="clubs"
                name={club.name}
                path={`/clubs/${club.id}`}
                description={club.description}
                imgSrc={club.coverImg}
            />
            <RobotBlockMeta />
            <Container sx={{ maxWidth: { xl: '50%', md: '75%', xs: '100%' } }}>
                <AddButton color="secondary" label="Club" path={`/edit/clubs/${club.id}`} edit />
                <Card sx={{ marginBottom: 4 }}>
                    <CardMedia
                        sx={{
                            width: '100%',
                            height: 'auto',
                            display: 'block',
                        }}
                    >
                        <CustomImage
                            src={club.coverImg}
                            default="/default-cover.webp"
                            sx={{ width: '100%', height: 'auto' }}
                        />
                    </CardMedia>
                    <CardContent sx={{ padding: 3 }}>
                        <Typography sx={{ color: club.advised ? 'primary.main' : 'secondary.main' }}>
                            {club.advised ? 'Advised' : 'Independent'}
                        </Typography>
                        <Typography variant="h1">{club.name}</Typography>
                        <Paragraph
                            text={club.description}
                            sx={{ marginTop: 2, color: (theme: Theme) => darkSwitchGrey(theme) }}
                        />
                        <Typography variant="h6">Links</Typography>
                        {links}
                        <Tabs
                            centered
                            value={tabValue}
                            onChange={handleTabChange}
                            indicatorColor="secondary"
                            textColor="secondary"
                            aria-label="execs and committees tab"
                            sx={{ marginTop: 3 }}
                        >
                            <Tab label="Execs"></Tab>
                            <Tab label="Committees"></Tab>
                        </Tabs>
                        <Paper
                            elevation={0}
                            variant="outlined"
                            square
                            sx={{ paddingTop: 2, display: tabValue === 0 ? 'block' : 'none' }}
                        >
                            {club.execs.length === 0 ? (
                                <Typography sx={emptyTextStyle}>No execs...</Typography>
                            ) : (
                                club.execs.map((e) => <ExecCard exec={e} key={e.name}></ExecCard>)
                            )}
                        </Paper>
                        <Paper
                            elevation={0}
                            variant="outlined"
                            square
                            sx={{ paddingTop: 2, display: tabValue === 1 ? 'block' : 'none' }}
                        >
                            {club.committees.length === 0 ? (
                                <Typography sx={emptyTextStyle}>No committees...</Typography>
                            ) : (
                                club.committees.map((c) => <CommitteeCard committee={c} key={c.name}></CommitteeCard>)
                            )}
                        </Paper>
                    </CardContent>
                    <CardActions>
                        <Button size="small" onClick={back} sx={{ margin: 'auto' }}>
                            Back
                        </Button>
                    </CardActions>
                </Card>
            </Container>
        </PageWrapper>
    );
}

export default function BalanceHistoryGraph({ group, accountID }) {
    const theme: Theme = useTheme();
    const balanceHistory = useRecoilValue(accountBalanceHistory({ groupID: group.id, accountID: accountID }));
    const history = useHistory();

    const transactionMap = useRecoilValue(transactionByIDMap(group.id));
    const accountMap = useRecoilValue(accountByIDMap(group.id));

    const onClick = (evt) => {
        if (evt.activePayload.length > 0) {
            const payload = evt.activePayload[0].payload;
            if (payload.changeOrigin.type === "clearing") {
                history.push(`/groups/${group.id}/accounts/${payload.changeOrigin.id}`);
            } else {
                history.push(`/groups/${group.id}/transactions/${payload.changeOrigin.id}`);
            }
        }
    };

    const renderTooltip = ({ payload, label, active }) => {
        if (!active) {
            return null;
        }

        const changeOrigin = payload[0].payload.changeOrigin;

        const icon =
            changeOrigin.type === "clearing" ? (
                <ClearingAccountIcon color="primary" fontSize="small" />
            ) : transactionMap[changeOrigin.id].type === "purchase" ? (
                <PurchaseIcon color="primary" sx={{ fontSize: theme.typography.fontSize }} />
            ) : (
                <TransferIcon color="primary" fontSize="small" />
            );

        return (
            <Box
                sx={{
                    backgroundColor: theme.palette.background.paper,
                    borderColor: theme.palette.divider,
                    borderRadius: theme.shape.borderRadius,
                    borderWidth: "1px",
                    borderStyle: "solid",
                    padding: 2,
                }}
            >
                <div style={{ display: "flex", justifyContent: "space-between" }}>
                    <Typography variant="body1" component="span">
                        {DateTime.fromSeconds(payload[0].payload.date).toISODate()} {icon}
                    </Typography>
                    <Typography
                        component="span"
                        sx={{ color: (theme) => balanceColor(payload[0].value, theme), ml: 2 }}
                    >
                        {payload[0].value} {group.currency_symbol}
                    </Typography>
                </div>
                <Divider />
                {payload[0].payload.changeOrigin.type === "clearing" ? (
                    <Typography variant="body1">{accountMap[payload[0].payload.changeOrigin.id].name}</Typography>
                ) : (
                    <Typography variant="body1">
                        {transactionMap[payload[0].payload.changeOrigin.id].description}
                    </Typography>
                )}
            </Box>
        );
    };

    return (
        <ResponsiveContainer width="100%" height={300}>
            <LineChart
                width={730}
                height={250}
                onClick={onClick}
                data={balanceHistory}
                margin={{
                    top: 5,
                    right: 30,
                    left: 20,
                    bottom: 5,
                }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis
                    dataKey="date"
                    stroke={theme.palette.text.primary}
                    type="number"
                    tickFormatter={(unixTime) => DateTime.fromSeconds(unixTime).toISODate()}
                    domain={["dataMin", "dataMax"]}
                />
                <YAxis
                    tickFormatter={(value) => value.toFixed(2)}
                    type="number"
                    unit={group.currency_symbol}
                    stroke={theme.palette.text.primary}
                />
                <Tooltip content={renderTooltip} />
                <Legend />
                <Line type="stepAfter" dataKey="balance" />
            </LineChart>
        </ResponsiveContainer>
    );
}