Edited accordingly for light theme

Avdhesh-Varshney · Oct 25, 2024 · 3d39e5e · 3d39e5e
1 parent c9a3e6d
commit 3d39e5e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/css/Auth.css b/src/css/Auth.css
@@ -2,12 +2,12 @@
   width: auto;
   max-width: 500px;
   border-radius: 0.75rem;
-  background-color: rgba(17, 24, 39, 1);
   padding: 2rem;
   color: rgba(243, 244, 246, 1);
   margin: auto;
 }
 
+
 .title {
   text-align: center;
   font-size: 1.5rem;

diff --git a/src/pages/auth/Login.jsx b/src/pages/auth/Login.jsx
@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState ,useContext} from 'react';
 import axios from 'axios';
 import '../../css/Auth.css';
 import { FaGithub, FaGoogle, FaXTwitter, FaEye, FaEyeSlash } from 'react-icons/fa6';
+import { Context } from "../../context/Context";
 
 const URL = `${import.meta.env.VITE_BACKEND_URL}/api/auth/login`;
 
@@ -11,6 +12,7 @@ const Login = () => {
 	const [passwordVisible, setPasswordVisible] = useState(false);
 	const [error, setError] = useState('');
 	const [success, setSuccess] = useState('');
+  const { isDarkMode } = useContext(Context);
 
 	const togglePasswordVisibility = () => {
 		setPasswordVisible(!passwordVisible);
@@ -31,22 +33,22 @@ const Login = () => {
 	};
 
 	return (
-		<div className="form-container mb-4">
+		<div className="form-container mb-4" style={{ backgroundColor: isDarkMode ? "#111827" : "#A2CA71" }}>
 			<p className="title">Login</p>
 
 			<form className="form" onSubmit={handleSubmit}>
 				{error && <p className="error">{error}</p>}
 				{success && <p className="success">{success}</p>}
 				<div className="input-group">
-					<label htmlFor="email">Email</label>
-					<input type="email" name="email" id="email" placeholder="Enter you email" autoComplete='off'
+					<label htmlFor="email" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Email</label>
+					<input type="email" name="email" id="email" placeholder="Enter you email" autoComplete='off' style={{ backgroundColor: isDarkMode ? "#111827" : "#F6FCDF" , color: isDarkMode ? "#F3F4F6" : "#111827" ,borderColor:isDarkMode?"":""}}
 						value={email} onChange={(e) => setEmail(e.target.value)} required />
 				</div>
 
 				<div className="input-group">
-					<label htmlFor="password">Password</label>
+					<label htmlFor="password" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Password</label>
 					<div className="password-container">
-						<input type={passwordVisible ? "text" : "password"} name="password" id="password" placeholder="Enter you password"
+						<input type={passwordVisible ? "text" : "password"} name="password" id="password" placeholder="Enter you password" style={{ backgroundColor: isDarkMode ? "#111827" : "#F6FCDF" }}
 							value={password} onChange={(e) => setPassword(e.target.value)} required />
 						<button
 							type="button"
@@ -62,12 +64,12 @@ const Login = () => {
 					</div>
 				</div>
 
-				<button type="submit" className="sign">Sign in</button>
+				<button type="submit" className="sign" style={{ backgroundColor: isDarkMode ? "#A78BFA" : "#F6E96B" }}>Sign in</button>
 			</form>
 
 			<div className="social-message">
 				<div className="line"></div>
-				<p className="message">Login with social accounts</p>
+				<p className="message" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Login with social accounts</p>
 				<div className="line"></div>
 			</div>
 
@@ -77,7 +79,7 @@ const Login = () => {
 				<button aria-label="Log in with GitHub" className="icon"><FaGithub /></button>
 			</div>
 
-			<p className="signup">Don't have an account?
+			<p className="signup" style={{ color: isDarkMode ? "#9ca3af" : "#185519" }}>Don't have an account?
 				<a rel="noopener noreferrer" href="/auth/signup"> Sign up</a>
 			</p>
 		</div>