fixed login and register styles

Author: aadityarajkumawat

client/src/components/auth/Login.js

@@ -1,24 +1,23 @@
-import React, { useState, useEffect, Fragment } from "react";
-import { connect } from "react-redux";
-import { login } from "../../actions/authAction";
-import { removeNav } from "../../actions/navAction";
-import { loadProfile } from "../../actions/profileAction";
-import { Link } from "react-router-dom";
-import i from "../../utils/mediaQ";
-
-// Assets import
-import auth from "../../assets/auth.jpg";
-import Alert from "../alerts/Alert";
 import {
   Box,
+  Button,
   Flex,
   Heading,
+  HStack,
   Image,
-  Text,
   Input,
-  HStack,
-  Button,
+  Text,
 } from "@chakra-ui/react";
+import React, { Fragment, useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { login } from "../../actions/authAction";
+import { removeNav } from "../../actions/navAction";
+import { loadProfile } from "../../actions/profileAction";
+// Assets import
+import auth from "../../assets/auth.jpg";
+import i from "../../utils/mediaQ";
+import Alert from "../alerts/Alert";
 
 const Login = ({
   auth: { isAuthenticated },
@@ -68,13 +67,14 @@ const Login = ({
   return (
     <Fragment>
       <Box w={i() ? "calc(100% - 700px)" : ""}>
-        <Flex alignItems="center" flexDirection="column" pt="2.5rem">
+        <Flex alignItems="center" flexDirection="column" pt="2.5rem" mt="3rem">
           <Heading as="h1">Welcome to DevHelp</Heading>
           <Text
-            color="#00000080"
             px={i() ? "" : "60px"}
             fontSize={i() ? "" : "14px"}
             textAlign="center"
+            mt="1rem"
+            fontSize="20px"
           >
             DevHelp has a pool of highly experienced developers in their
             respective tech stacks
@@ -112,15 +112,14 @@ const Login = ({
           <Button
             isLoading={loading}
             loadingText="Logging In"
-            colorScheme="blackAlpha"
             w={i() ? "450px" : "280px"}
             type="submit"
             onClick={onSubmit}
           >
             Login
           </Button>
         </Flex>
-        <Flex justifyContent="center">
+        <Flex justifyContent="center" mt="2rem">
           New user?{"  "}
           <Link to="sign-up">
             <Text ml="5px" color="#0066ff">

client/src/components/auth/Register.js

@@ -1,23 +1,22 @@
-import React, { useState, useEffect, Fragment } from "react";
-import { connect } from "react-redux";
-import { register } from "../../actions/authAction";
-import { removeNav } from "../../actions/navAction";
-import { Link } from "react-router-dom";
-
-import Alert from "../alerts/Alert";
-
-// Assets import
-import auth from "../../assets/auth.jpg";
 import {
   Box,
+  Button,
   Flex,
   Heading,
+  HStack,
   Image,
-  Text,
   Input,
-  HStack,
-  Button,
+  Text,
 } from "@chakra-ui/react";
+import React, { Fragment, useEffect, useState } from "react";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+import { register } from "../../actions/authAction";
+import { removeNav } from "../../actions/navAction";
+// Assets import
+import auth from "../../assets/auth.jpg";
+import i from "../../utils/mediaQ";
+import Alert from "../alerts/Alert";
 
 const Register = ({
   auth: { isAuthenticated },
@@ -70,9 +69,15 @@ const Register = ({
   return (
     <Fragment>
       <Box w="calc(100% - 700px)">
-        <Flex alignItems="center" flexDirection="column" pt="2.5rem">
+        <Flex alignItems="center" flexDirection="column" pt="2.5rem" mt="3rem">
           <Heading as="h1">Welcome to DevHelp</Heading>
-          <Text>
+          <Text
+            px={i() ? "" : "60px"}
+            fontSize={i() ? "" : "14px"}
+            textAlign="center"
+            mt="1rem"
+            fontSize="20px"
+          >
             DevHelp has a pool of highly experienced developers in their
             respective tech stacks
           </Text>
@@ -121,15 +126,14 @@ const Register = ({
           <Button
             isLoading={loading}
             loadingText="Logging In"
-            colorScheme="blackAlpha"
             w="450px"
             type="submit"
             onClick={onSubmit}
           >
             Sign Up
           </Button>
         </Flex>
-        <Flex justifyContent="center">
+        <Flex justifyContent="center" mt="2rem">
           Already a user?{"  "}
           <Link to="login">
             <Text ml="5px" color="#0066ff">