From 1d152888d0c153c47a50d8020ce673db53dc0ba1 Mon Sep 17 00:00:00 2001
From: Manuel Luypaert <manuel.luypaert@wormbase.org>
Date: Tue, 30 Jan 2024 18:31:23 +0000
Subject: [PATCH] Code changes to match material-ui v3 to v4 migration

---
 .../src/components/elements/AutocompleteChip.js  |  2 +-
 .../elements/AutocompleteSuggestion.js           |  2 +-
 client/src/components/elements/ErrorBoundary.js  |  4 ++--
 client/src/components/elements/NotFound.js       |  8 ++++----
 client/src/components/elements/Page/index.js     |  4 ++--
 .../src/components/elements/SnackbarContent.js   |  2 +-
 client/src/components/elements/TextField.js      |  2 +-
 .../src/components/elements/ValidationError.js   |  6 +++---
 client/src/components/elements/index.js          |  2 +-
 client/src/containers/Authenticate/Login.js      |  4 ++--
 client/src/containers/Authenticate/Profile.js    |  2 +-
 .../src/containers/Authenticate/ProfileButton.js |  2 +-
 client/src/containers/Entity/EntityCreate.js     | 10 +++++-----
 client/src/containers/Entity/EntityDirectory.js  |  6 +++---
 client/src/containers/Entity/EntityNotFound.js   |  2 +-
 client/src/containers/Entity/EntityProfile.js    | 16 ++++++++--------
 client/src/containers/Footer.js                  |  2 +-
 client/src/containers/Gene/GeneAutocomplete.js   |  4 ++--
 client/src/containers/Gene/GeneProfile.js        |  4 ++--
 client/src/containers/Header/Logo.js             |  6 +++---
 client/src/containers/Header/index.js            |  8 ++++----
 client/src/containers/Home/index.js              |  4 ++--
 client/src/containers/Search/SearchBox.js        | 10 +++++-----
 23 files changed, 56 insertions(+), 56 deletions(-)

diff --git a/client/src/components/elements/AutocompleteChip.js b/client/src/components/elements/AutocompleteChip.js
index 7bb6be07..2e82f3e8 100644
--- a/client/src/components/elements/AutocompleteChip.js
+++ b/client/src/components/elements/AutocompleteChip.js
@@ -28,7 +28,7 @@ const styles = (theme) => ({
   wbId: {
     fontSize: '0.8em',
     display: 'inline-block',
-    padding: `0 ${theme.spacing.unit / 2}px`,
+    padding: `0 ${theme.spacing(0.5)}px`,
   },
 });
 
diff --git a/client/src/components/elements/AutocompleteSuggestion.js b/client/src/components/elements/AutocompleteSuggestion.js
index a8c56f97..a178faf8 100644
--- a/client/src/components/elements/AutocompleteSuggestion.js
+++ b/client/src/components/elements/AutocompleteSuggestion.js
@@ -55,7 +55,7 @@ const styles = (theme) => ({
   wbId: {
     fontSize: '0.8em',
     display: 'inline-block',
-    padding: `0 ${theme.spacing.unit / 2}px`,
+    padding: `0 ${theme.spacing(0.5)}px`,
   },
 });
 
diff --git a/client/src/components/elements/ErrorBoundary.js b/client/src/components/elements/ErrorBoundary.js
index 5084ca01..a4791415 100644
--- a/client/src/components/elements/ErrorBoundary.js
+++ b/client/src/components/elements/ErrorBoundary.js
@@ -26,8 +26,8 @@ class ErrorBoundary extends React.Component {
       return (
         <Card elevation={0} className={classes.card}>
           <CardContent>
-            <Typography variant="display1">A problem occurred</Typography>
-            <Typography variant="subheading">
+            <Typography variant="h4">A problem occurred</Typography>
+            <Typography variant="subtitle1">
               Please <a href={`mailto:developers.wormbase.org`}>let us know</a>.
             </Typography>
           </CardContent>
diff --git a/client/src/components/elements/NotFound.js b/client/src/components/elements/NotFound.js
index 3f5fc001..e3c0201f 100644
--- a/client/src/components/elements/NotFound.js
+++ b/client/src/components/elements/NotFound.js
@@ -7,7 +7,7 @@ class NotFound extends Component {
     const { classes } = this.props;
     return (
       <div className={classes.root}>
-        <Typography variant="display2" gutterBottom>
+        <Typography variant="h3" gutterBottom>
           Not Found
         </Typography>
         {this.props.children}
@@ -25,12 +25,12 @@ const styles = (theme) => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
-    margin: theme.spacing.unit * 5,
+    margin: theme.spacing(5),
     [theme.breakpoints.down('sm')]: {
-      margin: `${theme.spacing.unit * 5}px 0`,
+      margin: `${theme.spacing(5)}px 0`,
     },
     '& > *': {
-      marginBottom: theme.spacing.unit * 2,
+      marginBottom: theme.spacing(2),
     },
   },
 });
diff --git a/client/src/components/elements/Page/index.js b/client/src/components/elements/Page/index.js
index 039f871b..e9790886 100644
--- a/client/src/components/elements/Page/index.js
+++ b/client/src/components/elements/Page/index.js
@@ -33,7 +33,7 @@ pageRight.propTypes = {
 export const Page = withStyles((theme) => ({
   root: {
     display: 'flex',
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
     [theme.breakpoints.down('sm')]: {
       flexDirection: 'column',
     },
@@ -46,7 +46,7 @@ export const PageLeft = withStyles((theme) => ({
     flex: '0 0 auto',
     [theme.breakpoints.down('sm')]: {
       width: `100%`,
-      marginBottom: theme.spacing.unit * 4,
+      marginBottom: theme.spacing(4),
     },
   },
 }))(pageLeft);
diff --git a/client/src/components/elements/SnackbarContent.js b/client/src/components/elements/SnackbarContent.js
index e522a6a2..316cd879 100644
--- a/client/src/components/elements/SnackbarContent.js
+++ b/client/src/components/elements/SnackbarContent.js
@@ -44,7 +44,7 @@ const styles = (theme) => ({
   },
   iconVariant: {
     opacity: 0.9,
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
   message: {
     display: 'flex',
diff --git a/client/src/components/elements/TextField.js b/client/src/components/elements/TextField.js
index 869a7956..eb54eb2e 100644
--- a/client/src/components/elements/TextField.js
+++ b/client/src/components/elements/TextField.js
@@ -5,7 +5,7 @@ const TextField = (props) => <MuiTextField variant="outlined" {...props} />;
 
 const styles = (theme) => ({
   root: {
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 4}px`,
+    margin: `${theme.spacing(1)}px ${theme.spacing(0.25)}px`,
     // display: 'block',
   },
 });
diff --git a/client/src/components/elements/ValidationError.js b/client/src/components/elements/ValidationError.js
index ec6f2ea9..4e6b7846 100644
--- a/client/src/components/elements/ValidationError.js
+++ b/client/src/components/elements/ValidationError.js
@@ -90,7 +90,7 @@ ValidationError.propTypes = {
 
 const styles = (theme) => ({
   root: {
-    margin: `${theme.spacing.unit * 4}px 0`,
+    margin: `${theme.spacing(4)}px 0`,
     backgroundColor: theme.palette.background.default,
   },
   message: {
@@ -98,12 +98,12 @@ const styles = (theme) => ({
   },
   problems: {
     color: theme.palette.error.main,
-    marginTop: theme.spacing.unit * -2,
+    marginTop: theme.spacing(-2),
     backgroundColor: theme.palette.background.paper,
   },
   actions: {},
   leftIcon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
 });
 
diff --git a/client/src/components/elements/index.js b/client/src/components/elements/index.js
index aa35b728..2221f04d 100644
--- a/client/src/components/elements/index.js
+++ b/client/src/components/elements/index.js
@@ -69,7 +69,7 @@ export const Dialog = withMobileDialog()(
   withStyles((theme) => ({
     paper: {
       minWidth: '50%',
-      marginTop: theme.spacing.unit * -10,
+      marginTop: theme.spacing(-10),
       [theme.breakpoints.down('sm')]: {
         marginTop: 0,
       },
diff --git a/client/src/containers/Authenticate/Login.js b/client/src/containers/Authenticate/Login.js
index 421b1eef..a4e0ab65 100644
--- a/client/src/containers/Authenticate/Login.js
+++ b/client/src/containers/Authenticate/Login.js
@@ -42,8 +42,8 @@ const styles = (theme) => ({
   },
   errorMessage: {
     backgroundColor: 'rgba(255, 255, 255, 0.6)',
-    margin: theme.spacing.unit * 2,
-    padding: theme.spacing.unit * 4,
+    margin: theme.spacing(2),
+    padding: theme.spacing(4),
     color: theme.palette.error.main,
     textAlign: 'left',
     fontFamily: 'monospace',
diff --git a/client/src/containers/Authenticate/Profile.js b/client/src/containers/Authenticate/Profile.js
index ca3b8deb..61928e0f 100644
--- a/client/src/containers/Authenticate/Profile.js
+++ b/client/src/containers/Authenticate/Profile.js
@@ -31,7 +31,7 @@ const styles = (theme) => ({
     alignItems: 'center',
   },
   actions: {
-    margin: theme.spacing.unit * 4,
+    margin: theme.spacing(4),
   },
 });
 
diff --git a/client/src/containers/Authenticate/ProfileButton.js b/client/src/containers/Authenticate/ProfileButton.js
index 07ae63dc..3ce0d92b 100644
--- a/client/src/containers/Authenticate/ProfileButton.js
+++ b/client/src/containers/Authenticate/ProfileButton.js
@@ -26,7 +26,7 @@ const styles = (theme) => ({
     textTransform: 'none',
   },
   icon: {
-    marginRight: theme.spacing.unit,
+    marginRight: theme.spacing(1),
   },
 });
 
diff --git a/client/src/containers/Entity/EntityCreate.js b/client/src/containers/Entity/EntityCreate.js
index 52e9c067..5430fb59 100644
--- a/client/src/containers/Entity/EntityCreate.js
+++ b/client/src/containers/Entity/EntityCreate.js
@@ -51,7 +51,7 @@ class EntityCreate extends Component {
                   </div>
                 </PageLeft>
                 <PageMain>
-                  <Typography variant="headline" gutterBottom>
+                  <Typography variant="h5" gutterBottom>
                     Add {entityType}
                   </Typography>
                   <ValidationError {...errorMessage} />
@@ -104,7 +104,7 @@ const styles = (theme) => ({
     flexDirection: 'column',
     width: 150,
     '& > *': {
-      marginBottom: theme.spacing.unit,
+      marginBottom: theme.spacing(1),
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%',
@@ -112,12 +112,12 @@ const styles = (theme) => ({
     },
   },
   actions: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
     '& > *': {
-      marginRight: theme.spacing.unit,
+      marginRight: theme.spacing(1),
       width: 150,
       [theme.breakpoints.down('xs')]: {
-        width: `calc(50% - ${theme.spacing.unit}px)`,
+        width: `calc(50% - ${theme.spacing(1)}px)`,
       },
     },
   },
diff --git a/client/src/containers/Entity/EntityDirectory.js b/client/src/containers/Entity/EntityDirectory.js
index 61352b12..c4a8f02d 100644
--- a/client/src/containers/Entity/EntityDirectory.js
+++ b/client/src/containers/Entity/EntityDirectory.js
@@ -47,7 +47,7 @@ const EntityDirectory = (props) => {
             {/* tables and charts */}
             {
               <section>
-                <Typography variant="title" gutterBottom>
+                <Typography variant="h6" gutterBottom>
                   Recent activities
                 </Typography>
                 <ErrorBoundary>{renderHistory()}</ErrorBoundary>
@@ -74,7 +74,7 @@ const styles = (theme) => ({
     display: 'flex',
     justifyContent: 'start',
     alignItems: 'center',
-    marginBottom: theme.spacing.unit * 6,
+    marginBottom: theme.spacing(6),
     [theme.breakpoints.down('xs')]: {
       flexDirection: 'column',
     },
@@ -85,7 +85,7 @@ const styles = (theme) => ({
     },
   },
   search: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
   },
   main: {
     display: 'flex',
diff --git a/client/src/containers/Entity/EntityNotFound.js b/client/src/containers/Entity/EntityNotFound.js
index aa9e44cb..75cf0d4c 100644
--- a/client/src/containers/Entity/EntityNotFound.js
+++ b/client/src/containers/Entity/EntityNotFound.js
@@ -36,7 +36,7 @@ const styles = (theme) => ({
     flexDirection: 'column',
     width: 200,
     '& > *': {
-      marginBottom: theme.spacing.unit,
+      marginBottom: theme.spacing(1),
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%',
diff --git a/client/src/containers/Entity/EntityProfile.js b/client/src/containers/Entity/EntityProfile.js
index da65c253..c723f1a8 100644
--- a/client/src/containers/Entity/EntityProfile.js
+++ b/client/src/containers/Entity/EntityProfile.js
@@ -35,7 +35,7 @@ const OPERATION_RESURRECT = 'resurrect';
 class EntityProfile extends Component {
   renderStatus({ data, entityType }) {
     return data['status'] !== 'live' ? (
-      <Typography variant="display1" gutterBottom>
+      <Typography variant="h4" gutterBottom>
         <Humanize capitalized>{data['status']}</Humanize>
       </Typography>
     ) : null;
@@ -159,7 +159,7 @@ class EntityProfile extends Component {
                   </div>
                 </PageLeft>
                 <PageMain>
-                  <Typography variant="headline" gutterBottom>
+                  <Typography variant="h5" gutterBottom>
                     {entityType} <em>{wbId}</em>{' '}
                     <Button
                       variant="contained"
@@ -202,7 +202,7 @@ class EntityProfile extends Component {
                     </div>
                   )}
                   <div className={classes.section}>
-                    <Typography variant="title" gutterBottom>
+                    <Typography variant="h6" gutterBottom>
                       Change history
                     </Typography>
                     {renderChanges ? (
@@ -260,7 +260,7 @@ const styles = (theme) => ({
     flexDirection: 'column',
     width: 150,
     '& > *': {
-      marginBottom: theme.spacing.unit,
+      marginBottom: theme.spacing(1),
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%',
@@ -268,16 +268,16 @@ const styles = (theme) => ({
     },
   },
   section: {
-    margin: `${theme.spacing.unit * 8}px 0`,
+    margin: `${theme.spacing(8)}px 0`,
   },
   historyTable: {},
   actions: {
-    marginTop: theme.spacing.unit * 2,
+    marginTop: theme.spacing(2),
     '& > *': {
-      marginRight: theme.spacing.unit,
+      marginRight: theme.spacing(1),
       width: 150,
       [theme.breakpoints.down('xs')]: {
-        width: `calc(50% - ${theme.spacing.unit}px)`,
+        width: `calc(50% - ${theme.spacing(1)}px)`,
       },
     },
   },
diff --git a/client/src/containers/Footer.js b/client/src/containers/Footer.js
index 6783fe4a..47fbe4e6 100644
--- a/client/src/containers/Footer.js
+++ b/client/src/containers/Footer.js
@@ -13,7 +13,7 @@ const Footer = (props) => {
 const styles = (theme) => ({
   root: {
     width: '100%',
-    height: theme.spacing.unit * 6,
+    height: theme.spacing(6),
     textAlign: 'center',
     backgroundColor: theme.palette.grey['50'],
     display: 'flex',
diff --git a/client/src/containers/Gene/GeneAutocomplete.js b/client/src/containers/Gene/GeneAutocomplete.js
index 54d45bf7..2daf63fa 100644
--- a/client/src/containers/Gene/GeneAutocomplete.js
+++ b/client/src/containers/Gene/GeneAutocomplete.js
@@ -155,7 +155,7 @@ const styles = (theme) => ({
   paper: {
     position: 'absolute',
     zIndex: 10,
-    marginTop: -6 * theme.spacing.unit,
+    marginTop: -6 * theme.spacing(1),
     left: 0,
     right: 0,
   },
@@ -163,7 +163,7 @@ const styles = (theme) => ({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-around',
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
 });
 
diff --git a/client/src/containers/Gene/GeneProfile.js b/client/src/containers/Gene/GeneProfile.js
index fffdb43b..22189865 100644
--- a/client/src/containers/Gene/GeneProfile.js
+++ b/client/src/containers/Gene/GeneProfile.js
@@ -29,10 +29,10 @@ class GeneProfile extends Component {
       data['status'] === 'dead' ? getActivityDescriptor(changes[0]) : {};
 
     return data['status'] !== 'live' ? (
-      <Typography variant="display1" gutterBottom>
+      <Typography variant="h4" gutterBottom>
         <Humanize capitalized>{data['status']}</Humanize>
         {data['status'] === 'dead' ? (
-          <Typography variant="subheading" component={'i'}>
+          <Typography variant="subtitle1" component={'i'}>
             (
             <Humanize postProcessor={pastTense}>
               {killEventDescriptor.eventLabel}
diff --git a/client/src/containers/Header/Logo.js b/client/src/containers/Header/Logo.js
index cacd996c..0a3cd8bf 100644
--- a/client/src/containers/Header/Logo.js
+++ b/client/src/containers/Header/Logo.js
@@ -13,9 +13,9 @@ const Logo = (props) => {
 
 const styles = (theme) => ({
   root: {
-    width: theme.spacing.unit * 4,
-    height: theme.spacing.unit * 4,
-    margin: theme.spacing.unit,
+    width: theme.spacing(4),
+    height: theme.spacing(4),
+    margin: theme.spacing(1),
   },
 });
 
diff --git a/client/src/containers/Header/index.js b/client/src/containers/Header/index.js
index c55915f8..17736190 100644
--- a/client/src/containers/Header/index.js
+++ b/client/src/containers/Header/index.js
@@ -28,7 +28,7 @@ const Header = (props) => {
           </Link>
           <div className={classes.title}>
             <Link to="/">
-              <Typography variant="title" color="inherit">
+              <Typography variant="h6" color="inherit">
                 Names Service
               </Typography>
             </Link>
@@ -66,11 +66,11 @@ Header.propTypes = {
 const styles = (theme) => ({
   root: {},
   toolbar: {
-    minHeight: theme.spacing.unit * 4,
+    minHeight: theme.spacing(4),
     [theme.breakpoints.down('sm')]: {
       justifyContent: 'space-between',
       flexWrap: 'wrap',
-      padding: `0 0 ${theme.spacing.unit}px 0`,
+      padding: `0 0 ${theme.spacing(1)}px 0`,
     },
   },
   title: {
@@ -85,7 +85,7 @@ const styles = (theme) => ({
       order: 10,
       width: '100%',
     },
-    margin: `0px ${theme.spacing.unit * 2}px`,
+    margin: `0px ${theme.spacing(2)}px`,
   },
 });
 
diff --git a/client/src/containers/Home/index.js b/client/src/containers/Home/index.js
index 82b43f11..115942f1 100644
--- a/client/src/containers/Home/index.js
+++ b/client/src/containers/Home/index.js
@@ -60,10 +60,10 @@ const styles = (theme) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    margin: `${theme.spacing.unit * 2}px 0`,
+    margin: `${theme.spacing(2)}px 0`,
   },
   cell: {
-    padding: `${theme.spacing.unit * 4}px`,
+    padding: `${theme.spacing(4)}px`,
     flex: `1 1 50%`,
     display: 'flex',
     '&:first-child > *': {
diff --git a/client/src/containers/Search/SearchBox.js b/client/src/containers/Search/SearchBox.js
index 3bd4deed..fbe9c75f 100644
--- a/client/src/containers/Search/SearchBox.js
+++ b/client/src/containers/Search/SearchBox.js
@@ -237,7 +237,7 @@ const styles = (theme) => ({
     visibility: 'hidden',
   },
   entityTypeSelectRoot: {
-    margin: `0 ${theme.spacing.unit}px`,
+    margin: `0 ${theme.spacing(1)}px`,
   },
   paper: {
     position: 'absolute',
@@ -249,14 +249,14 @@ const styles = (theme) => ({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-around',
-    padding: theme.spacing.unit,
+    padding: theme.spacing(1),
   },
   searchIcon: {
-    paddingLeft: theme.spacing.unit,
+    paddingLeft: theme.spacing(1),
   },
   chip: {
-    height: theme.spacing.unit * 3,
-    marginLeft: theme.spacing.unit,
+    height: theme.spacing(3),
+    marginLeft: theme.spacing(1),
   },
 });