Skip to content

Commit

Permalink
darkMode removed ui changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@krcpr007
krcpr007 committed Dec 23, 2022
1 parent b71a14b commit c526c3b
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 23 deletions.
22 changes: 10 additions & 12 deletions src/Components/Auth/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { onAuthStateChanged } from 'firebase/auth'
import { auth } from '../../Firebase'
function Login() {
const navigate = useNavigate();
const { googleSignIn, githubSignIn, handleLogin, email, setEmail, password, setPassword, darkMode } = useContext(ContextProvider);
const { googleSignIn, githubSignIn, handleLogin, email, setEmail, password, setPassword } = useContext(ContextProvider);
const [showPass, setShowPass] = useState(false);
const showPassword = () => {
showPass ? setShowPass(false) : setShowPass(true);
Expand All @@ -28,35 +28,33 @@ function Login() {
<>
<div className={`flex h-screen bg-center `} style={{ backgroundImage: `url('cartoon_mainbuilding.jpg')` }}>
<div className="m-auto">
<div className={`shadow-2xl rounded px-6 pt-6 pb-8 mb-4 backdrop-blur backdrop-brightness-75 ${darkMode ? 'bg-slate-900 text-white' : null} `}>
<div className={`shadow-2xl rounded px-6 pt-6 pb-8 mb-4 backdrop-blur backdrop-brightness-75 dark:text-white`}>
<div className="mb-2 text-center">
<h1 className="text-4xl font-medium">Sign in</h1>
<h1 className="text-4xl font-medium text-yellow-500">Sign in</h1>
<span className="text-sm">Stay updated on your Nit Patna world</span>
</div>
<div>
<form action="" className="">

<div className="relative z-0 mb-6 w-full group">
<input type="email" name="floating_email" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-700 dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " id="email"
<input type="email" name="floating_email" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-300 dark:border-yellow-600 dark:focus:border-yellow-500 focus:outline-none focus:ring-0 focus:border-yellow-600 peer" placeholder=" " id="email"
value={email}
onChange={e => setEmail(e.target.value)}
autoComplete="on"
required />
<label htmlFor="floating_email" className="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">College email address</label>
<label htmlFor="floating_email" className="absolute text-sm text-yellow-500 dark:text-yellow-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">College email</label>
</div>
<div className="relative z-0 mb-6 w-full group">
<input type={`${showPass ? 'text' : 'password'}`} name="floating_password" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-700 dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " value={password}
<input type={`${showPass ? 'text' : 'password'}`} name="floating_password" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-300 dark:border-yellow-600 dark:focus:border-yellow-500 focus:outline-none focus:ring-0 focus:border-yellow-600 peer" placeholder=" " value={password}
onChange={e => setPassword(e.target.value)}
id="password"
autoComplete="on"
required />{showPass ? (<AiFillEye onClick={showPassword} className="text-lg relative -top-7 left-60 md:left-72 cursor-pointer" />) : (<AiFillEyeInvisible onClick={showPassword} className="text-lg relative -top-7 left-60 md:left-72 cursor-pointer" />)}
<label htmlFor="floating_password" className="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Password</label>
<label htmlFor="floating_password" className="absolute text-sm text-yellow-500 dark:text-yellow-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Password</label>
</div>
<label className="block text-blue-500 text-sm">
<Link to="/forgot" className="hover:underline">
Forgot password?
</Link>
<Link className="relative left-24 md:left-36 hover:underline" to="/signup">New here</Link>
<label className="flex justify-between text-yellow-500 text-sm">
<Link to="/forgot" className="hover:underline">Forgot password?</Link>
<Link className="hover:underline" to="/signup">New here</Link>
</label>
<div className="py-2 ">
<button className="bg-yellow-300 shadow-2xl w-full rounded-lg font-medium hover:bg-yellow-400 p-2" type="submit" onClick={handleLogin}>
Expand Down
24 changes: 13 additions & 11 deletions src/Components/Auth/Signup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { SiGithub } from 'react-icons/si'
import { AiFillEyeInvisible } from 'react-icons/ai'
import { onAuthStateChanged } from 'firebase/auth';
import { auth } from '../../Firebase'
import bgImg from '../../assets/bgLogin.png'
import ContextProvider from "../../context/ContextProvider";
const Signup = () => {
const navigate = useNavigate();
Expand All @@ -20,42 +21,43 @@ const Signup = () => {
})
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const { googleSignIn, githubSignIn, email, setEmail, password, setPassword, darkMode, handleSignUp } = useContext(ContextProvider);
const { googleSignIn, githubSignIn, email, setEmail, password, setPassword, handleSignUp } = useContext(ContextProvider);
const [showPass, setShowPass] = useState(false);
const showPassword = () => {
showPass ? setShowPass(false) : setShowPass(true);
}
return (
<>
<div className={`flex h-screen bg-center bg-contain ${darkMode ? 'bg-slate-900' : "bg-white"}`} >
<div className={`flex h-screen bg-center bg-contain`} style={{ backgroundImage: `url(${bgImg})` }} >
<div className="m-auto">
<div className={` shadow-2xl px-6 pt-6 pb-8 mb-4 ${darkMode ? 'bg-slate-900 text-white' : "bg-white text-gray-600"}`}>
<div className={` shadow-2xl px-6 pt-6 pb-8 mb-4 dark:text-white bg-white text-gray-600`}>
<div className="mb-2 text-center">
<div className="place-self-center text-2xl">
<div className="place-self-center text-2xl hover:text-black">
<span className='text-yellow-500 px-2 mx-0.5'>Students</span><span className='bg-yellow-400 rounded px-2 py-1.5'>Hub</span>
</div>
<p className="place-self-center">Welcome to community of NIT Patna</p>
<p className="place-self-center">Welcome to the NIT Patna</p>
</div>
<div>
<form action="" className="">

<div className="relative z-0 mb-6 w-full group">
<input type="email" name="floating_email" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-700 dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " id="email"
<input type="email" name="floating_email" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-300 dark:border-yellow-600 dark:focus:border-yellow-500 focus:outline-none focus:ring-0 focus:border-yellow-600 peer" placeholder=" " id="email"
value={email}
onChange={e => setEmail(e.target.value)}
autoComplete="on"
required />
<label htmlFor="floating_email" className="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">College email address</label>
<label htmlFor="floating_email" className="absolute text-sm text-yellow-500 dark:text-yellow-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">College email</label>
</div>
<div className="relative z-0 mb-6 w-full group">
<input type={`${showPass ? 'text' : 'password'}`} name="floating_password" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-700 dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " value={password}
<input type={`${showPass ? 'text' : 'password'}`} name="floating_password" className="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-gray-300 dark:border-yellow-600 dark:focus:border-yellow-500 focus:outline-none focus:ring-0 focus:border-yellow-600 peer" placeholder=" " value={password}
onChange={e => setPassword(e.target.value)}
id="password"
autoComplete="on"
required />{showPass ? (<AiFillEye onClick={showPassword} className="text-lg relative -top-7 left-60 md:left-72 cursor-pointer" />) : (<AiFillEyeInvisible onClick={showPassword} className="text-lg relative -top-7 left-60 md:left-72 cursor-pointer" />)}
<label htmlFor="floating_password" className="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Password</label>
<label htmlFor="floating_password" className="absolute text-sm text-yellow-500 dark:text-yellow-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-yellow-600 peer-focus:dark:text-yellow-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Password</label>
</div>
<div className='text-yellow-600 text-xs flex justify-between'>
<span>Already have account?</span> <Link to="/login" className='hover:underline'>Login</Link>
</div>
<a href="!">Already have account?</a> <Link to="/login">Login</Link> <br />
<div className="py-2 ">
<button type='submit' className="bg-yellow-300 shadow-2xl w-full rounded-lg font-medium hover:bg-yellow-400 p-2" onClick={handleSignUp}>
<span>Sign Up</span>
Expand Down
Binary file added src/assets/bgLogin.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit c526c3b

@vercel
Copy link

@vercel vercel bot commented on c526c3b Dec 23, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

studenthubnitp – ./

studenthubnitp-krcpr007.vercel.app
studenthubnitp-git-main-krcpr007.vercel.app
studenthubnitp.vercel.app

Please sign in to comment.