refactor: [M3-6934] MUI v5 Migration - SRC > Features > Linodes pt 1

packages/manager/src/features/Linodes/CloneLanding/CloneLanding.tsx

@@ -6,8 +6,7 @@ import {
 } from '@linode/api-v4/lib/linodes';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
-import { Theme } from '@mui/material/styles';
-import { makeStyles } from '@mui/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { castDraft } from 'immer';
 import { intersection, pathOr } from 'ramda';
 import * as React from 'react';
@@ -51,36 +50,12 @@ const LinodesDetailHeader = React.lazy(
   () => import('../LinodesDetail/LinodesDetailHeader/LinodeDetailHeader')
 );
 
-const useStyles = makeStyles((theme: Theme) => ({
-  appBar: {
-    '& > div': {
-      marginTop: 0,
-    },
-  },
-  diskContainer: {
-    marginTop: theme.spacing(4),
-  },
-  outerContainer: {
-    paddingBottom: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-  },
-  paper: {
-    padding: `${theme.spacing(3)} ${theme.spacing(3)} 0`,
-  },
-  root: {
-    marginTop: theme.spacing(1),
-  },
-  title: {
-    marginBottom: theme.spacing(2),
-  },
-}));
-
 const CloneLanding = () => {
   const { linodeId: _linodeId } = useParams<{ linodeId: string }>();
   const history = useHistory();
   const match = useRouteMatch();
   const location = useLocation();
+  const theme = useTheme();
 
   const linodeId = Number(_linodeId);
 
@@ -89,8 +64,6 @@ const CloneLanding = () => {
   const { data: linodes } = useAllLinodesQuery();
   const { data: linode } = useLinodeQuery(linodeId);
 
-  const classes = useStyles();
-
   const configs = _configs ?? [];
   const disks = _disks ?? [];
 
@@ -289,12 +262,12 @@ const CloneLanding = () => {
       <MutationNotification linodeId={linodeId} />
       <Notifications />
       <LinodesDetailHeader />
-      <Grid className={classes.root} container>
+      <Grid sx={{ marginTop: theme.spacing(1) }} container>
         <Grid lg={9} md={8} xs={12}>
-          <Paper className={classes.paper}>
+          <Paper sx={{ padding: `${theme.spacing(3)} ${theme.spacing(3)} 0` }}>
             <Typography
               aria-level={2}
-              className={classes.title}
+              sx={{ marginBottom: theme.spacing(2) }}
               data-qa-title
               role="heading"
               variant="h2"
@@ -312,34 +285,34 @@ const CloneLanding = () => {
               <TabLinkList tabs={tabs} />
               <TabPanels>
                 <SafeTabPanel index={0}>
-                  <div className={classes.outerContainer}>
+                  <StyledOuterDiv>
                     <Configs
                       // Cast the results of the Immer state to a mutable data structure.
                       configSelection={castDraft(state.configSelection)}
                       configs={configsInState}
                       handleSelect={toggleConfig}
                     />
-                  </div>
+                  </StyledOuterDiv>
                 </SafeTabPanel>
 
                 <SafeTabPanel index={1}>
-                  <div className={classes.outerContainer}>
+                  <StyledOuterDiv>
                     <Typography>
                       You can make a copy of a disk to the same or different
                       Linode. We recommend you power off your Linode first, and
                       keep it powered off until the disk has finished being
                       cloned.
                     </Typography>
-                    <div className={classes.diskContainer}>
+                    <StyledDiskDiv>
                       <Disks
                         // Cast the results of the Immer state to a mutable data structure.
                         diskSelection={castDraft(state.diskSelection)}
                         disks={disksInState}
                         handleSelect={toggleDisk}
                         selectedConfigIds={selectedConfigIds}
                       />
-                    </div>
-                  </div>
+                    </StyledDiskDiv>
+                  </StyledOuterDiv>
                 </SafeTabPanel>
               </TabPanels>
             </Tabs>
@@ -387,4 +360,18 @@ const CloneLanding = () => {
   );
 };
 
+const StyledDiskDiv = styled('div', { label: 'StyledDiskDiv' })(
+  ({ theme }) => ({
+    marginTop: theme.spacing(4),
+  })
+);
+
+const StyledOuterDiv = styled('div', { label: 'StyledOuterDiv' })(
+  ({ theme }) => ({
+    paddingBottom: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  })
+);
+
 export default CloneLanding;

packages/manager/src/features/Linodes/CloneLanding/Configs.tsx

@@ -1,5 +1,4 @@
 import { Config } from '@linode/api-v4/lib/linodes';
-import { makeStyles } from '@mui/styles';
 import * as React from 'react';
 
 import { Checkbox } from 'src/components/Checkbox';
@@ -13,15 +12,6 @@ import { TableRowEmpty } from 'src/components/TableRowEmpty/TableRowEmpty';
 
 import { ConfigSelection } from './utilities';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    '& td': {
-      borderBottom: 'none',
-      paddingBottom: 0,
-      paddingTop: 0,
-    },
-  },
-}));
 export interface Props {
   configSelection: ConfigSelection;
   configs: Config[];
@@ -31,8 +21,6 @@ export interface Props {
 export const Configs: React.FC<Props> = (props) => {
   const { configSelection, configs, handleSelect } = props;
 
-  const classes = useStyles();
-
   return (
     <Paginate data={configs}>
       {({
@@ -45,7 +33,16 @@ export const Configs: React.FC<Props> = (props) => {
       }) => {
         return (
           <div>
-            <Table aria-label="List of Configurations" className={classes.root}>
+            <Table
+              aria-label="List of Configurations"
+              sx={{
+                '& td': {
+                  borderBottom: 'none',
+                  paddingBottom: 0,
+                  paddingTop: 0,
+                },
+              }}
+            >
               <TableBody>
                 {paginatedData.length === 0 ? (
                   <TableRowEmpty colSpan={1} />