refactor: fix mui v6 System props deprecations

Author: OliverDudgeon

src/components/BaseCard.tsx

@@ -81,12 +81,7 @@ export const BaseCard = ({
       {!!header && (
         <CardHeader
           avatar={
-            <Avatar
-              sx={{
-                fontFamily: "verdana",
-                backgroundColor: header.color ?? "transparent",
-              }}
-            >
+            <Avatar sx={{ fontFamily: "verdana", backgroundColor: header.color ?? "transparent" }}>
               {header.avatar?.[0].toUpperCase()}
             </Avatar>
           }

src/components/CreateDatasetStorageSubscription.tsx

@@ -60,7 +60,7 @@ export const CreateDatasetStorageSubscription = ({
       {({ submitForm, isSubmitting, isValid, values }) => {
         return (
           <Form>
-            <Box alignItems="baseline" display="flex" flexWrap="wrap" gap={2}>
+            <Box sx={{ alignItems: "baseline", display: "flex", flexWrap: "wrap", gap: 2 }}>
               <Field
                 autoFocus
                 component={TextField}

src/components/DataTable/DataTable.tsx

@@ -170,7 +170,7 @@ export const DataTable = <Data extends Record<string, any>>(props: DataTableProp
         id: "expander",
         enableSorting: false,
         header: ({ table }) => (
-          <Box display="flex">
+          <Box sx={{ display: "flex" }}>
             <IconButton onClick={table.getToggleAllRowsExpandedHandler()}>
               {table.getIsAllRowsExpanded() ? <ExpandLess /> : <ExpandMoreIcon />}
             </IconButton>

src/components/DocsNav.tsx

@@ -15,7 +15,7 @@ export const DocsNav = () => {
   const router = useRouter();
 
   return (
-    <Box aria-label="Docs" component="nav" display="flex" gap={2} role="navigation">
+    <Box aria-label="Docs" component="nav" role="navigation" sx={{ display: "flex", gap: 2 }}>
       {Object.entries(links).map(([href, title]) => (
         <NextLink
           component="button"

src/components/FileSelector/FileSelector.tsx

@@ -36,9 +36,7 @@ export const FileSelector = ({ value, targetType, ...props }: SharedProps) => {
       <Collapse in={expanded}>
         <MiniFileList {...props} targetType={targetType} value={value} />
       </Collapse>
-      <Box display="flex" paddingY={1}>
-        {expanded ? closeControls : openControls}
-      </Box>
+      <Box sx={{ display: "flex", paddingY: 1 }}>{expanded ? closeControls : openControls}</Box>
     </>
   );
 };

src/components/FileSelector/MiniFileList.tsx

@@ -18,7 +18,7 @@ export const MiniFileList = (props: SharedProps) => {
   );
 
   return (
-    <Box border="2px dashed" borderColor="grey.600" borderRadius={8} px={2} py={1}>
+    <Box sx={{ border: "2px dashed", borderColor: "grey.600", borderRadius: 8, px: 2, py: 1 }}>
       <FormControlLabel
         control={
           <Checkbox

src/components/FileSelector/SelectedFilesLabel.tsx

@@ -15,7 +15,7 @@ export interface SelectedFilesLabelProps {
  */
 export const SelectedFilesLabel = ({ files }: SelectedFilesLabelProps) => {
   return (
-    <Typography noWrap display="inline" sx={{ whiteSpace: "break-spaces" }} variant="body2">
+    <Typography noWrap sx={{ display: "inline", whiteSpace: "break-spaces" }} variant="body2">
       Selected Files:{" "}
       {files.length === 1 ? (
         files[0]

src/components/PageSection/PageSection.tsx

@@ -40,7 +40,7 @@ export const PageSection: FC<PageSectionProps> = ({ level, title, children }) =>
 
   return (
     <PageSectionProvider level={nextLevel}>
-      <Box component="section" marginBottom={4}>
+      <Box component="section" sx={{ marginBottom: 4 }}>
         <Typography gutterBottom component={`h${realLevel}`} variant={`h${nextLevel}`}>
           {title}
         </Typography>

src/components/SMILESInput.tsx

@@ -139,8 +139,8 @@ export const SMILESInput = ({
   };
 
   return (
-    <Box display="flex" flexDirection="column" gap={1} width={width}>
-      <Box height={height}>
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 1, width }}>
+      <Box sx={{ height }}>
         <Sketcher smiles={smiles} />
       </Box>
       <ButtonGroup size="small" sx={{ alignSelf: "end" }} variant="outlined">

src/components/ScatterPlot/ScatterPlot.tsx

@@ -135,33 +135,33 @@ export const ScatterPlot = ({ molecules, properties, selectPoints, width }: Scat
           points?.length && selectPoints(points.map((p) => p.customdata) as string[]);
         }}
       />
-      <Box display="flex" gap={2}>
+      <Box sx={{ display: "flex", gap: 2 }}>
         <div>
-          <Typography gutterBottom component="label" display="block" variant="h5">
+          <Typography gutterBottom component="label" sx={{ display: "block" }} variant="h5">
             x-axis
           </Typography>
           <AxisSelector prop={xprop} properties={properties} onPropChange={setXprop} />
         </div>
         <div>
-          <Typography gutterBottom component="label" display="block" variant="h5">
+          <Typography gutterBottom component="label" sx={{ display: "block" }} variant="h5">
             y-axis
           </Typography>
           <AxisSelector prop={yprop} properties={properties} onPropChange={setYprop} />
         </div>
         <div>
-          <Typography gutterBottom component="label" display="block" variant="h5">
+          <Typography gutterBottom component="label" sx={{ display: "block" }} variant="h5">
             colour-axis
           </Typography>
           <AxisSelector prop={cprop} properties={properties} onPropChange={setCprop} />
           <Tooltip arrow title="Toggle the colour bar">
             <Switch checked={showColourBar} onChange={() => setShowColourBar(!showColourBar)} />
           </Tooltip>
           {/* <div>
-            <em>({colourExtent.min !== undefined && `${colourExtent.min}–${colourExtent.max}`})</em>
-          </div> */}
+          <em>({colourExtent.min !== undefined && `${colourExtent.min}–${colourExtent.max}`})</em>
+        </div> */}
         </div>
         <div>
-          <Typography gutterBottom component="label" display="block" variant="h5">
+          <Typography gutterBottom component="label" sx={{ display: "block" }} variant="h5">
             size-axis
           </Typography>
           <AxisSelector prop={sprop} properties={properties} onPropChange={setSprop} />