X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/e02a51f2799aaab5cdd0194dc9363e31592d4209..3641a3638123f272b97cf313a1a1a4d890741383:/src/views/login-panel/login-panel.tsx

diff --git a/src/views/login-panel/login-panel.tsx b/src/views/login-panel/login-panel.tsx
index 2521e14385..2928a94ef0 100644
--- a/src/views/login-panel/login-panel.tsx
+++ b/src/views/login-panel/login-panel.tsx
@@ -3,7 +3,6 @@
 // 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';
@@ -15,10 +14,22 @@ type CssRules = 'root' | 'container' | 'title' | 'content' | 'content__bolder' |
 
 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,
@@ -39,10 +50,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
 
 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}>
@@ -50,8 +59,7 @@ export const LoginPanel = compose(
             </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.
@@ -69,4 +77,4 @@ export const LoginPanel = compose(
             </Typography>
         </Grid>
     </Grid>
-);
\ No newline at end of file
+));