// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { compose } from 'redux';
import { connect, DispatchProp } from 'react-redux';
import { Grid, Typography, Button } from '@material-ui/core';
import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- background: theme.palette.background.default
+ position: 'relative',
+ backgroundColor: theme.palette.grey["200"],
+ '&::after': {
+ content: `''`,
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ bottom: 0,
+ right: 0,
+ background: 'url("arvados-logo-big.png") no-repeat center center',
+ opacity: 0.2,
+ }
},
container: {
- width: '560px'
+ width: '560px',
+ zIndex: 10
},
title: {
marginBottom: theme.spacing.unit * 6,
type LoginPanelProps = DispatchProp<any> & WithStyles<CssRules>;
-export const LoginPanel = compose(
- withStyles(styles),
- connect()
-)(({ classes, dispatch }: LoginPanelProps) =>
+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}>
- Welcome to the Arvados Wrokbench
+ Welcome to the Arvados Workbench
</Typography>
<Typography variant="body1" 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.
+ 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}>
If you have never used Arvados Workbench before, logging in for the first time will automatically create a new account.
</Typography>
</Grid>
</Grid>
-);
\ No newline at end of file
+));