Changed styles for Login page (#316)

Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
Co-authored-by: Daniel Valdivia <hola@danielvaldivia.com>

portal-ui/src/screens/LoginPage/LoginPage.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useState } from "react";
 import request from "superagent";
 import storage from "local-storage-fallback";
 import { connect, ConnectedProps } from "react-redux";
+import ErrorIcon from "@material-ui/icons/Error";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
 import Grid from "@material-ui/core/Grid";
@@ -30,22 +31,31 @@ import api from "../../common/api";
 import { ILoginDetails, loginStrategyType } from "./types";
 import { setSession } from "../../common/utils";
 import history from "../../history";
+import { Error } from "@material-ui/icons";
 
 const styles = (theme: Theme) =>
   createStyles({
     "@global": {
       body: {
-        backgroundColor: "#F4F4F4",
+        backgroundColor: "#FAFAFA",
       },
     },
     paper: {
-      marginTop: theme.spacing(16),
+      borderRadius: 8,
-      borderRadius: "3px",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      width: "800px",
+      width: 800,
+      height: 424,
       margin: "auto",
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      marginLeft: -400,
+      marginTop: -212,
+      "&.MuiPaper-root": {
+        borderRadius: 8,
+      },
     },
     avatar: {
       margin: theme.spacing(1),
@@ -53,36 +63,67 @@ const styles = (theme: Theme) =>
     },
     form: {
       width: "100%", // Fix IE 11 issue.
-      marginTop: theme.spacing(3),
     },
     submit: {
-      margin: theme.spacing(3, 0, 2),
+      margin: "30px 0px 16px",
+      height: 40,
+      fontWeight: 700,
+      boxShadow: "none",
+      padding: "16px 30px",
     },
     errorBlock: {
-      color: "red",
+      backgroundColor: "#C72C48",
+      width: 800,
+      height: 64,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      position: "absolute",
+      left: "50%",
+      top: "50%",
+      marginLeft: -400,
+      marginTop: -290,
+      color: "#fff",
+      fontWeight: 700,
+      fontSize: 14,
+      borderRadius: 8,
     },
     mainContainer: {
-      borderRadius: "3px",
+      position: "relative",
+      height: 424,
     },
     theOcean: {
-      borderTopLeftRadius: "3px",
+      borderTopLeftRadius: 8,
-      borderBottomLeftRadius: "3px",
+      borderBottomLeftRadius: 8,
       background:
-        "transparent linear-gradient(333deg, #281B6F 1%, #271260 13%, #120D53 83%) 0% 0% no-repeat padding-box;",
+        "transparent linear-gradient(to bottom, #073052 0%,#05122b 100%); 0% 0% no-repeat padding-box;",
     },
     oceanBg: {
       backgroundImage: "url(/images/BG_Illustration.svg)",
       backgroundRepeat: "no-repeat",
       backgroundPosition: "bottom left",
       height: "100%",
-      width: "100%",
+      width: 324,
     },
     theLogin: {
-      padding: "76px 62px 20px 62px",
+      padding: "40px 45px 20px 45px",
     },
     loadingLoginStrategy: {
       textAlign: "center",
     },
+    headerTitle: {
+      marginBottom: 10,
+    },
+    submitContainer: {
+      textAlign: "right",
+    },
+    disclaimer: {
+      fontSize: 12,
+      marginTop: 30,
+    },
+    jwtInput: {
+      marginTop: 45,
+    },
   });
 
 const mapState = (state: SystemState) => ({
@@ -182,61 +223,59 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
     case loginStrategyType.form: {
       loginComponent = (
         <React.Fragment>
-          <Typography component="h1" variant="h6">
+          <Typography
-            Login
+            component="h1"
+            variant="h6"
+            className={classes.headerTitle}
+          >
+            Console Login
           </Typography>
           <form className={classes.form} noValidate onSubmit={formSubmit}>
             <Grid container spacing={2}>
-              {error !== "" && (
-                <Grid item xs={12}>
-                  <Typography
-                    component="p"
-                    variant="body1"
-                    className={classes.errorBlock}
-                  >
-                    {error}
-                  </Typography>
-                </Grid>
-              )}
               <Grid item xs={12}>
                 <TextField
-                  required
                   fullWidth
                   id="accessKey"
                   value={accessKey}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setAccessKey(e.target.value)
                   }
-                  label="Access Key"
+                  label="Enter Access Key"
                   name="accessKey"
                   autoComplete="username"
                 />
               </Grid>
               <Grid item xs={12}>
                 <TextField
-                  required
                   fullWidth
                   value={secretKey}
                   onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     setSecretKey(e.target.value)
                   }
                   name="secretKey"
-                  label="Secret Key"
+                  label="Enter Secret Key"
                   type="password"
                   id="secretKey"
                   autoComplete="current-password"
                 />
               </Grid>
             </Grid>
-            <Button
+            <Grid item xs={12} className={classes.submitContainer}>
-              type="submit"
+              <Button
-              fullWidth
+                type="submit"
-              variant="contained"
+                variant="contained"
-              color="primary"
+                color="primary"
-              className={classes.submit}
+                className={classes.submit}
-            >
+              >
-              Login
+                Login
-            </Button>
+              </Button>
+            </Grid>
+            <Grid item xs={12} className={classes.disclaimer}>
+              <strong>Don't have an access key?</strong>
+              <br />
+              <br />
+              Contact your administrator to have one made
+            </Grid>
           </form>
         </React.Fragment>
       );
@@ -245,7 +284,11 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
     case loginStrategyType.redirect: {
       loginComponent = (
         <React.Fragment>
-          <Typography component="h1" variant="h6">
+          <Typography
+            component="h1"
+            variant="h6"
+            className={classes.headerTitle}
+          >
             Login
           </Typography>
           <Button
@@ -255,7 +298,6 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
               window.location.hostname
             )}
             type="submit"
-            fullWidth
             variant="contained"
             color="primary"
             className={classes.submit}
@@ -269,23 +311,16 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
     case loginStrategyType.serviceAccount: {
       loginComponent = (
         <React.Fragment>
-          <Typography component="h1" variant="h6">
+          <Typography
-            Login
+            component="h1"
+            variant="h6"
+            className={classes.headerTitle}
+          >
+            Operator Login
           </Typography>
           <form className={classes.form} noValidate onSubmit={formSubmit}>
             <Grid container spacing={2}>
-              {error !== "" && (
+              <Grid item xs={12} className={classes.jwtInput}>
-                <Grid item xs={12}>
-                  <Typography
-                    component="p"
-                    variant="body1"
-                    className={classes.errorBlock}
-                  >
-                    {error}
-                  </Typography>
-                </Grid>
-              )}
-              <Grid item xs={12}>
                 <TextField
                   required
                   fullWidth
@@ -300,15 +335,21 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
                 />
               </Grid>
             </Grid>
-            <Button
+            <Grid item xs={12} className={classes.submitContainer}>
-              type="submit"
+              <Button
-              fullWidth
+                type="submit"
-              variant="contained"
+                variant="contained"
-              color="primary"
+                color="primary"
-              className={classes.submit}
+                className={classes.submit}
-            >
+              >
-              Login
+                Login
-            </Button>
+              </Button>
+            </Grid>
+            <Grid item xs={12} className={classes.disclaimer}>
+              <strong>Don't have an access key?</strong>
+              <br />
+              Contact your administrator to have one made
+            </Grid>
           </form>
         </React.Fragment>
       );
@@ -321,16 +362,24 @@ const Login = ({ classes, userLoggedIn }: ILoginProps) => {
   }
 
   return (
-    <Paper className={classes.paper}>
+    <React.Fragment>
-      <Grid container className={classes.mainContainer}>
+      {error !== "" && (
-        <Grid item xs={7} className={classes.theOcean}>
+        <div className={classes.errorBlock}>
-          <div className={classes.oceanBg} />
+          <ErrorIcon fontSize="small" />
+          &nbsp;{error}
+        </div>
+      )}
+      <Paper className={classes.paper}>
+        <Grid container className={classes.mainContainer}>
+          <Grid item xs={7} className={classes.theOcean}>
+            <div className={classes.oceanBg} />
+          </Grid>
+          <Grid item xs={5} className={classes.theLogin}>
+            {loginComponent}
+          </Grid>
         </Grid>
-        <Grid item xs={5} className={classes.theLogin}>
+      </Paper>
-          {loginComponent}
+    </React.Fragment>
-        </Grid>
-      </Grid>
-    </Paper>
   );
 };
 

portal-ui/src/theme/main.ts

@@ -3,9 +3,9 @@ import { createMuiTheme } from "@material-ui/core";
 const theme = createMuiTheme({
   palette: {
     primary: {
-      light: "#757ce8",
+      light: "#073052",
-      main: "#201763",
+      main: "#081C42",
-      dark: "#362585",
+      dark: "#05122B",
       contrastText: "#fff",
     },
     secondary: {
@@ -38,15 +38,15 @@ const theme = createMuiTheme({
     fontFamily: ["Lato", "sans-serif"].join(","),
     h1: {
       fontWeight: "bold",
-      color: "#201763",
+      color: "#081C42",
     },
     h2: {
       fontWeight: "bold",
-      color: "#201763",
+      color: "#081C42",
     },
     h3: {
       fontWeight: "bold",
-      color: "#201763",
+      color: "#081C42",
     },
     h4: {
       fontWeight: "bold",
@@ -54,7 +54,7 @@ const theme = createMuiTheme({
     },
     h5: {
       fontWeight: "bold",
-      color: "#201763",
+      color: "#081C42",
     },
     h6: {
       fontWeight: "bold",