feat(frontend): new login/register design

Author: Aksh-Bansal-dev

frontend/public/images/login.png

@@ -17,6 +17,8 @@ body {
   --dark-golden: #ff9c08;
   --light-golden: #ffd166;
   --heading-font: "Montserrat", sans-serif;
+  --my-cyan: #10abc2;
+  --my-dcyan: #0f95aa;
 }
 
 body::-webkit-scrollbar {

frontend/src/App.css

@@ -1,6 +1,7 @@
 import { TextField } from "@material-ui/core";
 import { FieldHookConfig, useField } from "formik";
 import React from "react";
+import { useSignupLoginStyles } from "./RegistrationForm/signupLoginStyle";
 
 type FormikTextFieldProps = {
   className: string;
@@ -16,6 +17,7 @@ const FormikTextField: React.FC<FormikTextFieldProps> = ({
   ...props
 }) => {
   // eslint-disable-next-line @typescript-eslint/ban-types
+  const classes = useSignupLoginStyles();
   const [field, meta] = useField<string>(props);
   const errorText = meta.error && meta.touched ? meta.error : "";
   const obj = {
@@ -29,6 +31,19 @@ const FormikTextField: React.FC<FormikTextFieldProps> = ({
       {...field}
       helperText={errorText}
       error={!!errorText}
+      InputLabelProps={{
+        classes: {
+          root: classes.cssLabel,
+          focused: classes.cssFocused,
+        },
+      }}
+      InputProps={{
+        classes: {
+          root: classes.cssOutlinedInput,
+          focused: classes.cssFocused,
+          notchedOutline: classes.notchedOutline,
+        },
+      }}
       variant="outlined"
     />
   );

frontend/src/components/FormikTextField.tsx

@@ -20,11 +20,7 @@ const validSchema = yup.object({
     .required()
     .max(64)
     .matches(/^[a-zA-Z0-9]+(@iiitdmj\.ac\.in)$/, "Invalid Email"),
-  password: yup
-    .string()
-    .required()
-    .min(6)
-    .matches(/[0-9]/, "Password must include atleast 1 digit"),
+  password: yup.string().required().min(6),
 });
 
 const Login: React.FC<LoginProps> = ({ setPage }) => {

frontend/src/components/RegistrationForm/Login.tsx

@@ -9,6 +9,14 @@ import BackButton from "../Buttons/BackButton";
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    main: {
+      width: "30vw",
+      background: "#1c1c1c",
+      [theme.breakpoints.down("sm")]: {
+        width: "90vw",
+      },
+      color: "#ededed",
+    },
     title: {
       margin: "3vh",
       fontWeight: "bold",
@@ -19,15 +27,12 @@ const useStyles = makeStyles((theme: Theme) =>
       display: "flex",
       alignItems: "center",
     },
-    main: {
-      width: "30vw",
-      [theme.breakpoints.down("sm")]: {
-        width: "90vw",
-      },
-    },
     or: {
       margin: "2vh",
     },
+    icon: {
+      color: "#10ABC2",
+    },
   })
 );
 
@@ -44,7 +49,7 @@ const RegistrationForm: React.FC = () => {
   return (
     <Paper className={classes.main}>
       <div className={classes.flexbox}>
-        <BackButton />
+        <BackButton className={classes.icon} />
         <Typography className={classes.title} align="center">
           {heading[page]}
         </Typography>

frontend/src/components/RegistrationForm/index.tsx

@@ -10,16 +10,37 @@ export const useSignupLoginStyles = makeStyles(() =>
     input: {
       marginBottom: "2vh",
       width: "80%",
+      background: "transparent",
+    },
+    cssLabel: {
+      color: "#ededed",
+    },
+
+    cssOutlinedInput: {
+      "&$cssFocused $notchedOutline": {
+        borderColor: `#ededed !important`,
+      },
+      color: "#ededed",
+    },
+
+    cssFocused: {
+      color: "#ededed",
+    },
+
+    notchedOutline: {
+      borderWidth: "1px",
+      borderColor: "#ededed !important",
     },
     btn: {
-      background: "var(--golden)",
+      background: "var(--my-cyan)",
       margin: "2vh",
       "&:hover": {
-        background: "var(--dark-golden)",
+        background: "var(--my-dcyan)",
       },
     },
     link: {
       cursor: "pointer",
+      color: "#00a6ed",
     },
     footer: {
       marginBottom: "2vh",

frontend/src/components/RegistrationForm/signupLoginStyle.ts

@@ -1,10 +1,10 @@
 import React from "react";
-import NavBar from "../../components/Navs/Navbar";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import ProjectCardv2 from "src/components/Cards/ProjectCardv2";
 import { projectlist } from "./projectlist";
 import useWindowDimensions from "../../utils/useWindowDimensions";
 import ProjectCard from "src/components/Cards/ProjectCard";
+import Nav2 from "src/components/Navs/Nav_v2";
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -32,7 +32,7 @@ const Projects: React.FC = () => {
   const { width } = useWindowDimensions();
   return (
     <div className={classes.root}>
-      <NavBar />
+      <Nav2 />
       <div className={classes.flexbox}>
         {projectlist.map((project, key) => {
           if (width > 600) {

frontend/src/pages/Projects/index.tsx

@@ -3,11 +3,15 @@ import { createStyles, makeStyles } from "@material-ui/core/styles";
 import RegistrationForm from "../../components/RegistrationForm";
 import useTokenStore from "../../store/tokenStore";
 import { useHistory } from "react-router";
+import Nav2 from "src/components/Navs/Nav_v2";
 
 const useStyles = makeStyles(() =>
   createStyles({
     root: {
-      height: "100vh",
+      minHeight: "100vh",
+    },
+    flexbox: {
+      marginTop: "5vh",
       display: "flex",
       justifyContent: "center",
       alignItems: "center",
@@ -27,7 +31,10 @@ const Registration: React.FC = () => {
 
   return (
     <div className={classes.root}>
-      <RegistrationForm />
+      <Nav2 />
+      <div className={classes.flexbox}>
+        <RegistrationForm />
+      </div>
     </div>
   );
 };

frontend/src/pages/Registration/index.tsx

@@ -1,4 +1,5 @@
 import { createMuiTheme } from "@material-ui/core";
+import blue from "@material-ui/core/colors/blue";
 
 const Theme = createMuiTheme({
   breakpoints: {
@@ -10,6 +11,9 @@ const Theme = createMuiTheme({
       xl: 1920,
     },
   },
+  palette: {
+    primary: blue,
+  },
 });
 
 export default Theme;