From f6daa8a9318d5d7bec1cb173d8897cfcb9826157 Mon Sep 17 00:00:00 2001
From: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
Date: Fri, 28 Dec 2018 14:48:57 +0100
Subject: [PATCH] Enable useNextVariants and replace depracated typography
 variants

Feature #14639

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>
---
 src/common/custom-theme.ts                             |  5 ++++-
 .../default-code-snippet/default-code-snippet.tsx      |  3 ++-
 src/components/default-view/default-view.tsx           |  2 +-
 src/components/file-upload/file-upload.tsx             |  2 +-
 .../list-item-text-icon/list-item-text-icon.tsx        |  2 +-
 .../current-token-dialog/current-token-dialog.tsx      |  6 +++---
 src/views-components/details-panel/details-panel.tsx   |  2 +-
 .../groups-dialog/attributes-dialog.tsx                |  2 +-
 .../groups-dialog/member-attributes-dialog.tsx         |  2 +-
 src/views-components/main-app-bar/help-menu.tsx        |  2 +-
 src/views-components/main-app-bar/main-app-bar.tsx     |  2 +-
 .../repositories-sample-git-dialog.tsx                 |  2 +-
 .../repository-attributes-dialog.tsx                   |  2 +-
 .../sharing-dialog/sharing-dialog-content.tsx          |  2 +-
 .../sharing-management-form-component.tsx              |  2 +-
 .../sharing-public-access-form-component.tsx           |  2 +-
 src/views-components/user-dialog/attributes-dialog.tsx |  2 +-
 src/views-components/user-dialog/manage-dialog.tsx     |  4 ++--
 .../virtual-machines-dialog/attributes-dialog.tsx      |  2 +-
 src/views/login-panel/login-panel.tsx                  | 10 +++++-----
 src/views/my-account-panel/my-account-panel-root.tsx   |  2 +-
 .../process-log-panel/process-log-code-snippet.tsx     |  3 ++-
 src/views/process-log-panel/process-log-main-card.tsx  |  2 +-
 src/views/process-panel/process-information-card.tsx   |  4 ++--
 src/views/process-panel/process-subprocesses-card.tsx  |  4 ++--
 src/views/process-panel/subprocesses-card.tsx          |  2 +-
 src/views/repositories-panel/repositories-panel.tsx    |  2 +-
 .../run-process-panel/inputs/directory-array-input.tsx |  2 +-
 .../run-process-panel/inputs/file-array-input.tsx      |  2 +-
 .../site-manager-panel/site-manager-panel-root.tsx     |  4 ++--
 src/views/ssh-key-panel/ssh-key-panel-root.tsx         |  4 ++--
 .../virtual-machine-user-panel.tsx                     |  6 +++---
 32 files changed, 50 insertions(+), 45 deletions(-)

diff --git a/src/common/custom-theme.ts b/src/common/custom-theme.ts
index f7559eed..0faf781d 100644
--- a/src/common/custom-theme.ts
+++ b/src/common/custom-theme.ts
@@ -39,6 +39,9 @@ const grey900 = grey["900"];
 const rocheBlue = '#06C';
 
 export const themeOptions: ArvadosThemeOptions = {
+    typography: {
+        useNextVariants: true,
+    },
     customs: {
         colors: {
             green700: green["700"],
@@ -148,7 +151,7 @@ export const themeOptions: ArvadosThemeOptions = {
             dark: teal.A400,
             contrastText: '#fff'
         }
-    }
+    },
 };
 
 export const CustomTheme = createMuiTheme(themeOptions);
\ No newline at end of file
diff --git a/src/components/default-code-snippet/default-code-snippet.tsx b/src/components/default-code-snippet/default-code-snippet.tsx
index e8b89f32..c81865db 100644
--- a/src/components/default-code-snippet/default-code-snippet.tsx
+++ b/src/components/default-code-snippet/default-code-snippet.tsx
@@ -19,7 +19,8 @@ const theme = createMuiTheme({
         }
     },
     typography: {
-        fontFamily: 'monospace'
+        fontFamily: 'monospace',
+        useNextVariants: true,
     }
 });
 
diff --git a/src/components/default-view/default-view.tsx b/src/components/default-view/default-view.tsx
index 3bc3e529..036fe1e4 100644
--- a/src/components/default-view/default-view.tsx
+++ b/src/components/default-view/default-view.tsx
@@ -39,7 +39,7 @@ export const DefaultView = withStyles(styles)(
         <Typography className={classnames([classes.root, classRoot])} component="div">
             <Icon className={classnames([classes.icon, classIcon])} />
             {messages.map((msg: string, index: number) => {
-                return <Typography key={index} variant="body1" 
+                return <Typography key={index}  
                     className={classnames([classes.message, classMessage])}>{msg}</Typography>;
             })}
         </Typography>
diff --git a/src/components/file-upload/file-upload.tsx b/src/components/file-upload/file-upload.tsx
index 41054df4..64656e48 100644
--- a/src/components/file-upload/file-upload.tsx
+++ b/src/components/file-upload/file-upload.tsx
@@ -136,7 +136,7 @@ export const FileUpload = withStyles(styles)(
                     {files.length === 0 &&
                         <Grid container justify="center" alignItems="center" className={classes.container}>
                             <Grid item component={"span"}>
-                                <Typography variant={"subheading"}>
+                                <Typography variant='subtitle1'>
                                     <CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
                             </Typography>
                             </Grid>
diff --git a/src/components/list-item-text-icon/list-item-text-icon.tsx b/src/components/list-item-text-icon/list-item-text-icon.tsx
index 29768c05..3afc2cf8 100644
--- a/src/components/list-item-text-icon/list-item-text-icon.tsx
+++ b/src/components/list-item-text-icon/list-item-text-icon.tsx
@@ -51,7 +51,7 @@ export const ListItemTextIcon = withStyles(styles)(
                         <Icon style={{ fontSize: `${iconSize}rem` }} />
                     </ListItemIcon>
                     <ListItemText primary={
-                        <Typography variant='body1' className={classnames(classes.listItemText, {
+                        <Typography  className={classnames(classes.listItemText, {
                                 [classes.active]: isActive
                             })}>
                             {name}
diff --git a/src/views-components/current-token-dialog/current-token-dialog.tsx b/src/views-components/current-token-dialog/current-token-dialog.tsx
index 934be54d..bc0071af 100644
--- a/src/views-components/current-token-dialog/current-token-dialog.tsx
+++ b/src/views-components/current-token-dialog/current-token-dialog.tsx
@@ -47,7 +47,7 @@ export const CurrentTokenDialog =
                 maxWidth='md'>
                 <DialogTitle>Current Token</DialogTitle>
                 <DialogContent>
-                    <Typography variant='body1' paragraph={true}>
+                    <Typography  paragraph={true}>
                         The Arvados API token is a secret key that enables the Arvados SDKs to access Arvados with the proper permissions.
                                 <Typography component='p'>
                             For more information see
@@ -56,11 +56,11 @@ export const CurrentTokenDialog =
                                     </a>
                         </Typography>
                     </Typography>
-                    <Typography variant='body1' paragraph={true}>
+                    <Typography  paragraph={true}>
                         Paste the following lines at a shell prompt to set up the necessary environment for Arvados SDKs to authenticate to your klingenc account.
                             </Typography>
                     <DefaultCodeSnippet lines={[getSnippet(data)]} />
-                    <Typography variant='body1'>
+                    <Typography >
                         Arvados
                                 <a href='http://doc.arvados.org/user/reference/api-tokens.html' target='blank' className={classes.link}>virtual machines</a>
                         do this for you automatically. This setup is needed only when you use the API remotely (e.g., from your own workstation).
diff --git a/src/views-components/details-panel/details-panel.tsx b/src/views-components/details-panel/details-panel.tsx
index 315fc985..2a30ae47 100644
--- a/src/views-components/details-panel/details-panel.tsx
+++ b/src/views-components/details-panel/details-panel.tsx
@@ -152,7 +152,7 @@ export const DetailsPanel = withStyles(styles)(
                         </Grid>
                         <Grid item xs={8}>
                             <Tooltip title={item.getTitle()}>
-                                <Typography variant="title" noWrap>
+                                <Typography variant='h6' noWrap>
                                     {item.getTitle()}
                                 </Typography>
                             </Tooltip>
diff --git a/src/views-components/groups-dialog/attributes-dialog.tsx b/src/views-components/groups-dialog/attributes-dialog.tsx
index ce79d233..c95392a7 100644
--- a/src/views-components/groups-dialog/attributes-dialog.tsx
+++ b/src/views-components/groups-dialog/attributes-dialog.tsx
@@ -45,7 +45,7 @@ export const GroupAttributesDialog = compose(
                 maxWidth="sm">
                 <DialogTitle>Attributes</DialogTitle>
                 <DialogContent>
-                    <Typography variant="body2" className={props.classes.spacing}>
+                    <Typography variant='body1' className={props.classes.spacing}>
                         {props.data && attributes(props.data, props.classes)}
                     </Typography>
                 </DialogContent>
diff --git a/src/views-components/groups-dialog/member-attributes-dialog.tsx b/src/views-components/groups-dialog/member-attributes-dialog.tsx
index c7c766da..9299e492 100644
--- a/src/views-components/groups-dialog/member-attributes-dialog.tsx
+++ b/src/views-components/groups-dialog/member-attributes-dialog.tsx
@@ -45,7 +45,7 @@ export const GroupMemberAttributesDialog = compose(
                 maxWidth="sm">
                 <DialogTitle>Attributes</DialogTitle>
                 <DialogContent>
-                    <Typography variant="body2" className={props.classes.spacing}>
+                    <Typography variant='body1' className={props.classes.spacing}>
                         {props.data && attributes(props.data, props.classes)}
                     </Typography>
                 </DialogContent>
diff --git a/src/views-components/main-app-bar/help-menu.tsx b/src/views-components/main-app-bar/help-menu.tsx
index 94da69e7..859c907a 100644
--- a/src/views-components/main-app-bar/help-menu.tsx
+++ b/src/views-components/main-app-bar/help-menu.tsx
@@ -78,7 +78,7 @@ export const HelpMenu = compose(
                         <MenuItem key={link.title}>
                             <a href={link.link} target="_blank" className={classes.link}>
                                 <ImportContactsIcon className={classes.icon} />
-                                <Typography variant="body1" className={classes.linkTitle}>{link.title}</Typography>
+                                <Typography  className={classes.linkTitle}>{link.title}</Typography>
                             </a>
                         </MenuItem>
                     )
diff --git a/src/views-components/main-app-bar/main-app-bar.tsx b/src/views-components/main-app-bar/main-app-bar.tsx
index 8a7e9f20..ff3bee61 100644
--- a/src/views-components/main-app-bar/main-app-bar.tsx
+++ b/src/views-components/main-app-bar/main-app-bar.tsx
@@ -41,7 +41,7 @@ export const MainAppBar = withStyles(styles)(
             <Toolbar className={props.classes.toolbar}>
                 <Grid container justify="space-between">
                     <Grid container item xs={3} direction="column" justify="center">
-                        <Typography variant="title" color="inherit" noWrap>
+                        <Typography variant='h6' color="inherit" noWrap>
                             <Link to={Routes.ROOT} className={props.classes.link}>
                                 arvados workbench
                             </Link>
diff --git a/src/views-components/repositories-sample-git-dialog/repositories-sample-git-dialog.tsx b/src/views-components/repositories-sample-git-dialog/repositories-sample-git-dialog.tsx
index b1573167..6899018c 100644
--- a/src/views-components/repositories-sample-git-dialog/repositories-sample-git-dialog.tsx
+++ b/src/views-components/repositories-sample-git-dialog/repositories-sample-git-dialog.tsx
@@ -52,7 +52,7 @@ export const RepositoriesSampleGitDialog = compose(
                     <DefaultCodeSnippet
                         className={props.classes.codeSnippet}
                         lines={[snippetText(props.data.uuidPrefix)]} />
-                    <Typography variant="body2" className={props.classes.spacing}>
+                    <Typography variant='body1' className={props.classes.spacing}>
                         See also:
                         <div><a href="https://doc.arvados.org/user/getting_started/ssh-access-unix.html" className={props.classes.link} target="_blank">SSH access</a></div>
                         <div><a href="https://doc.arvados.org/user/tutorials/tutorial-firstscript.html" className={props.classes.link} target="_blank">Writing a Crunch Script</a></div>
diff --git a/src/views-components/repository-attributes-dialog/repository-attributes-dialog.tsx b/src/views-components/repository-attributes-dialog/repository-attributes-dialog.tsx
index 74cafe90..c9c72026 100644
--- a/src/views-components/repository-attributes-dialog/repository-attributes-dialog.tsx
+++ b/src/views-components/repository-attributes-dialog/repository-attributes-dialog.tsx
@@ -45,7 +45,7 @@ export const RepositoryAttributesDialog = compose(
                 maxWidth="sm">
                 <DialogTitle>Attributes</DialogTitle>
                 <DialogContent>
-                    <Typography variant="body2" className={props.classes.spacing}>
+                    <Typography variant='body1' className={props.classes.spacing}>
                         {props.data.repositoryData && attributes(props.data.repositoryData, props.classes)}
                     </Typography>
                 </DialogContent>
diff --git a/src/views-components/sharing-dialog/sharing-dialog-content.tsx b/src/views-components/sharing-dialog/sharing-dialog-content.tsx
index 7347c664..2c9bb01d 100644
--- a/src/views-components/sharing-dialog/sharing-dialog-content.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-content.tsx
@@ -14,7 +14,7 @@ export const SharingDialogContent = (props: { advancedViewOpen: boolean }) =>
         {props.advancedViewOpen &&
             <>
                 <Grid item>
-                    <Typography variant='subheading'>
+                    <Typography variant='subtitle1'>
                         Who can access
                     </Typography>
                     <SharingPublicAccessForm />
diff --git a/src/views-components/sharing-dialog/sharing-management-form-component.tsx b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
index 5e374042..e4096ea5 100644
--- a/src/views-components/sharing-dialog/sharing-management-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-management-form-component.tsx
@@ -40,7 +40,7 @@ const PermissionManagementRow = withStyles(permissionManagementRowStyles)(
             <Divider />
             <Grid container alignItems='center' spacing={8} wrap='nowrap' className={classes.root}>
                 <Grid item xs={8}>
-                    <Typography noWrap variant='subheading'>{fields.get(index).email}</Typography>
+                    <Typography noWrap variant='subtitle1'>{fields.get(index).email}</Typography>
                 </Grid>
                 <Grid item xs={4} container wrap='nowrap'>
                     <Field
diff --git a/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx b/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx
index 7f3c4b7b..03e9413e 100644
--- a/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-public-access-form-component.tsx
@@ -22,7 +22,7 @@ const SharingPublicAccessForm = withStyles(sharingPublicAccessStyles)(
             <Divider />
             <Grid container alignItems='center' spacing={8} className={classes.root}>
                 <Grid item xs={8}>
-                    <Typography variant='subheading'>
+                    <Typography variant='subtitle1'>
                         {renderVisibilityInfo(visibility)}
                     </Typography>
                 </Grid>
diff --git a/src/views-components/user-dialog/attributes-dialog.tsx b/src/views-components/user-dialog/attributes-dialog.tsx
index 8ba0f813..11594f5e 100644
--- a/src/views-components/user-dialog/attributes-dialog.tsx
+++ b/src/views-components/user-dialog/attributes-dialog.tsx
@@ -45,7 +45,7 @@ export const UserAttributesDialog = compose(
                 maxWidth="sm">
                 <DialogTitle>Attributes</DialogTitle>
                 <DialogContent>
-                    <Typography variant="body2" className={props.classes.spacing}>
+                    <Typography variant='body1' className={props.classes.spacing}>
                         {props.data && attributes(props.data, props.classes)}
                     </Typography>
                 </DialogContent>
diff --git a/src/views-components/user-dialog/manage-dialog.tsx b/src/views-components/user-dialog/manage-dialog.tsx
index 37a233f3..12c5d2b6 100644
--- a/src/views-components/user-dialog/manage-dialog.tsx
+++ b/src/views-components/user-dialog/manage-dialog.tsx
@@ -51,13 +51,13 @@ export const UserManageDialog = compose(
                     <span>
                         <DialogTitle>{`Manage - ${props.data.user.firstName} ${props.data.user.lastName}`}</DialogTitle>
                         <DialogContent>
-                            <Typography variant="body2" className={props.classes.spacing}>
+                            <Typography variant='body1' className={props.classes.spacing}>
                                 As an admin, you can log in as this user. When you’ve finished, you will need to log out and log in again with your own account.
                     </Typography>
                             <Button variant="contained" color="primary" onClick={() => props.loginAs(props.data.client.uuid)}>
                                 {`LOG IN AS ${props.data.user.firstName} ${props.data.user.lastName}`}
                             </Button>
-                            <Typography variant="body2" className={props.classes.spacing}>
+                            <Typography variant='body1' className={props.classes.spacing}>
                                 As an admin, you can setup a shell account for this user. The login name is automatically generated from the user's e-mail address.
                     </Typography>
                             <Button variant="contained" color="primary" onClick={() => props.openSetupShellAccount(props.data.uuid)}>
diff --git a/src/views-components/virtual-machines-dialog/attributes-dialog.tsx b/src/views-components/virtual-machines-dialog/attributes-dialog.tsx
index 7eaeacf3..33588dc0 100644
--- a/src/views-components/virtual-machines-dialog/attributes-dialog.tsx
+++ b/src/views-components/virtual-machines-dialog/attributes-dialog.tsx
@@ -45,7 +45,7 @@ export const VirtualMachineAttributesDialog = compose(
                 maxWidth="sm">
                 <DialogTitle>Attributes</DialogTitle>
                 <DialogContent>
-                    <Typography variant="body2" className={props.classes.spacing}>
+                    <Typography variant='body1' className={props.classes.spacing}>
                         {props.data.virtualMachineData && attributes(props.data.virtualMachineData, props.classes)}
                     </Typography>
                 </DialogContent>
diff --git a/src/views/login-panel/login-panel.tsx b/src/views/login-panel/login-panel.tsx
index 6a9210ac..151311d0 100644
--- a/src/views/login-panel/login-panel.tsx
+++ b/src/views/login-panel/login-panel.tsx
@@ -54,20 +54,20 @@ export const LoginPanel = withStyles(styles)(connect()(
     ({ classes, dispatch }: LoginPanelProps) =>
     <Grid container direction="column" item xs alignItems="center" justify="center" className={classes.root}>
         <Grid item className={classes.container}>
-            <Typography variant="title" align="center" className={classes.title}>
+            <Typography variant='h6' align="center" className={classes.title}>
                 Welcome to the Arvados Workbench
             </Typography>
-            <Typography variant="body1" className={classes.content}>
+            <Typography  className={classes.content}>
                 The "Log in" button below will show you a Google sign-in page.
                 After you assure Google that you want to log in here with your Google account, you will be redirected back here to Arvados Workbench.
             </Typography>
-            <Typography variant="body1" className={classes.content}>
+            <Typography  className={classes.content}>
                 If you have never used Arvados Workbench before, logging in for the first time will automatically create a new account.
             </Typography>
-            <Typography variant="body2" className={classNames(classes.content, classes.content__bolder)}>
+            <Typography variant='body1' className={classNames(classes.content, classes.content__bolder)}>
                 IMPORTANT: Please keep in mind to store exploratory data only but not any information used for clinical decision making.
             </Typography>
-            <Typography variant="body1" className={classes.content}>
+            <Typography  className={classes.content}>
                 Arvados Workbench uses your name and email address only for identification, and does not retrieve any other personal information from Google.
             </Typography>
             <Typography component="div" align="right">
diff --git a/src/views/my-account-panel/my-account-panel-root.tsx b/src/views/my-account-panel/my-account-panel-root.tsx
index a0b29fb4..819a16a4 100644
--- a/src/views/my-account-panel/my-account-panel-root.tsx
+++ b/src/views/my-account-panel/my-account-panel-root.tsx
@@ -69,7 +69,7 @@ export const MyAccountPanelRoot = withStyles(styles)(
     ({ classes, isValid, handleSubmit, reset, isPristine, invalid, submitting }: MyAccountPanelRootProps) => {
         return <Card className={classes.root}>
             <CardContent>
-                <Typography variant="title" className={classes.title}>User profile</Typography>
+                <Typography variant='h6' className={classes.title}>User profile</Typography>
                 <form onSubmit={handleSubmit}>
                     <Grid container direction="row" spacing={24}>
                         <Grid item xs={6}>
diff --git a/src/views/process-log-panel/process-log-code-snippet.tsx b/src/views/process-log-panel/process-log-code-snippet.tsx
index d02fc02c..a7f6c476 100644
--- a/src/views/process-log-panel/process-log-code-snippet.tsx
+++ b/src/views/process-log-panel/process-log-code-snippet.tsx
@@ -27,7 +27,8 @@ const theme = createMuiTheme({
         }
     },
     typography: {
-        fontFamily: 'monospace'
+        fontFamily: 'monospace',
+        useNextVariants: true,
     }
 });
 
diff --git a/src/views/process-log-panel/process-log-main-card.tsx b/src/views/process-log-panel/process-log-main-card.tsx
index 42df2d92..9b75d112 100644
--- a/src/views/process-log-panel/process-log-main-card.tsx
+++ b/src/views/process-log-panel/process-log-main-card.tsx
@@ -80,7 +80,7 @@ export const ProcessLogMainCard = withStyles(styles)(
                         </Tooltip>}
                     title={
                         <Tooltip title={process.containerRequest.name} placement="bottom-start">
-                            <Typography noWrap variant="title" className={classes.title}>
+                            <Typography noWrap variant='h6' className={classes.title}>
                                 {process.containerRequest.name}
                             </Typography>
                         </Tooltip>}
diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index 52f13987..1f42db6b 100644
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -103,14 +103,14 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })(
                 }
                 title={
                     <Tooltip title={process.containerRequest.name} placement="bottom-start">
-                        <Typography noWrap variant="title" color='inherit'>
+                        <Typography noWrap variant='h6' color='inherit'>
                             {process.containerRequest.name}
                         </Typography>
                     </Tooltip>
                 }
                 subheader={
                     <Tooltip title={getDescription(process)} placement="bottom-start">
-                        <Typography noWrap variant="body2" color='inherit'>
+                        <Typography noWrap variant='body1' color='inherit'>
                             {getDescription(process)}
                         </Typography>
                     </Tooltip>}/>
diff --git a/src/views/process-panel/process-subprocesses-card.tsx b/src/views/process-panel/process-subprocesses-card.tsx
index 7a1901f1..e389058d 100644
--- a/src/views/process-panel/process-subprocesses-card.tsx
+++ b/src/views/process-panel/process-subprocesses-card.tsx
@@ -83,7 +83,7 @@ export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
                 classes={{ content: classes.title, action: classes.action }}
                 action={
                     <div className={classes.rightSideHeader}>
-                        <Typography noWrap variant="body2" className={classes.status}>
+                        <Typography noWrap variant='body1' className={classes.status}>
                             {getProcessStatus(subprocess)}
                         </Typography>
                         <Tooltip title="More options" disableFocusListener>
@@ -98,7 +98,7 @@ export const ProcessSubprocessesCard = withStyles(styles, { withTheme: true })(
                 }
                 title={
                     <Tooltip title={subprocess.containerRequest.name}>
-                        <Typography noWrap variant="body2" className={classes.titleHeader}>
+                        <Typography noWrap variant='body1' className={classes.titleHeader}>
                             {subprocess.containerRequest.name}
                         </Typography>
                     </Tooltip>
diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index 9cff1e98..0314a543 100644
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -40,7 +40,7 @@ export const SubprocessesCard = withStyles(styles)(
             <CardHeader
                 className={classes.title}
                 title={
-                    <Typography noWrap variant="title" color='inherit'>
+                    <Typography noWrap variant='h6' color='inherit'>
                         Subprocess and filters
                 </Typography>} />
             <CardContent>
diff --git a/src/views/repositories-panel/repositories-panel.tsx b/src/views/repositories-panel/repositories-panel.tsx
index 62e91b5f..f6e02af4 100644
--- a/src/views/repositories-panel/repositories-panel.tsx
+++ b/src/views/repositories-panel/repositories-panel.tsx
@@ -101,7 +101,7 @@ export const RepositoriesPanel = compose(
                         <CardContent>
                             <Grid container direction="row">
                                 <Grid item xs={8}>
-                                    <Typography variant="body2">
+                                    <Typography variant='body1'>
                                         When you are using an Arvados virtual machine, you should clone the https:// URLs. This will authenticate automatically using your API token. <br />
                                         In order to clone git repositories using SSH, <Link to={Routes.SSH_KEYS_USER} className={classes.link}>add an SSH key to your account</Link> and clone the git@ URLs.
                                     </Typography>
diff --git a/src/views/run-process-panel/inputs/directory-array-input.tsx b/src/views/run-process-panel/inputs/directory-array-input.tsx
index 6da32103..a7d83dae 100644
--- a/src/views/run-process-panel/inputs/directory-array-input.tsx
+++ b/src/views/run-process-panel/inputs/directory-array-input.tsx
@@ -280,7 +280,7 @@ const DirectoryArrayInputComponent = connect(mapStateToProps)(
                     </div>
                     <Divider />
                     <div className={classes.chips}>
-                        <Typography variant='subheading'>Selected collections ({this.state.directories.length}):</Typography>
+                        <Typography variant='subtitle1'>Selected collections ({this.state.directories.length}):</Typography>
                         <Chips
                             orderable
                             deletable
diff --git a/src/views/run-process-panel/inputs/file-array-input.tsx b/src/views/run-process-panel/inputs/file-array-input.tsx
index bb85825d..c134548c 100644
--- a/src/views/run-process-panel/inputs/file-array-input.tsx
+++ b/src/views/run-process-panel/inputs/file-array-input.tsx
@@ -263,7 +263,7 @@ const FileArrayInputComponent = connect(mapStateToProps)(
                     </div>
                     <Divider />
                     <div className={classes.chips}>
-                        <Typography variant='subheading'>Selected files ({this.state.files.length}):</Typography>
+                        <Typography variant='subtitle1'>Selected files ({this.state.files.length}):</Typography>
                         <Chips
                             orderable
                             deletable
diff --git a/src/views/site-manager-panel/site-manager-panel-root.tsx b/src/views/site-manager-panel/site-manager-panel-root.tsx
index 2b6d3c97..684e35b4 100644
--- a/src/views/site-manager-panel/site-manager-panel-root.tsx
+++ b/src/views/site-manager-panel/site-manager-panel-root.tsx
@@ -119,7 +119,7 @@ export const SiteManagerPanelRoot = compose(
             <CardContent>
                 <Grid container direction="row">
                     <Grid item xs={12}>
-                        <Typography variant='body1' paragraph={true} >
+                        <Typography  paragraph={true} >
                             You can log in to multiple Arvados sites here, then use the multi-site search page to search collections and projects on all sites at once.
                         </Typography>
                     </Grid>
@@ -157,7 +157,7 @@ export const SiteManagerPanelRoot = compose(
                 <form onSubmit={handleSubmit}>
                     <Grid container direction="row">
                         <Grid item xs={12}>
-                            <Typography variant='body1' paragraph={true} className={classes.remoteSiteInfo}>
+                            <Typography  paragraph={true} className={classes.remoteSiteInfo}>
                                 To add a remote Arvados site, paste the remote site's host here (see "ARVADOS_API_HOST" on the "current token" page).
                             </Typography>
                         </Grid>
diff --git a/src/views/ssh-key-panel/ssh-key-panel-root.tsx b/src/views/ssh-key-panel/ssh-key-panel-root.tsx
index 2cdad07d..fcef5b3d 100644
--- a/src/views/ssh-key-panel/ssh-key-panel-root.tsx
+++ b/src/views/ssh-key-panel/ssh-key-panel-root.tsx
@@ -55,14 +55,14 @@ export const SshKeyPanelRoot = withStyles(styles)(
             <CardContent>
                 <Grid container direction="row">
                     <Grid item xs={8}>
-                        { !hasKeys && <Typography variant='body1' paragraph={true} >
+                        { !hasKeys && <Typography  paragraph={true} >
                             You have not yet set up an SSH public key for use with Arvados.
                             <a href='https://doc.arvados.org/user/getting_started/ssh-access-unix.html'
                                 target='blank' className={classes.link}>
                                 Learn more.
                             </a>
                         </Typography>}
-                        { !hasKeys && <Typography variant='body1' paragraph={true}>
+                        { !hasKeys && <Typography  paragraph={true}>
                             When you have an SSH key you would like to use, add it using button below.
                         </Typography> }
                     </Grid>
diff --git a/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx b/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx
index 5cb4565e..291041b3 100644
--- a/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx
+++ b/src/views/virtual-machine-panel/virtual-machine-user-panel.tsx
@@ -110,7 +110,7 @@ const CardContentWithoutVirtualMachines = (props: VirtualMachineProps) =>
         <Card>
             <CardContent className={props.classes.cardWithoutMachines}>
                 <Grid item xs={6}>
-                    <Typography variant="body2">
+                    <Typography variant='body1'>
                         You do not have access to any virtual machines. Some Arvados features require using the command line. You may request access to a hosted virtual machine with the command line shell.
                     </Typography>
                 </Grid>
@@ -149,7 +149,7 @@ const virtualMachineSendRequest = (props: VirtualMachineProps) =>
             SEND REQUEST FOR SHELL ACCESS
         </Button>
         {props.requestedDate &&
-            <Typography variant="body1">
+            <Typography >
                 A request for shell access was sent on {props.requestedDate}
             </Typography>}
     </span>;
@@ -188,7 +188,7 @@ const CardSSHSection = (props: VirtualMachineProps) =>
     <Grid item xs={12}>
         <Card>
             <CardContent>
-                <Typography variant="body2">
+                <Typography variant='body1'>
                     In order to access virtual machines using SSH, <Link to={Routes.SSH_KEYS_USER} className={props.classes.link}>add an SSH key to your account</Link> and add a section like this to your SSH configuration file ( ~/.ssh/config):
                 </Typography>
                 <DefaultCodeSnippet
-- 
2.30.2