refactor: refactor some css to improve compatibility with future changes

Author: OliverDudgeon

src/components/BaseCard.tsx

@@ -103,9 +103,9 @@ export const BaseCard = ({
             sx={(theme) => ({
               marginLeft: "auto",
               transform: `rotate(${expanded ? 180 : 0}deg)`,
-              transition: `${theme.transitions.create("transform", {
+              transition: theme.transitions.create("transform", {
                 duration: theme.transitions.duration.shortest,
-              })}`,
+              }),
             })}
             onClick={() => {
               setExpanded(!expanded);

src/components/DataTable/DataTable.tsx

@@ -263,13 +263,7 @@ export const DataTable = <Data extends Record<string, any>>(props: DataTableProp
   const tableContents = (
     <>
       {!!ToolbarChild || !!enableSearch ? (
-        <Toolbar
-          sx={(theme) => ({
-            pt: 2,
-            alignItems: "flex-start",
-            gap: theme.spacing(1),
-          })}
-        >
+        <Toolbar sx={{ pt: 2, alignItems: "flex-start", gap: 1 }}>
           {ToolbarChild}
           {!!enableSearch && (
             <TextField
@@ -342,11 +336,9 @@ export const DataTable = <Data extends Record<string, any>>(props: DataTableProp
                     <TableCell
                       {...customCellProps}
                       key={cell.id}
-                      sx={{
-                        pl: cell.column.getCanSort()
-                          ? (theme) => theme.spacing(2 + 2 * row.depth)
-                          : undefined,
-                      }}
+                      sx={(theme) => ({
+                        pl: cell.column.getCanSort() ? theme.spacing(2 + 2 * row.depth) : undefined,
+                      })}
                     >
                       {flexRender(cell.column.columnDef.cell, cell.getContext())}
                     </TableCell>

src/components/instances/JobDetails/JobLink.tsx

@@ -72,7 +72,7 @@ export const JobLink = ({ projectId, path: originalPath, isFile }: JobLinkProps)
         sx={{
           alignItems: "center",
           display: "flex",
-          gap: (theme) => theme.spacing(1),
+          gap: 1,
           wordBreak: "break-all",
         }}
       >
@@ -101,7 +101,7 @@ export const JobLink = ({ projectId, path: originalPath, isFile }: JobLinkProps)
   }
 
   return (
-    <Box sx={{ alignItems: "center", display: "flex", gap: (theme) => theme.spacing(1) }}>
+    <Box sx={{ alignItems: "center", display: "flex", gap: 1 }}>
       <Tooltip title="Show directory in project">
         <A
           legacyBehavior

src/components/logo/HeaderLogo.tsx

@@ -23,6 +23,5 @@ export const HeaderLogo = () => {
 const LogoLink = styled(NextLink)(({ theme }) => ({
   display: "inline-block",
   maxHeight: "68px",
-  paddingTop: theme.spacing(0.5),
-  paddingBottom: theme.spacing(0.5),
+  padding: theme.spacing(0.5, 0),
 }));

src/components/modals/ModalWrapper.tsx

@@ -9,7 +9,6 @@ import {
   DialogTitle,
   IconButton,
   Typography,
-  useTheme,
 } from "@mui/material";
 
 import { SlideUpTransition } from "../SlideUpTransition";
@@ -51,7 +50,6 @@ export const ModalWrapper: React.FC<ModalWrapperProps> = ({
   onSubmit,
   DialogProps,
 }) => {
-  const theme = useTheme();
   return (
     <Dialog
       {...DialogProps}
@@ -66,13 +64,13 @@ export const ModalWrapper: React.FC<ModalWrapperProps> = ({
         </Typography>
         <IconButton
           size="small"
-          sx={{
+          sx={(theme) => ({
             zIndex: theme.zIndex.appBar + 1,
             position: "absolute",
             right: theme.spacing(2),
             top: theme.spacing(1.5),
             color: "text.primary",
-          }}
+          })}
           onClick={onClose}
         >
           <CloseRoundedIcon />

src/components/projects/CreateProject/CreateProjectForm.tsx

@@ -24,7 +24,6 @@ import {
   MenuItem,
   Tooltip,
   Typography,
-  useMediaQuery,
   useTheme,
 } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
@@ -88,8 +87,6 @@ export const CreateProjectForm = ({
     isPrivate: isPrivateDefaultValues[defaultPrivacy],
   };
   const theme = useTheme();
-  const biggerThanSm = useMediaQuery(theme.breakpoints.up("sm"));
-
   const queryClient = useQueryClient();
 
   const { data, isLoading, isError, error } = useGetProductTypes();
@@ -170,7 +167,10 @@ export const CreateProjectForm = ({
         component="fieldset"
         sx={{
           display: "grid",
-          gridTemplateColumns: biggerThanSm ? "1fr 1fr auto" + (modal ? "" : " auto") : "1fr",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "1fr 1fr auto" + (modal ? "" : " auto"),
+          },
           gap: 1,
           alignItems: "baseline",
         }}

src/components/results/DateTimeListItem/ResponsiveListItem.tsx

@@ -1,15 +1,13 @@
-import { ListItem, ListItemText, useMediaQuery, useTheme } from "@mui/material";
+import { ListItem, ListItemText } from "@mui/material";
 
 export interface ResponsiveListItemProps {
   primary: string;
   secondary?: string;
 }
 
 export const ResponsiveListItem = ({ primary, secondary }: ResponsiveListItemProps) => {
-  const theme = useTheme();
-  const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
   return (
-    <ListItem sx={{ ml: biggerThanMd ? "auto" : undefined }}>
+    <ListItem sx={{ ml: { xs: undefined, md: "auto" } }}>
       <ListItemText primary={primary} secondary={secondary} />
     </ListItem>
   );

src/components/runCards/ApplicationCard/ApplicationCard.tsx

@@ -1,6 +1,6 @@
 import { type ApplicationSummary } from "@squonk/data-manager-client";
 
-import { CircularProgress, useTheme } from "@mui/material";
+import { CircularProgress } from "@mui/material";
 import dynamic from "next/dynamic";
 
 import { useIsUserAdminOrEditorOfCurrentProject } from "../../../hooks/projectHooks";
@@ -30,8 +30,6 @@ export interface ApplicationCardProps extends Pick<ApplicationModalButtonProps,
  * existing instances.
  */
 export const ApplicationCard = ({ app, projectId }: ApplicationCardProps) => {
-  const theme = useTheme();
-
   const hasPermission = useIsUserAdminOrEditorOfCurrentProject();
 
   return (
@@ -51,7 +49,7 @@ export const ApplicationCard = ({ app, projectId }: ApplicationCardProps) => {
         title: app.kind,
         subtitle: app.group,
         avatar: app.kind[0],
-        color: theme.palette.secondary.dark,
+        color: "secondary.dark",
       }}
     />
   );

src/components/runCards/JobCard/JobCard.tsx

@@ -1,6 +1,6 @@
 import { type JobSummary } from "@squonk/data-manager-client";
 
-import { Alert, Chip, CircularProgress, Link, Typography, useTheme } from "@mui/material";
+import { Alert, Chip, CircularProgress, Link, Typography } from "@mui/material";
 import dynamic from "next/dynamic";
 
 import { BaseCard } from "../../BaseCard";
@@ -29,8 +29,6 @@ export interface ApplicationCardProps extends Pick<RunJobButtonProps, "projectId
  * existing instances.
  */
 export const JobCard = ({ projectId, job, disabled = false }: ApplicationCardProps) => {
-  const theme = useTheme();
-
   return (
     <BaseCard
       actions={({ setExpanded }) => (
@@ -47,7 +45,7 @@ export const JobCard = ({ projectId, job, disabled = false }: ApplicationCardPro
         />
       }
       header={{
-        color: theme.palette.primary.main,
+        color: "primary.main",
         subtitle: job.name,
         avatar: job.job[0],
         title: job.job,

src/components/runCards/JobCard/JobInputFields.tsx

@@ -159,7 +159,7 @@ export const InputSection = ({ children, title, required, error }: InputSectionP
     <Grid size={{ xs: 12 }}>
       <Typography
         component="h4"
-        sx={{ color: error ? (theme) => theme.palette.error.main : undefined }}
+        sx={{ color: error ? "error.main" : undefined }}
         variant="subtitle1"
       >
         <em>
@@ -168,7 +168,7 @@ export const InputSection = ({ children, title, required, error }: InputSectionP
         </em>
       </Typography>
       {children}
-      <Typography sx={(theme) => ({ color: theme.palette.error.main })}>{error}</Typography>
+      <Typography sx={{ color: "error.main" }}>{error}</Typography>
     </Grid>
   );
 };