const rocheBlue = '#06C';
export const themeOptions: ArvadosThemeOptions = {
+ typography: {
+ useNextVariants: true,
+ },
customs: {
colors: {
green700: green["700"],
dark: teal.A400,
contrastText: '#fff'
}
- }
+ },
};
export const CustomTheme = createMuiTheme(themeOptions);
\ No newline at end of file
classes={{ action: classes.button }}
action={
<Button onClick={onUploadDataClick}
- variant='raised'
+ variant='contained'
color='primary'
size='small'>
<DownloadIcon className={classes.uploadIcon} />
</DialogContent>
<DialogActions style={{ margin: '0px 24px 24px' }}>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
{props.data.cancelButtonLabel || 'Cancel'}
<CardActions>
<Button
color="primary"
- variant="raised"
+ variant='contained'
size="small"
onClick={this.submit}>
Ok
<CardActions>
<Button
color="primary"
- variant="raised"
+ variant='contained'
size="small"
onClick={this.submit}>
Ok
}
},
typography: {
- fontFamily: 'monospace'
+ fontFamily: 'monospace',
+ useNextVariants: true,
}
});
<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>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
disabled={props.uploading}
onClick={props.closeDialog}>
{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>
<Icon style={{ fontSize: `${iconSize}rem` }} />
</ListItemIcon>
<ListItemText primary={
- <Typography variant='body1' className={classnames(classes.listItemText, {
+ <Typography className={classnames(classes.listItemText, {
[classes.active]: isActive
})}>
{name}
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
disabled={props.submitting}
onClick={props.closeDialog}>
{value === 4 && dialogContent(curlHeader, curlExample, classes)}
</DialogContent>
<DialogActions>
- <Button variant='flat' color='primary' onClick={closeDialog}>
+ <Button variant='text' color='primary' onClick={closeDialog}>
Close
</Button>
</DialogActions>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
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
</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).
</Grid>
<Grid item xs={8}>
<Tooltip title={item.getTitle()}>
- <Typography variant="title" noWrap>
+ <Typography variant='h6' noWrap>
{item.getTitle()}
</Typography>
</Tooltip>
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>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
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>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
<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>
)
<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>
lines={[props.data.command]} />
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Cancel
</Button>
- <Button variant='raised' color='primary'>
+ <Button variant='contained' color='primary'>
Remove
</Button>
</DialogActions>
<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>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
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>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
{props.advancedViewOpen &&
<>
<Grid item>
- <Typography variant='subheading'>
+ <Typography variant='subtitle1'>
Who can access
</Typography>
<SharingPublicAccessForm />
<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
<Divider />
<Grid container alignItems='center' spacing={8} className={classes.root}>
<Grid item xs={8}>
- <Typography variant='subheading'>
+ <Typography variant='subtitle1'>
{renderVisibilityInfo(visibility)}
</Typography>
</Grid>
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
</DialogContent>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={closeDialog}>
Close
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>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
<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)}>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
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>
<DialogActions>
<Button
- variant='flat'
+ variant='text'
color='primary'
onClick={props.closeDialog}>
Close
({ 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">
({ 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}>
}
},
typography: {
- fontFamily: 'monospace'
+ fontFamily: 'monospace',
+ useNextVariants: true,
}
});
</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>}
}
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>}/>
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>
}
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>
<CardHeader
className={classes.title}
title={
- <Typography noWrap variant="title" color='inherit'>
+ <Typography noWrap variant='h6' color='inherit'>
Subprocess and filters
</Typography>} />
<CardContent>
<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>
</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
</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
<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>
<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>
<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>
<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>
SEND REQUEST FOR SHELL ACCESS
</Button>
{props.requestedDate &&
- <Typography variant="body1">
+ <Typography >
A request for shell access was sent on {props.requestedDate}
</Typography>}
</span>;
<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
projects / arvados-workbench2.git / commitdiff