Tech Debt - Removing makeStyles

src/components/Avatar/Avatar.stories.tsx

@@ -1,24 +1,13 @@
-import { makeStyles } from '@mui/material';
 import { CreateNewFolder } from '@mui/icons-material';
-import { select } from '@storybook/addon-knobs';
 import { Avatar as A, AvatarProps } from './Avatar';
 
 export default {
   title: 'Components/Avatar',
 };
 
-const useStyles = makeStyles(() => ({
-  color: {
-    backgroundColor: '#467F3B',
-  },
-}));
-
 const GenericAvatar = (props: AvatarProps) => (
   <>
-    <A
-      variant={select('Variant', ['square', 'rounded', 'circle'], 'circle')}
-      {...props}
-    />
+    <A variant="circular" {...props} />
     <br></br>
     <br></br>
     <a href="https://material-ui.com/api/avatar/">MUI Docs</a>
@@ -33,8 +22,7 @@ export const Image = () => (
 );
 
 export const Initials = () => {
-  const classes = useStyles();
-  return <GenericAvatar children="JS" className={classes.color} />;
+  return <GenericAvatar children="JS" sx={{ backgroundColor: '#467F3B' }} />;
 };
 
 export const Loading = () => <GenericAvatar loading={true} />;

src/components/Avatar/Avatar.tsx

@@ -3,35 +3,26 @@ import {
   AvatarProps as MuiAvatarProps,
   Skeleton,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 
 export interface AvatarProps extends MuiAvatarProps {
   loading?: boolean;
 }
 
-const useStyles = makeStyles()(() => ({
-  loading: {
-    backgroundColor: 'transparent',
-  },
-  skeleton: {
-    width: '100%',
-    height: '100%',
-  },
-}));
-
 export const Avatar = ({ loading, ...props }: AvatarProps) => {
   const { alt, src, srcSet, sizes, children, ...rest } = props;
-  const { classes } = useStyles();
   return (
     <MuiAvatar
-      {...(loading ? rest : props)}
-      classes={{
-        ...props.classes,
-        colorDefault: loading ? classes.loading : props.classes?.colorDefault,
+      sx={{
+        ...(loading && { backgroundColor: 'transparent' }),
+        ...props.sx,
       }}
+      {...(loading ? rest : props)}
     >
       {loading ? (
-        <Skeleton variant="rectangular" className={classes.skeleton} />
+        <Skeleton
+          variant="rectangular"
+          sx={{ width: '100%', height: '100%' }}
+        />
       ) : (
         children
       )}

src/components/BudgetOverviewCard/BudgetOverviewCard.tsx

@@ -11,15 +11,13 @@ export interface BudgetOverviewCardProps extends FieldOverviewCardProps {
 }
 
 export const BudgetOverviewCard = ({
-  className,
   budget,
   loading,
 }: BudgetOverviewCardProps) => {
   const formatCurrency = useCurrencyFormatter();
 
   return (
     <FieldOverviewCard
-      className={className}
       title="Field Budget"
       viewLabel="Budget Details"
       loading={loading}

src/components/Changeset/ChangesetBanner.tsx

@@ -4,33 +4,26 @@ import {
   Edit as EditIcon,
 } from '@mui/icons-material';
 import { Alert, AlertTitle, Tooltip } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { IconButton } from '../IconButton';
 
-const useStyles = makeStyles()(({ spacing, breakpoints }) => ({
-  root: {
-    maxWidth: breakpoints.values.md,
-    margin: spacing(0, 2),
-  },
-}));
-
 interface Props {
   changesetId: string | undefined;
   onEdit?: () => void;
   onClose?: () => void;
 }
 
 export const ChangesetBanner = (props: Props) => {
-  const { classes } = useStyles();
-
   if (!props.changesetId) {
     return null;
   }
   return (
     <Alert
       severity="info"
       icon={<ChangeIcon fontSize="inherit" />}
-      className={classes.root}
+      sx={(theme) => ({
+        maxWidth: theme.breakpoints.values.md,
+        margin: theme.spacing(0, 2),
+      })}
       action={
         <>
           {props.onEdit && (

src/components/Changeset/PropertyDiff.tsx

@@ -1,59 +1,51 @@
 import { Grid, Typography } from '@mui/material';
 import { alpha as fade } from '@mui/material/styles';
 import { ReactNode } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { Sx } from '~/common';
-
-const useStyles = makeStyles()(({ palette, shape, spacing }) => ({
-  diff: {
-    marginTop: spacing(0.5),
-  },
-  diffItem: {
-    padding: spacing(0, 0.5),
-    borderRadius: shape.borderRadius,
-  },
-  previous: {
-    textDecoration: 'line-through',
-    color: palette.error.main,
-    background: fade(palette.error.light, 0.5),
-  },
-  current: {
-    color: palette.primary.dark,
-    background: fade(palette.primary.main, 0.5),
-  },
-}));
+import { extendSx, Sx } from '~/common';
 
 export const PropertyDiff = <T extends any>({
   previous,
   current,
   labelBy,
   sx,
-  className,
 }: {
   previous: T;
   current: T;
   labelBy?: (item: T) => ReactNode;
   sx?: Sx;
-  className?: string;
 }) => {
-  const { classes, cx } = useStyles();
   return (
     <Grid
       container
       direction="column"
       alignItems="flex-start"
-      className={cx(classes.diff, className)}
-      sx={sx}
+      sx={[
+        {
+          mt: 0.5,
+        },
+        ...extendSx(sx),
+      ]}
     >
       <Typography
-        className={cx(classes.diffItem, classes.previous)}
         gutterBottom
         display="inline"
+        sx={(theme) => ({
+          padding: theme.spacing(0, 0.5),
+          borderRadius: theme.shape.borderRadius,
+          textDecoration: 'line-through',
+          color: theme.palette.error.main,
+          background: fade(theme.palette.error.light, 0.5),
+        })}
       >
         {labelBy ? labelBy(previous) : (previous as ReactNode)}
       </Typography>
       <Typography
-        className={cx(classes.diffItem, classes.current)}
+        sx={(theme) => ({
+          padding: theme.spacing(0, 0.5),
+          borderRadius: theme.shape.borderRadius,
+          color: theme.palette.primary.dark,
+          background: fade(theme.palette.primary.main, 0.5),
+        })}
         display="inline"
       >
         {labelBy ? labelBy(current) : (current as ReactNode)}

src/components/Dialog/DialogForm.tsx

@@ -16,7 +16,6 @@ import { FormApi } from 'final-form';
 import { mergeWith } from 'lodash';
 import { ReactNode, useCallback, useMemo, useRef } from 'react';
 import { FormRenderProps, RenderableProps } from 'react-final-form';
-import { makeStyles } from 'tss-react/mui';
 import { Except } from 'type-fest';
 import { inChangesetVar } from '~/api';
 import { callAll } from '~/common';
@@ -69,12 +68,6 @@ export type DialogFormProps<T, R = void> = Omit<
     | ((props: Except<FormRenderProps<T>, 'handleSubmit'>) => ReactNode);
 } & Pick<DialogProps, 'TransitionProps'>;
 
-const useStyles = makeStyles()(() => ({
-  spacer: {
-    flex: 1,
-  },
-}));
-
 const defaultDecorators = [
   focusFirstFieldRegistered,
   focusFirstFieldWithSubmitError,
@@ -100,7 +93,6 @@ export function DialogForm<T, R = void>({
   TransitionProps,
   ...FormProps
 }: DialogFormProps<T, R>) {
-  const { classes } = useStyles();
   const inChangeset = useReactiveVar(inChangesetVar);
   const formRef = useRef<FormApi<T> | undefined>();
 
@@ -174,7 +166,7 @@ export function DialogForm<T, R = void>({
               {leftAction ? (
                 <>
                   {leftAction}
-                  <div className={classes.spacer} />
+                  <div style={{ flex: 1 }} />
                 </>
               ) : null}
               {closeLabel !== false && (

src/components/Error/Error.tsx

@@ -1,25 +1,15 @@
 import { ApolloError } from '@apollo/client';
 import { Button, Grid, Typography } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { usePrevious } from 'ahooks';
 import { isPlainObject } from 'lodash';
 import { ElementType, isValidElement, ReactNode, useEffect } from 'react';
 import { useErrorBoundary } from 'react-error-boundary';
 import { useLocation } from 'react-router-dom';
-import { makeStyles } from 'tss-react/mui';
 import { getErrorInfo } from '~/api';
 import { ButtonLink, StatusCode, useNavigate } from '../Routing';
 import { ErrorRenderers, renderError } from './error-handling';
 
-const useStyles = makeStyles()(({ spacing }) => ({
-  page: {
-    overflow: 'auto',
-    padding: spacing(4, 0, 0, 4),
-  },
-  buttons: {
-    marginTop: spacing(3),
-  },
-}));
-
 export interface ErrorProps {
   /**
    * The error body to display.
@@ -62,8 +52,8 @@ export const Error = ({
   disableButtons,
   component: Component = 'div',
 }: ErrorProps) => {
-  const { classes, cx } = useStyles();
   const navigate = useNavigate();
+  const theme = useTheme();
 
   useResetErrorOnLocationChange();
 
@@ -87,14 +77,21 @@ export const Error = ({
     error && getErrorInfo(error).codes.includes('NotFound') ? 404 : 500;
 
   return (
-    <Component className={cx(page && classes.page)}>
+    <Component
+      style={{
+        ...(page && {
+          overflow: 'auto',
+          padding: theme.spacing(4, 0, 0, 4),
+        }),
+      }}
+    >
       {/* Default status code to be helpful for the most common ones. The
       children can still override this by rendering <StatusCode /> themselves */}
       <StatusCode code={statusCode} />
       <Typography gutterBottom>Oops, Sorry.</Typography>
       {rendered}
       {!disableButtons && (
-        <Grid container spacing={3} className={classes.buttons}>
+        <Grid container spacing={3} sx={{ mt: 3 }}>
           <Grid item>
             <Button
               onClick={() => navigate(-1)}