WormBase · mluypaert · Jan 30, 2024 · Jan 30, 2024
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -90,20 +90,20 @@ 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: {
     color: theme.palette.error.main,
   },
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,20 +104,20 @@ const styles = (theme) => ({
     flexDirection: 'column',
     width: 150,
     '& > *': {
-      marginBottom: theme.spacing.unit,
+      marginBottom: theme.spacing(1),
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%',
       alignItems: 'stretch',
     },
   },
   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
@@ -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
@@ -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
@@ -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,24 +260,24 @@ const styles = (theme) => ({
     flexDirection: 'column',
     width: 150,
     '& > *': {
-      marginBottom: theme.spacing.unit,
+      marginBottom: theme.spacing(1),
     },
     [theme.breakpoints.down('sm')]: {
       width: '100%',
       alignItems: 'stretch',
     },
   },
   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
@@ -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
@@ -155,15 +155,15 @@ const styles = (theme) => ({
   paper: {
     position: 'absolute',
     zIndex: 10,
-    marginTop: -6 * theme.spacing.unit,
+    marginTop: -6 * theme.spacing(1),
     left: 0,
     right: 0,
   },
   loading: {
     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
@@ -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
@@ -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
@@ -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
@@ -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 > *': {