From 534b8d15e4a9a7a5d408d55de7e0df5542aebb15 Mon Sep 17 00:00:00 2001 From: Annu Kumari Date: Fri, 14 Jun 2024 12:05:21 +0530 Subject: [PATCH 1/3] LoginAndSignupUi --- client/src/Components/Auth/Login.jsx | 33 ++++++++--- client/src/Components/Auth/Signup.jsx | 79 ++++++++++++++++++-------- client/src/Components/Navbar.jsx | 44 +++++++------- client/src/Pages/HomePage.jsx | 2 +- client/src/Pages/LearningPath.jsx | 2 + client/src/assets/images/login.png | Bin 0 -> 7737927 bytes 6 files changed, 102 insertions(+), 58 deletions(-) create mode 100644 client/src/assets/images/login.png diff --git a/client/src/Components/Auth/Login.jsx b/client/src/Components/Auth/Login.jsx index 469d7aa..6ed2a32 100644 --- a/client/src/Components/Auth/Login.jsx +++ b/client/src/Components/Auth/Login.jsx @@ -5,7 +5,7 @@ import axios from "axios"; import Cookies from "universal-cookie"; import { AuthContext } from "./AuthContext"; import BackToTopButton from "../BackToTopButton"; -import userImg from "../../assets/images/user.webp"; +import userImg from "../../assets/images/login.png"; import { toast } from "react-toastify"; import { useRef } from 'react'; import gsap from 'gsap'; @@ -96,9 +96,21 @@ const Login = () => { }; return ( -
- user +
+ {/* user */} + +
+
+

Login Account

@@ -117,7 +129,7 @@ const Login = () => { required placeholder="Enter your email" onChange={handleOnChange} - className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-gray-300" + className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-blue-400 dark:border-blue-300 bg-transparent border-1.5" />
@@ -135,7 +147,7 @@ const Login = () => { value={password} placeholder="Enter your password" onChange={handleOnChange} - className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-gray-300 text-[15px]" + className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-blue-400 text-[15px] dark:border-blue-300 bg-transparent border-1.5" />
{
+
+ {/*
*/} +
+

New to the Platform? { Signup

-
+
-
+
); }; diff --git a/client/src/Components/Auth/Signup.jsx b/client/src/Components/Auth/Signup.jsx index 67eb3ac..ffa45ab 100644 --- a/client/src/Components/Auth/Signup.jsx +++ b/client/src/Components/Auth/Signup.jsx @@ -4,7 +4,7 @@ import axios from "axios"; import Cookies from "universal-cookie"; import { AuthContext } from "./AuthContext"; import BackToTopButton from "../BackToTopButton"; -import userImg from "../../assets/images/user.webp"; +import userImg from "../../assets/images/login.png"; import { toast } from "react-toastify"; import gsap from 'gsap'; import { useGSAP } from '@gsap/react'; @@ -93,14 +93,27 @@ const Signup = () => { console.log(error); } }; + // const [role, setRole] = useState(''); + const customStyles = { + student: { + backgroundColor: 'rgb(17 24 39)', + }, + default: { + backgroundColor: 'transparent', + }, + }; useGSAP(()=>{ const tl = gsap.timeline(); tl.from('.text-signup',{ duration: 1, opacity: 0, y: 100, - ease: 'power3.out' + delay: 0.5, + ease: 'power3.out', + stagger: { + amount: 0.5, + }, }) tl.from('.form-signup',{ duration: 1, @@ -112,9 +125,23 @@ const Signup = () => { return (
- user + {/* user */} + +
+
-

Create Account

+ {/*

Create Account

*/} +

+ Create Account +

@@ -147,7 +174,7 @@ const Signup = () => { required placeholder="Enter your username" onChange={handleOnChange} - className="w-full px-2 py-1 sm:py-3 rounded-md outline-none border border-gray-300" + className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-blue-400 dark:border-blue-300 bg-transparent border-1.5" />
@@ -169,7 +196,7 @@ const Signup = () => { required placeholder="Enter your password" onChange={handleOnChange} - className="mt-2 w-full px-2 py-1 sm:py-3 rounded-md outline-none border border-gray-300" + className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-blue-400 dark:border-blue-300 bg-transparent border-1.5" />
{
@@ -196,31 +223,37 @@ const Signup = () => { name="role" value={role} onChange={(e) => setRole(e.target.value)} - className="w-full px-2 py-1 sm:py-3 rounded-md outline-none border border-gray-300" + className="w-full px-2 py-2 sm:py-2 md:py-3 rounded-md outline-none border border-blue-400 dark:border-blue-300 bg-transparent border-1.5" + style={{ color: 'white', backgroundColor: 'transparent' }} > - - + + +
+
+ {/*
*/} -

- Already have an account?{" "} - - Login - -

+
+
+

+ Already have an account?{" "} + + Login + +

+
-
+
); }; diff --git a/client/src/Components/Navbar.jsx b/client/src/Components/Navbar.jsx index d7a7e5b..e2d5518 100644 --- a/client/src/Components/Navbar.jsx +++ b/client/src/Components/Navbar.jsx @@ -1,14 +1,12 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useState, useContext } from "react"; import { Link, useLocation } from "react-router-dom"; import Cookies from "universal-cookie"; import { Modal, Button } from "flowbite-react"; import { HiOutlineExclamationCircle } from "react-icons/hi"; import axios from "axios"; -import { useContext } from "react"; -import { AuthContext } from "./Auth/AuthContext"; -import { useRef } from "react"; import gsap from "gsap"; import { useGSAP } from "@gsap/react"; +import { AuthContext } from "./Auth/AuthContext"; export default function Navbar() { const cookies = new Cookies(); @@ -61,6 +59,8 @@ export default function Navbar() { }); }); + const isActiveLink = (path) => location.pathname === path ? "text-blue-700" : ""; + return (