Tech Debt - Continue removing makeStyles part 2

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/Debug/Code.tsx

@@ -1,6 +1,6 @@
 import { Box, BoxProps } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { ChildrenProp } from '~/common';
+import { ChildrenProp, extendSx } from '~/common';
 
 interface CodeProps extends Omit<BoxProps, 'component'> {
   json?: any;
@@ -15,18 +15,15 @@ export const Code = ({
   return (
     <Box
       component="pre"
-      sx={{
-        p: 1,
-        borderRadius: 1,
-        margin: 0,
-        color: 'common.white',
-        bgcolor: 'grey.800',
-        fontFamily: 'monospace',
-        fontSize: '0.875rem',
-        overflow: 'auto',
-        whiteSpace: 'pre-wrap',
-        ...sx,
-      }}
+      sx={[
+        (theme) => ({
+          padding: theme.spacing(1),
+          borderRadius: theme.shape.borderRadius,
+          color: theme.palette.background.paper,
+          backgroundColor: theme.palette.grey[800],
+        }),
+        ...extendSx(sx),
+      ]}
       {...rest}
     >
       {json ? JSON.stringify(json, undefined, 2) : children}

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,23 @@ 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} sx={{ mt: 3 }}>
           <Grid item>
             <Button
               onClick={() => navigate(-1)}

src/components/FieldOverviewCard/FieldOverviewCard.tsx

@@ -3,57 +3,29 @@ import {
   Card,
   CardActionArea,
   CardActions,
+  CardProps,
   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 { DateTimeOrISO, extendSx } 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;
   to?: To;
 }
 
+// removed duplicate import
+
 export interface FieldOverviewCardProps extends Pick<HugeIconProps, 'icon'> {
   className?: string;
   data?: FieldOverviewCardData;
@@ -65,6 +37,7 @@ export interface FieldOverviewCardProps extends Pick<HugeIconProps, 'icon'> {
   redacted?: boolean;
   title?: string;
   viewLabel?: string;
+  CardProps?: CardProps;
 }
 
 const DEFAULT_EMPTY = <>&nbsp;</>;
@@ -81,31 +54,45 @@ export const FieldOverviewCard = ({
   redacted,
   title,
   viewLabel: buttonLabel,
+  CardProps,
 }: FieldOverviewCardProps) => {
-  const { classes, cx } = useStyles();
-
   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',
+        },
+        ...extendSx(CardProps?.sx),
+      ]}
+    >
       <ActionArea
         disabled={!data || redacted}
         to={data?.to ?? ''}
-        className={classes.topArea}
+        sx={{
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          py: 3,
+          px: 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 +102,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>