small styling fixes

Author: rdonigian

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,17 @@ 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) => ({
+          root: {
+            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

@@ -93,13 +93,7 @@ export const Error = ({
       <Typography gutterBottom>Oops, Sorry.</Typography>
       {rendered}
       {!disableButtons && (
-        <Grid
-          container
-          spacing={3}
-          style={{
-            marginTop: theme.spacing(3),
-          }}
-        >
+        <Grid container spacing={3} sx={{ mt: 3 }}>
           <Grid item>
             <Button
               onClick={() => navigate(-1)}

src/components/FieldOverviewCard/FieldOverviewCard.tsx

@@ -3,6 +3,7 @@ import {
   Card,
   CardActionArea,
   CardActions,
+  CardProps,
   Grid,
   Skeleton,
   Stack,
@@ -12,7 +13,7 @@ import {
 } from '@mui/material';
 import { To } from 'history';
 import { ReactNode } from 'react';
-import { DateTimeOrISO } from '~/common';
+import { DateTimeOrISO, extendSx } from '~/common';
 import { FormattedDateTime } from '../Formatters';
 import { HugeIcon, HugeIconProps } from '../Icons';
 import { ButtonLink, CardActionAreaLink } from '../Routing';
@@ -23,6 +24,8 @@ interface FieldOverviewCardData {
   to?: To;
 }
 
+// removed duplicate import
+
 export interface FieldOverviewCardProps extends Pick<HugeIconProps, 'icon'> {
   className?: string;
   data?: FieldOverviewCardData;
@@ -34,6 +37,7 @@ export interface FieldOverviewCardProps extends Pick<HugeIconProps, 'icon'> {
   redacted?: boolean;
   title?: string;
   viewLabel?: string;
+  CardProps?: CardProps;
 }
 
 const DEFAULT_EMPTY = <>&nbsp;</>;
@@ -50,17 +54,24 @@ export const FieldOverviewCard = ({
   redacted,
   title,
   viewLabel: buttonLabel,
+  CardProps,
 }: FieldOverviewCardProps) => {
-  // 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={className}
-      sx={{ flex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}
+      sx={[
+        {
+          flex: 1,
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+        },
+        ...extendSx(CardProps?.sx),
+      ]}
     >
       <ActionArea
         disabled={!data || redacted}
@@ -69,7 +80,8 @@ export const FieldOverviewCard = ({
           flex: 1,
           display: 'flex',
           justifyContent: 'space-evenly',
-          p: [3, 4],
+          py: 3,
+          px: 4,
         }}
         onClick={onClick}
       >

src/components/MemberListSummary/MemberListSummary.tsx

@@ -7,7 +7,6 @@ import {
 } from '@mui/material';
 import { To } from 'history';
 import { compact } from 'lodash';
-// Removed makeStyles, using sx prop for layout and spacing
 import { listOrPlaceholders } from '~/common';
 import { Avatar } from '../Avatar';
 import { HugeIcon, HugeIconProps } from '../Icons';

src/components/MethodologiesCard/MethodologiesCard.tsx

@@ -82,9 +82,9 @@ export const MethodologiesCard = ({
   );
 
   return (
-    <Card className={className} sx={{ width: '100%', height: '100%' }}>
+    <Card className={className} sx={{ width: '1', height: '1' }}>
       {data?.canEdit ? (
-        <CardActionArea onClick={onClick} sx={{ height: '100%' }}>
+        <CardActionArea onClick={onClick} sx={{ height: '1' }}>
           {content}
         </CardActionArea>
       ) : (

src/components/PartnerListItemCard/PartnerListItemCard.tsx

@@ -1,6 +1,5 @@
 import { Card, CardContent, Skeleton, Stack, Typography } from '@mui/material';
 import { random } from 'lodash';
-// Removed makeStyles, using sx prop for layout and positioning
 import { PartialDeep } from 'type-fest';
 import { PartnersQueryVariables } from '../../scenes/Partners/List/PartnerList.graphql';
 import { CardActionAreaLink } from '../Routing';

src/components/ProgressButton/ProgressButton.tsx

@@ -32,6 +32,10 @@ export const ProgressButton = forwardRef<
     <>
       {progress ? (
         <div
+          // This is to center spinner within button, while maintaining consistent button width.
+          // If we were to replace the button text, the button size could change which we want to
+          // avoid because the buttons shifting around is jarring for the user. Esp since the
+          // spinner is only shown for a short time.
           style={{
             position: 'absolute',
             inset: 0,

src/components/ProjectChangeRequestListItem/ProjectChangeRequestListItem.tsx

@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   Card,
   CardActions,
@@ -7,7 +8,6 @@ import {
   Tooltip,
   Typography,
 } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
 import { ProjectChangeRequestTypeLabels } from '~/api/schema.graphql';
 import { labelsFrom } from '~/common';
 import { useProjectId } from '../../scenes/Projects/useProjectId';
@@ -27,7 +27,6 @@ export const ProjectChangeRequestListItem = ({
 }: ProjectChangeRequestListItemProps) => {
   const { projectId, changesetId: currentlyViewing } = useProjectId();
   const navigate = useNavigate();
-  const theme = useTheme();
 
   return (
     <Card className={className}>
@@ -51,14 +50,7 @@ export const ProjectChangeRequestListItem = ({
           >
             {!data ? <Skeleton width="100%" /> : data.status.value}
           </Typography>
-          <span
-            style={{
-              color: theme.palette.text.secondary,
-              margin: theme.spacing(0, 1),
-            }}
-          >
-            —
-          </span>
+          <Box sx={{ color: 'text.secondary', mx: 1 }}>—</Box>
           <Typography
             component="span"
             variant="inherit"
@@ -84,10 +76,11 @@ export const ProjectChangeRequestListItem = ({
         </Typography>
       </CardContent>
       <CardActions
-        sx={{
+        sx={(theme) => ({
           display: 'flex',
+          justifyContent: 'space-between',
           padding: theme.spacing(1, 2, 1, 1),
-        }}
+        })}
       >
         {!data || data.canEdit ? (
           <Button
@@ -105,7 +98,6 @@ export const ProjectChangeRequestListItem = ({
             Review
           </Button>
         </Tooltip>
-        <div style={{ flex: 1 }} />
         <Typography variant="subtitle2" color="textSecondary">
           {!data ? (
             <Skeleton width="23ch" />

src/components/Redacted/Redacted.tsx

@@ -1,6 +1,6 @@
 import { Skeleton, SkeletonProps, Tooltip, TooltipProps } from '@mui/material';
 import { Except } from 'type-fest';
-import { ChildrenProp } from '~/common';
+import { ChildrenProp, extendSx } from '~/common';
 
 export interface RedactedProps {
   info: TooltipProps['title'];
@@ -22,10 +22,12 @@ export const Redacted = ({
         animation={false}
         width={width}
         {...SkeletonProps}
-        sx={{
-          transform: 'initial',
-          ...SkeletonProps?.sx,
-        }}
+        sx={[
+          {
+            text: 'initial',
+          },
+          ...extendSx(SkeletonProps?.sx),
+        ]}
       >
         {children}
       </Skeleton>

src/components/Upload/UploadItem.tsx

@@ -82,33 +82,21 @@ export const UploadItem = (props: UploadItemProps) => {
         )}
       </Stack>
       {error ? (
-        <IconButton
-          aria-label="clear"
-          onClick={onClear}
-          sx={(theme) => ({
-            color: theme.palette.error.main,
-          })}
-        >
+        <IconButton aria-label="clear" onClick={onClear} color="error">
           <CancelIcon />
         </IconButton>
       ) : completedAt ? (
         <IconButton
           aria-label="completed"
+          color="error"
           onClick={() => console.log('TODO: Add onCompleted click handler')}
-          sx={(theme) => ({
-            color: theme.palette.error.main,
-          })}
         >
-          <CheckIcon
-            sx={(theme) => ({
-              color: theme.palette.primary.main,
-            })}
-          />
+          <CheckIcon color="primary" />
         </IconButton>
       ) : (
-        <div
-          style={{
-            padding: '12px',
+        <Box
+          sx={{
+            p: '12px',
           }}
         >
           <CircularProgress
@@ -117,7 +105,7 @@ export const UploadItem = (props: UploadItemProps) => {
             thickness={4.6}
             value={percentCompleted}
           />
-        </div>
+        </Box>
       )}
     </Box>
   );