Move away from shorthand to more verbose css styling

Author: snf2ye

src/components/DatasetView.tsx

@@ -51,7 +51,7 @@ function DatasetView({
       sx={{
         display: 'flex',
         justifyContent: 'center',
-        mt: '1em',
+        marginTop: '1em',
       }}
     >
       <Box sx={{ width: '100%' }}>

src/components/HomeView.tsx

@@ -112,7 +112,7 @@ function HomeView({ dispatch, location }: IProps) {
 
   return (
     <RootContainer>
-      <Box sx={{ display: 'flex', mt: '1.25em', mb: '1.25em' }}>
+      <Box sx={{ display: 'flex', marginTop: '1.25em', marginBottom: '1.25em' }}>
         {pageHeader}
         {searchable && (
           <SearchTable

src/components/JobView.tsx

@@ -41,7 +41,7 @@ function JobView({ jobs, dispatch, loading, searchString, refreshCnt }: IProps)
       sx={{
         display: 'flex',
         justifyContent: 'center',
-        mt: '1em',
+        marginTop: '1em',
       }}
     >
       <Box sx={{ width: '100%' }}>

src/components/UserList.tsx

@@ -27,14 +27,14 @@ function UserList({ canManageUsers, defaultOpen, removeUser, typeOfUsers, users
       >
         {typeOfUsers}
       </AccordionSummary>
-      <AccordionDetails data-cy="user-email" sx={canManageUsers ? { pt: 0 } : undefined}>
+      <AccordionDetails data-cy="user-email" sx={canManageUsers ? { paddingTop: 0 } : undefined}>
         <ManageUsersView removeUser={canManageUsers ? removeUser : undefined} users={users} />
         {users.length === 0 && (
           <Typography
             sx={{
               fontStyle: 'italic',
               color: 'error.contrastText',
-              pb: '8px',
+              paddingBottom: '8px',
             }}
           >
             (None)

src/components/dataset/overview/DatasetOverviewPanel.jsx

@@ -236,7 +236,7 @@ function DatasetOverviewPanel(props) {
                         </dt>
                       </dl>
                       {i < dataset.schema.relationships.length - 1 && (
-                        <Divider sx={{ mt: '14px', mb: '14px' }} />
+                        <Divider sx={{ marginTop: '14px', marginBottom: '14px' }} />
                       )}
                     </div>
                   ))}
@@ -247,9 +247,9 @@ function DatasetOverviewPanel(props) {
         </Grid>
       </TabPanel>
       <TabPanel value={value} index={1}>
-        <Grid sx={{ pb: '14px' }}>
+        <Grid sx={{ paddingBottom: '14px' }}>
           Use the dataset as is to create a full view snapshot
-          <Box component="span" sx={{ ml: 2 }}>
+          <Box component="span" sx={{ marginLeft: 2 }}>
             <FullViewSnapshotButton dataset={dataset} dispatch={dispatch} />
           </Box>
         </Grid>
@@ -289,7 +289,7 @@ function DatasetOverviewPanel(props) {
         open={isHelpVisible}
         isVisible={isHelpVisible}
       >
-        <Grid container spacing={1} sx={{ p: '30px' }}>
+        <Grid container spacing={1} sx={{ padding: '30px' }}>
           <Grid item xs={11}>
             {helpTitle}
           </Grid>