continue removing makeStyles

Author: rdonigian

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/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,29 @@ 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),
+            }
+          : undefined
+      }
+    >
       {/* 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}
+          style={{
+            marginTop: theme.spacing(3),
+          }}
+        >
           <Grid item>
             <Button
               onClick={() => navigate(-1)}

src/components/FieldOverviewCard/FieldOverviewCard.tsx

@@ -5,49 +5,18 @@ import {
   CardActions,
   Grid,
   Skeleton,
+  Stack,
   Tooltip,
   TooltipProps,
   Typography,
 } from '@mui/material';
 import { To } from 'history';
 import { ReactNode } from 'react';
-import { makeStyles } from 'tss-react/mui';
 import { DateTimeOrISO } from '~/common';
 import { FormattedDateTime } from '../Formatters';
 import { HugeIcon, HugeIconProps } from '../Icons';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
 
-const useStyles = makeStyles()(({ spacing, palette }) => ({
-  root: {
-    flex: 1,
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  topArea: {
-    flex: 1,
-    display: 'flex',
-    justifyContent: 'space-evenly',
-    padding: spacing(3, 4),
-  },
-  rightContent: {
-    flex: 1,
-    alignSelf: 'flex-start',
-    paddingLeft: spacing(4),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-evenly',
-  },
-  emptyValue: {
-    color: palette.action.disabled,
-  },
-  bottomArea: {
-    paddingRight: spacing(1),
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-}));
-
 interface FieldOverviewCardData {
   value?: ReactNode;
   updatedAt?: DateTimeOrISO;
@@ -82,30 +51,36 @@ export const FieldOverviewCard = ({
   title,
   viewLabel: buttonLabel,
 }: FieldOverviewCardProps) => {
-  const { classes, cx } = useStyles();
+  // Styles removed, now using sx and component props
 
   const showData = !loading && !redacted;
   const ActionArea = showData && data?.to ? CardActionAreaLink : CardActionArea;
   const Btn = data?.to ? ButtonLink : Button;
 
   const card = (
-    <Card className={cx(classes.root, className)}>
+    <Card
+      className={className}
+      sx={{ flex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}
+    >
       <ActionArea
         disabled={!data || redacted}
         to={data?.to ?? ''}
-        className={classes.topArea}
+        sx={{
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          p: [3, 4],
+        }}
         onClick={onClick}
       >
         <HugeIcon icon={icon} loading={!data} />
-        <div className={classes.rightContent}>
+        <Stack flex={1} alignSelf="flex-start" pl={4} spacing={2}>
           <Typography variant="h4">
             {loading ? <Skeleton width="80%" /> : data ? title : ''}
           </Typography>
           <Typography
             variant="h1"
-            className={cx({
-              [classes.emptyValue]: data && !data.value,
-            })}
+            sx={data && !data.value ? { color: 'action.disabled' } : undefined}
           >
             {loading || redacted ? (
               <Skeleton animation={loading ? 'pulse' : false} />
@@ -115,15 +90,19 @@ export const FieldOverviewCard = ({
               ''
             )}
           </Typography>
-        </div>
+        </Stack>
       </ActionArea>
       {buttonLabel && (
         <CardActions>
           <Grid
             container
             spacing={loading ? 4 : 2}
             wrap="nowrap"
-            className={classes.bottomArea}
+            sx={{
+              pr: 1,
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
           >
             <Grid item xs={loading}>
               <Btn

src/components/FundingAccountCard/FundingAccountCard.tsx

@@ -1,47 +1,30 @@
 import { Card, CardActions, CardContent, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { DisplaySimpleProperty } from '../DisplaySimpleProperty';
 import { FormattedDateTime } from '../Formatters';
 import { FundingAccountCardFragment } from './FundingAccountCard.graphql';
 
-const useStyles = makeStyles()(({ spacing }) => {
-  return {
-    root: {
-      width: '100%',
-      maxWidth: 400,
-    },
-    name: {
-      marginBottom: spacing(2),
-    },
-    cardActions: {
-      justifyContent: 'flex-end',
-    },
-  };
-});
-
 interface FundingAccountCardProps {
   className?: string;
   fundingAccount: FundingAccountCardFragment;
 }
 
+// Candidate for Removal
 export const FundingAccountCard = ({
   className,
   fundingAccount,
 }: FundingAccountCardProps) => {
-  const { classes, cx } = useStyles();
-
   return (
-    <Card className={cx(classes.root, className)}>
+    <Card className={className} sx={{ width: '100%', maxWidth: 400 }}>
       <CardContent>
-        <Typography variant="h4" className={classes.name}>
+        <Typography variant="h4" sx={{ mb: 2 }}>
           {fundingAccount.name.value}
         </Typography>
         <DisplaySimpleProperty
           label="Account Number"
           value={fundingAccount.accountNumber.value}
         />
       </CardContent>
-      <CardActions className={classes.cardActions}>
+      <CardActions sx={{ justifyContent: 'flex-end' }}>
         <Typography variant="caption" color="textSecondary">
           Created <FormattedDateTime date={fundingAccount.createdAt} />
         </Typography>

src/components/LanguageEngagementListItemCard/LanguageEngagementListItemCard.tsx

@@ -3,9 +3,9 @@ import {
   CardActions,
   CardContent,
   Grid,
+  Stack,
   Typography,
 } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { EngagementStatusLabels } from '~/api/schema.graphql';
 import { labelFrom } from '~/common';
 import { idForUrl } from '../Changeset';
@@ -14,33 +14,6 @@ import { useNumberFormatter } from '../Formatters';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
 import { LanguageEngagementListItemFragment } from './LanguageEngagementListItem.graphql';
 
-const useStyles = makeStyles()(({ spacing }) => ({
-  root: {
-    width: '100%',
-  },
-  card: {
-    display: 'flex',
-    alignItems: 'initial',
-  },
-
-  cardContent: {
-    flex: 1,
-    padding: spacing(2, 3),
-    display: 'flex',
-  },
-  leftContent: {
-    flex: 1,
-  },
-  rightContent: {
-    flex: 0,
-    textAlign: 'right',
-    marginLeft: spacing(2),
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-  },
-}));
-
 export type LanguageEngagementListItemCardProps =
   LanguageEngagementListItemFragment & {
     className?: string;
@@ -52,7 +25,6 @@ export const LanguageEngagementListItemCard = (
   const { language: securedLanguage, className, status, products } = props;
 
   const numberFormatter = useNumberFormatter();
-  const { classes, cx } = useStyles();
 
   const language = securedLanguage.value;
   const name = language?.name.value ?? language?.displayName.value;
@@ -62,18 +34,28 @@ export const LanguageEngagementListItemCard = (
   const ethnologueCode = language?.ethnologue.code.value;
 
   return (
-    <Card className={cx(classes.root, className)}>
+    <Card className={className} sx={{ width: '100%' }}>
       <CardActionAreaLink
         to={`/engagements/${idForUrl(props)}`}
-        className={classes.card}
+        sx={{
+          display: 'flex',
+          alignItems: 'initial',
+        }}
       >
-        <CardContent className={classes.cardContent}>
+        <CardContent
+          sx={{
+            flex: 1,
+            px: 3,
+            py: 2,
+            display: 'flex',
+          }}
+        >
           <Grid
             container
             direction="column"
             justifyContent="space-between"
             spacing={1}
-            className={classes.leftContent}
+            sx={{ flex: 1 }}
           >
             <Grid item>
               <Typography variant="h4">{name}</Typography>
@@ -99,7 +81,14 @@ export const LanguageEngagementListItemCard = (
               wrap={(node) => <Grid item>{node}</Grid>}
             />
           </Grid>
-          <div className={classes.rightContent}>
+          <Stack
+            sx={{
+              flex: 0,
+              textAlign: 'right',
+              ml: 2,
+              justifyContent: 'flex-end',
+            }}
+          >
             <DisplaySimpleProperty aria-hidden="true" />
             <div>
               <Typography variant="h1">
@@ -109,7 +98,7 @@ export const LanguageEngagementListItemCard = (
                 Goals
               </Typography>
             </div>
-          </div>
+          </Stack>
         </CardContent>
       </CardActionAreaLink>
       <CardActions>