Improve login screen

.vscode/settings.json

@@ -1,5 +1,17 @@
 {
 	"files.exclude": {
 		"node_modules": true
-	}
+	},
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[javascript]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+
+	"prettier.tabWidth": 4,
+	"prettier.useTabs": true,
+
+	"editor.formatOnSave": true
 }

src/ui/routes/LoginRoute.tsx

@@ -4,57 +4,78 @@
  * @author Pierre Hubert
  */
 
-import { Typography, Link, makeStyles, Container, CssBaseline, Avatar, TextField, FormControlLabel, Checkbox, Button, Grid, Box } from "@material-ui/core";
+import {
-import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+	Typography,
+	Link,
+	makeStyles,
+	Container,
+	CssBaseline,
+	Avatar,
+	TextField,
+	FormControlLabel,
+	Checkbox,
+	Button,
+	Grid,
+	Box,
+} from "@material-ui/core";
+
+import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
 import React from "react";
 
 function Copyright() {
 	return (
 		<Typography variant="body2" color="textSecondary" align="center">
-        {'Copyright © '}
+			{"Copyright © "}
-        <Link color="inherit" href="https://material-ui.com/">
+			Comunic&nbsp;
-          Your Website
-        </Link>{' '}
 			{new Date().getFullYear()}
-        {'.'}
+			{"."}
 		</Typography>
 	);
 }
 
-  const useStyles = makeStyles((theme) => ({
+export class LoginRoute extends React.Component {
-    paper: {
+	render() {
-      marginTop: theme.spacing(8),
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-    },
-    avatar: {
-      margin: theme.spacing(1),
-      backgroundColor: theme.palette.secondary.main,
-    },
-    form: {
-      width: '100%', // Fix IE 11 issue.
-      marginTop: theme.spacing(1),
-    },
-    submit: {
-      margin: theme.spacing(3, 0, 2),
-    },
-  }));
-  
-export function LoginRoute() {
-    const classes = useStyles();
-  
 		return (
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "center",
+					alignItems: "center",
+					height: "100%",
+				}}
+			>
 				<Container component="main" maxWidth="xs">
 					<CssBaseline />
-        <div className={classes.paper}>
+					<div
-          <Avatar className={classes.avatar}>
+						style={{
+							marginTop: "8px",
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+						}}
+					>
+						<Avatar
+							style={{
+								margin: "1px",
+								backgroundColor: "pink",
+							}}
+						>
 							<LockOutlinedIcon />
 						</Avatar>
-          <Typography component="h1" variant="h5">
+						<Typography
-            Sign in
+							component="h1"
+							variant="h5"
+							style={{ margin: "10px" }}
+						>
+							Comunic Console
 						</Typography>
-          <form className={classes.form} noValidate>
+						<form
+							style={{
+								width: "100%", // Fix IE 11 issue.
+								marginTop: "1px",
+							}}
+							noValidate
+						>
 							<TextField
 								variant="outlined"
 								margin="normal"
@@ -66,48 +87,25 @@ export function LoginRoute() {
 								autoComplete="email"
 								autoFocus
 							/>
-            <TextField
+
-              variant="outlined"
-              margin="normal"
-              required
-              fullWidth
-              name="password"
-              label="Password"
-              type="password"
-              id="password"
-              autoComplete="current-password"
-            />
-            <FormControlLabel
-              control={<Checkbox value="remember" color="primary" />}
-              label="Remember me"
-            />
 							<Button
 								type="submit"
 								fullWidth
 								variant="contained"
 								color="primary"
-              className={classes.submit}
+								style={{
+									margin: "10px 0px 2px 0px",
+								}}
 							>
 								Sign In
 							</Button>
-            <Grid container>
-              <Grid item xs>
-                <Link href="#" variant="body2">
-                  Forgot password?
-                </Link>
-              </Grid>
-              <Grid item>
-                <Link href="#" variant="body2">
-                  {"Don't have an account? Sign Up"}
-                </Link>
-              </Grid>
-            </Grid>
 						</form>
 					</div>
 					<Box mt={8}>
 						<Copyright />
 					</Box>
 				</Container>
+			</div>
 		);
 	}
-  
+}